Open Graph Preview — Test How Your Page Looks When Shared
Preview how your page appears when shared on Facebook, LinkedIn, Twitter/X, and in Google search results. Enter your Open Graph values manually or paste the raw HTML source of any page to automatically extract all meta tags. Includes an issues checklist so you know exactly what to fix.
100% private. HTML source is parsed locally in your browser. No data is sent to any server.
How to Preview Open Graph Tags
- 01
Enter your OG tag values
Use the "Enter manually" tab to type your og:title, og:description, og:image URL, and other tags. Or switch to "Paste HTML source" to auto-extract them.
- 02
See live social card previews
Four previews update instantly: Facebook/LinkedIn large card, Twitter large card, Twitter summary card, and Google search result.
- 03
Fix identified issues
The issues checklist shows what's missing or incorrect. Fix them in your page's meta tags, then use the Meta Tag Generator to generate corrected code.
Frequently Asked Questions
What is an Open Graph preview?
An Open Graph preview shows how your webpage will appear when someone shares it on social media platforms like Facebook, LinkedIn, or Twitter/X. It uses og:title, og:description, and og:image meta tags to generate the share card. Without these tags, platforms pick content arbitrarily and the result is often broken or unattractive.
Why can't the tool fetch my URL automatically?
Fetching external URLs from a browser-based tool is blocked by CORS (Cross-Origin Resource Sharing) policies — browsers prevent JavaScript from reading HTML from other domains unless the server explicitly allows it. Instead, use the "Paste HTML source" tab: open your page in a browser, view its source (Ctrl+U or Cmd+U), copy all, and paste here.
What is the ideal og:image size?
The recommended size is 1200×630 pixels (a 1.91:1 aspect ratio). This renders correctly on Facebook, LinkedIn, and Twitter. Images smaller than 600×315 pixels may display as tiny thumbnails. Always use HTTPS URLs for OG images — HTTP images are blocked on many platforms.
What is the difference between og:title and twitter:title?
og:title is the Open Graph title used by Facebook, LinkedIn, and most platforms. twitter:title is the Twitter-specific title that overrides og:title on Twitter/X. If twitter:title is not set, Twitter falls back to og:title. Most of the time, you can set both to the same value.
How do I fix a broken social share preview?
First, add og:title, og:description, and og:image tags to your page's <head> section. Use HTTPS for the image URL. After updating, platforms cache the old version for hours. Use Facebook's Sharing Debugger (developers.facebook.com/tools/debug) to force a refresh. For Twitter, use the Twitter Card Validator.