Open Graph
The meta tags a page uses to describe its own preview card when a link is shared, how chat apps and social networks fetch them, and why a preview shows only what the page claims about itself.
Open Graph is a set of meta tags that tell other services how to display a link to a page. When you paste a URL into a chat app or social network and a card appears with a title, a short description, and an image, the service read those details from the page's Open Graph tags. Facebook introduced the protocol in 2010, and nearly every platform that shows link previews now reads it.
The tags go in the page's <head>:
og:titleandog:description, the card's text.og:image, the preview image, typically around 1200 by 630 pixels.og:url, the canonical address, so variants of the same URL share one preview.og:type, such asarticleorwebsite.
Some platforms add their own tags, such as Twitter's card tags, but fall back to Open Graph. The tags are a lightweight form of Structured Data: the page describes itself in a machine-readable way.
Producing a preview is called unfurling. The platform's server fetches the page, reads the tags, downloads the image, and caches the result. The fetcher is a simple Web Crawler and usually doesn't run JavaScript, so tags inserted by client-side code are invisible to it. A Single-Page Application that sets its title in the browser shows a generic card for every page. The fix is to render the tags in the initial HTML through Server-Side Rendering or Static Site Generation.
Previews are cached aggressively, sometimes for days. Fixing a typo on the page doesn't update cards already shared, and most platforms provide a debugging tool to force a re-fetch; see Cache Invalidation.
Many sites generate preview images automatically, drawing the title onto a branded template at build or request time, because a page without an image gets a smaller, less clickable card. Previews are an attention surface, so they're often tuned like headlines; see Search Engine Optimization.
Privacy and security concerns:
- Previews are claims. The card shows whatever the page says about itself. A phishing page can show a bank's logo and title. The preview proves nothing about the destination.
- Who fetches matters. If the recipient's app fetches the preview, merely receiving a link reveals the recipient's IP address to the linked server. End-to-end encrypted messengers have the sender's device generate the preview instead.
- Server-side fetchers can be abused. A service that fetches any URL a user pastes can be pointed at internal addresses unless it validates the target, the same risk any server-side URL fetch carries.
The name reflects Facebook's original ambition, a "social graph" in which every web page could become an object people liked and shared. The graph faded, but the preview tags became one of the web's most widely adopted metadata standards, mostly because Network Effects made every platform read the same few tags.
See also3
Phishing
Tricking people into handing over passwords, money, or access with messages and websites that impersonate someone they trust, the most common way attackers get in, and why technical defenses beat training.
Web Platform12 connections
Canonical URL
The one preferred address for a page that's reachable at many, declared so search engines and other tools treat the copies as a single page, a hint introduced by the major search engines together in 2009.
Data & Content10 connections
Deep Linking
Linking straight to a specific page or item rather than a site's front door, once fought over in court and now a feature that apps and web apps must work to support.
Web Platform10 connections
Linked from8
- Canonical URLData & Content
The one preferred address for a page that's reachable at many, declared so search engines and other tools treat the copies as a single page, a hint introduced by the major search engines together in 2009.
- Deep LinkingWeb Platform
Linking straight to a specific page or item rather than a site's front door, once fought over in court and now a feature that apps and web apps must work to support.
- HotlinkingWeb Platform
Displaying an image or file on your page straight from someone else's server, so they pay for the traffic, which sites block by checking where requests come from and which courts have treated differently from copying.
- PhishingWeb Platform
Tricking people into handing over passwords, money, or access with messages and websites that impersonate someone they trust, the most common way attackers get in, and why technical defenses beat training.
- Search Engine OptimizationData & Content
Making content discoverable through search, most of which is ordinary quality work.
- Server-Side RenderingWeb Platform
Producing a page's HTML on the server so the first response is already content.
- Structured DataData & Content
Machine-readable markup describing what a page is about, in a shared vocabulary.
- Web CrawlerWeb Platform
A program that discovers the web by fetching pages and following their links, the machinery behind search engines and training datasets, and the voluntary etiquette that governs it.