Open Graph Generator
Build og: meta tags for rich, controlled link previews on social platforms.
How to Use
Fill in your page's title, description, preview image, URL, type, and site name. The generated og: meta tags update live below, along with an approximate preview of how the link card will look when shared. Paste the tags into your page's <head> section. The Image URL field must point to a fully absolute, publicly reachable address, platforms fetch this image directly from their own servers when generating a preview, so a relative path or a locally-hosted image that requires login will simply fail to load.
What the Open Graph Protocol Actually Is
Open Graph is a set of meta tag conventions originally introduced by Facebook in 2010 to standardize how any web page describes itself when shared as a link, and it has since been widely adopted well beyond Facebook, LinkedIn, Slack, Discord, WhatsApp, and many other platforms all read the same og: tags to build their link preview cards. Before this standard existed, each platform guessed independently at a title, description, and image by scraping the page's regular HTML, often picking the wrong element or an unrelated image. Open Graph tags exist purely to hand that platform an explicit, structured answer instead of leaving it to guesswork, which is why the same handful of tags now works consistently across a dozen different sharing surfaces.
Why the Live Preview Card Matters
The share-card preview above this tool's output box exists because Open Graph tags are invisible during normal browsing, you only see their effect once a link is actually pasted into a chat app or social post, by which point a mistake is already public and often screenshot-cached elsewhere. Checking title length, description length, and image framing against the live preview before publishing catches the two most common failures ahead of time: a title that's fine on the page itself but reads as awkwardly truncated inside a narrow chat-app card, and an image that looks fine as a square thumbnail but crops badly once forced into the roughly 1.91:1 landscape ratio most platforms use.
Common Open Graph Mistakes
The most frequent mistake is leaving og:image pointing at a small icon or logo instead of a proper 1200x630 preview image, producing a cramped, low-quality thumbnail once a platform scales it up. A second is forgetting og:url entirely, without it, some platforms fall back to whatever URL was actually pasted, which can be a redirect or a parameter-heavy tracking link rather than the clean canonical address you'd want engagement data attributed to. A third is copying the exact same title, description, and image across every page on a site, this technically satisfies the protocol but produces identical, unhelpful-looking share cards for entirely different pages, undermining the whole point of writing per-page tags in the first place.
Testing Before You Publish
Since platforms cache a link's Open Graph data the first time it's shared, testing changes after the fact means dealing with a stale cached preview until you manually force a re-scrape. Facebook's Sharing Debugger, LinkedIn's Post Inspector, and similar tools from other platforms let you paste a URL and force an immediate re-fetch, which is the standard way to confirm new or corrected tags actually took effect before sharing the link for real. Running a page through this generator and checking the live preview here first, before the page goes live and gets shared anywhere, avoids needing that re-scrape step at all for a brand-new page.
Open Graph Tags and SEO: A Common Misconception
Open Graph tags have no direct effect on search engine rankings, Google does not use og:title or og:description as ranking signals, and it uses your regular title tag and meta description for its own search snippets, not these. Where Open Graph does matter for organic growth is indirectly: a page that looks polished and trustworthy when shared, with a clear title, an accurate description, and a proper preview image, earns more clicks and shares on social platforms, which drives more direct traffic and more inbound links over time. Treat Open Graph tags as a conversion and distribution tool sitting alongside your SEO work, not a replacement or substitute for it.
Frequently Asked Questions
What image size should I use for og:image?
1200 x 630 pixels is the widely recommended size, it matches the roughly 1.91:1 aspect ratio most platforms crop link preview images to, so your image displays fully without awkward cropping on Facebook, LinkedIn, and similar sites.
Why doesn't my updated preview show up when I share a link again?
Most platforms cache a link's preview the first time it's shared and don't re-check it automatically. Use each platform's own debugging tool (like Facebook's Sharing Debugger) to force it to re-scrape your updated Open Graph tags.
Do I still need separate Twitter Card tags if I already have Open Graph tags?
It's recommended. X (formerly Twitter) can fall back to some og: tags if no twitter: tags are present, but its own card format supports options Open Graph doesn't, like choosing between a small summary card and a large image card. For full control over how a link looks specifically on X, add dedicated Twitter Card tags alongside your Open Graph tags rather than relying on the fallback.
What happens if I don't add any Open Graph tags at all?
Most platforms will still generate some kind of preview by guessing from your page's regular title tag, meta description, and the first usable image they find in your HTML. The result is unpredictable and often picks the wrong image or an oddly truncated title, Open Graph tags exist specifically so you control that outcome instead of leaving it to each platform's guesswork.
Should og:url always match the exact page being shared?
Yes, og:url should be the canonical, final URL of the page itself, not a redirect or a URL with tracking parameters. This matters because platforms use it to identify and cache the shared object, if og:url points somewhere else, engagement counts (likes, shares) can end up attributed to the wrong URL, or a link's preview can fail to update correctly.
How is og:type different from a regular HTML page type?
og:type tells the platform what kind of object the page represents in Open Graph's own vocabulary, website, article, product, profile, and so on, and some platforms adjust how they render the preview card based on it, for example showing an author and publish date for article. It has no relationship to your page's actual HTML document type or content-type header, it's purely a semantic hint used only by the Open Graph protocol.