Open Graph Preview

Preview how your links will look when shared on social media.

Ad
Enter Your OG Tag Values
Live Previews
No image set
example.com
Page Title
Page description will appear here.
No image set
Page Title
Page description will appear here.
example.com
No image set
Page Title
example.com
Example.com
Page Title
Page description will appear here.
No image set
Generated Meta Tags
Ctrl+Enter<!-- Open Graph Meta Tags --> <meta property="og:title" content="" /> <meta property="og:description" content="" /> <meta property="og:image" content="" /> <meta property="og:url" content="" /> <meta property="og:type" content="website" /> <meta property="og:site_name" content="" /> <!-- Twitter Card Meta Tags --> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="" /> <meta name="twitter:description" content="" /> <meta name="twitter:image" content="" />
Ad

Frequently Asked Questions

What are Open Graph tags? +
Open Graph tags are HTML meta tags that control how your website content appears when shared on social media platforms like Facebook, Twitter, LinkedIn, and Discord. They define the title, description, image, and URL shown in link previews.
Why can't this tool fetch OG tags from a URL? +
Browser security restrictions (CORS) prevent client-side JavaScript from fetching content from other websites. This tool lets you manually enter your OG tag values and instantly preview how they will appear across platforms.
What image size should I use for Open Graph? +
Facebook recommends 1200x630 pixels for og:image. Twitter recommends 1200x628 for summary_large_image cards. Using 1200x630 works well across most platforms.
Do I need different tags for Twitter and Facebook? +
Twitter has its own meta tags (twitter:card, twitter:title, etc.) but will fall back to Open Graph tags if Twitter-specific tags are not present. For best results, include both OG tags and Twitter card tags.
How do I add Open Graph tags to my website? +
Add the meta tags inside the <head> section of your HTML page. This tool generates the exact HTML code you need — just copy it and paste it into your page's head section.
Ad