Open Graph for WhatsApp: Why Previews Break and How to Fix Them

Q: Does WhatsApp use Twitter Cards?

Mostly no. Prioritize Open Graph.

Q: Can WhatsApp render previews for private/internal sites?

No. The URL and OG image must be publicly reachable.

Q: Do I need fb:app_id for WhatsApp?

No. That's mainly for Facebook tooling, not required for WhatsApp previews.

Q: How do I test without publishing a live URL?

Use a manual OG preview board to draft your og:title, og:description, and og:image first—then publish and validate.

When your link preview fails in WhatsApp—no image, wrong title, or no preview at all—it's usually not random. WhatsApp builds previews from your page's Open Graph (OG) metadata, and it's picky about how it fetches, caches, and renders that data.

This guide explains the most common Open Graph WhatsApp failures and gives you a practical checklist to fix them quickly.

How WhatsApp link previews work
The minimum Open Graph tags WhatsApp needs
Why WhatsApp previews break (most common causes)
Fix checklist (step-by-step)
Caching: why changes don't show up
Image rules: size, format, and common mistakes
Redirects and HTTPS: the silent preview killers
FAQ
Next to read

How WhatsApp link previews work

WhatsApp typically generates a preview by fetching your page HTML, reading the Open Graph tags (especially og:title, og:description, og:image), caching the result, and then rendering the preview card.

If WhatsApp can't fetch the page reliably, it may show no preview, a preview without an image, incorrect text (fallback from <title>), or an old cached preview.

The minimum Open Graph tags WhatsApp needs

Use these as your baseline:

html
<meta property="og:title" content="Your page title here" />
<meta property="og:description" content="A clear one-sentence summary here." />
<meta property="og:image" content="https://example.com/og-image.jpg" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="website" />

Key rule: og:image must be an absolute URL (with https://).

Add Twitter tags if you want broader platform coverage, but WhatsApp primarily relies on OG.

Why WhatsApp previews break (most common causes)

1) Missing or incomplete OG tags

If og:image is missing (or invalid), WhatsApp may show text-only preview or nothing.

2) og:image is not publicly accessible

Common blockers include the image requiring login, hotlink protection, IP/firewall restrictions, blocked user-agents, or images served from private buckets without public access.

3) og:image uses a relative URL

Bad:

html
<meta property="og:image" content="/images/og.jpg" />

Good:

html
<meta property="og:image" content="https://example.com/images/og.jpg" />

4) Wrong content-type or redirects on the image

If the image URL redirects multiple times or returns the wrong headers, WhatsApp may skip it.

5) Your page redirects too aggressively

WhatsApp preview fetchers often fail on multiple chained redirects, geo redirects, redirect loops, or forcing app-store pages.

6) HTTPS/TLS issues

Even small TLS misconfigurations can cause preview fetch to fail, such as an invalid certificate chain, mixed content, or blocked older TLS versions.

7) Caching (you fixed it, but WhatsApp shows the old preview)

This is one of the biggest frustrations: metadata changes don't show because WhatsApp holds an older cached snapshot.

Fix checklist (step-by-step)

Step 1: Verify OG tags exist on the final URL

Confirm the final resolved URL (after redirects) contains the OG tags in its HTML <head>.

Question: Does WhatsApp fetch the same URL users paste?
Answer: It usually fetches the final resolved URL, so you must ensure OG tags exist there.

Step 2: Ensure og:image is absolute, HTTPS, and fast

absolute URL
HTTPS
returns 200 OK
loads quickly
no auth required

Step 3: Use a proper OG image size

A safe default:

1200×630 (1.91:1)
JPG or PNG
keep file size reasonable (aim < 300–500 KB)

Step 4: Check response headers

For the OG image:

Content-Type: image/jpeg (or png)
Cache-Control not overly restrictive
avoid 403/401

Step 5: Remove bot-blocking rules

If you block unknown user-agents or datacenter IPs, WhatsApp may not fetch the page.

Step 6: Reduce redirect complexity

Prefer one clean canonical URL with at most one redirect. Avoid 3–5 redirect hops, country-based detours, or "are you human?" pages.

Caching: why changes don't show up

Question: "I updated my Open Graph tags. Why does WhatsApp still show the old preview?"
Answer: WhatsApp may cache previews. Your new metadata may not be fetched immediately.

Practical workarounds:

change the URL slightly (e.g., add a query string like ?v=2)
ensure your OG image URL changes when you update the image (cache-busting)
wait—some caches expire slowly

Best practice: version your OG image filename when updating it:

og-image-v1.jpg → og-image-v2.jpg

Image rules: size, format, and common mistakes

Common mistakes

Q: "Why is my preview image missing?"
Usually og:image is blocked (403), too slow, redirects, is not absolute, or is not a real image response.

Q: "Why does WhatsApp show a blurry preview?"
A: Low-res images scale poorly. Use 1200×630.

Redirects and HTTPS: the silent preview killers

Redirect pitfalls

Q: "My site works in browser. Why WhatsApp fails?"
A: Browsers follow complex redirects and run JS. Preview fetchers may not.

Keep it simple:

serve OG tags in server-rendered HTML
avoid client-only metadata injection

HTTPS pitfalls

Q: "Can WhatsApp preview break because of TLS?"
A: Yes. Invalid or incomplete certificate chains can cause fetch failures.

FAQ

Does WhatsApp use Twitter Cards?