Skip to content
TypeParser
All tools

OpenGraph Preview

Build og:tags and preview social cards.

beats metatags.io edge: 3-platform preview side-by-side
fields
title
description
image url
page url
site name
preview
HTML
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>&lt;head&gt;</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.
How does the WhatsApp link preview work with OpenGraph?
WhatsApp reads the same OpenGraph tags — og:title, og:description, and og:image — to build its link card. Two gotchas: the image should be well under ~600 KB (it often skips large images), and WhatsApp caches aggressively, so a changed preview may not refresh until the cache expires. Set explicit og:image:width/height and keep the image small for reliable WhatsApp cards.
Why doesn't my OpenGraph preview work on localhost?
Social platforms fetch your tags from a public URL — they can't reach localhost. To preview a local page, either hand-edit the fields here for a hypothetical render, or expose your dev server with a tunnel (ngrok, Cloudflare Tunnel) and point the validators at the public URL.

Related tools

Last updated: 2026-07-04