Open Graph Preview
See exactly how your page will appear when shared on social media. Check Open Graph title, description, and image. Preview Facebook, Twitter Card, LinkedIn, and Discord embeds side by side. Copy ready-to-use OG meta tags.
Need more power?
Sign up free and get AI-powered versions of this tool — plus 60+ more SEO tools.
Sign up free →How to use Open Graph Preview
See exactly how your page will appear when shared on social media. Check Open Graph title, description, and image. Preview Facebook, Twitter Card, LinkedIn, and Discord embeds side by side. Copy ready-to-use OG meta tags.
This tool runs entirely in your browser — your data never leaves your device. No account required, no daily limits, no API calls. Use it as many times as you need.
Why use Open Graph Preview?
- ✓ Instant results — no waiting for API responses
- ✓ 100% private — your data stays in your browser
- ✓ No sign-up, no email, no credit card
- ✓ Works on mobile and desktop
🌐 What Is an Open Graph Preview Tool?
An Open Graph preview tool lets you see exactly how your web pages will appear when shared on social media platforms like Facebook, Twitter, LinkedIn, and Discord. It reads your page's OG meta tags — including og:title, og:description, og:image, and og:url — and renders pixel-accurate mockups of each platform's link preview card. This eliminates the guesswork of social sharing and ensures your content makes a strong first impression every time it's posted.
The Open Graph protocol, originally developed by Facebook in 2010, has become the universal standard for controlling how links appear across the social web. When someone shares your URL, the receiving platform's crawler fetches your page, reads the OG tags from the HTML <head>, and assembles a rich preview card with your specified title, description, and image. Without proper OG tags, platforms fall back to guessing — often selecting the wrong image, truncating your title, or showing a generic description that fails to attract clicks.
📊 Social Sharing Statistics
more shares for posts with optimized OG images vs. missing or broken previews
higher click-through rate on links with large image previews compared to text-only shares
pixels is the universally recommended og:image size across all major platforms
characters is Facebook's truncation limit for og:title before text is cut off
average cache duration before Discord and LinkedIn re-fetch your OG tags
maximum og:image file size supported by Facebook's Open Graph crawler
📝 How to Use the Open Graph Preview Tool
Enter Your URL or Paste OG Tags
Type a live URL to fetch its existing OG tags, or paste your og:title, og:description, and og:image values directly to preview before deploying. The tool supports both workflows for maximum flexibility.
Review Platform Previews
Inspect how your link will appear on Facebook, Twitter, LinkedIn, and Discord. Each platform renders previews differently — check that your title isn't truncated, your image isn't cropped awkwardly, and your description reads well on every platform.
Check Image Dimensions
Verify your og:image meets the recommended 1200×630 pixel size. The tool flags images that are too small, too large, or have an aspect ratio that will cause cropping on specific platforms.
Validate Required Tags
Ensure all four required OG tags (og:title, og:type, og:image, og:url) are present. The tool highlights missing or malformed tags and suggests fixes for common issues like relative image URLs or missing protocols.
Test and Share with Confidence
Once your previews look perfect on every platform, copy the validated OG tags into your page's <head> section. Use platform-specific debuggers (Facebook Sharing Debugger, Twitter Card Validator) to prime the cache before your first share.
⚠️ Common Open Graph Mistakes
❌ Using relative image URLs like /images/og.jpg instead of absolute URLs
✅ Always use fully qualified URLs starting with https:// for og:image — social crawlers cannot resolve relative paths
❌ Setting og:image to a tiny favicon or icon instead of a proper preview image
✅ Use images at least 1200×630 pixels — images below 200×200 px are rejected by most platforms
❌ Forgetting to include og:image:width and og:image:height tags
✅ Add dimension tags so platforms can render previews instantly without downloading the full image first
❌ Using the same generic OG tags across every page on the site
✅ Customize og:title, og:description, and og:image for each page to maximize click-through rates per topic
❌ Writing og:title that duplicates the page title tag exactly
✅ Craft a social-specific title that is more engaging and action-oriented than your SEO title tag
❌ Ignoring Twitter Card tags and relying solely on OG fallbacks
✅ Include twitter:card, twitter:title, and twitter:image for precise control over Twitter/X previews
❌ Not testing OG tags after deploying changes to production
✅ Use the Facebook Sharing Debugger and Twitter Card Validator after every deployment to verify and refresh cache
❌ Placing OG meta tags inside the <body> instead of the <head>
✅ Social crawlers only read meta tags within the <head> section — tags in <body> are completely ignored
❌ Using images with excessive text overlay that gets cropped on mobile
✅ Keep text centered within the safe zone (middle 80% of the image) and test on mobile preview sizes
❌ Not setting og:url causing duplicate content signals for shared links
✅ Set og:url to the canonical URL of the page to consolidate social signals and avoid fragmented share counts
💡 Pro Tips for Open Graph Optimization
Design Platform-Specific Images
Create separate images for Facebook (1200×630) and Twitter summary cards (800×800). Use og:image for Facebook and twitter:image for Twitter to deliver the optimal aspect ratio on each platform.
Add Brand Identity to OG Images
Include your logo, brand colors, and consistent typography on OG images. This builds brand recognition in social feeds and makes your content instantly identifiable among competing posts.
Use Dynamic OG Image Generation
For blogs and e-commerce, auto-generate OG images using tools like Vercel OG or Cloudinary. Dynamic generation ensures every page has a unique, on-brand social preview without manual design work.
Set og:locale for International Content
Use og:locale (e.g., en_US, es_ES, ja_JP) and og:locale:alternate to signal language variants. This helps platforms show the right preview language to users in different regions.
Monitor Social Share Analytics
Track which pages get shared most and which OG configurations drive the highest CTR. Use UTM parameters in og:url to attribute social traffic accurately in Google Analytics.
Implement og:video for Rich Previews
For pages with video content, add og:video, og:video:width, og:video:height, and og:video:type tags. Facebook and LinkedIn support inline video playback directly in the social feed.
Test with Multiple Sharing Debuggers
Don't rely on just one debugger. Test with Facebook Sharing Debugger, Twitter Card Validator, LinkedIn Post Inspector, and our OG Preview tool to catch platform-specific rendering issues.
Pre-Cache Before Marketing Campaigns
Before launching a social media campaign, scrape all target URLs with each platform's debugger tool. This primes the cache so the first real shares display perfect previews immediately.
🔧 Related SEO Tools
Meta Tag Checker
Audit all your meta tags including Open Graph, Twitter Cards, and canonical URLs in one comprehensive scan.
SERP Preview
Preview how your page appears in Google search results alongside your social media previews.
Character Counter
Count characters in your og:title and og:description to stay within platform truncation limits.
Heading Checker
Validate your heading hierarchy to ensure your page structure supports both SEO and social sharing metadata.
❓ Frequently Asked Questions
What are Open Graph tags?
Open Graph (OG) tags are HTML meta tags placed in the <head> section of a web page that control how content appears when shared on social media platforms like Facebook, LinkedIn, Discord, and messaging apps. The protocol was created by Facebook in 2010 and has since become the universal standard for social sharing metadata. The four required OG tags are og:title, og:type, og:image, and og:url.
What is the ideal og:image size for social sharing?
The recommended og:image size is 1200×630 pixels with a 1.91:1 aspect ratio. This dimensions works optimally across Facebook, LinkedIn, Twitter, and Discord. Images should be under 8 MB in file size and in JPG or PNG format. Facebook requires a minimum of 200×200 pixels, but images below 600×315 pixels will display as small thumbnails rather than large link previews.
How do Twitter Cards differ from Open Graph tags?
Twitter Cards use their own meta tags (twitter:card, twitter:title, twitter:description, twitter:image) but will fall back to Open Graph tags if Twitter-specific tags are missing. The key difference is the twitter:card tag, which controls the display format — "summary" shows a small square image, while "summary_large_image" shows a wide banner image. For maximum compatibility, include both OG and Twitter Card tags.
Why isn't my OG image showing on Facebook?
Common reasons include: the image URL is not absolute (must start with https://), the image is too small (minimum 200×200 px), the image file is too large (over 8 MB), the server blocks Facebook's crawler, or Facebook has cached an old version. Use the Facebook Sharing Debugger at developers.facebook.com/tools/debug to scrape the URL again and force a cache refresh.
How do I preview Open Graph tags before publishing?
Use our free Open Graph Preview tool above to see exactly how your page will appear on Facebook, Twitter, LinkedIn, and Discord before publishing. Simply enter your URL or paste your OG meta tags, and the tool renders pixel-accurate previews for each platform. This catches issues like truncated titles, missing images, or incorrect descriptions before your content goes live.
What is the character limit for og:title and og:description?
For og:title, keep it under 60–70 characters to avoid truncation on most platforms. Facebook truncates titles around 88 characters, while Twitter cuts at approximately 70. For og:description, aim for 155–200 characters. LinkedIn shows up to 100 characters of the description. Always front-load important information since different platforms truncate at different points.
How do I fix OG tags not updating after changes?
Social platforms aggressively cache OG data. To force a refresh: on Facebook, use the Sharing Debugger and click "Scrape Again." On Twitter, use the Card Validator. On LinkedIn, append a query parameter like ?v=2 to the shared URL. For Discord, the cache typically expires within 24 hours. Some CDNs also cache HTML pages — ensure your CDN is serving the updated version.
Do Open Graph tags affect SEO rankings?
OG tags do not directly influence Google search rankings. However, they significantly impact indirect SEO factors: well-crafted OG tags increase click-through rates on social media, drive more referral traffic, improve brand visibility, and encourage social sharing — all of which send positive engagement signals. Pages with compelling social previews receive 2–3x more shares than those with broken or missing OG tags.
What is og:type and which value should I use?
The og:type tag defines the content category. Common values include "website" (default for homepages), "article" (for blog posts and news), "product" (for e-commerce items), "video.movie," and "music.song." For most web pages, use "website." For blog posts, use "article" which enables additional tags like article:published_time, article:author, and article:section for richer social previews.
How do Discord embeds use Open Graph tags?
Discord reads og:title, og:description, og:image, and og:url to generate link embeds in chat. Discord also supports the theme-color meta tag to set the embed's left border color. Large images display when og:image is present and the image meets Discord's minimum size requirements (at least 400 pixels wide). Discord caches OG data for approximately 24 hours before re-fetching.
Should I use og:image:width and og:image:height tags?
Yes — specifying og:image:width and og:image:height is highly recommended. These tags allow Facebook and other platforms to render your image immediately without needing to download and analyze it first. Without these dimension hints, the first share of your URL may show without an image until the platform finishes processing. Always include both tags alongside your og:image tag.
How do LinkedIn post previews work with OG tags?
LinkedIn reads og:title (truncated around 120 characters), og:description (truncated around 100 characters), og:image (recommended 1200×627 px), and og:url. LinkedIn's Post Inspector tool at linkedin.com/post-inspector lets you preview and refresh cached data. LinkedIn is particularly strict about image quality — blurry or low-resolution images are often rejected in favor of a placeholder.
What happens if I don't add Open Graph tags?
Without OG tags, social platforms will attempt to auto-generate a preview by scraping your page's title tag, meta description, and the first suitable image they find. This often produces poor results: wrong images, truncated text, or generic descriptions. You lose control over your brand's presentation on social media, which can reduce click-through rates by 30–50% compared to optimized OG tags.
Can I use different images for Facebook and Twitter?
Yes. Use og:image for Facebook and most platforms, then override with twitter:image specifically for Twitter. This is useful because Facebook prefers 1200×630 images while Twitter's summary card works best with square 800×800 images. You can also set different titles and descriptions using twitter:title and twitter:description to tailor messaging per platform.
How do I add Open Graph tags to my website?
Add OG meta tags in the <head> section of your HTML. For static sites, add them directly. For WordPress, use plugins like Yoast SEO or Rank Math. For Next.js, use the metadata export or generateMetadata function. For React SPAs, use react-helmet or implement server-side rendering. Always include at minimum: og:title, og:description, og:image (with absolute URL), og:url, and og:type.
Perfect Your Social Media Previews
Don't let broken OG tags sabotage your social media traffic. Use our free Open Graph Preview tool above to validate your tags across every major platform, or explore our complete toolkit for end-to-end SEO optimization.