What Is Open Graph and How Does It Work?

Paste a link into a chat or a social post and, a moment later, it turns into a card with a headline, a short description and a picture. Nobody wrote that card by hand. The platform fetched your page, read a few meta tags from its HTML, and assembled the card from them. Those tags are mostly Open Graph tags.

What Open Graph is

Open Graph is a small vocabulary of meta tags that describe a page as an object that can be shared. Facebook introduced it so that a page could say, in a machine-readable way, what it is called, what it is about and which image represents it. Because the format is simple and widely read, other platforms and messaging apps adopted it for their own link previews.

The tags live in the <head> of the page and use the property attribute, with names that start with og:.

<meta property="og:type" content="article">
<meta property="og:title" content="How Link Previews Work">
<meta property="og:description" content="What happens between pasting a link and seeing a card.">
<meta property="og:url" content="https://example.com/how-link-previews-work">
<meta property="og:image" content="https://example.com/images/link-previews.png">

How a link preview is built

1. Someone shares a URL. The platform (or the app's server) requests the page, usually with its own crawler, and follows redirects.
2. It reads the HTML it receives. Most crawlers do not run JavaScript, so only the tags present in the initial HTML count.
3. It picks values using its own rules: usually og:title, og:description and og:image, with fallbacks to the HTML <title>, the meta description or an image on the page when a tag is missing.
4. It may download and resize the image, then stores the result in a cache so the next share of the same URL does not need another fetch.
5. It draws a card using its own design. The same tags can produce quite different cards on different platforms.

Each step is a place where a preview can go wrong, which is why a missing tag, an unreachable image, a redirect, or an old cached copy can all lead to a card that does not match the page. The Open Graph & Social Preview Analyzer reads the same server-delivered HTML and shows which tag each part of a preview comes from.

The properties that matter most

The details of each tag, including the structured image properties such as width, height and alt text, are covered in Open Graph meta tags explained.

Open Graph, Twitter/X Cards and the HTML title

Open Graph is not the only metadata that affects a preview. X has its own twitter:* tags and documents falling back to Open Graph when they are absent. The HTML <title> and the meta description are standard SEO tags that some platforms use as a last resort. Open Graph vs Twitter Card and og:title vs the HTML title explain how these relate.

Why the tags must be in the first HTML response

If your site is a single-page application that builds its <head> in the browser, the HTML a crawler receives may contain no Open Graph tags at all. Crawlers that do not execute JavaScript will then see an empty page. The fix is to output the tags on the server, through server-side rendering, static generation or pre-rendering.

A practical checklist

• Set og:title, og:description, og:image and og:url on every shareable page, and og:type where it is not simply a website.
• Make the image URL absolute, public and HTTPS, and give it alt text with og:image:alt.
• Keep og:url consistent with the canonical URL (see canonical URL vs og:url).
• Check the final result with a tool that reads the delivered HTML, such as the Open Graph & Social Preview Analyzer, before you share the link widely.