Home Tools SEOOpen Graph generator

Open Graph generator with link preview

Fill in the title, description, URL and image — the tool builds Open Graph and Twitter Cards meta tags, shows how the link will look in a feed and in a messenger, and catches common mistakes: a relative og:image, SVG, a tiny image, a malformed og:locale.

● Free, no sign-upUpdated: September 16, 2026

—

Title—

Description—

Image—

Issues—

Large card in a feed

Compact card

Messenger preview

Mockups are approximate: every network and messenger trims text and crops images its own way, and caches the card after the link is first shared.

Tags for <head>

Everything is calculated in your browser — nothing you enter is sent anywhere.

How to use it

Fill in the fieldsWrite the title and description for a person scrolling a feed, not for a search engine: they can differ from the page title and meta description.
Check the imageEnter the full og:image URL and press “Check image”, or pick a file — the tool shows its size and aspect ratio.
Look at the previewsThe large card, compact card and messenger preview show where the text gets cut and how the image is cropped.
Copy the tagsPaste the block into <head>. If the link has been shared before, refresh the cache in the network’s debugger — otherwise it keeps showing the old card.

What Open Graph is and which tags are required

Open Graph is a markup protocol created by Facebook: meta tags in <head> tell services which title, description and image to show when someone shares a link. Today almost everything reads it: social networks, messengers, team chats and search engines.

The ogp.me specification lists four required properties: og:title, og:type, og:image and og:url. In practice you add og:description, og:site_name, og:locale and og:image:alt.

X (Twitter) has its own twitter:* tags, but falls back to Open Graph when they are missing. So it is enough to set twitter:card — the card type — and optionally twitter:site with your account.

og:image size: 1200 × 630 and a 1.91:1 ratio

For a large card, use a 1200 × 630 px image — Meta’s recommendation for link shares, and a ratio (1.91:1) most services display without cropping. The rules the tool checks:

A full URL. og:image must start with https:// and the domain — networks do not resolve relative paths like /og.png.
A raster format. PNG, JPEG, WebP or GIF. SVG is not supported.
At least 200 × 200 px, or there is no large card; X accepts images up to 4096 px on a side and under 5 MB.
The compact card (summary) shows the image as a square — use a square image of at least 144 × 144 px.
Keep the important part centered. Feeds and messengers crop the edges differently; do not put text right against the edge.

Adding og:image:width and og:image:height lets a card render immediately, before the image is downloaded. The tool adds them once the size has been checked.

Common mistakes and the preview cache

og:locale with a hyphen. The format is language and territory with an underscore: en_US, en_GB. That differs from hreflang, which uses a hyphen (see the hreflang generator).
One image for the whole site. Cards for different pages become indistinguishable. Make a dedicated image at least for key pages.
Tags injected with JavaScript. Most social crawlers do not run scripts: the tags must be in the HTML the server returns.
The old card after an edit. Networks cache previews. After changing the tags, refresh the data in the network’s debugger or add a version parameter to the image URL (og.png?v=2).
An image behind a login or blocked for crawlers. Make sure the file opens without cookies and is not disallowed in robots.txt — the robots.txt tester can check that.

Sources

The Open Graph protocol — ogp.me.
X Developer Platform. Cards markup reference; Summary Card with Large Image — developer.x.com.
Meta for Developers. Sharing best practices for websites — developers.facebook.com.

FAQ

Which Open Graph tags are required?

Per the ogp.me specification: og:title, og:type, og:image and og:url. In practice you also add og:description, og:site_name, og:locale and og:image:alt, plus twitter:card for X.

What size should og:image be?

1200 × 630 px, a 1.91:1 ratio. With a side under 200 px there is no large card. The compact summary card needs a square image.

Do I need separate Twitter (X) tags?

No. X reads og:title, og:description and og:image when twitter:title, twitter:description and twitter:image are missing. Adding twitter:card is enough.

Why does a network still show the old image?

Previews are cached. After changing the tags, refresh the card in the network’s debugger or change the image URL, for example by adding ?v=2.

Can I use SVG for og:image?

No, SVG is not supported. Use PNG, JPEG or WebP.

How do I format og:locale?

Language and territory with an underscore: en_US, en_GB, pt_BR. The hyphenated form (en-US) is for hreflang and the lang attribute, not Open Graph.

Is my data sent to a server?

No. The tags are built in your browser. An image URL is loaded by your browser straight from your site, and only when you press the button; a picked file stays on your computer.