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 →11 runs
FreeImages & video
Social Image Resizer
One image, cropped to every size the networks actually use.
Resize →
FreePreviews
Rich Pin Validator
Which tags your page is missing, not just whether it failed.
Validate →1 runs
FreePreviews
Google SERP Snippet Preview
See your title and description as a Google result — on a desktop and a phone.
Preview →5 runs
FreeUtilities
Social Media URL Cleaner
Strip the tracking off a link — and see what each parameter was telling somebody.
Clean →1 runs
FreeAnalytics & growth
Instagram Money Calculator
What to charge for a post — priced the way a brand actually prices it.
Calculate →
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
Meta Description Length: What Google Actually Shows
Google gives a desktop snippet two lines and a phone three. The useful target is one clear promise inside about 155 characters — and Google may still use a passage instead.
Search5 min read
Title Tag Length: How Long Should a Title Be in Pixels?
A title tag is cut by width, not by character count. The desktop column is about 600 pixels — which is anywhere from 45 to 75 characters depending on the letters.