Search3 min read
Open Graph Tags, in the Order Platforms Read Them
Open Graph tags decide what every platform shows when your link is shared. Here is the minimum set, the optional ones, and the mistakes that break cards.
Open Graph tags are the metadata every platform reads to build a link preview. Get five of them right and your links render correctly on X, Facebook, LinkedIn, WhatsApp, Slack, Discord and everywhere else that unfurls a URL. Get them wrong once and the wrong card is cached for a long time.
The minimum set of Open Graph tags
<meta property="og:title" content="The page title, under about 60 characters">
<meta property="og:description" content="One sentence, 110-160 characters.">
<meta property="og:image" content="https://example.com/card.png">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="article">
<meta name="twitter:card" content="summary_large_image">Five Open Graph properties and one Twitter card declaration. That last line matters more than its length suggests: without it X often renders the small square card instead of the large one, which is a substantial difference in how much space a link takes in a feed.
FreeMentioned in this article
Link Preview DebuggerWhat X, Facebook and LinkedIn will show when you share your link.The debugger fetches a URL once and draws the card as each platform renders it, which is faster than testing by posting.
The image
The one that goes wrong most often:
| Requirement | Value |
|---|---|
| Size | 1200×630 (about 1.91:1) |
| URL | Absolute, and publicly reachable |
| Format | JPEG or PNG |
| Weight | Keep it well under a megabyte |
| Access | Not behind auth, hotlink protection or a bot rule |
A relative image path is the classic failure — it works in your browser and returns nothing to a crawler that has no page context. Sizes for every other placement are in social media image sizes.
FreeMentioned in this article
Social Image ResizerOne image, cropped to every size the networks actually use.What each tag is actually doing
Knowing the job of each one makes the failures obvious rather than mysterious.
og:title is the card's headline. It is not the page's <title> - it can and often should differ, because a SERP title and a social card serve different moments. A SERP title carries the query; a card title carries the reason to tap.og:description is one sentence of context under the title. Some platforms show it, some truncate it hard, and a couple ignore it entirely. Write it to work at about 110 characters and let the rest be a bonus.og:image is the entire visual footprint of your link. On every platform, a post containing a link is competing with posts containing images, and this is the only picture it gets.og:url is the canonical address of the content. Platforms use it to deduplicate: three people sharing the same article via three tracking URLs should all resolve to one piece of content, and this tag is how that happens.og:type tells the platform what kind of thing it is - article, website, product. It changes which additional properties are read and, for Pinterest, whether a Rich Pin is possible at all.Optional tags worth having
<meta property="og:site_name" content="Your site">
<meta property="og:locale" content="en_GB">
<meta property="article:author" content="https://example.com/about">
<meta name="twitter:site" content="@yourhandle">
<meta property="og:image:alt" content="What the card image shows">og:image:alt is the accessibility one, and it is almost universally omitted.The mistakes that break cards
Relative image URLs. Must be absolute, with the protocol.
Tags injected by JavaScript. Many crawlers do not execute it. Open Graph tags belong in server-rendered HTML.
Duplicate or conflicting tags. A theme and a plugin both emitting
og:image produces unpredictable results.og:url pointing elsewhere. It should be self-referencing; platforms use it for deduplication.Assuming a fix is live. Platforms cache the first scrape — Facebook link preview not updating and link preview not showing cover the recovery.
The specifications
The Open Graph protocol itself is documented at ogp.me, Meta documents its sharing requirements in its developer documentation, and X documents its card types in its own. Pinterest reads the same tags for Rich Pins — Rich Pins not working.
FreeMentioned in this article
Rich Pin ValidatorWhich tags your page is missing, not just whether it failed.Where it pays off
Every share of every page, forever, by anyone. Which makes this one of the highest-leverage half-hours available on a website: set the tags in the template, check one page, and every link anyone posts renders correctly from then on.
What are Open Graph tags?
Metadata in a page's head that tells platforms what title, description and image to show when the URL is shared.
Which Open Graph tags are required?
og:title, og:description, og:image, og:url and og:type - plus twitter:card to get the large card on X.
What size should an og:image be?
1200×630, at an absolute publicly reachable URL, as JPEG or PNG.
Why do my Open Graph tags not work?
Most often a relative image URL, tags added by JavaScript, conflicting duplicates, or a platform serving a cached earlier scrape.
See what every platform reads from your page: link preview debugger.
Put it to work
Tools for the job you just read about
Free to run, most of them without an account.
FreePreviews
Link Preview Debugger
What X, Facebook and LinkedIn will show when you share your link.
Preview the URL →26 runs
FreeImages & video
Social Image Resizer
One image, cropped to every size the networks actually use.
Resize →5 runs
FreePreviews
Rich Pin Validator
Which tags your page is missing, not just whether it failed.
Validate →1 runs
FreeContent
Jargon & Acronym Detector
The words that make sense to you and not to whoever just arrived.
Detect →
FreeContent
Sentence Rhythm Analyzer
Why a draft with nothing wrong with it still reads flat.
Analyze →
FreeContent
Crutch Phrase Finder
The phrases you use every time, which you are the last to notice.
Find →1 runs
Keep reading
More from the blog
Design4 min read
Twitter Image Sizes for X, and How the Card Crops Them
Twitter image sizes on X: 16:9 for single images, 1200x628 for link cards, and the timeline crop that decides what people actually see.
Search4 min read
YouTube Title Truncation: Where the Title Is Cut in Search, Home and the Sidebar
The 100-character limit is the number the upload form enforces. The numbers that decide whether anyone reads your title are 70, 60 and 40, and nothing mentions those.
Search4 min read
Keyword Density: There Is No Right Number, and What to Use Instead
The "1-2%" target repeated across the web has no source. Two things about a keyword are checkable - whether it is present and where it first appears - and they are what to measure.