NAVANEM

Open Graph & Twitter · live preview

Open Graph Meta Generator

Generate Open Graph and Twitter Card meta tags and preview how your link looks when shared.

Meta tags
<!-- Primary -->
<title>My awesome page</title>
<meta name="description" content="A short, compelling description of the page." />

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://www.example.com" />
<meta property="og:title" content="My awesome page" />
<meta property="og:description" content="A short, compelling description of the page." />
<meta property="og:image" content="https://www.example.com/og.png" />
<meta property="og:site_name" content="Example" />
<meta property="og:locale" content="en_US" />

<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:url" content="https://www.example.com" />
<meta name="twitter:title" content="My awesome page" />
<meta name="twitter:description" content="A short, compelling description of the page." />
<meta name="twitter:image" content="https://www.example.com/og.png" />

Preview

www.example.com

My awesome page

A short, compelling description of the page.

About this tool

Generate Open Graph and Twitter Card meta tags so your pages preview cleanly when shared on social platforms and in chat apps. Fill in title, description, image and URL and copy the complete set of tags into your page head.

Good OG tags control the title, description and image that appear in link previews, which directly affects click-through. The tool builds standards-compliant markup in your browser.

Frequently asked questions

What image size should an OG image be?+

1200×630 pixels is the recommended size for a large summary card. Keep important content away from the edges and under ~5 MB so platforms render it reliably.

Do I need both Open Graph and Twitter tags?+

Open Graph is read by most platforms including Facebook, LinkedIn and many chat apps. Twitter/X also reads its own twitter:card tags, so including both gives the best coverage.

Why does my preview not update after I change tags?+

Platforms cache previews. Use the platform debugger (for example the sharing debugger or card validator) to re-scrape the URL and refresh the cached preview.