Open Graph Preview
Preview how your links will appear on Facebook, Twitter/X, LinkedIn, Discord, Slack, and iMessage. Generate meta tags, validate properties - all running privately in your browser.
Import from URL
Note: Importing may be limited by browser CORS policies. If it fails, you can manually enter the tags below or try using a CORS proxy.
Open Graph Tags
Twitter Card Tags
Generated Meta Tags
Copy these tags and paste them into the <head> section of your HTML.
Tag Validation
Checks your OG tags against best practices and platform requirements.
- Fill in your OG tags in the Editor tab, then check validation.
About Open Graph Tags
Open Graph (OG) tags are snippets of HTML meta tags that control how your web pages appear when shared on social media platforms. When someone shares a link to your site, these tags determine the title, description, image, and other information displayed in the preview card.
Why Open Graph Tags Matter
Without proper OG tags, social platforms will try to guess your content, often resulting in poor or missing previews. Well-crafted OG tags can significantly increase click-through rates by making your shared links more visually appealing and informative.
Platform-Specific Behavior
- Facebook - Uses og: tags natively. Caches aggressively; use the Sharing Debugger to refresh.
- Twitter/X - Prefers twitter: tags but falls back to og: tags. Supports card types for different layouts.
- LinkedIn - Uses og: tags. The Post Inspector tool can refresh cached previews.
- Discord - Uses og: tags and renders them as rich embeds in chat.
- Slack - Uses og: tags and unfurls links with image, title, and description.
- iMessage/WhatsApp - Uses og: tags for link previews in conversations.
Best Practices
- Always include the four required tags:
og:title,og:type,og:image,og:url - Use images at least 1200x630 pixels for best results across all platforms
- Keep titles under 60 characters and descriptions under 155 characters
- Use absolute URLs for images and canonical URLs
- Add Twitter-specific tags when you want different content on Twitter
Hacker News Discussions
- Show HN: Ogmeta – An open-source extension to preview webpage's og meta tags 6 points · 0 comments
- Meta Gives Thousands of Staff Subpar Reviews 43 points · 13 comments
- Show HN: PhrasePump: Learn Languages by Listening to Tatoeba Sentences 11 points · 5 comments
Source: Hacker News
Research Methodology
This og preview tool was built after analyzing search patterns, user requirements, and existing solutions. We tested across Chrome, Firefox, Safari, and Edge. All processing runs client-side with zero data transmitted to external servers. Last reviewed March 19, 2026.
Performance Comparison
Benchmark: processing speed relative to alternatives. Higher is better.
PageSpeed Performance
Measured via Google Lighthouse. Single HTML file with zero external JS dependencies ensures fast load times.
Live Stats
Community Questions
- How to preview Open Graph tags before sharing? 7 answers · tagged: opengraph, preview, social-media
- Why are my Open Graph images not showing? 13 answers · tagged: opengraph, images, debugging
- Open Graph image size requirements? 10 answers · tagged: opengraph, images, social-media
How This Tool Works
The Open Graph Preview runs entirely in your browser using JavaScript. No data is uploaded to any server, which means your information stays private and the tool works even without an internet connection after the initial page load.
Enter your input, adjust any available options, and the tool processes everything locally to produce the result. The output can typically be copied to your clipboard or downloaded as a file for use in your projects.
There are no usage limits, no accounts required, and no tracking. You can use the tool as many times as you need, making it ideal for both quick one-off tasks and repeated daily workflows.
Features and Options
The interface is designed for simplicity and speed. Core functionality is immediately accessible, while advanced options are available for users who need more control. Sensible defaults mean you can get a useful result without changing any settings.
Output options include clipboard copy and file download in standard formats. The tool generates clean, well-formatted output that is ready to use in your workflow without additional processing or cleanup.
The responsive design works on screens of all sizes, from large desktop monitors to mobile phones. All interactive elements are accessible via keyboard and compatible with screen readers.
Real World Use Cases
Professionals use this tool to save time on tasks that would otherwise require specialized software, manual research, or writing custom scripts. Having instant access in the browser eliminates setup overhead and lets you focus on the work that matters.
Students and learners find it valuable for understanding concepts through hands-on experimentation. Interacting with a tool teaches more effectively than reading about the topic in isolation.
Teams share the tool URL with colleagues as a common reference point. Because it requires no installation or configuration, everyone can use it immediately regardless of their operating system or technical setup.
Frequently Asked Questions
Open Graph is a protocol created by Facebook that allows web pages to become rich objects in a social graph. By adding og: meta tags to your HTML <head>, you control how your content appears when shared on social media platforms like Facebook, Twitter, LinkedIn, and Discord.
The four required Open Graph tags are og:title, og:type, og:image, and og:url. Without these, social platforms may not display your content preview correctly or may generate their own preview from page content, which often looks incomplete or unappealing.
The recommended og:image size is 1200x630 pixels for most platforms. Facebook recommends at least 600x315 pixels, and images should be under 8MB in file size. Use a 1.91:1 aspect ratio for the best results across all platforms.
og:title is the Open Graph title used by Facebook, LinkedIn, and other platforms. twitter:title is specific to Twitter/X cards. If twitter:title is not set, Twitter will fall back to og:title. You can use different values to optimize the title for each platform's audience.
Keep og:description between 55 and 200 characters. Facebook typically displays about 65-100 characters, Twitter shows about 200, and LinkedIn shows around 100. Aim for 100-155 characters to work well across all platforms without being truncated.
Twitter Cards are Twitter's equivalent of Open Graph tags. The twitter:card meta tag specifies the card type: summary (small image), summary_large_image (large image), app, or player. Twitter falls back to OG tags when twitter-specific tags are not provided.
Each platform has its own rendering engine and display dimensions. Facebook, Twitter, LinkedIn, Discord, and Slack all crop images differently and truncate text at different lengths. This tool helps you preview all platforms simultaneously so you can optimize your tags for each one.
No. All previewing and meta tag generation happens entirely in your browser. No data is sent to any server. The only external request is if you use the "Import from URL" feature, which may be limited by browser CORS policies.