Open Graph and Twitter Cards

## What a link preview actually is When a URL is pasted into Slack, iMessage, Discord, LinkedIn, Facebook or X, that product sends its own crawler — a "scraper" or "unfurler" — to fetch the URL. The scraper reads the HTML that comes back and looks in the `<head>` for a small set of `<meta>` tags that describe the page as a shareable object. It then renders a card from what it found. Nothing about that card is styled by you: you supply data, the platform supplies the layout. ## The Open Graph protocol Open Graph is the vocabulary almost every platform reads. Its four canonical properties are: - `og:title` — the headline of the card. Not necessarily the same string as `<title>`, which usually carries a site-name suffix for the browser tab. - `og:type` — what kind of object this is. `website` for a generic page, `article` for editorial content; other values exist for video, music and profiles. - `og:image` — an absolute URL to the preview image. - `og:url` — the absolute URL that identifies this object, used by platforms to deduplicate shares of the same page reached through different tracking URLs. `og:description` is not in the required four but is universally supported and is what fills the grey text under the title. `og:site_name` and `og:locale` are optional extras. ```html <head> <meta property="og:type" content="article"> <meta property="og:title" content="How we cut checkout latency in half"> <meta property="og:description" content="A walkthrough of the three changes that mattered."> <meta property="og:image" content="https://example.com/cards/checkout.png"> <meta property="og:url" content="https://example.com/blog/checkout-latency"> </head> ``` ## Why property= and not name= This is the detail interviewers use to check whether you have actually written these tags or only copied them. Ordinary document metadata — `<meta name="description">`, `<meta name="viewport">` — uses the `name` attribute, and `name` is drawn from a registry of standard metadata names. Open Graph is not part of that registry. It is defined as an RDFa vocabulary, and RDFa keys a metadata term with the `property` attribute plus a namespaced value like `og:title`. So the correct spelling is `<meta property="og:title" content="...">`. X's card tags took the other route: `twitter:card`, `twitter:title`, `twitter:image` and friends are plain named metadata and are written with `name`. That is why a real-world head mixes both attributes, and why swapping them on autopilot is a common bug. Most major scrapers today accept `og:` keys under either attribute, so a mistake here often works anyway — which makes it a bug you ship without noticing until one stricter consumer drops your card. ## Per-page, not per-site The single biggest failure mode is treating these tags as site-wide boilerplate. If a template hardcodes one `og:title` and one `og:image` in a shared layout, every URL on the site previews identically, and links stop being clickable in a feed because the card says nothing about the page. Each route should emit its own title, description, image and `og:url`. A sensible default in the layout is fine as long as individual pages override it rather than append to it — two `og:title` tags in one document is ambiguous, and scrapers generally take the first one they encounter. ## What the tags do not do Open Graph tags are not search-ranking signals; they are consumed by link-preview scrapers and social platforms. They are also not a substitute for the page's own visible content: a card that promises something the page does not deliver simply produces bounces. And because they are read out of the HTML the server returns, they have to exist in that HTML — a page that only assembles them later, in the browser, hands the scraper nothing. ## Writing them well Keep `og:title` to roughly a headline's length; platforms truncate. Write `og:description` as a sentence a human would read, not a keyword list. Give `og:image` a real, absolute, publicly reachable URL, and pair it with `og:image:alt` so screen-reader users on the consuming platform get a description of the card art. Set `og:url` to the clean, canonical form of the address so that the same article shared from a newsletter link and from a search result counts as one object.