OG Preview

Open Graph is a set of <meta> tags Facebook introduced in 2010 so that any URL pasted into a feed could carry a title, description, and image instead of a naked link. Every major social platform — including ones that competed bitterly with Facebook — adopted it within a few years, because the alternative was bad-looking link previews and lower engagement. Today, Open Graph is the de facto contract between content publishers and link-sharing surfaces: chat apps, search engines, embed cards, RSS readers, even AI summarisers read these tags first when they encounter a new URL.

The four required tags — and the fifth everyone needs anyway

The protocol requires exactly four properties: og:title, og:type, og:image and og:url. og:description is formally optional — the spec calls it "a one to two sentence description of your object" and lists it among the generally recommended extras — but every scraper uses it, so treat it as a fifth requirement in practice. The spec also asks that a page specifying og:image should specify og:image:alt, which almost nobody does and which is the difference between a screen-reader user getting a description and getting nothing. Where a property appears twice, the first occurrence from the top of the document wins.

X layers a parallel twitter: family on top, and its own markup reference gives an Open Graph fallback for every one of them — twitter:title falls back to og:title, twitter:description to og:description, twitter:image to og:image, twitter:image:alt to og:image:alt. The single exception is twitter:card itself, which has no equivalent; absent it, X states that a summary card may still be rendered from og:type, og:title and og:description. So in practice you add one tag, not a set: summary_large_image for the wide hero, summary for the compact square thumb.

X does publish real character limits where Google publishes none: twitter:title is capped at 70 characters, twitter:description at 200, and twitter:image:alt at 420. The image must be under 5 MB and be JPG, PNG, WEBP or GIF — SVG is not supported, and only the first frame of an animated GIF is used.

Most "broken share cards" come from one of three things: missing og:image, a cached old version on Facebook, or an image that fails to load over HTTPS.

Image dimensions that work everywhere

Aim for 1200×630, which is what Facebook recommends for high-resolution screens and what fits X's wide card without cropping. Facebook's published thresholds below that are worth knowing exactly: the minimum allowed dimension is 200×200, and 600×315 is the point at which a link post renders with the large image rather than a small thumbnail. An image under 600×315 is not refused — it simply appears small, which is the more common disappointment. Facebook accepts up to 8 MB and asks you to stay close to a 1.91:1 ratio to avoid cropping; X caps its image at 5 MB, so 5 MB is the figure that binds if you want the card to work everywhere. Use JPEG or PNG for the widest compatibility; X accepts WEBP and GIF but not SVG.

The APAC sharing landscape — five platforms, five layouts

The useful generalisation is not which app dominates which country — that moves faster than a tool page can track — but that the surfaces your links land on are not the ones you tested. Chat apps and workplace tools consume Open Graph the same way a feed does, and most of them render the compact layout: thumbnail on the left, title and description on the right, which is why a hero image with words baked into it becomes illegible. That is the layout the WhatsApp and Slack previews on this page reproduce. The one structural exception in the region is WeChat, which does not read Open Graph for in-app sharing at all and expects share metadata to be set at runtime through its own JS-SDK — so a page that must present well inside WeChat needs work this tool cannot preview.

Why your card looks fine here but broken on Facebook

Every one of these platforms caches what it scraped the first time your URL was shared, and none of them re-reads your page because you changed it. Change og:image and re-share and you will keep seeing the old image, potentially for a long time. The fix is to force a re-scrape from the platform's own tool — the Facebook Sharing Debugger is the one you will use most, and LinkedIn's Post Inspector does the same job. Cache lifetimes are not published as commitments and are not worth memorising; what matters is the habit. After any meta-tag change, re-scrape deliberately and look at the result, rather than pasting the link into your own feed and trusting what appears.

One more thing: og:url and canonicals

The og:url tag should match your canonical URL exactly. If your page is reachable at both example.com/post and example.com/post?utm_source=newsletter, set og:url to the clean canonical version. Facebook deduplicates engagement metrics (likes, shares) per og:url — if every newsletter share has a different URL, you fragment your social proof across dozens of "different" pages. Same goes for trailing slashes — pick one and stick with it.