Social Preview Example: Multi-Platform Sharing Preview

Every panel above is rendering from the same Open Graph tags. The differences are entirely in the renderers — each platform applies its own minimums, its own crop and its own truncation, and none of them tells you it did.

The X row is the one that catches people. The card type is not a property of your image — it is set by the twitter:card tag. Ship summary and you get a small square crop taken from the middle of your carefully composed 1.91:1 banner, with the left and right thirds discarded. The image is fine. The card type is wrong.

Two green ticks are not reassurance. The panels tell you how the card renders on four platforms — not whether the share is worth clicking on any of them, and not whether the scrapers can reach your page at all when a real user posts the link. Read them as a rendering check, not a verdict.

1200 × 630 is the right file to produce. What each platform then does with it decides whether the image works or becomes a headless torso.

The rule that survives every platform: centre-weight the image. Assume a square crop taken from the middle. Put the subject and any text inside that central square, and treat the left and right thirds as decoration that will sometimes be discarded. A logo tucked into a bottom corner is the most common casualty, and it is the element people are most confident is safe.

• Text on the image is a trap. Platforms recompress heavily and downscale aggressively for mobile feeds. Text that is crisp in your design tool becomes a grey smear at thumbnail size — and an unreadable caption is worse than none, because it occupies the space a legible image could have used. If you use text: a handful of very large words, high contrast, dead centre.
• Dark mode. A large share of feeds are dark. A logo on a transparent background, or a white background bleeding into a white card, looks broken for those users and perfect for you. Give the image a solid background and check it against black.
• Look at it on a phone. Almost every share is opened on one. A card that reads well on a monitor is frequently a smudge in a feed.

The LinkedIn panel is flagged as truncated, and it is the general case rather than the exception. Every platform cuts the description, at different points, and none of them warns you.

Two rules make this a non-problem:

1. Front-load the meaning. Descriptions cut from the right, so the first clause has to stand alone. "Industry-leading noise cancelling. 30-hour battery. £279 with free delivery." survives any cut with something useful left. "With over three decades of engineering heritage behind it, this remarkable product…" loses everything that mattered.
2. Never put the price or the call to action last. On this example the price is the first thing a buyer wants and the first thing LinkedIn removed.

The same logic governs the title: it cuts from the right, so put the distinguishing words on the left and the brand at the end.

And a note on og:description generally — it is not the meta description and it is not doing the same job. Google frequently rewrites your meta description; a social platform will use your og:description exactly as written. This is one of the few pieces of copy on your site that appears verbatim, unedited, in someone else's feed. It deserves more care than it usually gets.

The instinct is to test by posting the link and looking at it. Do not. The platform caches whatever it scraped on that first attempt, so a broken preview posted once is a broken preview cached — and the post is now public and wrong.

The order that saves an afternoon

1. curl the page. Are the tags in the raw HTML? Did you get a 200, or a bot-protection challenge? If the tags are absent here, stop — everything below is wasted. Check the attribute too: og: tags need property=, not name=.
2. Fetch the og:image URL directly, in a private window. Does it load anonymously, over HTTPS, with no referrer and no cookies? This catches hotlink protection, stale CDN paths and images left behind basic auth.
3. Run the platform debuggers. Facebook's Sharing Debugger is the best diagnostic even for other platforms, because it prints exactly which tags it found. LinkedIn caches unusually hard and needs its Post Inspector to clear.
4. Only now, share it.

These are the causes that produce a bare link on a page that looks perfect in your browser — and they are invisible to a preview tool that is reading your tags rather than impersonating a scraper.

• Bot protection is blocking the scraper. Cloudflare's bot-fighting modes, a WAF rule or a rate limiter will happily serve facebookexternalhit or LinkedInBot a challenge page or a 403. The scraper finds no Open Graph tags in an interstitial and renders a bare link. You cannot reproduce this in a browser, and it is now one of the most common causes of a broken preview — almost never diagnosed, because nobody suspects their own security.
• The tags are injected by JavaScript. Most social scrapers never execute it; they parse the served HTML. A framework that adds the tags after hydration produces a document that, to a scraper, has none. Server-render them.
• The tags sit too deep in the <head>. Some scrapers read only the first portion of your HTML and stop. The signature is a preview that works on Facebook and fails on WhatsApp or iMessage. Put the Open Graph block immediately after <meta charset>.
• The image is WebP or AVIF. Support across scrapers is uneven, and the bandwidth saving is not worth a blank card. Use JPEG or PNG for the social image specifically.
• The image is behind hotlink protection. A rule requiring a matching referrer blocks every scraper, since none of them send one.

The single test that separates all of these: curl your own URL and read what comes back. That is the document the scraper receives. Everything else is inference.

Why does my link look different on different platforms?

Each platform reads Open Graph tags differently. Facebook and LinkedIn use og:title, og:description and og:image. X uses twitter:title and twitter:image if present, falling back to og: tags. WhatsApp uses og: tags only. Each platform also has different image aspect ratio preferences and character limits for title/description truncation.

Why is my og:image not showing on Facebook?

Common reasons: the image URL is not publicly accessible, the image is smaller than 200x200px (minimum for Facebook), the server returns incorrect content-type headers, or Facebook's cache is showing an old version. Use the Facebook Sharing Debugger to scrape fresh data and clear the cache.

How do I update my social preview after changing OG tags?

Facebook and LinkedIn cache social previews aggressively. Use the Facebook Sharing Debugger (developers.facebook.com/tools/debug) to force a fresh scrape. For LinkedIn, use the Post Inspector (linkedin.com/post-inspector). Twitter/X typically refreshes within 24 hours automatically.

Why does X show a small square image instead of my banner?

Because twitter:card is set to summary rather than summary_large_image. The card type is not a property of your image — it is set by that tag. With summary, X takes a square crop from the middle of your 1.91:1 banner and discards the left and right thirds. The image is fine; the card type is wrong. This is also why you should centre-weight every social image: assume a square crop from the middle and treat the outer thirds as expendable.

My tags are correct but the preview is still blank. What now?

Curl your own URL and read what comes back — that is the document the scraper receives, and everything else is inference. Two causes dominate. Bot protection (Cloudflare's bot-fighting modes, a WAF rule, a rate limiter) may be serving the scraper a challenge page or a 403 containing no Open Graph tags, while your browser sees the real page. Or the tags are injected by JavaScript, which most scrapers never execute. Also check the attribute: og: tags require property=, not name=.

I replaced the image but the old one still appears. Why?

Two caches are holding it, and clearing one does not clear the other: your CDN is serving the old file at that URL, and the platform has cached its own copy of what it scraped. Publish the new image under a new filename — og-image-v2.png rather than overwriting og-image.png — and you sidestep both at once. Also declare og:image:width and og:image:height, so a platform seeing the URL for the first time can reserve the space before it has fetched the file.

How much care does og:description deserve?

More than it usually gets. Unlike a meta description, which Google rewrites most of the time, a social platform uses your og:description exactly as written — it is one of the few pieces of copy on your site that appears verbatim and unedited in someone else's feed. Every platform truncates it at a different point and none of them warns you, so front-load the meaning and never put the price or the call to action last. The title cuts from the right too: distinguishing words on the left, brand at the end.