Open Graph Preview

SEO Tools

Preview how your URL renders as a social-share card on Facebook/LinkedIn, X (Twitter), and chat apps. Paste HTML or fetch a URL; flags missing OG fields.

Runs entirely in your browser

HTML

Loading tool...

About Open Graph Preview

Open Graph (OG) and Twitter Card meta tags drive how every social platform and chat app renders a link preview when someone shares your URL. Get them right and your link earns a beautifully-rendered card with image, title, and description; get them wrong (or missing) and the link shows up as a bare URL or — worse — a blank box. Most platforms cache previews aggressively, so the time to verify is before you publish, not after.

This tool parses any HTML for OG and Twitter Card tags and renders three preview cards side-by-side that mirror how each platform style shows links: Facebook/LinkedIn (large image above title + description), X (large summary card or small summary card depending on `twitter:card`), and the compact thumbnail-left style used by Slack, Discord, and iMessage. Missing critical fields (no og:image, overlong title) are flagged with a warning banner. Paste HTML (reliable) or try the best-effort URL fetch (often CORS-blocked, falls back gracefully).

How to use

1
Pick paste or fetch
Paste HTML works reliably on any page (View Page Source → Copy All). Fetch URL works only when the target server permits cross-origin reads (most don't).
2
Provide your HTML or URL
The tool parses the OG and Twitter Card meta tags it finds. Empty or missing tags fall back to the regular `<title>` and meta description where applicable.
3
Review three preview cards
Facebook/LinkedIn (1.91:1 hero image + text), X/Twitter (renders as summary_large_image or summary based on the meta tag), and Slack/iMessage (compact thumbnail-left layout). Each shows the data exactly as the platform would.
4
Check the warnings panel
Missing og:image is the most common silent killer — platforms show no thumbnail at all. Overlong titles and descriptions get truncated.

Examples

Recommended og:image

Output

Dimensions: 1200×630 pixels (1.91:1 aspect ratio). Size: under 1 MB. Format: JPG or PNG. Avoid text-heavy images at small sizes.

Twitter card types

Output

summary — small thumbnail left, text right (default if not specified)
summary_large_image — large hero image above text (preferred for content)
app — for app-install cards
player — for embedded media

Frequently asked questions

Which platform reads which tags?+

Facebook, LinkedIn, Slack, Discord, iMessage, and most others read Open Graph (`og:*`). X reads Twitter Cards (`twitter:*`) but falls back to OG when Twitter tags aren't present. WhatsApp uses OG. The practical advice: always set OG; optionally add Twitter Card tags only when you want X-specific copy/image.

What size should og:image be?+

1200×630 pixels (1.91:1 aspect ratio) is the universal sweet spot — looks great on Facebook, LinkedIn, and as Twitter's `summary_large_image`. Going smaller (under 600px wide) risks platforms refusing to use it. Going much larger wastes bandwidth.

Why does my link preview keep showing the old image?+

Platforms cache previews aggressively (Facebook caches for ~30 days, Twitter ~7 days, Slack indefinitely until manually refreshed). After updating your og:image, use Facebook's Sharing Debugger or Twitter's Card Validator to force a recrawl. There's no way to clear the cache otherwise.

What happens if I have OG but no Twitter Card tags?+

X falls back to your OG tags. Most people don't need separate Twitter Card tags. Set them only when you want X-specific copy (different title, different image) or to declare a specific card type (`summary` vs `summary_large_image`).

Why does my preview look fine here but blank on Facebook?+

Facebook's previous cache. Run your URL through https://developers.facebook.com/tools/debug/ and click 'Scrape Again' to force Facebook to re-fetch. Same for Twitter: https://cards-dev.twitter.com/validator. Until you do this, Facebook will keep showing the old (or empty) preview.

Is the URL or HTML uploaded?+

No. Parsing happens entirely in your browser via DOMParser. In fetch mode, your browser requests the URL directly — we never see it.

Meta Tag Generator

Build a complete set of HTML meta tags — basic SEO, Open Graph, Twitter Cards, viewport — with character-count warnings.

SERP Snippet Preview

Preview how your title, URL, and meta description render in Google search results — desktop and mobile.

hreflang Generator

Build the hreflang link tag set for multilingual or multi-regional sites with BCP 47 validation.

Readability Score

Score your content with six readability formulas — Flesch, Gunning Fog, SMOG, Coleman-Liau, ARI.

Keyword Density Analyzer

Analyze 1-, 2-, and 3-word phrase frequency and density in your content with stopword filtering.

Robots.txt Generator

Build a valid robots.txt visually with user-agent groups, allow/disallow rules, and sitemap URLs.