// basics · May 10, 2026

What is an OG image?

When you paste a link into Slack, X, iMessage, or LinkedIn, you get a preview card with a title, a description, and an image. The image is the OG image. Here is what it is, the meta tags you need, and why most sites still get them wrong in 2026.

The five-second answer

An OG image is the picture that shows up when someone shares your URL on a social platform or chat app. The browser does not pick it automatically — your page tells every crawler exactly which image to use, via a <meta> tag in the <head>:

html

<meta property="og:image" content="https://example.com/og.png" />
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A one-sentence summary." />

Without those tags, link previews fall back to a guess — often the site favicon, sometimes nothing at all. With them, every share renders a clean preview card.

The Open Graph protocol, briefly

"OG" stands for Open Graph — a protocol published by Facebook in 2010 so any web page could describe itself as a structured object. The original use case was rich previews inside Facebook; the protocol stuck because every other platform read the same tags.

Today, Open Graph is the de facto standard for link unfurling. X (formerly Twitter) layers its own twitter: namespace on top, but it falls back to og: when no Twitter-specific tag is present. Slack, Discord, WhatsApp, iMessage, LinkedIn, Telegram, Mastodon — they all read Open Graph.

The minimum tags that matter

The OG protocol defines dozens of properties, but only four actually matter for link previews. Everything else is optional:

html

<!-- The four that matter -->
<meta property="og:title"       content="Page title shown in the card" />
<meta property="og:description" content="One-sentence summary, 150–200 chars." />
<meta property="og:image"       content="https://example.com/og.png" />
<meta property="og:url"         content="https://example.com/the-page" />

<!-- Twitter wants this to opt into the large card -->
<meta name="twitter:card"  content="summary_large_image" />

Two rules trip up almost every team on their first attempt:

Use absolute URLs. The crawler does not know what your origin is. /og.png will silently fail; only https://example.com/og.png works.
The image must be publicly fetchable. No login redirects, no Cloudflare bot challenges, no IP allowlists. If the crawler cannot curl the URL, neither can the platform.

The right dimensions (and why)

1200×630 pixels is the size every platform renders correctly. The aspect ratio is 1.91:1 — wide enough for X and Facebook's large card, tall enough that iMessage does not crop the bottom.

Minimum: 600×315. Below this, Facebook falls back to a small thumbnail.
Maximum: 5MB file size. Above this, Facebook and LinkedIn refuse to fetch.
Format: PNG or JPEG. WebP works on most platforms in 2026 but Facebook still occasionally fails to parse it — stick to PNG when in doubt.

For Twitter's summary_large_image card, the same 1200×630 image works. Twitter just crops slightly differently.

Static vs dynamic OG images

Once you have more than a single landing page, the question becomes: do you want one OG image for the whole site, or a different one per URL?

Static is the easy path. You design a card in Figma, export it as a PNG, host it at /og.png, and reference it from every page. Every share looks identical. Fine for a portfolio, an indie product page, a single marketing site.

Dynamic is what you reach for when each URL has distinct content — a blog, a docs site, an e-commerce catalog, a social profile, a SaaS dashboard. Each share should reflect that page, not a generic logo card. The two ways to generate dynamic OG images:

Template-based: render an SVG/PNG from a JSX or Handlebars template at request time. Vercel's @vercel/og is the most popular flavor. Fast, free, but constrained to a CSS subset (Satori).
Page-screenshot: take an actual headless Chromium screenshot of your live page. No template to maintain — your OG image is your design. This is what Linkshot does. See the comparison with Vercel OG for the trade-offs.

A minimal example that actually works

Drop this into the <head> of any page. Replace the URLs and you have a working OG card on every major platform:

html

<head>
  <title>Hello, World — Acme</title>
  <meta name="description" content="The acme blog: posts about widgets." />

  <!-- Open Graph -->
  <meta property="og:type"        content="article" />
  <meta property="og:url"         content="https://acme.com/hello" />
  <meta property="og:title"       content="Hello, World — Acme" />
  <meta property="og:description" content="The acme blog: posts about widgets." />
  <meta property="og:image"       content="https://acme.com/og/hello.png" />
  <meta property="og:image:width"  content="1200" />
  <meta property="og:image:height" content="630" />

  <!-- Twitter / X -->
  <meta name="twitter:card"        content="summary_large_image" />
  <meta name="twitter:title"       content="Hello, World — Acme" />
  <meta name="twitter:description" content="The acme blog: posts about widgets." />
  <meta name="twitter:image"       content="https://acme.com/og/hello.png" />
</head>

The width/height tags are technically optional, but Facebook uses them to pre-allocate space — without them you sometimes get a momentary "no image" flash before the card renders.

Why most sites get this wrong

Five mistakes, in order of how often we see them:

Relative image URLs. content="/og.png" is invalid for crawlers. Always absolute.
Image behind auth. A common SPA pattern is to put the OG image at /api/og, which redirects to /login for unauthenticated requests. The crawler is unauthenticated, so it sees the login page.
Stale platform cache. You shipped a new image but Facebook still shows the old one. Use the Sharing Debugger and click "Scrape Again."
The OG image drifts from the design. The site gets redesigned, the static OG card never gets updated, every share looks dated for months. The fix is dynamic OG — ideally one that screenshots the live page so it cannot drift.
No twitter:card meta. Twitter (X) defaults to a tiny square thumbnail unless you explicitly set summary_large_image.

If your link previews are blank or wrong right now, walk through the Linkshot OG debugger — it fetches your URL the same way a crawler does and tells you which tag is missing or broken.

How to test OG images before shipping

Each major platform has its own debugger. Use them — do not just paste the link into a chat and hope:

Facebook: Sharing Debugger — also forces a recrawl.
X / Twitter: Card Validator (deprecated but still works for previews).
LinkedIn: Post Inspector.
Slack: paste the link into a private DM with yourself. Slack's cache is short.
All platforms at once: /og-image-debugger shows what every crawler will see in one view.

When to upgrade from static to dynamic OG

If any of the following are true, a static OG image is costing you click-throughs:

You publish more than ~5 unique URLs that get shared.
Each URL has a meaningfully different headline, hero, or product visual.
Your design has changed in the last six months and the OG card hasn't.
You have measured share-CTR and it is below 2% (most generic static cards land here).

Dynamic OG via live-page screenshots removes the maintenance tax: every redesign updates the cards automatically. For frameworks where Satori's CSS subset is an issue, see full TailwindCSS support for OG and screenshot-based OG generation.

Frequently asked questions

What size should an OG image be?

1200×630 pixels is the safe default that every major platform — Facebook, X, LinkedIn, Slack, iMessage, Discord — renders correctly. The aspect ratio is roughly 1.91:1. Smaller than 600×315 will be rejected by Facebook; larger than 5MB risks truncation.

What's the difference between og:image and twitter:image?

Twitter (X) reads its own meta namespace by default. If you only specify og:image, X will fall back to it — but you should also set twitter:card to "summary_large_image" to opt into the large preview format. The image URL itself can be the same for both.

Do I need both og:image and og:image:secure_url?

No. og:image:secure_url was a workaround from the days when sites mixed http and https. If your site is fully https (which it should be), og:image alone is enough — and the URL inside it must be absolute and start with https://.

Why does my image work in the browser but not in Slack/X/Facebook?

Three usual suspects: (1) the URL is relative, not absolute — crawlers cannot follow it, (2) the image lives behind authentication, login redirects, or hotlink protection, (3) the URL returned a 200 once but is now blocked by a bot rule. Test with a real share-debugger; do not rely on opening it in your browser.

Should I use a static OG image or generate one per page?

Static is fine for a single landing page. The moment you have more than ~5 unique URLs that share differently — blog posts, products, profiles, dashboards — per-page is the better answer. Otherwise every share looks identical and click-through suffers.

How long do social platforms cache OG images?

Facebook holds them for ~30 days, X for ~7 days, Slack for ~24 hours, LinkedIn for ~7 days. To force a refresh, use the platform debugger (e.g. Facebook Sharing Debugger) and click "Scrape Again", or change the og:image URL by appending a version query string.

Can I A/B test different OG images?

Yes — but not by varying the meta tag. Crawlers cache the first version they see. The right approach is to render different OG content based on a query parameter or path, then share the variant URLs. Linkshot supports this via templates and dynamic URL parameters.

What is Open Graph, exactly?

Open Graph is a protocol Facebook published in 2010 that lets any web page describe itself as a "rich object" in a social graph. The og: meta tags were originally Facebook-specific but became the de facto standard — every social platform, chat app, and link unfurler reads them today.

Get OG images that match your design

Linkshot screenshots your live page directly — no JSX templates, no CSS subset, no drift. One <meta> tag and you're done.

Try Linkshot free Debug your OG

7-day free trial · no credit card required