OpenGraph Preview & Generator — Twitter, Facebook, LinkedIn

Guide

About OpenGraph Preview

Compose OpenGraph and Twitter Card meta tags. The live preview shows exactly how Facebook, LinkedIn, and Twitter will render your card — image, title, description, URL — side-by-side. Copy the ready-to-paste HTML for your <code><head></code>.

Why OpenGraph matters for SEO

Search and social are converging. A great-looking link preview drives clicks; a missing or broken preview shows as plain text and gets fewer engagements. OpenGraph is the protocol every platform reads — Facebook, LinkedIn, Slack, Discord, iMessage, Threads, Bluesky.

For ranking, Google does not use OG tags directly, but click-through rate is a positive signal — pages with strong previews get clicked more, which feeds back into ranking.

The tags that matter

<meta property="og:title" content="Your page title" />
<meta property="og:description" content="One-line pitch, ~155 chars" />
<meta property="og:image" content="https://yoursite.com/og.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:url" content="https://yoursite.com/page" />
<meta property="og:type" content="website" />

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your page title" />
<meta name="twitter:description" content="One-line pitch" />
<meta name="twitter:image" content="https://yoursite.com/og.png" />
<meta name="twitter:site" content="@yourhandle" />

Common workflows

Set up OG for a new site. Compose in this tool, copy the HTML, paste into your site’s <head>. Test against the live URL with the platform validators.

Audit existing OG. Paste the URL, see what each platform extracts. Missing fields show as red. Fix before launching marketing.

Generate a preview for an unpublished page. Hand-edit the fields, see the preview. Useful for design reviews where the real page does not exist yet.

Validate after a deploy. Re-fetch via the validators (Twitter Card Validator, Facebook Sharing Debugger, LinkedIn Post Inspector). Cache flushing is the most common cause of “my preview did not update”.

Why a previewer matters

OG tags are deceptively simple — until they fail. A broken og:image URL, a 4 MB image that times out, a missing width/height that Twitter rejects, a relative URL Slack cannot resolve. The previewer catches every common failure before you ship.

Frequently asked questions

What is OpenGraph?

A meta-tag protocol Facebook introduced in 2010 for richer link previews. Adopted by every major platform — og:title, og:description, og:image, og:url — your link cards everywhere depend on these tags.

Why also Twitter Card tags?

Twitter respects og: tags but layers on its own (twitter:card, twitter:image, twitter:site) for finer control over its preview. Modern best practice — set both.

What image dimensions for og:image?

1200 × 630 pixels. Twitter accepts the same ratio. Anything smaller looks pixelated; anything larger truncates. Keep file size under 5 MB.

What is twitter:card?

The card style — summary_large_image for big visuals (recommended), summary for thumbnail-and-text. Most modern sites pick the large variant.

Why does my preview not match what Twitter shows?

Twitter caches old previews. Use Twitter's Card Validator to flush. Same with Facebook (Sharing Debugger) and LinkedIn (Post Inspector) — refresh after deploying meta tag changes.

Are previews fetched live?

Yes — when you paste a URL we fetch the OG tags and image directly from your origin. (Through your browser; no proxy.) You can also manually edit each field for hypothetical previews.

Related tools

Last updated: 2025-01-15