Open Graph meta tags are the small block of HTML that controls how your page looks when someone shares it on Facebook, LinkedIn, Slack, Discord, iMessage, WhatsApp, and most other apps that unfurl links. Get them right and your link arrives as a polished card with a title, description, and image. Get them wrong and it shows up as a bare blue URL.

This is a practical reference: the core tags, what each one does, whether it is required, and the validation tools to check your work. Every snippet is copy-paste ready.

The minimum you need

If you only ship four tags, ship these. They cover the title, the description, the image, and the canonical URL that every major unfurler reads.

<meta property="og:title" content="Open Graph meta tags: the complete reference" />
<meta property="og:description" content="Every core og: and twitter: tag explained, with copy-paste HTML." />
<meta property="og:image" content="https://example.com/og/og-reference.png" />
<meta property="og:url" content="https://example.com/blog/og-meta-tags" />

Note the syntax: Open Graph tags use property="og:..." (not name="..."). They live inside the <head> of your HTML. The content attribute holds the value.

Core Open Graph tags, one by one

og:title — required

The headline of the card. Keep it under about 60 characters so it does not get truncated. This is usually your page title, but you can make it more shareable than the literal <title> tag.

<meta property="og:title" content="How we cut our build time in half" />

og:description — recommended

A short summary shown below the title. Aim for roughly 110-160 characters. Some platforms hide it on smaller cards, but it is worth setting because Slack, Discord, and others display it prominently.

<meta property="og:description" content="A walkthrough of the caching changes that took our CI from 14 to 7 minutes." />

og:image — required (in practice)

The single most important tag. Without an image, your link looks plain; with one, it gets a big visual card. Use an absolute URL (starting with https://), not a relative path. Recommend the standard 1200x630 size, keep the file under 5 MB, and use PNG or JPG.

<meta property="og:image" content="https://example.com/og/build-time.png" />

og:image:width and og:image:height — recommended

These tell scrapers the image dimensions before they download it, which makes the first unfurl render faster and more reliably. Set them to your actual export size.

<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

A related optional tag, og:image:alt, provides alternative text for accessibility:

<meta property="og:image:alt" content="A chart showing CI build time dropping from 14 to 7 minutes." />

og:url — recommended

The canonical URL for the content. When several URLs point to the same page (tracking params, trailing slashes), og:url tells platforms which one to treat as the source of truth, so shares and engagement consolidate on one link.

<meta property="og:url" content="https://example.com/blog/build-time" />

og:type — recommended

The kind of object the page represents. Most pages are website; articles and blog posts use article. Other values exist (video, music, profile) but those two cover nearly everything.

<meta property="og:type" content="article" />

og:site_name — optional

The name of your overall site, shown as a small label on some cards.

<meta property="og:site_name" content="Example Engineering Blog" />

Twitter / X card tags

X reads Open Graph tags as a fallback, so if you skip the Twitter-specific tags it will still use your og:title, og:description, and og:image. But adding the dedicated tags gives you control over the card type and lets you serve a tailored image.

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="How we cut our build time in half" />
<meta name="twitter:description" content="A walkthrough of the caching changes that took our CI from 14 to 7 minutes." />
<meta name="twitter:image" content="https://example.com/og/build-time.png" />

Two things to notice. Twitter tags use name="twitter:..." (not property=). And summary_large_image is the card type you almost always want, because it shows a big landscape image instead of a small thumbnail. X accepts large cards up to 1600x900 (1200x675 is also valid); your 1200x630 OG image works as the fallback if you do not make a separate one.

Required vs optional, at a glance

| Tag | Status | Notes | | --- | --- | --- | | og:title | Required | Headline; keep under ~60 chars | | og:image | Required in practice | Absolute URL, 1200x630, under 5 MB | | og:url | Recommended | Canonical link | | og:description | Recommended | ~110-160 chars | | og:type | Recommended | website or article | | og:image:width / height | Recommended | Faster, more reliable first unfurl | | og:site_name | Optional | Site label on the card | | og:image:alt | Optional | Accessibility | | twitter:card | Recommended for X | Use summary_large_image | | twitter:image | Optional | Falls back to og:image |

Common mistakes

Relative image URLs. og:image must be absolute. A relative path is the number one reason a preview shows up blank.
Using name for og tags. Open Graph uses property=; only the Twitter tags use name=. Mixing them up means the tag is ignored.
Tags outside the head. Meta tags placed in the body are not reliably read by scrapers.
Stale caches. Platforms cache the first version they scrape. After you fix your tags, you usually need to re-scrape (see below).

Validation tools

Always test with the live, public URL, then refresh the cache so platforms pick up changes:

Facebook Sharing Debugger — shows what Facebook scraped and lets you re-scrape.
LinkedIn Post Inspector — previews and clears LinkedIn's cache for a URL.
X / Twitter — the legacy Card Validator is deprecated; test by composing a draft post (do not publish) to preview the unfurl.
Quick gut check — paste the URL into a private Slack or Discord channel. If it unfurls correctly there, your core tags are sound.

Make the image, then wire it up

Tags are only half the job. The card people actually see is the image, and that is the part most pages get wrong. FreeOGImage builds a crisp 1200x630 image entirely in your browser: no signup, no watermark, and nothing is uploaded anywhere. Browse layouts on the templates page or read more guides on the blog.

Ready to ship? Open the editor, export your image at 2x, then drop the absolute URL into the og:image tag above.