Open Graph Meta Tags: Control How Your Links Look When Shared

What Open Graph tags actually do

When you paste a URL into WhatsApp, X, LinkedIn, Slack, or iMessage, the app doesn't screenshot your page — it fetches the page's HTML and looks for a small set of <meta> tags in the <head> to build the link preview: the title, the description, and the image card.

The vocabulary those apps agree on is the Open Graph protocol, created by Facebook in 2010. It defines page-level metadata through property attributes:

<meta property="og:title" content="JSON Formatter & Validator" />
<meta property="og:description" content="Format, validate, and minify JSON instantly." />
<meta property="og:image" content="https://fernandeslabs.com/api/og?tool=json-formatter" />
<meta property="og:url" content="https://fernandeslabs.com/tools/json-formatter" />

If those tags are missing, sharing apps improvise — usually by grabbing the page's <title>, the meta description, and a random image from the page, or nothing at all. An unbranded, cropped, or empty preview measurably hurts click-through: the card is often the only thing a reader sees before deciding whether to tap.

The four required properties

The Open Graph spec names four properties that every page should declare:

Two more are effectively required in practice:

• og:description — two lines of pitch text under the title.
• og:site_name — the brand name shown on some platforms (Facebook, LinkedIn).

And one that gets forgotten constantly:

• og:image:alt — an accessibility description of the image. X and Facebook both support it; screen readers announce it on shared cards.

Getting og:image right (where most sites fail)

The image is where previews succeed or die. Each platform has its own renderer, but one size covers all of them:

1200 × 630 pixels — a 1.91:1 ratio. This is Facebook's documented recommendation and it renders cleanly on LinkedIn, Slack, Discord, and X's large-card layout.

The full rulebook, per platform:

Three details that bite in production:

1. Under 600 × 315, Facebook shows a small square thumbnail instead of the large card. Technically valid, visually weak — don't ship it.
2. WhatsApp is the strictest consumer. Images over roughly 300 KB frequently fail to render at all, and anything wider than a 4:1 ratio gets cropped. A 1200 × 630 JPEG at quality ~80 almost always lands under the limit; a PNG of the same dimensions often doesn't.
3. Declare the dimensions so platforms don't have to fetch the image to learn its size:

<meta property="og:image" content="https://example.com/og.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Dashboard screenshot with the weekly report" />

You can generate a spec-correct card for any page in seconds with the Open Graph Preview tool — it renders the 1200 × 630 canvas and shows exactly what the shared card will look like before you paste the link anywhere.

Twitter/X cards: one extra tag, then Open Graph does the rest

X supports its own card vocabulary but falls back to Open Graph for every field it doesn't find. The only tag X requires that Open Graph doesn't cover is the card type:

<meta name="twitter:card" content="summary_large_image" />

• summary_large_image — big 2:1 image with the title/description below. This is what you want for articles and landing pages.
• summary — small square thumbnail beside the text. Fine for links where the image isn't the story.

Everything else is fallback: twitter:title → og:title, twitter:description → og:description, twitter:image → og:image. So a page with complete Open Graph tags needs exactly one extra line to look right on X. Add twitter:image:alt only if you want alt text on X that differs from the OG alt.

The caching trap: why your fix "doesn't work"

You update the tags, redeploy, paste the link — and the old preview appears. The tags aren't broken; the platform cached the previous scrape.

• Facebook/WhatsApp: each URL is scraped once and the result is cached aggressively. Facebook's Sharing Debugger re-scrapes on demand ("Scrape Again" button). WhatsApp caches even harder and has no debugger — the practical fix is appending a throwaway query parameter (?v=2) to force a fresh URL through the cache.
• X, LinkedIn, Slack: short-lived caches; usually a fresh paste after a few minutes is enough.

This trap is why preview tags must be in the initial server-rendered HTML. If your tags only appear after JavaScript runs, most scrapers — which do not execute JS the way browsers do, or give up before hydration — will see nothing and render a bare link.

Common failures, ranked by frequency

1. Relative image URLs — og:image="/og.png" is invalid; scrapers have no origin to resolve it against. Always the full https:// address.
2. Tags injected client-side — see above. Server-render them.
3. Image too heavy for WhatsApp — the card silently drops the image. Compress to JPEG.
4. One set of tags for the whole site — every page shares the homepage card. Generic cards on a specific article read as spam and get fewer clicks.
5. Duplicate properties — two og:image tags (one from the theme, one from a plugin) with different sizes: platforms pick arbitrarily.
6. Special characters not escaped — an unescaped & or quote in a content attribute can terminate the tag mid-value. If your titles contain &, encode it (&) or verify the rendered head with the Meta Tag Generator, which emits correctly escaped attributes.

Debug checklist

Before shipping any page that will be shared:

1. View source (not the inspector) — the tags are in the initial HTML?
2. og:image is an absolute HTTPS URL that returns a 200?
3. Image is 1200 × 630, under ~300 KB, JPEG or PNG?
4. twitter:card present with summary_large_image?
5. Render the card with the Open Graph Preview tool — is the title readable at thumbnail size?
6. Paste the URL into Facebook's Sharing Debugger and X's Card Validator once, after deploy — did each platform see what you intended?

Link previews are one of the few SEO surfaces you can fully control and verify in minutes. Given that the card is the page for most social audiences, it is minutes extremely well spent.