The Open Graph Preview tool renders live share-card mockups for the nine surfaces that actually matter: Facebook, X (Twitter), LinkedIn, Slack, Discord, WhatsApp, iMessage, Pinterest, and Telegram. Give it a live URL and it fetches your page server-side, follows redirects, and extracts every og: and twitter: tag automatically. Prefer to preview a staging build or an unpublished draft? Paste the HTML instead, or switch to form mode and type the values in. The tool loads your og:image and twitter:image in real <img> tags to check the actual dimensions and aspect ratio, then flags issues before you ship: images smaller than 200×200 (Facebook won't render them), images not near the 1.91:1 ratio, titles that will truncate, HTTP-only image URLs some platforms block, twitter:image too small for summary_large_image, and missing fields where a fallback (like <title> or og:image) would kick in. Results are ordered errors → recommended fixes → passing checks → previews, so you see what to change first. When you're happy, copy the generated tag block straight into your <head>.
What Open Graph is and why it still runs the social web
Open Graph is a metadata protocol Facebook introduced in 2010 to let external pages describe themselves to the platform in a structured way. A page adds a handful of <meta property="og:*"> tags to its <head>, and when anyone shares the URL, Facebook (or any platform that respects OG) reads those tags and builds a rich preview card instead of showing a bare link. The protocol was so successful that essentially every social platform, chat app, and content aggregator adopted it. Today, Open Graph is what LinkedIn reads, what Slack unfurls, what Discord embeds, what iMessage shows in a link bubble, what WhatsApp previews when someone pastes a URL, and what Pinterest uses when it can't find its own tags. X/Twitter has its own twitter: namespace but falls back to og: for anything not specified. Get Open Graph right and you cover ~90% of link-preview surfaces with one set of tags.
The six tags that actually matter
The Open Graph spec defines dozens of properties, but only six meaningfully affect what a share card looks like. og:title is the headline (Facebook truncates at ~60 chars, LinkedIn ~200 but line-clamps to 2 lines). og:description is the subtitle (~150–200 chars visible; often truncated to 100 in feeds). og:image is the preview image — the highest-CTR element by far; cards without one are functionally dead. og:url is the canonical URL (important when the URL that was shared has tracking parameters — set og:url to the clean version). og:site_name is the brand label above the title in some platforms (Slack uses it prominently). og:type defaults to website; changing to article unlocks article-specific fields (published time, author) that some readers pick up. Every other og:* property is a refinement — locale, video URL, audio URL, structured product data — and few platforms use them.
Image rules — 1200×630 or nothing
The single most impactful line in your <head> is og:image. The rules: 1200×630 pixels at the 1.91:1 ratio Facebook, LinkedIn, and Twitter Summary Large all render at. Under 200×200 and Facebook won't render it at all — it silently falls back to a text-only card. Between 200×200 and 600×315 you get the small side-image variant (much lower CTR). At 1200×630 or larger you get the full-bleed large card, which drives roughly 2–3× the click-through of the small variant on Facebook and LinkedIn. Use PNG or JPG (WebP is inconsistently supported), keep the file under 8 MB, and always use an absolute HTTPS URL — relative paths don't work in scrapers, and some platforms block http://. This tool loads your og:image in a real <img> tag to check the actual dimensions and ratio, so you catch these problems before you publish.
Fallback behaviour when tags are missing
Every platform has a fallback chain when og:* tags are missing, and knowing it explains most "why does the wrong thing show up when I share this" questions. If og:title is absent, platforms fall back to <title>. If og:description is absent, they fall back to <meta name="description">, and if that's also missing, they scrape the first paragraph or a heuristic snippet. If og:image is absent, most platforms scrape all images on the page and pick the largest — which is why some shares end up featuring an unrelated header logo, a hero-image icon, or an ad banner. If og:url is absent, the raw shared URL is used, including tracking parameters. Setting og:tags explicitly is the only way to control the card; falling back to defaults is unreliable and platform-specific.
Caching, invalidation, and the scraper button
Every major platform caches the OG data from a URL for anywhere from an hour to a week. That means when you fix a broken og:image or update your title, existing share cards don't refresh — the cached version keeps rendering. Each platform has a "re-scrape" endpoint you can hit to force a refresh: Facebook — the Sharing Debugger at developers.facebook.com/tools/debug; LinkedIn — the Post Inspector at linkedin.com/post-inspector; X/Twitter — no public tool, but scrapes on next post; Slack and Discord refresh when a fresh URL (append ?v=2 or a query cache-buster) is shared. Bake the debugger URLs into your deployment checklist so a post-launch og:image fix actually reaches the audience.