What Is Open Graph? A Beginner's Guide to OG Tags
Open Graph is a set of meta tags that control the title, description, and image a link shows when shared. See how it works and which tags to set first.
By Abid Ali, maintainer of OG Scope
Updated · First published
What is Open Graph? It is a set of meta tags in a web page's HTML that tell other apps how to show a link to that page. When a URL is pasted into Facebook, LinkedIn, WhatsApp, Slack, or Discord, the app reads these tags and builds a card with a title, a short description, and an image. Without them, each app guesses.
This guide is for anyone who shares links or publishes pages: marketers, founders, writers, and developers new to the topic. It explains what the tags are, how a card is built from them, which ones to set first, and how to check them on a live page.
What is Open Graph protocol, in plain terms
The answer to "what is Open Graph protocol" is short: it is a published standard for describing a web page with a few named properties. Facebook introduced it in 2010 so that any page could appear in its feed like a rich object, with a name, a type, and a picture. Other platforms adopted the same tags, which is why one set of tags now shapes link previews in many apps.
The rules live on the official Open Graph protocol site. People also write it as OpenGraph, so a search for what is OpenGraph leads to the same protocol. Asking "what is an Open Graph" usually means the same thing: the tags, or the card they produce. The phrase "the open graph" sometimes refers to the wider idea of web pages as connected objects, but in day-to-day work it means these tags.
What are Open Graph tags?
What are Open Graph tags, exactly? They are meta elements in the page head, each with a property that starts with og: and a content value:
<head>
<title>Field notes from a wet week | Field Notes</title>
<meta property="og:title" content="Field notes from a wet week" />
<meta property="og:description" content="What the rain did to the beds, and what was replanted." />
<meta property="og:image" content="https://example.com/covers/wet-week.webp" />
<meta property="og:url" content="https://example.com/blog/wet-week" />
<meta property="og:type" content="article" />
</head>Each line has one job:
og:title: the headline on the card.og:description: the summary line under the headline.og:image: the picture, as an absolute HTTPS URL.og:url: the canonical address of the page (see the og:url guide).og:type: the kind of page, usually website or article.
The tags are invisible on the page itself. Visitors never see them. They are read only by the apps that build previews.
Paste any public URL into the Open Graph checker to see which of these tags the page already has and how its card is likely to look.
How a link preview is built
- Someone pastes a URL into a post, a message, or a chat.
- The app's crawler requests the page from the server.
- The crawler reads the Open Graph tags in the HTML it receives.
- The app downloads the image and builds the card.
- The app stores the result, so later shares can reuse it.
Two details matter here. Many crawlers do not run JavaScript, so tags added by scripts in the browser can be missed. And because the result is stored, a fix to the tags may not appear until the app fetches the page again. The Open Graph preview guide walks through how each part of the card maps to a tag.
Why Open Graph matters for shared links
A shared link without tags is a gamble. The app may pick the site logo, a cookie banner sentence, or nothing. With tags, the page decides what appears: a headline written for a feed, a summary that makes sense without a click, and an image sized for the card.
Open Graph is not a search ranking factor. Search results draw on the HTML title, the meta description, and page content. The Open Graph and SEO guide covers where the two overlap and where they do not.
Which tags to set first
For a first setup, five tags cover almost every card:
- og:title, written for the card without the brand suffix.
- og:description, one or two sentences that stand alone.
- og:image, about 1200 x 630 pixels, with the subject centered.
- og:url, matching the canonical link of the page.
- og:type, website for most pages and article for dated posts.
After those, og:site_name adds the site name, the og:locale tag states the language and region, and twitter:card chooses the large image layout on X. The full list, with code for every tag, is in the Open Graph tags cheat sheet.
How to add the tags without code
Most sites do not need hand-written HTML. Website builders and SEO plugins usually have a social or sharing section with fields for the title, description, and image, and they print the tags from those fields. Frameworks such as Next.js have a metadata setting for Open Graph values.
The risk with plugins is duplication. A theme and a plugin can both print og:title, with different values, and the app picks one. After setting the fields, open the page source and confirm each tag appears once.
Common beginner mistakes
- A relative image path. og:image needs a full URL such as https://example.com/cover.webp, not /cover.webp.
- An image that is too small. Small files may be shown as a thumbnail or skipped. The OG image checker reports the pixel size when it can be read.
- The same tags on every page. A site-wide default makes every shared link look identical.
- Expecting instant updates. Apps keep their stored copy until they fetch the page again.
Check Open Graph on a live page
Right-click the page and choose View Page Source, then search for og:. Each tag should appear once, with a real value. A checker that fetches the page on a server shows the same HTML a crawler receives and lists every tag in one table. For copy-paste starting points, the Open Graph examples cover blog posts, products, homepages, and more.
Set the five core tags, publish them in the server HTML, then check the live URL in the Open Graph checker before sharing it.