What are Open Graph tags?

Open Graph (og:) meta tags tell social platforms how to display a shared link — the title, description and preview image shown in the link card. They were created by Facebook and are now read by LinkedIn, Slack, WhatsApp, iMessage and many others.

Do I still need Twitter Card tags?

X/Twitter reads Open Graph tags as a fallback, but adding explicit twitter:card, twitter:title, twitter:description and twitter:image tags gives you precise control, including whether to show a large image. This tool outputs both sets.

What image size should I use?

For a large card, use an image at least 1200×630 pixels (a 1.91:1 ratio). Smaller images may be cropped or shown as a small thumbnail.

Is anything uploaded?

No. The tags are generated from your inputs in the browser; nothing is sent anywhere.

What is the Open Graph and Twitter Card Generator?

Generate Open Graph and Twitter Card meta tags so your links show a rich preview on Facebook, LinkedIn, Slack, X and iMessage. Fill in a few fields and copy ready-to-paste HTML — everything runs in your browser. It runs free in your browser on Gera Tools, with nothing uploaded.

Open Graph and Twitter Card Generator

Name: Open Graph and Twitter Card Generator
Creator: Gera Tools
License: https://creativecommons.org/licenses/by/4.0/

Get one useful tool a week

Like this tool? Enter your email and we'll send you one genuinely useful Gera tool a week — plus a link to come back to this one. No spam, one-click unsubscribe any time.

Generate Open Graph and Twitter Card tags

When someone shares your link, platforms look for Open Graph and Twitter Card meta tags to build the preview card — the title, description and image. Miss them and your link shows up bare. This generator produces both sets of tags from a few fields.

What it outputs

<meta property="og:title" content="…" />
<meta property="og:description" content="…" />
<meta property="og:type" content="website" />
<meta property="og:url" content="…" />
<meta property="og:image" content="…" />
<meta property="og:site_name" content="…" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="…" />
<meta name="twitter:description" content="…" />
<meta name="twitter:image" content="…" />

Special characters in your text are safely escaped, and empty optional fields are omitted so the output stays clean.

Field guide

Title / description — what shows in the card; keep the title short and the description a sentence or two.
Page URL — the canonical URL of the page being shared.
Image URL — an absolute URL to a preview image, ideally 1200×630px for a large card.
og:type — website for most pages, article for blog posts, product for shop items.
Twitter card — summary_large_image for a big image, summary for a small thumbnail.

Where to put them

Paste the generated tags inside the <head> of your HTML, then test with a platform’s link-preview debugger to confirm the card renders.

Everything is generated in your browser — nothing is uploaded.