Open Graph meta tags explained

Open Graph meta tags are a few lines in your page’s <head> that tell social networks and chat apps what to show when your link is shared: the title, a description, an image and the page’s address. Without them, platforms guess, and usually guess badly.

Here’s a complete, working set. Most pages need nothing more:

<meta property="og:title" content="How to bake sourdough at home" />
<meta
  property="og:description"
  content="A beginner's guide to starters, stretching and the perfect crust."
/>
<meta property="og:image" content="https://example.com/og/sourdough.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="A sourdough loaf on a wooden board" />
<meta property="og:url" content="https://example.com/sourdough" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="Example Bakery" />
<meta name="twitter:card" content="summary_large_image" />

The rest of this guide explains each tag, the optional extras and the mistakes that break previews.

The core tags

og:title

The headline of the preview card. Keep it under about 60 characters so it isn’t cut off. It can differ from your page’s <title>: for example, leave out the “ | Site name” suffix, since the site name appears elsewhere in the card.

og:description

One or two sentences summarising the page, shown under the title on Facebook, LinkedIn, Slack, Discord and others. Aim for under 160 characters. If it’s missing, many platforms fall back to your <meta name="description">.

og:image

The preview image. It must be a full address starting with https://, not a relative path like /og/sourdough.png. Use 1200 × 630 pixels. The size guide covers each platform’s limits.

og:url

The page’s main, canonical address. If the same page is reachable at several addresses (with tracking parameters, for example), this tells platforms which one to use, so shares are grouped together. It should match your <link rel="canonical">.

og:type

What kind of content the page is. Use website for most pages and article for blog posts and news. Articles can add extra details:

<meta property="article:published_time" content="2026-10-01T09:00:00Z" />
<meta property="article:author" content="https://example.com/about" />
<meta property="article:section" content="Baking" />

The original Open Graph specification lists four required tags: og:title, og:type, og:image and og:url. In practice, add og:description too, since every major platform shows it.

Useful extras

• og:site_name: your site’s name, shown above or below the title on some platforms.
• og:image:alt: a short description of the image for people using screen readers.
• og:image:width and og:image:height: the image’s size in pixels. These help Facebook show the image the very first time a link is shared, before it has downloaded it.
• og:image:type: the image’s format, such as image/png. Optional, since platforms work it out themselves.
• og:locale: the page’s language and region, such as en_GB.

X (Twitter) card tags

X reads Open Graph tags, but has a few of its own:

Tag	What it does	Falls back to
twitter:card	The card style: summary_large_image for a big image, summary for a small square	Nothing: without it, X shows no card
twitter:title	The title on X	og:title
twitter:description	The description on X	og:description
twitter:image	The image on X	og:image
twitter:image:alt	Alt text for the image	og:image:alt
twitter:site	Your site’s X handle, such as @example	Nothing

The important one is twitter:card. The others fall back to Open Graph, so you don’t need to repeat them, but without twitter:card, links on X won’t get a card at all.

Related tags that matter

• <title> and <meta name="description">: used by search engines, and as a fallback by some platforms. See how long they should be, or preview them in Google with the meta tag checker.
• <link rel="canonical">: the page’s preferred address. Keep it consistent with og:url.
• <meta name="theme-color">: Discord uses this colour for the stripe down the side of link embeds.

Adding the tags in popular frameworks

• Plain HTML: paste the tags inside <head>.
• WordPress: SEO plugins such as Yoast SEO and Rank Math add Open Graph tags for every page, with a field to choose each page’s image.
• Astro: add the tags to your layout’s <head>, passing in each page’s title, description and image.
• Next.js: export a metadata object (App Router) with openGraph and twitter fields, and Next.js writes the tags for you.

The editor generates the exact code for plain HTML, Astro and Next.js: design your image, then press Meta tags to copy it.

Common mistakes

1. A relative image address. /og/page.png doesn’t work. Use the full https:// address.
2. No twitter:card tag. Everything else can fall back, but this can’t.
3. Tags added by JavaScript. Platforms read the HTML your server sends and don’t run your scripts. If your site builds the <head> in the browser, as some single-page apps do, the tags must be rendered on the server instead.
4. Duplicate tags. Two og:title or og:image tags, often from a theme and a plugin both adding them, leave platforms to pick one at random.
5. Tags in the wrong place. They must be inside <head>, not <body>.
6. An image the platform can’t reach. Images behind a login, blocked in robots.txt or stopped by a firewall’s bot protection won’t appear in previews.
7. The same image on every page. It works, but a page-specific image gets more attention and more clicks.

Check your tags

Paste any address into the OG checker. It lists every tag it finds, previews the link on X, Facebook, LinkedIn, Slack and Discord, flags anything missing or broken, and gives you a corrected set of tags to copy.

If your tags are right but an old preview keeps appearing, see why your link preview isn’t updating.