Open Graph

Open Graph is the protocol through which a Web page describes itself to the services that preview links: when a URL is pasted into Facebook, LinkedIn, WhatsApp, Telegram, Slack, Mastodon, Discord or iMessage, the service fetches the page, reads its Open Graph tags, and builds a card with a title, a short description and a picture. A page without them is shown as a bare link or a guessed title, often with a placeholder instead of a picture.

It was introduced by Facebook in 2010 and is specified at ogp.me. The name comes from Facebook's social graph: the protocol was meant to turn any Web page into an object of that graph.

The tags are <meta> elements in the page's <head>, written with the RDFa property attribute rather than name:

The specification requires four properties — title, type, URL and picture — and defines several optional ones. Properties can be structured with a further colon, so the picture can carry its size, type and alternative text.

tag	meaning
og:title	the title of the object, without the site name
og:type	the kind of object: website, article, book, profile, video.movie, music.song, …
og:url	the canonical URL: the identity of the object, under which shares and likes are counted
og:image	the absolute URL of the picture shown in the card
og:description	one or two sentences of summary
og:site_name	the name of the site the object belongs to
og:locale	the language and territory of the content, as en_GB or it_IT
og:image:width, og:image:height	the picture's size in pixels, so the card can be laid out before the picture is downloaded
og:image:alt	a text description of the picture, for accessibility

Each type may add its own vocabulary: an article can declare article:published_time, article:author and article:tag; a book book:isbn, book:author and book:release_date; a profile profile:first_name and profile:last_name.

X (formerly Twitter) defines a parallel vocabulary, Twitter Cards, written with name and the twitter: prefix. Only twitter:card has no Open Graph equivalent: it chooses the layout, summary (small square picture beside the text) or summary_large_image (wide picture above it). For title, description and picture X falls back to the Open Graph tags, so a page normally adds just that one tag.

• They fetch anonymously. The crawlers (facebookexternalhit, LinkedInBot, WhatsApp, Slackbot, …) are never logged in, so both the page and its picture must be readable without a login. A picture behind a login is the most common cause of a card with no picture.
• They do not run JavaScript. The tags must be in the HTML as served, not added by a script.
• They cache. A card is built once and reused, often for days. Changing the tags does not change a card already built: the networks provide debuggers that force a fresh fetch — Facebook's Sharing Debugger and LinkedIn's Post Inspector.
• They crop pictures differently. Facebook and LinkedIn favour a landscape 1.91:1 picture (1200×630 px), WhatsApp and the summary card a square one. No single picture fits every network; a picture whose proportions are stated in the tags is laid out more reliably.
• They read only common formats. JPEG, PNG and GIF are safe; SVG and TIFF are generally ignored.

Open Graph is about presentation: it says how a page should look when shared, not what the object is bibliographically. Other vocabularies, often present in the same <head>, serve other readers:

vocabulary	read by	purpose
citation_* (Highwire Press)	Google Scholar, Zotero, Mendeley	bibliographic description of a scholarly work: authors, venue, volume, pages, DOI, PDF
Dublin Core (DC.*)	repositories, library harvesters	generic descriptive metadata
schema.org (JSON-LD)	search engines	structured data about people, organisations, events, works
Twitter Cards (twitter:*)	X	card layout, falling back to Open Graph

They do not replace one another: a social network ignores citation_*, and Google Scholar ignores og:*.

• The Open Graph protocol
• X: Cards markup
• Open Graph in APICe (logged-in users)