LinkFork

What Open Graph actually is

Open Graph is a small set of <meta> tags in your page’s <head> that describe how the page should appear when someone shares its link somewhere else. When a chat app or social network turns a bare URL into a card with a title, a description and an image, it built that card from these tags.

That’s the whole idea. It’s not a standard in the formal sense, it’s not enforced, and no platform is obliged to honour it — but essentially all of them read it, which makes it the closest thing to a common language for link previews.

Why it exists

Without it, a platform showing your link has to guess. It can read the <title>, scrape some body text, and pick an image off the page by some heuristic. The result is unpredictable: the wrong image, a truncated navigation label as the title, cookie-banner text as the description.

Open Graph replaces guessing with declaration. You state the title, the description and the image you want; the platform uses them. Control moves from their heuristics to your markup.

The four tags that matter

There are many Open Graph properties. In practice four carry nearly all the weight:

<meta property="og:title" content="What Open Graph actually is">
<meta property="og:description" content="A handful of meta tags that tell other sites how to display your link.">
<meta property="og:image" content="https://example.com/preview.png">
<meta property="og:url" content="https://example.com/what-is-open-graph/">

og:title — the card’s headline. Not necessarily your <title>. Your <title> often carries a site-name suffix for search results; a preview card usually reads better without it.

og:description — the supporting line. Often the same as your meta description, and it doesn’t have to be. A search snippet and a shared-link card are read in different contexts.

og:image — the picture. This is what people actually notice, and it’s the tag most worth getting right.

og:url — the canonical address of the page. Matters more than it looks: it’s how platforms consolidate shares of the same page arriving with different query strings and tracking parameters.

The property attribute is not name

A detail that bites everyone once. Ordinary meta tags use name:

<meta name="description" content="…">

Open Graph uses property:

<meta property="og:title" content="…">

Write name="og:title" and strict parsers ignore it. Some platforms are lenient and some aren’t, so the symptom is a preview that works in one app and not another — which sends people looking for a platform-specific cause when the markup was simply wrong.

Tags you’ll see and mostly don’t need

og:type — website or article usually. Defaults are sensible; set article on articles if you like, but nothing dramatic changes.

og:site_name — your site’s name, sometimes shown as a small label on the card.

og:locale — the content’s language. Relevant for multilingual sites.

article:published_time, article:author — occasionally surfaced, mostly not.

og:image:width and og:image:height — worth adding. They let a platform lay out the card before it has downloaded the image, which avoids a first-share render with no picture.

og:image:alt — alternative text for the preview image. Small accessibility win, no downside.

Where Twitter cards fit

X/Twitter has its own tag family, twitter:card, twitter:title and so on. You don’t need to duplicate everything: it falls back to Open Graph for anything missing. In practice the only one worth adding is the card type, because it decides between a small thumbnail and a large image:

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

Note that one uses name, not property — the two families genuinely differ on this, which is part of why the confusion above is so common.

How the preview is built

Worth understanding because it explains most of the surprises:

  1. Someone pastes your URL.
  2. The platform’s crawler requests the page — not the person’s browser, a server somewhere.
  3. It reads the <head> looking for these tags.
  4. It downloads the image and makes its own copy.
  5. It caches the result, often for a long time.
  6. It renders the card.

Two consequences follow from that list, and they cause most link-preview problems.

Step 2 is a crawler, not a browser. It may not run JavaScript. Tags injected client-side often aren’t seen at all, so Open Graph belongs in the HTML the server sends.

Step 5 is a cache. Once a platform has built a card for a URL, editing your tags changes nothing it already has. That’s why a fixed preview keeps showing the old image, and why every platform has some way to force a re-fetch.

The minimum worth shipping

For any page you expect to be shared:

<meta property="og:title" content="…">
<meta property="og:description" content="…">
<meta property="og:image" content="https://…absolute URL…">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:url" content="https://…canonical URL…">
<meta name="twitter:card" content="summary_large_image">

Absolute URLs on the image, every time — relative paths are a leading cause of previews with no picture. Beyond that, the tags are cheap, they sit in your template once, and they replace a guess with a decision.

open-graphmeta-tagsbasics