The Complete Open Graph Meta Tag Reference
Open Graph is the meta-tag protocol that controls how a link looks when it's shared. Get four tags right — og:title, og:description, og:image, and og:url — and every major platform can render a proper preview. This is the complete reference: what each tag does, the exact value to use, and the small mistakes that quietly break the card. New to the concept? Start with What Is Open Graph?.
The tags that matter
| Tag | Required | What it controls | Good value |
|---|---|---|---|
og:title | Yes | The bold headline of the card | Under ~60 characters |
og:description | Yes | The line beneath the title | 110–160 characters |
og:image | Yes | The preview image | Absolute HTTPS URL, 1200×630 |
og:url | Yes | The canonical URL of the page | The page's own clean URL |
og:type | Recommended | The kind of object | article for posts, website for the home page |
og:site_name | Recommended | Your publication's name | e.g. "My Blog" |
og:locale | Optional | Language/region | en_US |
Everything else (article:published_time, og:image:width, and so on) is a refinement. The seven above carry the card.
The four required tags, exactly
<meta property="og:title" content="The Complete Open Graph Meta Tag Reference" />
<meta property="og:description" content="Every Open Graph tag that matters, and the mistakes that break your preview." />
<meta property="og:image" content="https://yoursite.com/cards/og-reference.png" />
<meta property="og:url" content="https://yoursite.com/blog/open-graph-meta-tags" />
og:image is where previews live or die
The image is the part of the card people actually see, and it's where most broken previews originate.
The rules that matter: use an absolute https:// URL (relative paths and plain http are widely ignored), size it 1200×630 at a 1.91:1 ratio, and keep it a few hundred KB, not multiple megabytes. A single 1200×630 asset also satisfies X's summary_large_image card, so you don't need a second image.
For the full per-platform breakdown — minimums, file-size caps, and safe zones — see the 2026 social media image size cheat sheet.
Twitter / X: you need fewer tags than you think
X reads twitter: tags first and falls back to your Open Graph tags for anything missing. So in practice you add exactly one Twitter-specific tag:
<meta name="twitter:card" content="summary_large_image" />
That forces the full-width image layout; og:title, og:description, and og:image supply the rest. The full breakdown of card types is in Twitter Card Meta Tags: Summary vs Large Image.
How to add them
- Add the four required tags —
og:title,og:description,og:image,og:url, each specific to the page. - Use an absolute HTTPS image URL at 1200×630.
- Add
og:typeandog:site_name—articlefor posts, your publication name for the site. - Force the large card with
twitter:card=summary_large_image. - Validate the preview before you rely on it.
Don't want to hand-write them? The Open Graph meta tag generator builds the whole block from a short form — copy, paste into <head>, done.
The mistakes that quietly break previews
nameinstead ofpropertyonog:tags — the tag is ignored.- A relative or
http://og:image— most platforms drop it; you get a blank card. - Tags injected by JavaScript — many scrapers don't run JS, so server-render your tags into the initial HTML.
- A stale cache — platforms cache the first card they scrape. If you changed a tag and the old card persists, that's caching, not your markup; walk through Why Your Link Preview Is Broken.
Validate before you trust it
Once the tags are in, share the URL into a checker and confirm the card renders. The fastest way is the link preview checker — paste the URL and see the Twitter, LinkedIn, Facebook, and Slack renders side by side. For deeper debugging, each platform also has its own official debugger.
The takeaway
Four required tags, property not name, an absolute 1200×630 HTTPS image, and one twitter:card line — that's a complete, correct Open Graph setup. Generating that image per post, on brand and automatically, is what Social Card Studio does.
Frequently asked questions
What are the required Open Graph meta tags?
Four: og:title, og:description, og:image, and og:url. With those, every major platform — Facebook, LinkedIn, Slack, iMessage, and X (via fallback) — can render a complete link preview. og:type and og:site_name are strongly recommended but not strictly required.
Do Open Graph tags help SEO?
Not directly — Google doesn't rank pages higher for having og: tags. But a good card raises click-through and shares, which drive the traffic and engagement that do matter. Treat Open Graph as distribution, not ranking.
Where do Open Graph meta tags go?
Inside the <head> element of the page's HTML. Each tag uses the property attribute (property="og:title"), not name — a common copy-paste mistake that silently disables the tag.