Social Media Preview Debugger
Extract your page's Open Graph and Twitter Card tags and preview them as a link-share card, with warnings for common issues.
Open Graph & Twitter Card Tags: What Controls Your Share Preview
1. How This Tool Resolves Tag Priority
This tool follows the same fallback logic most platforms use: it looks for og:title first, falling back to your <title> tag if missing; for description, it checks og:description then a plain <meta name="description"> tag; and for Twitter-specific values, it checks twitter:title/twitter:description/twitter:image first and falls back to the corresponding Open Graph value if a Twitter-specific tag isn't present. This mirrors how X (Twitter) itself behaves — it is not required to duplicate every Open Graph tag with a twitter: equivalent.
2. How to Use This Tool
Enter a URL and click “Debug Social Preview.” The tool fetches the page, extracts its Open Graph and Twitter Card tags, and shows a preview card built from those values along with any optimization warnings (missing image, oversized title/description). Use it before sharing a new page publicly to catch obvious issues — a missing image is the most common and most damaging problem, since platforms show a blank placeholder without one.
3. Image Specifications That Actually Matter
1200×630px (a 1.91:1 ratio) is the widely recommended safe size for og:image — it renders cleanly as a large card on Facebook, LinkedIn, and Slack without awkward cropping. Keep the file size reasonable (well under 5MB, ideally under a few hundred KB) since platforms may skip or slow-load oversized images when generating a preview. Always use an absolute https:// URL for the image — a relative path will not resolve correctly when a platform's crawler fetches it from outside your site's context.
4. Common Mistakes
The most common mistake is simply forgetting og:image entirely, which leaves shared links looking bare on every platform. Another is a title or description so long it gets truncated mid-sentence in the feed — keep og:title under roughly 70 characters and og:description under roughly 200 to avoid awkward cuts. A third is updating the tags but forgetting that platforms cache scraped data, so the old preview can persist on already-shared links until you force a re-scrape through the platform's own cache tool.
5. Limitations
This tool renders one representative preview card rather than a distinct, pixel-accurate mockup per platform — the platform tabs are a visual reference for comparison, not separate renderings, so switching between them shows the same card. Actual rendering varies by platform (X/Twitter especially, depending on your twitter:card type) and can change over time as platforms update their own preview UI. It also does not verify that your image URL is publicly reachable or check for a valid image format — a broken or inaccessible image URL will show as a blank card on real platforms even if this tool doesn't flag it.
Frequently Asked Questions
Why are Open Graph tags important for click-through rate (CTR)?
When links are shared on Facebook, LinkedIn, X, or Slack, Open Graph tags determine the image thumbnail, headline, and snippet. Rich cards with custom visuals receive significantly higher engagement than plain URLs.
What is the optimal image dimension for og:image tags?
The recommended size for Open Graph share images is 1200 × 630 pixels (1.91:1 aspect ratio). This guarantees sharp rendering across high-resolution retina screens and mobile feeds.
How do I force Facebook or LinkedIn to clear cached link previews?
Facebook provides the "Sharing Debugger" and LinkedIn has the "Post Inspector" tool to clear their CDN cache and scrape updated Open Graph tags.
Does the preview card look exactly like it will on Facebook, X, LinkedIn, and Slack?
It shows one representative card built from your extracted og:title, og:description, and og:image (or the Twitter Card equivalents as fallback) — a close approximation of how Facebook, LinkedIn, and Slack typically render Open Graph link previews, since those platforms use fairly similar layouts. X (Twitter) in particular can render noticeably differently depending on whether your twitter:card value is "summary" (smaller square thumbnail) or "summary_large_image" (full-width image) — for the most accurate final check on a specific platform, use that platform's own debugging tool.
Why does my page still show the old preview after I updated my meta tags?
Social platforms cache the Open Graph data they scrape from a URL, sometimes for days, so an already-shared link can keep showing outdated title, description, or image data even after you fix the source tags. Use each platform's own cache-refresh tool (Facebook Sharing Debugger, LinkedIn Post Inspector) to force a re-scrape after making changes.