Open Graph Preview
Preview how your website looks when shared on social media. Test OG tags for Facebook, Twitter/X, LinkedIn, Slack, and Discord.
Advertisement
Open Graph Tags
⚠og:image is recommended for rich social cards.
Live Previews
Google Search
Twitter / X
Slack
Discord
Generated Meta Tags
<meta property="og:title" content="My Awesome Website" /> <meta property="og:description" content="This is an example description for testing Open Graph tags. Preview how your website will appear on social media platforms." /> <meta property="og:url" content="https://example.com" /> <meta property="og:type" content="website" /> <meta property="og:site_name" content="example.com" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="My Awesome Website" /> <meta name="twitter:description" content="This is an example description for testing Open Graph tags. Preview how your website will appear on social media platforms." />
Advertisement
How to Use the Open Graph Preview Tool
The Open Graph Preview tool lets you see exactly how your website will appear when someone shares it on Facebook, Twitter/X, LinkedIn, Slack, or Discord. Simply enter your Open Graph tag values in the input fields and watch the live previews update in real-time. This is invaluable for web developers, marketers, and content creators who want their shared links to look polished and professional across every platform.
Start by entering your page title in the og:title field. Keep it under 60 characters for best results, as longer titles will be truncated on most platforms. The tool shows a character count and warns you when you exceed recommended limits. Next, add your og:description — aim for 120 to 160 characters to ensure the full text displays without being cut off. Add an image URL in the og:image field to see how your image renders across platforms. The recommended image size is 1200×630 pixels for landscape images (1.91:1 ratio).
The twitter:card selector lets you toggle between the two main Twitter card styles: summary_large_image (a full-width banner image) and summary (a compact layout with a small square thumbnail). You can see how each style looks in real-time by switching between them.
Once you are satisfied with your previews, scroll down to the Generated Meta Tags section. This gives you the exact HTML code to paste into your website's <head> section. Click the Copy button to grab all the tags at once. The tool only includes tags that have values, keeping your markup clean.
All processing happens entirely in your browser — no data is sent to any server. You can also share your configuration with teammates using the Share button, which encodes all your OG values into a URL that you can bookmark or send to others.
Frequently Asked Questions
What are Open Graph tags?
Open Graph (OG) tags are HTML meta tags placed in the <head> section of a webpage that control how your content appears when shared on social media platforms like Facebook, Twitter/X, LinkedIn, Slack, and Discord. They define the title, description, image, and URL that platforms display in link previews and social cards.
Which Open Graph tags are required?
The most essential tag is og:title, which provides the headline for your shared link. While technically only og:title is strictly required by the protocol, og:description, og:image, and og:url are strongly recommended for complete, rich social cards. Without og:image, most platforms will show a plain text link or a generic placeholder.
What are the ideal og:image dimensions?
The recommended og:image size is 1200 x 630 pixels with a 1.91:1 aspect ratio. This works well across Facebook, LinkedIn, and Twitter's summary_large_image card. For Twitter's summary card, a square 1:1 image (at least 144x144 px) is ideal. Keep image file size under 5 MB for reliable loading across all platforms.
What is the difference between twitter:card types?
Twitter supports two main card types: 'summary' shows a small square thumbnail on the left with the title and description on the right, while 'summary_large_image' displays a large image banner above the title and description. Most websites use summary_large_image for more visual impact in Twitter feeds.
How do I add Open Graph tags to my website?
Add <meta> tags inside the <head> section of your HTML. For example: <meta property="og:title" content="Your Title" />. In Next.js, use the metadata export in page.tsx. In WordPress, use an SEO plugin like Yoast. In static HTML, manually add the tags. Use this tool to generate the exact code you need and copy it directly.
Why does my link preview look different on each platform?
Each social platform renders Open Graph data differently. Facebook and LinkedIn show large landscape images with the title below. Twitter can show large or small images depending on the card type. Slack uses a left-border accent bar with inline content. Discord uses an embed-style card. This tool shows you exactly how each platform will render your tags so you can optimize for all of them.