What are Open Graph tags?

Open Graph tags are meta tags in your page's head that tell other services what title, description and image to show when someone shares your link. They come from the Open Graph protocol, published at ogp.me, and nearly every platform that renders a link preview reads them.

Why they exist

Before Open Graph, a platform receiving a pasted link had to guess. It would grab the page title, the first paragraph it could find and whichever image looked biggest, and the result was often wrong.

The Open Graph protocol, introduced by Facebook in 2010, flipped that around: the page states what it is. Four tags turn any page into a rich object with a name, a type, an image and an address.

The four tags the protocol calls required

The protocol itself lists four basic properties. In practice you want a description too, because an empty description leaves a blank line on every card.

html

<meta property="og:title" content="Your headline here" />
<meta property="og:type" content="website" />
<meta property="og:image" content="https://example.com/og.png" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:description" content="One or two sentences." />

Open Graph uses property=, not name=. Some validators are forgiving about this; several scrapers are not.

Where they go

Inside <head>, and nowhere else. A scraper typically downloads your HTML, stops reading somewhere in the head, and never executes your JavaScript.

That last part is the single most common reason tags that 'exist' still do not work: if a client-side framework injects them after the page loads in a browser, the scraper never sees them.

Who reads them

Facebook, LinkedIn, Slack, Discord, WhatsApp, iMessage, Pinterest, Telegram and many smaller tools read Open Graph directly. X reads its own twitter: tags first and falls back to Open Graph for anything missing.

Google does not use Open Graph for ranking. It reads your title tag, meta description and favicon for the search result, which is why you keep both sets.

A complete, working head

html

<head>
  <title>Barcode Buddy — scan inventory from your phone</title>
  <meta name="description" content="Turn any phone into a barcode scanner and keep stock counts current." />

  <meta property="og:title" content="Scan inventory from your phone" />
  <meta property="og:description" content="Turn any phone into a barcode scanner and keep stock counts current." />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://barcodebuddy.example/" />
  <meta property="og:image" content="https://barcodebuddy.example/og.png" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:image:alt" content="A phone scanning a shelf label." />
  <meta property="og:site_name" content="Barcode Buddy" />

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

  <link rel="canonical" href="https://barcodebuddy.example/" />
  <link rel="icon" href="/favicon.ico" />
</head>

Sources

Keep going

Now check it on your own site.

Scan a site Generate images