Open Graph meta tag generator

Fill in your title, description and image. See a live preview of the share card and copy the og: and twitter: tags.

1200 × 630Add an image URL

example.com

Acme: invoices your clients actually pay on time

Send invoices, get reminders out automatically and see who owes what. Free for your first 10 clients.

Generic preview. Each app crops and trims a little differently.

Title (og:title)

Description (og:description)

Page URL (og:url)

Image URL (og:image)

A full https:// URL. 1200×630 PNG or JPG is the safe default.

Image width (px)

Image height (px)

Image alt text

Site name (og:site_name)

Locale (og:locale)

Type (og:type)

X card (twitter:card)

X account for the site

X account of the author

Also write twitter:title, description and imageUsually unnecessary: X falls back to the og: tags when these are missing.

Runs in your browser. The image is loaded only for the preview.

Paste into <head>

<!-- Open Graph -->
<meta property="og:type" content="website" />
<meta property="og:title" content="Acme: invoices your clients actually pay on time" />
<meta property="og:description" content="Send invoices, get reminders out automatically and see who owes what. Free for your first 10 clients." />
<meta property="og:url" content="https://example.com/" />
<meta property="og:site_name" content="Acme" />
<meta property="og:locale" content="en_US" />

<!-- Twitter / X -->
<meta name="twitter:card" content="summary_large_image" />

WarningNo image. Without og:image most apps show a small text-only card or none at all.

What Open Graph tags do

When someone pastes your link into a social app, a chat or a messaging app, the app fetches the page and looks for Open Graph tags: og:title, og:description, og:image and og:url. They decide the title, text and picture on the preview card. The protocol started at Facebook and is now read by most apps that build link previews, including LinkedIn, Slack, Discord and iMessage. X reads them too, plus its own twitter: tags.

The tags that matter

og:title: the bold line. It can differ from your title tag; write it for someone scrolling a feed, not for a search query.
og:description: one or two sentences. Many apps show only the first line, or none.
og:image: the most important one. A full https:// URL to a public image.
og:url: the canonical URL, so shares of different versions of the link count as one.
twitter:card: summary_large_image for a wide image card, summary for a small square thumbnail.

Note the attribute names: Open Graph tags use property="og:…", and X card tags use name="twitter:…". The generator writes both correctly.

Image size guidance

Use 1200×630 pixels, a ratio of about 1.91:1. That’s Facebook’s recommended size, and it works on LinkedIn, Slack and X’s large card (2:1) with little cropping. Below 600×315, Facebook still shows the image, but much smaller. X accepts JPG, PNG, WEBP and GIF under 5 MB for cards.

Keep text and logos away from the edges. Apps crop slightly differently, and some round the corners.
Make any text large. On phones the whole card is only a few hundred pixels wide.
Set og:image:width and og:image:height so apps can lay out the card before the image loads.
Add og:image:alt for people using screen readers.

The preview above is generic: it shows the parts every app uses, not any one app’s exact design. Paste an image URL and we’ll load it in your browser and check its real dimensions against the tags.

After you ship

Apps cache previews. After changing tags, re-scrape the URL in the platform’s debugging tool, then share it again. To see which og: tags a live page is serving right now, run it through the meta tag checker.

Questions

What size should an Open Graph image be?

1200×630 pixels (about 1.91:1) is the safe default. Facebook recommends at least 1200×630 for sharp display and 600×315 as the minimum for the large format. X's large card uses a 2:1 ratio with a minimum of 300×157 and a 5 MB limit, so a 1200×630 image works there with a slight crop.

Do I need both og: and twitter: tags?

You need og: tags plus twitter:card. X falls back to og:title, og:description and og:image when the twitter: versions are missing, so duplicating them is optional. Add twitter:title and the others only if you want different text on X.

Why isn't my new image showing when I share the link?

Apps cache previews, often for days. Check that og:image is a full https:// URL that loads without a login, then ask the platform to re-scrape: Facebook's Sharing Debugger and LinkedIn's Post Inspector both do this. Changing the image file name also forces a fresh fetch.

Do Open Graph tags help SEO?

Not for Google rankings. Google uses the title tag and meta description for search results. Open Graph tags control how your link looks when it's shared on social apps, chat and messaging, which affects whether people click it.

Free launch

Launching something? Get a page that ranks.

Launch free on LaunchRanked: a permanent, SEO-ready product page, a weekly leaderboard slot and a followed link after human review. No badge required.

Launch free See Autopilot

Related free tools

See all free tools