Meta Tags for Social Media Previews — WhatsApp, Discord & Telegram

When someone pastes your URL into a WhatsApp conversation, a Discord channel, or a Telegram chat, those apps pull your page's meta tags to build a link preview. The good news: one set of Open Graph meta tags controls all of them. The bad news: most sites have missing or broken tags that result in blank previews, no images, or wrong descriptions.

This guide covers exactly what each platform reads, what the differences are between them, and how to write the tags that work across every major chat and social platform at once.

How Link Previews Work Across Chat Platforms

When you paste a link in WhatsApp, Discord, or Telegram, the app's backend server fetches that URL and reads the HTML head section — specifically the Open Graph meta tags. It then renders a preview card: title, description, image, and domain name.

This happens on the server side, meaning JavaScript is not executed. Whatever is in the static HTML response is what gets shown. For React or Next.js apps, this is why server-side rendering matters even for social platforms that aren't traditional search engines.

Platforms don't update previews indefinitely. They cache them, sometimes for hours or days. If you update your meta tags, the preview won't change immediately for already-shared links — though new shares will show the updated version.

The Open Graph protocol, originally created by Facebook, is the shared language all these platforms speak. The same tags that control Facebook shares — og:title, og:description, og:image, og:url — work identically on WhatsApp, Discord, Telegram, LinkedIn, Slack, and most other platforms.

WhatsApp Link Previews — What Gets Displayed

WhatsApp shows a compact link preview with a small thumbnail image, title, and one line of description. It reads OG tags directly and does not support Twitter Card tags.

What WhatsApp shows:

• Image: Pulled from og:image. WhatsApp shows a thumbnail — larger images work fine but get cropped to a square in some views. Minimum recommended: 300x300px square or 600x315px for non-square.
• Title: From og:title. WhatsApp shows the first 40–80 characters depending on the screen width.
• Description: From og:description. Shows the first 1–2 lines (approximately 100–140 characters).
• Domain: Pulled from og:url or the actual URL — always shown as the domain (yoursite.com).

WhatsApp refreshes its link preview cache when a new conversation is started. Existing conversations may show the old preview indefinitely. There is no way to force a cache refresh for WhatsApp.

Common WhatsApp issues: image not showing (usually HTTP instead of HTTPS image URL), blank preview (OG tags missing or JavaScript-rendered), wrong title (og:title missing, falls back to page title which may be generic).

Sell Custom Apparel — We Handle Printing & Free Shipping

Discord Link Embeds — OG Tags and Discord-Specific Behavior

Discord reads Open Graph tags and renders them as embedded cards inside chat. It supports og:title, og:description, og:image, og:url, and also reads the HTML title and description as fallbacks.

Discord-specific behaviors to know:

• og:image dimensions matter: Discord shows images inline if they're wide-format (wider than tall). Square or portrait images appear as smaller thumbnails. Use 1200x630 for best results.
• Color accents: Discord reads the meta tag <meta name="theme-color" content="#hexcolor"> and uses it for the left border accent on the embed. Add this to match your brand color.
• og:site_name: Shown as a small header above the title in Discord embeds. Add it with your brand name.
• Videos: Discord can embed videos if og:video is set with a direct video URL. This works for self-hosted MP4 files or direct video URLs from compatible CDNs.
• Cache: Discord caches embeds per-message. Updated tags won't change existing messages. New pastes will show updated previews.

Discord does NOT follow Twitter Card tags — use only OG tags for Discord embeds. Use the Discord meta tags guide for the full implementation.

Telegram Link Previews — Setup and Troubleshooting

Telegram shows rich link previews for web pages shared in chats. It reads OG tags first, then falls back to HTML title and description.

Telegram preview behavior:

• Images: Telegram shows og:image as a large image preview when available. Minimum: 200x200px. The image must be publicly accessible — URLs with authentication or IP restrictions won't load.
• Title: Uses og:title, then falls back to the HTML title tag.
• Description: Uses og:description, then falls back to the first meaningful paragraph of page text.
• Instant View: For certain types of content (articles, blog posts), Telegram offers "Instant View" — a fast-rendered version of the page inside the app. Instant View templates are separate from meta tags and require configuration at instantview.telegram.org.

Telegram refreshes previews each time a new message is sent with a URL. Unlike WhatsApp, you can see an updated preview by deleting and re-sending the message (in private chats). In channels, there's no cache refresh mechanism.

One Set of OG Tags That Works Everywhere

You don't need platform-specific meta tags for WhatsApp, Discord, Telegram, Slack, or iMessage. The standard Open Graph tags cover all of them. Here's the complete set:

<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="2-3 sentence description." />
<meta property="og:image" content="https://yoursite.com/og-image.jpg" />
<meta property="og:url" content="https://yoursite.com/page/" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Your Brand" />
<meta name="theme-color" content="#your-brand-color" />

Generate this code in seconds using the Meta Tag Generator. Fill in your page title, description, image URL, and canonical URL — the generator outputs properly formatted HTML ready to paste into any page.

After adding the tags, test them using the Open Graph Checker: paste your HTML source and see the Facebook and Twitter preview cards. If those look right, WhatsApp, Discord, and Telegram will look right too — they all use the same OG tags.

Frequently Asked Questions

Why does my link look wrong in WhatsApp but fine on Facebook?

Most likely a caching issue or an image size problem. WhatsApp is stricter about image dimensions and HTTPS requirements than Facebook. Check that your og:image URL uses HTTPS and is at least 300x200px. Also try sharing the link in a new WhatsApp chat — existing conversations may show a cached (old) version of the preview.

Does Discord support Twitter Card tags?

No. Discord only reads Open Graph meta tags. Twitter Card tags (twitter:card, twitter:title, etc.) are specific to X/Twitter and have no effect on Discord embeds. Set your og:title, og:description, and og:image tags — Discord will read these.

Can I control the Telegram Instant View layout with meta tags?

No. Telegram Instant View templates are a separate system from meta tags. Meta tags control the standard link preview card (title, description, image). Instant View requires creating an article template at instantview.telegram.org and matching your page structure. The two systems are independent.