Docuboxer
Open suite→
By Sergio Alonzo Piña··7 min read

Why your link preview looks wrong (and how to fix it)

What WhatsApp, X and LinkedIn actually read when you paste a link, why the preview breaks, and how to fix the image, title and description.

A broken link preview almost always comes down to one of four things: a relative og:image path, an image the platform refuses to use, meta tags added by JavaScript that the scraper never runs, or a cached copy from before your fix. None of them are visible from your browser, because your browser is not what reads the page — a bot is. Start by dumping what your page actually serves with the meta tag reader and generator, then see how the card renders with the Open Graph checker.

What actually happens when you paste a link

Paste a URL into WhatsApp, X, LinkedIn, Slack or Facebook and the app hands it to a scraper. That scraper makes a plain HTTP request, downloads the HTML your server returns, and reads a handful of <meta> tags out of the <head>. It does not log in, does not wait for hydration, does not scroll, and in most cases does not execute JavaScript at all. Whatever the raw response contains is the whole of what the platform knows about your page.

Those tags come from the Open Graph protocol, which Facebook published in 2010 and everyone else adopted. Four of them do the work:

  • og:title — the card headline. It does not have to match your <title>, and usually should not: a card has room for a sentence, a browser tab does not.
  • og:description — one or two lines, truncated differently by every app.
  • og:image — the single most common point of failure. Absolute https URL, always.
  • og:url — the canonical address of the content, so the same page shared with different tracking parameters is counted once.

The fallback chain nobody documents

No platform gives up when a tag is missing; it walks down a chain. Knowing the chain explains most of the weird cards you have seen:

  • Title: twitter:title (X only) → og:title → <title> → the bare domain name.
  • Description: twitter:description → og:description → <meta name="description"> → whatever body text the scraper can scrape, or nothing.
  • Image: twitter:image → og:image → some image found in the document by heuristic → no image, small card.

This is why a page with zero Open Graph tags rarely looks empty. It looks improvised: your full SEO title with the brand suffix attached, your meta description, and a random logo from the page body. Nothing is broken — the platform is just guessing, and it guesses in public.

The five failure modes, in order of frequency

1. Relative image path. /og/cover.png resolves fine in a browser because the browser knows what page it is on. The scraper gets a naked string with no base URL. Use the full https://yourdomain.com/og/cover.png. This one fault accounts for a startling share of "my preview has no image" reports.

2. An image the platform will not use. Ship 1200 × 630 PNG or JPG. Modern formats are the trap here: AVIF and WebP render perfectly in browsers but are not reliably handled by every scraper, and SVG is rejected outright. File weight matters too — WhatsApp in particular is quick to drop a heavy image and show a text-only card, so keep the file comfortably small.

3. Scraper cache.You fixed the tag, deployed, reloaded your own page and the preview still shows last month's image. The platform is showing you a stored copy that can persist for days. Nothing you change in HTML clears it; you have to ask for a re-scrape.

4. Tags injected on the client. Single-page apps that set meta tags from a component after mount produce a perfect <head> in DevTools and an empty one in the served HTML. View source rather than inspecting the DOM — if the tags are not in the raw response, server-side rendering or static generation is the fix.

5. The bot cannot reach the page. Login walls, a robots.txtrule that blocks Facebook's agent, a WAF returning 403 to anything that looks automated, or a redirect chain that loses the scraper. If the HTML never arrives, no tag can save the card.

Debug it in the right order

Check your own HTML first. Paste your <head> into the Open Graph checker and read what is actually there. A good half of all cases end here: the relative path shows up, or you find two competing og:image tags because a theme and a plugin each added one.

Once the tags are right, go to the official debuggers. Facebook's Sharing Debugger shows exactly what its scraper saw and has a re-scrape button; it governs Instagram previews too. LinkedIn's Post Inspectordoes the same job and is the only practical way to bust LinkedIn's cache. X retired its public card validator, so testing there means posting the link in a DM to yourself before it goes on the timeline. WhatsApp has no public tool at all: if Facebook renders it and the image is light, WhatsApp will render it.

What Open Graph will not do for you

Worth being blunt about the limits. These tags are not a ranking factor — Google composes its search result from your title tag and meta description and ignores og: entirely, so treat them as a click-through investment on shared links, not an SEO one. They also give you no control over final rendering: every app picks its own crop, its own truncation point and its own card size, and all three change between releases. And an og:image is a public file on your server, indexable and downloadable by anyone, so never put anything in it you would not publish.

The achievable goal is narrower and still worth the hour: your link looks the same everywhere, the headline matches what the page delivers, and the image reads at thumbnail size. Four correct tags and one 1200 × 630 image puts you ahead of most of what competes for the same click in the same feed.

Frequently asked questions

Why is my link preview showing the old image after I updated it?

Every platform caches whatever its scraper read the first time, and that cache outlives your deploy by hours or days. Editing the HTML does not invalidate it. Force a re-scrape from the official debugger — Sharing Debugger for Facebook, Post Inspector for LinkedIn — or publish the new image at a different URL, since a fresh path has no cached copy.

What size should an og:image be?

1200 × 630 pixels is the safe default: it is the 1.91:1 ratio Facebook, LinkedIn and X large cards are built around. Anything much narrower than about 600 pixels tends to get demoted to a small square thumbnail, which crops a wide design badly. Declare og:image:width and og:image:height too so the card can be laid out before the file finishes downloading.

Do I still need twitter: tags if I already have og: tags?

Only one of them. X falls back to og:title, og:description and og:image, so those do not need duplicating — but without twitter:card it does not know which card layout to draw and usually renders a minimal card or none at all. Setting twitter:card to summary_large_image is enough to get the wide-image card.

Why does WhatsApp show no preview at all for my link?

Usually one of three things: og:image points at a relative path instead of an absolute https URL, the image file is too heavy for the client to fetch, or the meta tags are only injected by client-side JavaScript. Preview bots fetch the raw HTML from your server and generally do not run your JavaScript, so anything rendered in the browser is invisible to them.

Do Open Graph tags help SEO?

They are not a ranking signal. Google builds its result from your title tag and meta description, not from og: tags. What they do affect is the click-through rate on every link someone shares in social apps and messaging, which is real traffic that simply does not come from organic search.

Why does the same link look different on LinkedIn and on X?

Because each platform decides its own truncation points, aspect ratio and card layout, and those change between app versions. You control the inputs — title, description, image, card type — not the rendering. Design your image so it survives a center crop and keep the title under roughly 60 characters, and the differences stop mattering.

Check your link preview now

Inspect your meta tags and see the card before you post. Runs entirely in your browser.

Open the Open Graph checker →

Related tools

You might also like: Social media image sizes and free SEO tools that respect your privacy.