Open Graph Previewer
Preview how your URL will look when shared on Facebook, Twitter, and LinkedIn. Enter your Open Graph meta tag values below to see a live card mockup. All processing happens in your browser — no data is sent to any server.
What Are Open Graph Tags?
Open Graph (OG) tags are meta tags added to the HTML head of a web page that control how the page appears when shared on social media platforms like Facebook, Twitter, LinkedIn, and Slack. These tags specify the title, description, image, and URL that should be displayed in the share card. Without properly configured OG tags, social platforms will attempt to scrape your page and may display incorrect or unattractive previews, leading to lower click-through rates.
The four most important Open Graph tags are og:title, og:description, og:image, and og:url. Getting these right ensures your content looks professional and compelling when shared, which directly impacts social media engagement and traffic.
Essential Open Graph Tags
- og:title — The title displayed in the share card. Keep it under 60 characters for best results.
- og:description — A brief summary of the page. Keep it under 155 characters to avoid truncation.
- og:image — The image URL displayed in the card. Recommended size: 1200x630 pixels for Facebook, 1200x600 for Twitter.
- og:url — The canonical URL of the page being shared.
Best Practices for Social Share Cards
Use high-quality images that are at least 1200 pixels wide. Facebook recommends 1200x630 pixels for the best display across devices. Twitter cards work best with 1200x600 pixel images. Write compelling titles that create curiosity or clearly communicate value. Keep descriptions concise and include a call to action or key benefit. Always test your OG tags before publishing using this previewer or the official Facebook Sharing Debugger.
Example
Blog Post OG Tags
- og:title: "10 Tips for Better Productivity in 2025"
- og:description: "Discover science-backed productivity techniques that can help you get more done in less time."
- og:image: "https://example.com/images/productivity-tips.jpg"
- og:url: "https://example.com/productivity-tips"
Privacy Note
This tool generates previews entirely in your browser. No data is sent to any server. The image URL you enter is loaded directly in your browser to display the preview, but no information about your usage is tracked or stored.