Open Graph Preview

Previewing a social share card

Open Graph preview renders how a URL will appear when someone shares it on Facebook, LinkedIn, or X, by reading the page's meta tags. The title, description, and image come from og: tags in the document head; the preview assembles them into the card the platform would show, so you catch a missing image or a truncated title before you post.

When you reach for it

You check it before launching a landing page, after changing a title or hero image, or when a shared link looks blank or wrong in a feed. It is also handy for confirming that a server-rendered page actually exposes the tags, since client-rendered apps sometimes inject them too late for crawlers to see.

Example

<meta property="og:title" content="DevKit Tools" />
<meta property="og:description" content="Fast developer utilities." />
<meta property="og:image" content="https://example.com/card.png" />
<meta property="og:url" content="https://example.com/" />
<meta name="twitter:card" content="summary_large_image" />

X reads the twitter: tags first and falls back to og:, so the large-image card type needs its own tag.

Common pitfalls

The image is where most previews break. The og:image URL must be absolute, not a relative path, because the crawler fetches it from its own servers with no knowledge of your base URL. Platforms also cache aggressively, so after you fix a tag the old card can persist for days until you force a re-scrape through the platform's debugger. A third gotcha: crawlers do not run JavaScript the way a browser does, so tags added by client-side code after load are often missed. Render them server-side.

FAQ

My image is not showing, why? Usually a relative URL or a cached old version. Use an absolute URL and re-scrape via the platform tool.

What size should the image be? A 1200x630 image is the safe default for the large summary card across platforms.

Why does the preview differ per network? Each platform picks its own tags and crops differently, so LinkedIn and X can show the same page unalike.