What is Open Graph? The tags every page needs

Open Graph is a set of <meta> tags in your page's <head> that tells social apps what to show when someone shares the link. They set the headline, the description, the picture and the URL the share belongs to. The Open Graph protocol, published at ogp.me, was created at Facebook, and LinkedIn, Slack and X now read the same tags. Without them, each platform guesses, and the guess is usually your raw <title> and whatever image it finds first.

The protocol requires four tags. Add og:description and og:site_name and you have the six that cover almost every preview you will ever see.

The four required Open Graph tags

The ogp.me spec lists four properties every page must have.

Two of these matter more than the rest in practice. og:image decides whether the card has a picture at all, and og:url decides which address collects the shares. Set og:url to the same address as your canonical tag. If they differ, share counts attach to one URL while search engines index another.

og:type is the one you can skip without visible damage, since the default is website. Mark blog posts as article anyway. It costs one line and keeps the markup honest.

og:description and og:site_name

og:description and og:site_name are optional in the spec but worth adding to every page. ogp.me describes og:description as "a one to two sentence description," and that is the right length. Facebook and LinkedIn print it under the headline, and most cards show only the first line or two.

If you leave og:description out, platforms fall back to your meta description. That works when the meta description was written for people. It reads badly when it was written to stuff keywords.

og:site_name is the brand name printed above or beside the headline. Without it, most cards show the bare domain. It also lets you drop "| Acme" from og:title, so the headline gets the full width.

A copy-paste Open Graph head block

Here is the block I add to a typical article page. Swap the values and keep the order.

<head>
  <title>How we cut onboarding time in half | Acme</title>
  <link rel="canonical" href="https://www.acme.com/blog/onboarding-time">

  <meta property="og:title" content="How we cut onboarding time in half">
  <meta property="og:description" content="The three changes that took new accounts from 14 days to 6 before their first report.">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://www.acme.com/blog/onboarding-time">
  <meta property="og:image" content="https://www.acme.com/og/onboarding-time.png">
  <meta property="og:image:alt" content="Chart of onboarding days falling from 14 to 6">
  <meta property="og:site_name" content="Acme">

  <meta name="twitter:card" content="summary_large_image">
</head>

Four rules keep this block working.

1. Use property= for og tags. The spec defines them that way, and stricter parsers skip name="og:title".
2. Write og:image and og:url as full https URLs, never /og/onboarding-time.png.
3. One tag per property. When a theme and an SEO plugin both write og:title with different values, ogp.me says the first tag wins, but not every platform follows that.
4. Put the tags in the HTML your server sends, not in tags a script adds after load.

The image itself has size, ratio and file-weight rules of its own. Those are in the Open Graph image size guide.

Twitter card tags and how X falls back to Open Graph

X reads its own twitter: tags first and uses Open Graph when they are missing. X's Cards markup reference maps the fallbacks directly.

So you rarely need to duplicate title, description and image. The exception is twitter:card. X's reference says that without it, a page with og:type, og:title and og:description "may" get a summary card, which is the small thumbnail layout. For a full-width image, set summary_large_image yourself. The valid values are summary, summary_large_image, app and player.

X's getting started guide also notes that twitter: tags use name= while og tags use property=, and its parser accepts property= on fallback, so your existing Open Graph markup needs no rewrite. Add twitter:image only when you want a different picture on X.

Which platforms read which tags

Every major preview reads og:title, og:image and og:url. Beyond that, they differ.

The practical answer is one full Open Graph block plus twitter:card. That covers all four. When a platform still shows an old card after you fix the tags, it is serving its cache. Refresh it with the Facebook Sharing Debugger or LinkedIn Post Inspector.

Check your Open Graph tags

Our Open Graph checker fetches one URL and lists every og:, twitter:, article: and fb: tag in its head. It shows which tag each part of the card came from, including fallbacks to <title> and the meta description, and previews the card. It flags a missing og:title, og:image, og:url, og:type or og:site_name, og:url that differs from the canonical, relative or plain http image URLs, og tags written with name=, conflicting duplicates and a missing or unknown twitter:card.

It also downloads the share image and checks it against each platform's limits for format, file size and dimensions. Each run costs 5 credits. It reads the HTML as served, so it does not see tags that JavaScript adds after load, and it cannot refresh a platform's cached preview.