Free OG Debugger
Open Graph Preview Tool
Debug and preview how your links appear on social media platforms.
What is an Open Graph Preview Tool?
An Open Graph preview tool (also known as an OG tag tester, OG image tester, or social media debugger) lets you see exactly how your website links will appear when shared on social media platforms like Facebook, Twitter/X, LinkedIn, Discord, and Slack.
Why Test Your Open Graph Tags?
When you share a link on social media, the platform reads your page's Open Graph meta tags to generate a preview card. If these tags are missing or incorrectly configured, your links may appear with:
- Missing or broken images
- Truncated or incorrect titles
- Wrong descriptions or no description at all
- Poor click-through rates due to unappealing previews
Essential Open Graph Tags
For optimal social sharing, every page should include these core OG tags:
og:title - The title of your page (50-60 characters)og:description - A brief description (150-200 characters)og:image - The preview image (1200×630 pixels)og:url - The canonical URL of your pageog:type - The type of content (website, article, product)Twitter Card Tags
Twitter/X uses its own set of meta tags (twitter:card, twitter:title, twitter:description, twitter:image) but will fall back to Open Graph tags if Twitter-specific tags aren't present. For optimal Twitter previews, add:
twitter:card - summary_large_image for best resultstwitter:site - Your Twitter/X handletwitter:creator - Content author's handleRecommended Image Dimensions
Facebook & LinkedIn
1200 × 630 pixels
Aspect ratio: 1.91:1
Twitter/X
1200 × 600 pixels
Aspect ratio: 2:1
Frequently Asked Questions
What are Open Graph tags?
Open Graph tags are meta tags in your HTML that control how your content appears when shared on social media. They were originally created by Facebook but are now used by most social platforms including Twitter, LinkedIn, and Slack.
Why is my OG image not showing?
Common reasons include: the image URL is incorrect or inaccessible, the image is too small (minimum 200×200px), the og:image meta tag is missing, or the image format is not supported. Use this tool to debug and verify your tags.
What size should my OG image be?
The recommended size is 1200×630 pixels with an aspect ratio of 1.91:1. This works well on Facebook, LinkedIn, and most platforms. For Twitter, 1200×600 (2:1 ratio) is optimal. Always use images at least 600×315 pixels.
Why isn't my preview updating after I change my tags?
Social platforms cache preview data. After updating your OG tags, you may need to clear the cache. Use Facebook's Sharing Debugger, Twitter's Card Validator, or LinkedIn's Post Inspector to force a refresh.
Do I need both OG tags and Twitter cards?
Not necessarily. Twitter will fall back to OG tags if Twitter-specific tags are missing. However, adding twitter:card="summary_large_image" ensures Twitter displays a large image preview.
How do I add OG tags to my website?
Add meta tags to the <head> section of your HTML. Most frameworks (Next.js, React, WordPress) have built-in ways to set these. Use the "Copy HTML Tags" button in this tool to get properly formatted code.
What is the og:type tag used for?
The og:type tag categorizes your content (website, article, product, profile, video). This helps social platforms display appropriate UI elements and can affect how your content is indexed and displayed.
Can I preview local images before uploading?
Yes! This tool lets you upload images locally to preview how they will look. The preview is client-side only - your images are not uploaded to any server. Remember to host your final image on a public URL before publishing.
Need OG Images at Scale?
Generate beautiful Open Graph images programmatically with our Screenshot API. Perfect for blogs, e-commerce, and dynamic content.
Automated Screenshots
Generate OG images from any URL or HTML template automatically
Fast & Reliable
Sub-second capture times with global CDN delivery
Any Framework
Works with Next.js, Nuxt, Rails, Laravel, and any stack