👁️ Open Graph Preview
Preview how your page looks when shared on Facebook, Twitter & LinkedIn
example.com
Amazing Article Title That Grabs Attention
A compelling description that makes people want to click and read more.
How to Use the Open Graph Preview
Open Graph tags control how your page appears when shared on social media. Fill in your page title, description, image URL, and site name, then see a live preview of how it will look on Facebook, Twitter, or LinkedIn. Optimal OG image size is 1200x630 pixels. Title should be 60-90 characters, description 150-200 characters. Once satisfied, add these meta tags to your HTML head section.
After updating your site, use Facebook's Sharing Debugger, Twitter\'s Card Validator, or LinkedIn\'s Post Inspector to clear the cached preview and force a re-scrape of your latest OG tags.
What is the Open Graph protocol?
Open Graph is a metadata protocol created by Facebook (now Meta) that controls how web pages appear when shared as links on social platforms. The key tags: og:title (card headline), og:description (card subtitle), og:image (preview image — most visually impactful), og:url (canonical URL), og:type (website, article, product). When you share a link on Facebook, LinkedIn, Slack, Discord, or most messaging apps, those platforms fetch and parse the OG tags to generate the link preview card.
What og:image dimensions work best across platforms?
Universal recommendation: 1200x630px, aspect ratio 1.91:1. Facebook: minimum 600x315, optimal 1200x630. Twitter/X summary card with large image: minimum 300x157, recommended 1200x628. LinkedIn: 1200x627. Discord and Slack: use OG tags and render up to 1200x628. Keep critical content (text, logos) within the center 900x500 to avoid cropping on platforms that apply their own aspect ratio constraints. Use exactly 1200x630 as your standard — it covers all platforms.
How do I force social platforms to refresh their cached OG data?
Social platforms aggressively cache OG tags after first fetch. To force refresh: Facebook Sharing Debugger (developers.facebook.com/tools/debug) — paste URL and click 'Scrape Again'. LinkedIn Post Inspector (linkedin.com/post-inspector) — enter URL to force cache refresh. Twitter Card Validator (cards-dev.twitter.com/validator). Discord: no direct refresh tool — it re-fetches when the cache expires (usually 24-48 hours) or when a new link is pasted in a channel for the first time.
What is the difference between og:title and the HTML <title> tag?
The HTML <title> tag controls the browser tab title and the blue headline in Google search results. og:title controls the headline in social link preview cards. They are often the same but can differ: a page title might be 'Product Name | Company Name' (includes brand) while og:title might be 'Product Name — Short Compelling Description' (more marketing-oriented without the brand suffix). If og:title is not specified, most platforms fall back to the <title> tag.
How do I test OG tags without deploying to production?
Tools: ngrok exposes your local dev server to the internet (ngrok http 3000), then paste the ngrok URL into the Facebook Debugger. Many meta tag generators (including this site's) provide a preview based on the values you enter without needing a live URL. For staging environments: ensure the staging URL is accessible publicly (not IP-restricted) and that OG tags reference the staging domain correctly — og:image URLs must be absolute and publicly accessible for social platforms to fetch them.
What is Twitter Card vs Open Graph for Twitter?
Twitter uses its own card system with twitter: prefixed tags: twitter:card (summary, summary_large_image, player, app), twitter:title, twitter:description, twitter:image. However, Twitter also falls back to og: tags if twitter: tags are absent. Best practice: set both. Twitter's 'summary_large_image' card type shows a large image above the title — the most visually impactful format, similar to og:image on Facebook. The twitter:card type tag determines the card layout; without it, Twitter defaults to 'summary' (small image).
What other SEO and social tools are on this site?
The Meta Tag Generator produces complete HTML including both SEO and OG tags. The robots.txt Generator creates crawl control files. The Word Counter verifies og:description stays within the 200-character recommended limit. The Favicon Generator creates the site icon that appears alongside OG cards in some contexts. All are in the Dev Tools SEO section.
📊 Key Data Points
og:image 1200x630
Facebook recommended og:image dimensions for full-width card display
twitter:card types
summary, summary_large_image, app, player — most content uses summary_large_image
og:description 155 chars
Maximum meta description length before social platforms truncate — keep under 155 characters
Open Graph Preview — Social Share Preview -- Complete USA Guide 2026
When you share a URL on Facebook, Twitter/X, LinkedIn, or iMessage, the platform reads your Open Graph meta tags to generate a preview card. Wrong image dimensions, missing tags, or a description over 160 characters all produce poor-looking share cards that reduce click-through rate.
This tool renders live previews of how your URL will appear when shared. Runs in your browser.
**Long-tail searches answered here:** open graph preview tool online free, og tags preview browser tool, facebook twitter link preview checker free.
For building the tags, use Meta Tag Generator.
🔬 How This Calculator Works
Parses Open Graph meta tags and renders a live preview of how the URL will appear when shared on Facebook, Twitter/X, LinkedIn, and iMessage. Shows the og:title, og:description, og:image, og:url, and twitter:card previews side-by-side. Also shows which required tags are missing.
✅ What You Can Calculate
Multi-platform preview
Shows previews for Facebook/LinkedIn, Twitter/X, and iMessage simultaneously. Each platform renders Open Graph tags differently.
Missing tag detection
Flags missing required tags: og:title, og:description, og:image, og:url. Missing tags cause poor social sharing previews.
Image size validation
Checks og:image dimensions against platform requirements. Facebook requires 1200x630px for full-width display.
Twitter Card type display
Shows how different twitter:card types (summary, summary_large_image) render on Twitter/X.
🎯 Real Scenarios & Use Cases
Pre-launch social preview check
Before launching a new page, paste your HTML head here to verify the social sharing preview looks correct across all platforms.
Blog post social optimization
After writing a new blog post, check the preview here to ensure the title, description, and image are compelling for social sharing.
Open graph debugging
Your shared link is showing the wrong image or title. Paste your page HTML here to see which og: tag is overriding or missing.
Product page social preview
Check how your product pages appear when shared on social media. The og:image is the most impactful element for click-through rate.
💡 Pro Tips for Accurate Results
og:image minimum 1200x630px. Facebook recommends 1200x630 for og:image. Smaller images appear as small thumbnails on some platforms or fail to render entirely.
twitter:card types. summary shows a small square image. summary_large_image shows a large banner image. Most content uses summary_large_image.
og:description 150-160 characters. Social platforms truncate descriptions over about 160 characters. Keep it concise and compelling at 155 characters.
Test after deployment. Platforms cache og tags aggressively. After updating, use the platform debug tools (Facebook Sharing Debugger, Twitter Card Validator) to force a cache refresh.
🔗 Use These Together
🏁 Bottom Line
Open Graph previews are the first impression of your content in social feeds. Build correct tags with Meta Tag Generator and preview them here.