Fundamentals12 min read·2026-07-23

What Is Open Graph

The complete guide to Open Graph — what it is, how og:tags control every link preview on Facebook, LinkedIn, Slack, iMessage and beyond, and how to implement it correctly in 2026.

Every time you paste a link into Slack, iMessage, LinkedIn, Facebook, WhatsApp or a Discord channel and a rich preview card appears — with a title, a description, and an image — you are looking at Open Graph in action. Open Graph is the invisible protocol that decides how the rest of the internet sees your website. Get it right and every share becomes a small billboard for your work; get it wrong and your links show up as bare URLs that nobody clicks.

This guide is the long, plain-English version of everything you need to know about Open Graph: what it is, where it came from, exactly which tags matter in 2026, how the major platforms interpret them differently, and the mistakes that quietly cost teams thousands of clicks a month. If you build websites, ship content, or run marketing for a product, this is one of the highest-ROI hours you can spend on your stack.

What Open Graph actually is

Open Graph is a metadata protocol introduced by Facebook in 2010. Its original goal was ambitious — to turn any web page into a rich object inside Facebook's social graph — but the part that survived and became a de-facto standard is much simpler: a small set of HTML meta tags, all prefixed with og:, that tell any consuming platform how to render a link preview.

In practice, Open Graph tags live inside the <head> of your HTML and look like this: <meta property="og:title" content="...">, <meta property="og:description" content="...">, <meta property="og:image" content="...">, and a handful of others. When a platform's crawler fetches your URL — Slackbot, Facebook's scraper, LinkedInBot, Twitterbot, Discord's link expander — it reads those tags and builds the preview card its users see. No tags, no card. Bad tags, bad card.

Why Open Graph matters more than SEO for social traffic

It is easy to think of Open Graph as a small technical detail, on par with a favicon. It is not. For any content shared through social channels, chat apps, or email, the Open Graph card is the entire first impression. A study of link-preview engagement by BuzzSumo (2023) found that posts with a compelling image received on average 2.3× more clicks than text-only links. LinkedIn's own engineering blog has published similar numbers: link posts with a proper og:image outperform link posts without one by a wide margin, even when the underlying content is identical.

Traditional SEO controls how you get discovered on Google. Open Graph controls how you get shared everywhere else — which, for most modern products, is where the vast majority of high-intent traffic actually comes from.

The tags that actually matter in 2026

The Open Graph protocol technically defines dozens of tags across many object types (article, book, profile, video, music, and so on). In practice, four tags do 95% of the work, and a handful more handle the rest. Here is the short list, in order of importance.

og:title — the headline that appears in the preview card. Should be under 60 characters. Overrides your <title> tag on most platforms. This is your click-earner; write it like a magazine cover line, not a filename.

og:description — the subhead below the title. Keep it under 160 characters. Some platforms (iMessage, Slack) truncate at 100. Write it as a promise the article actually keeps, not a keyword-stuffed meta description.

og:image — the single most valuable tag. An absolute URL (https://, never a relative path) pointing to a 1200×630 pixel image. This is the picture that fills your preview card. More on this below.

og:url — the canonical URL of the page. Should self-reference — i.e. point to the page itself, not your homepage. Getting this wrong is one of the most common causes of platforms mis-attributing shares.

og:type — declares what the page is: website (default), article, product, profile, video.other. Most sites can leave this as website and only set article on blog posts and product on product pages.

og:site_name — the name of your overall site, e.g. "The New York Times". Appears above the title on some platforms.

og:locale — the language of the page, e.g. en_US, zh_CN. Optional but useful for multilingual sites.

Twitter Cards: the compatible-but-separate cousin

Twitter (now X) built its own metadata system, Twitter Cards, before Open Graph became dominant. It uses tags prefixed with twitter: instead of og:. The good news: Twitter's crawler falls back to Open Graph tags when Twitter-specific tags are absent, so you rarely need both. The two tags worth setting explicitly are twitter:card (almost always "summary_large_image") and twitter:site (your @handle). Everything else — title, description, image — Twitter will read from your og:* tags.

The one place this breaks: if you want a different image on Twitter than on Facebook/LinkedIn, set twitter:image to override og:image. Almost no one needs this. Keep the same image everywhere and your life is simpler.

The og:image rules that trip everyone up

The image tag is where 80% of Open Graph problems live. The rules are unforgiving and each platform has its own quirks. A defensible default that works everywhere in 2026:

Dimensions: 1200×630 pixels, a 1.91:1 aspect ratio. This is the size Facebook, LinkedIn, and Twitter's summary_large_image card all render at their largest. Smaller images get shown as tiny thumbnails or ignored entirely — Facebook, for example, refuses to use images below 200×200 and downgrades anything under 600×315.

File format: PNG or JPEG. SVG is not supported by most crawlers; WebP works on some platforms but not all. Stick with PNG for graphics with text (crisper edges) and JPEG for photographs (smaller files).

File size: under 5 MB. Facebook officially rejects anything larger. Aim for under 1 MB in practice — some crawlers time out on slow-loading images and fall back to nothing.

URL: absolute (https://example.com/og/post-123.png), never relative (/og/post-123.png). Publicly accessible without authentication. No redirects, no cookies, no bot-detection challenges. If your image endpoint sits behind Cloudflare's "Under attack" mode, half the crawlers will fail to fetch it.

Also set og:image:width and og:image:height explicitly. This lets Facebook render your card immediately instead of blocking on image download to measure dimensions — the difference between a preview appearing in a second and appearing in five.

Where to put the tags in your HTML

All Open Graph tags belong inside <head>, and they must be present in the server-rendered HTML — not injected client-side by JavaScript after page load. Almost every social crawler is a lightweight fetcher that does not execute JavaScript. If your app is a client-side-rendered SPA that injects meta tags on mount, your Open Graph tags are invisible to the crawlers that matter.

This is why modern frameworks like TanStack Start, Next.js, Remix, Astro, and SvelteKit all provide first-class server-side meta tag APIs. If you are still shipping a pure CSR React app and wondering why LinkedIn shows a blank preview, this is almost certainly why.

A minimal, correct Open Graph block

Here is what a well-formed Open Graph tag set looks like for a blog post. Paste this into your <head>, swap the values, and you have covered 99% of what real crawlers care about:

Platform-by-platform reality check

Every platform interprets the same tags slightly differently. Knowing where the sharp edges are saves hours of debugging.

Facebook aggressively caches previews. Once its crawler has seen your URL, it will keep serving the same card until you force a refresh through the Sharing Debugger at developers.facebook.com/tools/debug. If you change your og:image and don't see the update, this is why.

LinkedIn caches for approximately 7 days with no user-facing way to force a refresh. The Post Inspector at linkedin.com/post-inspector triggers a re-crawl but is rate-limited. Get your Open Graph right before you first share the link, not after.

Slack renders previews at close to full width in the desktop app but crops aggressively on mobile. It also ignores og:image entirely for links pasted into threads by users on the free plan of some workspaces (a paid-plan feature). Design your images so the critical content lives in the middle 80%.

iMessage on iOS uses its own scraper and prefers square-ish crops. Wide 1200×630 images get letterboxed with gray bars on top and bottom. If iMessage previews are important to your product, consider serving a square variant via a different endpoint and detecting Apple's scraper user-agent.

Discord uses a proxy fetch through its own image CDN, meaning your image will be re-hosted and cached. This is generally invisible but occasionally breaks for image URLs with dynamic query strings that Discord's proxy hashes incorrectly.

The five most common Open Graph mistakes

1. Relative image URLs. og:image must be absolute. /og/post.png is invisible to every crawler. This is the single most common mistake and produces the exact symptom of "the preview works locally but is blank when shared."

2. og:url pointing to the homepage instead of the page itself. Some SEO plugins set this globally by accident. The consequence is worse than blank: platforms de-duplicate previews by og:url, so every article on your site shares the same card as your homepage.

3. Tags injected by client-side JavaScript. Crawlers do not run JS. If your framework hydrates meta tags on mount, they will never be seen. Use a server-rendered meta system.

4. Missing og:image:width and og:image:height. Not catastrophic, but causes cards to render slowly and occasionally get dropped by faster crawlers. Always include them.

5. Placeholder images that never got replaced. A default 1200×630 gray card with your logo is worse than no image on some platforms and makes every share look identical. Ship a real image per URL — programmatic generation is the only way to do this at scale.

How to test your Open Graph before you ship

Never trust that your tags work. Every major platform provides a debugger, and they all show slightly different things — check them all before a big launch.

Facebook Sharing Debugger (developers.facebook.com/tools/debug) — the most thorough. Shows the raw og:* tags it fetched, warns about missing or misformatted values, and lets you force a re-scrape.

LinkedIn Post Inspector (linkedin.com/post-inspector) — the only way to preview and refresh LinkedIn's cache.

Twitter Card Validator — deprecated by X in 2023. In 2026 the working alternative is to post the URL as a private tweet or draft and inspect the rendered card.

opengraph.dev and metatags.io — third-party tools that render your card as it would appear on multiple platforms in one view. Best for a quick pre-flight check during development.

Generating og:image at scale

For a five-page marketing site, hand-designing five og:images in Figma is fine. For anything larger — a blog, a docs site, a product catalog, a user-generated content platform — hand design collapses almost immediately. The answer is programmatic generation: a small server endpoint that takes a title (and maybe a subtitle, a category, an author) as query parameters and returns a rendered PNG.

This is exactly the problem ogimagex was built to solve. You point og:image at a URL like /api/public/og/blog?title=Your+Headline&brand=YourBrand, and every page on your site gets a beautifully typeset, on-brand 1200×630 image with zero manual work. The API is free, open source, runs on the edge, and returns real PNGs (not SVG) so every crawler handles them correctly.

If you want to try it, the playground at ogimagex.xyz lets you preview all 18 templates live, tweak colors and typography, and copy the exact URL to paste into your og:image tag. The whole flow — from picking a template to a working link preview — takes about two minutes.

The one-paragraph summary

Open Graph is a small set of <meta property="og:*"> tags that control how your links look when shared. The four that matter are og:title, og:description, og:image, and og:url. Images must be 1200×630 PNG or JPEG, absolute URLs, under 5 MB, served without auth, with width and height declared. Tags must be server-rendered, not JavaScript-injected. Test with the Facebook and LinkedIn debuggers before you launch. If you have more than a handful of pages, generate og:image programmatically. Do this once, correctly, and every share of every link on your site starts pulling weight — quietly, forever.

Keep reading

Design Tips