Open Graph is a small set of <meta> tags that tell other websites how to display your page when someone shares a link to it. Paste a URL into Slack, Facebook, LinkedIn, WhatsApp or iMessage and you get a card with a headline, a summary and a big image — that card is built entirely from Open Graph tags in your page's <head>. Without them the platform has nothing authoritative to read, so it either guesses from your body text or shows the bare URL. Open Graph is the difference between a link that looks like a product and a link that looks like a mistake.
Where Open Graph Came From
Facebook published the Open Graph protocol in 2010 to let any web page describe itself as a rich object — a article, a video, a product — rather than being scraped and guessed at. The idea outgrew Facebook almost immediately. Today LinkedIn, Slack, Discord, WhatsApp, Telegram, Signal, iMessage, Pinterest and X all read the same tags. X layers its own twitter:namespace on top but falls back to og: for anything it does not find.
That is the practical reason Open Graph matters more than any single platform's format: one set of four or five tags controls how your link appears across effectively the entire social and messaging web.
What the Tags Look Like
Open Graph tags live in <head> and use the property attribute (not name, which is what ordinary meta tags use). Every property is prefixed with og:. A complete, well-formed set looks like this:
<head>
<meta property="og:title" content="How We Cut Build Times by 70%">
<meta property="og:description" content="A walkthrough of the caching changes that took our CI from 14 minutes to 4.">
<meta property="og:image" content="https://example.com/og/build-times.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="A bar chart showing build time dropping from 14 to 4 minutes">
<meta property="og:url" content="https://example.com/blog/build-times">
<meta property="og:type" content="article">
<meta property="og:site_name" content="Example">
<meta property="og:locale" content="en_US">
<!-- X reads these first, then falls back to the og: values above -->
<meta name="twitter:card" content="summary_large_image">
</head>property="og:title". The twitter: tags use name="twitter:card". Mixing them up is one of the most common reasons a tag that looks correct in the source is ignored by the scraper. Most parsers are forgiving, but Facebook historically is not.The Four Tags That Actually Matter
The protocol defines dozens of properties. In practice, four carry almost all of the weight:
og:title— the headline of the card. Keep it under about 60–88 characters; most platforms truncate past that and the end of your sentence disappears.og:description— the summary line beneath the headline. This is the only body copy you control inside the card. Aim for 100–150 characters.og:image— the single highest-impact tag. A link with an image occupies several times the visual space of a text-only link in a feed, and it is the reason people stop scrolling. Must be an absolute URL.og:url— the canonical address for the page. Without it, the same article shared from a UTM-tagged link is treated as a different URL, and your engagement counts split across both.
og:type, og:site_name and og:locale are worth adding but degrade gracefully: a missing og:type simply defaults to website.
How a Scraper Actually Sees Your Page
This is the part that trips people up. When you paste a link, the platform sends its own bot —facebookexternalhit, LinkedInBot, Slackbot-LinkExpanding,Twitterbot — to fetch the URL. That bot does roughly this:
- Issues a plain
GETrequest, following redirects. - Reads the first chunk of HTML — often only the first 100–300 KB.
- Parses
<head>forog:andtwitter:tags. - Separately fetches the
og:imageURL to size and cache it. - Stores the result, keyed by URL, for hours or days.
Notice what is not in that list: running JavaScript. Most link scrapers do not execute scripts at all. If your meta tags are injected client-side — by a single-page app, by a tag manager, by a framework that only sets them after hydration — the scraper sees an empty <head> and your card renders bare, even though the tags are plainly visible when you inspect the page in a browser.
# See exactly what a scraper sees — no JavaScript, no browser
curl -sL -A "facebookexternalhit/1.1" https://example.com/blog/build-times \
| grep -iE '<meta[^>]+(og:|twitter:)'
# If this prints nothing but the tags show up in DevTools,
# your tags are being rendered client-side.Open Graph vs Twitter Cards vs SEO Meta Tags
Three different tag families often get confused. They serve different readers:
- Open Graph (
og:) — read by social platforms and messaging apps to build a share card. Has no direct effect on search ranking. - Twitter Cards (
twitter:) — X-specific overrides. If absent, X uses yourog:tags. The one genuinely worth setting istwitter:card="summary_large_image", which switches X from a small square thumbnail to the full-width image layout. - SEO meta tags —
<title>and<meta name="description">, read by search engines for the results page. Separate from Open Graph, and a page can score perfectly on one while failing the other.
They are not interchangeable, but they overlap enough that a good implementation sets all three. A page with an excellent <title> and no og:title will rank fine and share badly.
The og:image Rules Worth Memorising
More link previews break on the image than on everything else combined. The constraints that matter:
- 1200 × 630 pixels (a 1.91:1 ratio) is the baseline every major platform is happy with. Facebook and LinkedIn upscale anything smaller, which looks soft.
- Absolute URLs only.
content="/og/image.png"is ignored — scrapers do not resolve it against the page. It must start withhttps://. - Declare the dimensions.
og:image:widthandog:image:heightlet the platform lay out the card before it has downloaded the image. Without them the very first share of a URL often renders imageless while the scrape is still in flight. - Publicly reachable. The image cannot sit behind auth, a login wall, hotlink protection, or a robots rule that blocks the crawler.
- Keep it under about 1 MB and serve it over HTTPS.
Caching: Why Your Fix Does Not Show Up
Every platform caches the scrape result aggressively — often for a day or more — keyed by the exact URL. So the normal experience of fixing Open Graph tags is: you correct the markup, you re-share the link, and the old broken preview appears anyway.
This is expected, and it is not a sign your fix failed. Each platform provides a debugger that forces a fresh scrape: the Facebook Sharing Debugger, the LinkedIn Post Inspector, and the X Card Validator. Run the URL through the relevant one after any tag change and the new card appears immediately.
A Minimum Viable Implementation
If you add nothing else, add these five lines to every page template. They cover the overwhelming majority of what platforms read:
<meta property="og:title" content="Page headline, under 60 characters">
<meta property="og:description" content="One purposeful sentence of 100-150 characters.">
<meta property="og:image" content="https://example.com/og/page.png">
<meta property="og:url" content="https://example.com/canonical-path">
<meta name="twitter:card" content="summary_large_image">Then check the result rather than trusting it. The Open Graph Checker fetches your page the way a crawler does, lists every tag it found with its length and status, previews the card on four platforms, and generates the exact markup for whatever is missing.
Frequently Asked Questions
Does Open Graph affect SEO or search rankings?
Not directly. Google does not use og: tags as a ranking signal, and it reads <title> and <meta name="description"> for the search results page instead. The indirect effect is real, though: links that render as rich cards get shared and clicked substantially more, and that traffic and those links do influence how a page performs.
Do I need Twitter Card tags if I already have Open Graph?
Mostly no — X falls back to your og: tags for the title, description and image. The one exception worth setting is twitter:card="summary_large_image". Without it X defaults to a small square thumbnail beside the text rather than the full-width image card.
Why does my preview work on Slack but not on Facebook?
Usually a difference in strictness or in caching. Slack re-scrapes more eagerly and is more forgiving about image size, while Facebook enforces minimum dimensions and caches results for far longer. A Slack preview working therefore proves your tags exist, but not that they satisfy Facebook — check the image dimensions and run the Sharing Debugger.
Can I have different previews for different platforms?
Yes, within limits. The twitter: tags override og: on X, so you can serve a different title, description or image there. Facebook, LinkedIn and Slack all read the same og: values and cannot be individually targeted through meta tags.
My tags are in the page but the preview is still blank — why?
The three usual causes, in order of likelihood: the tags are rendered client-side and the scraper never sees them; the og:image is a relative URL or is unreachable; or the platform has a stale cached copy from before you added them. Fetch the page with curl to rule out the first two, then force a re-scrape to rule out the third.
How long should og:title and og:description be?
Keep og:title under roughly 60 characters to be safe on every platform — 88 is the point where nearly everyone truncates. For og:description, 100–150 characters is the sweet spot; past about 200 most platforms trim it mid-sentence.