Open Graph Generator
Generate Open Graph meta tags with a live preview of how the link will look on Facebook, LinkedIn, WhatsApp and Slack.
How your link looks when shared on Facebook, LinkedIn, WhatsApp, Slack and Discord - with a live card mockup.
Social share preview (Open Graph)
example.com
My page - Brand
A short, useful summary of what this page offers.
<meta property="og:type" content="website">
<meta property="og:title" content="My page - Brand">
<meta property="og:description" content="A short, useful summary of what this page offers.">
<meta property="og:url" content="https://example.com/page">
<meta property="og:site_name" content="Brand">
<meta property="og:locale" content="en_US">About the open graph generator
Open Graph decides what your link looks like when it is shared anywhere: Facebook, LinkedIn, WhatsApp, Slack, Discord and iMessage all read the same tags. Without them the platform guesses, usually badly.
og:image is the one that carries the click. 1200 by 630 pixels is the size that works across every platform without cropping.
How to use it
- 1Choose the type, usually website or article.
- 2Write a title and description shaped for sharing rather than for search.
- 3Set an absolute image URL at 1200 by 630.
- 4Add the site name and locale.
- 5Copy the HTML or the Next.js metadata.
Questions
What size should og:image be?
1200 by 630 pixels, a 1.91:1 ratio. That fits every major platform without cropping and stays sharp on high-density screens.
Why is my preview not updating after I changed the tags?
Platforms cache aggressively. Use Facebook's Sharing Debugger or LinkedIn's Post Inspector to force a re-scrape.
Must the image URL be absolute?
Yes. Relative paths do not work, because the crawler fetching your page has no page context to resolve them against.