You send a link in WhatsApp and it generates a preview card below your message — a thumbnail image, a title, and a description. When it works, the preview makes your link far more likely to get clicked. When it doesn't, you get a plain URL that most recipients will ignore. WhatsApp's preview system has specific requirements that differ from other platforms. This guide explains exactly what WhatsApp reads, what makes previews fail, and how to get them right.

How WhatsApp Generates Link Previews

When a user sends a URL in WhatsApp, the app fetches the target page and extracts Open Graph meta tags from the server-rendered HTML. WhatsApp's crawler — part of the WhatsApp client itself, often triggered on the sender's device before the message is sent — parses the page and renders a preview card inline below the message.

Like most social crawlers, WhatsApp does not execute JavaScript. Open Graph tags must be present in the static HTML returned by your server. Tags injected by client-side rendering frameworks (React, Vue, Angular) without server-side rendering will not be picked up.

WhatsApp caches link previews per device, not globally. This means different users may see different previews for the same URL if they shared it at different times. Cache duration varies, but previews typically persist for several hours.

Which Meta Tags WhatsApp Reads

WhatsApp reads standard Open Graph (og:) tags. It does not have its own proprietary tag namespace. The tags that control your WhatsApp link preview are:

—og:title — the bold headline shown in the preview card (required)
—og:description — the supporting text below the title (recommended)
—og:image — the thumbnail image displayed in the card (recommended)
—og:url — the canonical URL; WhatsApp may display this as the domain label
—og:site_name — shown as a label above the title in some WhatsApp versions
—og:type — read by WhatsApp but has minimal effect on rendering; use "website" or "article"

The Minimum Tag Set for WhatsApp

<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A concise 1–2 sentence description." />
<meta property="og:image" content="https://example.com/og-image.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:url" content="https://example.com/your-page" />
<meta property="og:site_name" content="Your Brand Name" />

These seven tags cover everything WhatsApp needs to render a rich preview card. Missing og:title or og:image is the most common reason previews appear blank or text-only.

WhatsApp Image Requirements

Image handling is where WhatsApp differs most from desktop social platforms. There are two distinct preview layouts depending on the image aspect ratio:

—Landscape (1.91:1): Use 1200×630px — WhatsApp renders this as a wide banner image above the title and description. This is the standard OG image format and works well.
—Square (1:1): Use 400×400px or larger — WhatsApp renders square images as a small thumbnail on the left side of the text. Use this for app icons and product thumbnails.
—Minimum size: Approximately 300×200px. Below this, WhatsApp may drop the image entirely.
—Maximum file size: Keep images under 300KB for reliable loading on mobile connections.
—Format: JPEG and PNG are universally supported. WebP and GIF are supported in recent versions.
—URL must be HTTPS — HTTP image URLs are blocked on WhatsApp.
—Image must be publicly accessible — images behind authentication or private CDNs will not load.

TipWhatsApp is primarily a mobile app. Use images that look sharp on small screens. A 1200×630px image will be scaled down significantly — make sure text and key elements are large enough to remain readable at thumbnail size.

What a WhatsApp Link Preview Looks Like

WhatsApp renders link previews as a card attached below the message text. The layout depends on the image aspect ratio:

1.Landscape image layout: Image displayed as a wide banner at the top; site name (og:site_name or domain) below in small caps; title (og:title) in bold; description (og:description) truncated to ~100 characters.
2.Square image layout: Image shown as a small left-aligned thumbnail; title and description appear to the right of the image; site name below.
3.No image: Text-only preview showing site name, title, and description.

The preview is interactive — tapping it opens the URL in WhatsApp's in-app browser. The entire card is tappable, not just the title.

Why WhatsApp Link Previews Fail

WhatsApp gives users no feedback when a preview fails. The link is sent as plain text with no card. Common causes:

1.OG tags rendered by JavaScript — WhatsApp does not execute client-side JavaScript. Tags must be in the initial server-rendered HTML.
2.HTTP page URL — WhatsApp does not generate previews for HTTP URLs. The page itself must be HTTPS.
3.HTTP og:image — even if the page is HTTPS, an HTTP image URL will be blocked.
4.Server blocking WhatsApp crawlers — some WAFs and bot protection systems block unusual user-agents. WhatsApp uses various IP ranges and user-agent strings; overly aggressive blocking can prevent previews.
5.Very slow server response — WhatsApp times out quickly on mobile networks. Pages that take more than 2–3 seconds to return HTML will be skipped.
6.Image too small or too large — images below the minimum size or over the file size limit are dropped silently.
7.Private or auth-gated content — WhatsApp cannot preview pages that require a login or are behind a VPN.
8.Cached failed preview — WhatsApp may have cached an earlier fetch that failed. Changing the URL (e.g., adding a query parameter) forces a fresh fetch.

WhatsApp Business Link Previews

WhatsApp Business and the WhatsApp Business API (Cloud API) follow the same OG tag reading rules as personal WhatsApp. There is no special configuration needed for previews in business messages. However:

—Template messages sent via the Business API do not automatically generate link previews. Previews are only generated in conversation-style messages.
—WhatsApp Business API supports explicit link preview control — when sending messages via the API, you can set preview_url: true on the text message object to force a preview attempt.
—Rich link previews in WhatsApp Business Catalogs (product cards) are a separate feature from OG-based URL previews and are configured through the Commerce Manager, not meta tags.

Implementing WhatsApp-Ready OG Tags in Next.js

The Next.js Metadata API with server-side rendering generates correctly structured OG tags for WhatsApp. Use the openGraph field in your metadata export:

// app/blog/[slug]/page.tsx
import type { Metadata } from 'next'

export async function generateMetadata(
  { params }: { params: Promise<{ slug: string }> }
): Promise<Metadata> {
  const { slug } = await params
  const post = await getPost(slug)

  return {
    title: post.title,
    description: post.description,
    openGraph: {
      title: post.title,
      description: post.description,
      url: `https://example.com/blog/${slug}`,
      siteName: 'Your Brand Name',
      images: [
        {
          url: `https://example.com/og/${slug}.jpg`,
          width: 1200,
          height: 630,
          alt: post.title,
        },
      ],
      type: 'article',
    },
  }
}

Next.js renders all openGraph fields as <meta property="og:..."> tags in the <head> of the server-rendered HTML. Because this is SSR/SSG output, WhatsApp will find the tags immediately without needing to execute JavaScript.

Generating Dynamic OG Images for WhatsApp

WhatsApp displays your og:image prominently. A custom image for each page — showing the title, brand name, and relevant visuals — performs much better than a generic site-wide image. Next.js App Router supports dynamic OG image generation via the opengraph-image.tsx convention:

// app/blog/[slug]/opengraph-image.tsx
import { ImageResponse } from 'next/og'

export const runtime = 'edge'
export const size = { width: 1200, height: 630 }
export const contentType = 'image/png'

export default async function OGImage({
  params,
}: {
  params: { slug: string }
}) {
  const post = await getPost(params.slug)

  return new ImageResponse(
    (
      <div
        style={{
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'flex-end',
          padding: 60,
          width: '100%',
          height: '100%',
          background: 'linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)',
        }}
      >
        <div style={{ fontSize: 56, fontWeight: 700, color: '#fff' }}>
          {post.title}
        </div>
        <div style={{ fontSize: 28, color: '#aaa', marginTop: 16 }}>
          Your Brand Name
        </div>
      </div>
    ),
    { width: 1200, height: 630 }
  )
}

This generates a 1200×630px image at build time (for static pages) or on-demand (for dynamic pages). The image URL is automatically wired into the og:image meta tag by Next.js.

How to Test WhatsApp Link Previews

Testing WhatsApp previews is more difficult than Twitter or Facebook, which provide official debugger tools. Your options are:

—Share in a personal test chat — send the URL to yourself (WhatsApp on Web → send to your own number) and observe the preview generated on your device.
—curl with WhatsApp-like user-agent — WhatsApp uses different user-agent strings across versions. Fetching with curl -s -A "WhatsApp/2.23.20.0" can approximate what the app sees, but is not definitive.
—Check your page HTML directly — the most reliable test is to verify your OG tags are present in the raw server HTML using curl without JavaScript. If the tags are there in the HTML, WhatsApp will find them.
—OGProof — simulates how crawlers including WhatsApp-style bots fetch your page, parses the OG tags from server-rendered HTML, and previews the link card. It validates image dimensions, HTTPS compliance, and missing required tags.

TipThe fastest way to confirm your page is WhatsApp-ready: run it through OGProof. It emulates the server-side fetch (no JavaScript execution), extracts all OG tags, validates image accessibility, and renders a preview of how the card will appear.

Clearing WhatsApp Preview Cache

WhatsApp caches link previews per device. There is no global cache to purge. If you've updated your OG tags and the old preview still appears:

—Add a query parameter to the URL (e.g., ?v=2) — this creates a new cache key and forces WhatsApp to re-fetch the page.
—Wait for the cache to expire — typically a few hours, though this varies by version.
—Re-send from a different device — devices that have not previously fetched the URL will generate a fresh preview.
—Clear WhatsApp cache on the sending device (Android: Settings → Storage → Clear Cache) — forces a re-fetch of all cached link data.

WhatsApp OG Tag Checklist

—og:title — present and concise (under 65 characters for full display without truncation)
—og:description — present, under 100 characters for mobile preview display
—og:image — absolute HTTPS URL, 1200×630px landscape or 400×400px square
—og:image:width and og:image:height — always include for correct layout selection
—og:url — canonical HTTPS URL of the page
—og:site_name — your brand name
—Page URL is HTTPS — WhatsApp does not generate previews for HTTP URLs
—OG tags present in server-rendered HTML (not injected by client-side JavaScript)
—Server responds within 2–3 seconds — slow responses cause WhatsApp to skip preview generation
—Image file under 300KB — keeps previews loading fast on mobile connections
—Validate with OGProof to confirm tags are present in server HTML and the preview card renders correctly

WhatsApp Open Graph Tags: How WhatsApp Generates Link Previews