Open Graph Tag Generator
Free online open graph tag generator. No sign-up, no installation. Runs entirely in your browser.
Configure Your OG Tags
Twitter Card Settings
Preview
Facebook Share Preview
Twitter Card Preview
Generated HTML
Recommended Image Sizes
What Are Open Graph Tags?
Open Graph (OG) tags are HTML meta tags that control how your content appears when shared on social media platforms like Facebook, Twitter, LinkedIn, and Pinterest. They allow you to specify exactly what image, title, and description should show up in the share preview, rather than letting the platform auto-detect it.
Without proper OG tags, social media platforms may display incorrect or low-quality previews of your content. By implementing OG tags, you ensure your shares look professional and drive more clicks.
How to Use the Generator
- Fill in the form with your page's title, description, image URL, and site information
- Configure Twitter settings if you want to optimize for Twitter specifically
- Check the preview to see how your content will look on Facebook and Twitter
- Copy the generated HTML code and paste it into the <head> section of your webpage
- Verify with debuggers using Facebook's Open Graph Debugger and Twitter's Card Validator
Common Use Cases
- Blog Articles: Ensure your blog posts have attractive preview cards with relevant images and descriptions
- E-commerce Products: Showcase product images and prices in social media shares
- News Sites: Display featured images and headlines for breaking news stories
- Video Platforms: Use og:type="video" to specify video content for platforms like Facebook
- Event Pages: Share event details with og:type="event" including dates and locations
- Podcasts: Share episode information with custom images and descriptions
Frequently Asked Questions
What's the difference between Open Graph and Twitter Cards?
Open Graph (og:) tags are the universal standard supported by most platforms like Facebook, LinkedIn, and Pinterest. Twitter Cards (twitter:) tags are Twitter's proprietary format, though Twitter also respects OG tags. Twitter Cards give you more control over how content appears on Twitter specifically.
Where should I put these meta tags?
All meta tags should be placed in the <head> section of your HTML document, before the closing </head> tag. They won't be visible on the page itself, but social media crawlers will read them when someone shares your content.
How long does it take for social media to update previews?
Most social media platforms cache shared content. It can take anywhere from a few minutes to 24 hours for updated OG tags to take effect. You can use Facebook's Open Graph Debugger to force refresh the cache.
What image format works best for OG tags?
PNG and JPG formats work well for OG images. JPG files are typically smaller and load faster. Ensure your image is at least 1200×630 pixels and not larger than 8 MB to avoid display issues.
Can I use different OG tags for different pages?
Yes! Each page on your website should have its own OG tags that accurately describe that specific page's content. This ensures each page displays optimally when shared.
Do OG tags affect my SEO?
OG tags don't directly impact search engine rankings, but they improve click-through rates from social media by making your content more visually appealing in shares, which can indirectly help with traffic and engagement metrics.