Home/Developer Tools/Open Graph Meta Tag Generator
🔗

Open Graph Meta Tag Generator

Build the title, description and image tags social platforms read when a link is shared

Free · No sign-up required

Why a shared link looks the way it does

Paste a link into Slack, WhatsApp, X or Facebook and a card appears with a title, a short blurb and an image — that card is not generated from the visible page content. It is built from a small set of <meta> tags in the page's <head> called Open Graph tags, a convention originally introduced by Facebook and now read by essentially every platform that unfurls links. If those tags are missing, wrong, or point at an image that no longer exists, the preview is blank, generic, or embarrassingly outdated — and it is worth checking rather than assuming it is fine.

The tags that actually matter

TagWhat it controls
og:titleThe bold headline shown in the preview card
og:descriptionThe one or two lines of body text under the title
og:imageThe preview thumbnail — the single biggest factor in whether people click
og:urlThe canonical URL the platform associates the share with
og:site_nameThe site name shown in small text, often near the URL

Fill these in and this tool generates the exact HTML block to paste into your page's <head>.

The image size mistake that ruins previews

The single most common reason a preview looks bad is an og:image that is the wrong shape. Platforms expect roughly a 1.91:1 ratio — 1200×630 pixels is the widely used safe size — and a square or portrait image gets awkwardly cropped or centred with ugly padding by whatever algorithm the platform uses to fit it into a fixed frame. Always use an absolute URL for the image, not a relative path; a relative path resolves differently — or not at all — depending on how the crawler fetches your page.

Why the preview does not update when you change the tags

Platforms cache the preview the first time a link is shared, sometimes for a long time, so editing your tags and re-sharing the same URL often shows the old cached card rather than the new one. Most major platforms provide a debugging tool that also forces a cache refresh — Facebook's Sharing Debugger and X's Card Validator are the two most commonly needed. Without using one of those, you may be looking at a stale preview and wrongly concluding your tags did not work.

Frequently asked questions

Why doesn't my link show any preview at all?

Usually a missing og:image tag, an image URL the platform's crawler can't reach (blocked by robots.txt, or requiring a login), or a relative rather than absolute image URL.

I updated the tags but the old preview still shows.

Almost always caching. Use the platform's own debugging/refresh tool — Facebook Sharing Debugger, X Card Validator — to force it to re-fetch your page.

Do I need different tags for X (Twitter) versus Facebook?

Twitter cards can use their own twitter:title / twitter:image tags, but they fall back to the Open Graph tags this tool generates if Twitter-specific ones aren't present — so Open Graph alone covers most platforms.

What size should og:image be?

Roughly 1200×630 pixels (a 1.91:1 ratio) is the safest, most widely supported size across platforms.

Does adding these tags help SEO?

Not directly as a ranking factor, but a good preview meaningfully increases click-through when your link is shared — which is a real, measurable benefit even if it isn't a direct ranking signal.

Is my content sent anywhere?

No. This only generates HTML text in your browser for you to copy into your own page.

More tools in this category

📋
JSON Tools
View tree, format, validate and minify JSON
📄
YAML Beautifier & Validator
Format YAML and find the line that breaks it
📋
XML Tools
Beautify, validate and convert XML to JSON
🗃
SQL Formatter & Minifier
Lay out SQL clause by clause, or collapse it to one line
📝
Markdown Tools
Preview Markdown, convert to HTML and generate tables
🔑
JWT Encoder & Decoder
Decode a JWT's header and payload, or sign one with HS256