Free Open Graph Preview Tool
Preview how your links will look when shared on Facebook, Twitter, LinkedIn, WhatsApp, and Discord. Generate pixel-perfect OG and Twitter meta tags instantly.
Open Graph Tags
Twitter Tags
Generated Meta Tags
Your Title Here
Your description will appear here.
Your Title Here
Your description will appear here.
Your Title Here
Your description will appear here.
Your Title Here
Your description will appear here. The description is usually pulled from the meta description but can fallback to og:description in some cases.
What Are Open Graph Tags?
Open Graph (OG) tags are specific meta tags placed in the <head> section of your website's HTML. Originally created by Facebook in 2010 to promote integration between Facebook and other websites, they have since become the industry standard for controlling how a webpage looks when it's shared on social media, messaging apps, and community platforms.
Without Open Graph tags, platforms are forced to guess which text and images on your page represent the core content. They often pick a random paragraph for the description or an irrelevant image (like a logo or banner ad) as the thumbnail. By explicitly defining the og:title, og:description, and og:image, you take control of your content's first impression.
Why Do You Need an Open Graph Preview Tool?
If you're publishing a blog post, launching a product, or sharing a portfolio, the way your link appears in someone's feed can drastically impact the Click-Through Rate (CTR). A well-optimized link with a compelling title, a clear description, and an eye-catching thumbnail will generate significantly more traffic than a broken link preview with missing images.
Our free Open Graph Preview Tool allows you to see exactly how your URL will look across various platforms before you publish it. It takes the guesswork out of social media optimization, letting you tweak character counts and test image cropping in real-time.
Essential Meta Tags Explained
- og:title: The main heading of your link preview. Keep this concise and engaging. It acts similarly to an SEO title tag. (Recommended: 40-60 characters)
- og:description: A brief summary of what the user will find when they click the link. It should encourage clicks without being clickbait. (Recommended: 55-200 characters)
- og:image: The most crucial element for visual platforms. This is the thumbnail image displayed alongside your link. Ensure it's high quality and relevant to the content.
- og:url: The canonical URL of the page. This consolidates metrics if there are multiple ways to access the same content.
- twitter:card: Specific to Twitter. The
summary_large_imagevalue displays a large banner image, whilesummaryshows a small square image next to the text.
Platform-Specific Image Sizes & Best Practices
Different platforms have different requirements, but fortunately, you can usually satisfy most of them with a single, well-proportioned image.
- Facebook & LinkedIn: Recommend 1200 x 630 pixels (1.91:1 ratio). Keep the file size under 8MB.
- Twitter (Large Image Card): Recommends 1200 x 628 pixels, making the standard 1200x630 perfectly acceptable.
- Twitter (Summary Card): Uses a 1:1 square ratio (e.g., 120x120 pixels minimum, though higher resolution is better).
- WhatsApp: Often uses smaller, compressed thumbnails. While 1200x630 works, keeping important visual elements centered ensures they aren't cropped out.
- Discord: Embeds adapt dynamically, but a standard 1200x630 image will look great and scale properly within chat clients.
Common Open Graph Mistakes to Avoid
Even seasoned developers can make mistakes when implementing OG tags. Here are a few to watch out for:
1. Using Relative URLs for Images: Open Graph images must use absolute URLs (e.g., https://yoursite.com/image.jpg). Using relative paths (like /images/pic.jpg) will break the image preview on almost all platforms.
2. Ignoring Character Limits: If your title or description is too long, platforms will aggressively truncate it with an ellipsis (...). This can cut off critical information or call-to-actions.
3. Not Clearing the Cache: If you update your OG tags but Facebook or Twitter still shows the old preview, it's because they have cached the old data. You need to use their respective debugging tools (like the Facebook Sharing Debugger) to scrape the new tags.
How to Add Open Graph Tags to Your Site
Once you've used our tool to generate the perfect tags, click the "Copy All Tags" button. Paste the generated HTML code directly into the <head> section of your website. If you are using a CMS like WordPress, many SEO plugins (such as Yoast or RankMath) allow you to set these tags via their user interface.
Frequently Asked Questions
What are Open Graph tags?
Open Graph tags are snippets of code that control how URLs are displayed when shared on social media platforms like Facebook, LinkedIn, Discord, and WhatsApp. They help you specify the title, description, and preview image for your link.
What is the best image size for Open Graph?
The recommended Open Graph image size is 1200 x 630 pixels. This aspect ratio (1.91:1) works best across most platforms, including Facebook, Twitter (Large Image Card), and LinkedIn.
Are Twitter Cards different from Open Graph?
Yes, Twitter uses its own meta tags (twitter:card, twitter:title, etc.), but if Twitter tags are missing, it will usually fall back to Open Graph tags. It's best practice to include both for optimal control over your link previews.
Why doesn't my image show up on Facebook?
This can happen if the image URL is broken, the image is too large (over 8MB), or Facebook hasn't scraped your site yet. You can use the Facebook Sharing Debugger to force Facebook to scrape your URL and update its cache.
How long should my Open Graph title and description be?
Aim for an Open Graph title between 40-60 characters and a description between 55-200 characters. Keeping them concise ensures they won't be truncated on mobile devices or smaller screens.