What Is an OG Image? The Complete Guide

An OG image is the picture that appears when someone shares your link on X, Facebook, LinkedIn, Discord or WhatsApp. You control it with one line of HTML — <meta property="og:image" content="https://yoursite.com/image.png"> — and when it is missing, platforms collapse your carefully crafted page into a sad, imageless line of text.

That is the whole idea. The rest of this guide covers the details: which tags you actually need, what size the image should be, why previews break, and how to check and generate them for free.

How OG images work

“OG” stands for Open Graph, a protocol Facebook introduced in 2010 so any web page could declare rich, structured preview data. Other platforms adopted it wholesale: LinkedIn, Discord, WhatsApp and even X (via Twitter Cards, which fall back to Open Graph — more on that below).

When a platform sees your link, it sends a crawler to fetch the page and reads the Open Graph tags from the <head>:

<meta property="og:title" content="What Is an OG Image? The Complete Guide" />
<meta property="og:description" content="How the link preview picture works — and how to control it." />
<meta property="og:image" content="https://yoursite.com/images/og-guide.png" />
<meta property="og:url" content="https://yoursite.com/blog/what-is-an-og-image" />
<meta property="og:type" content="article" />

It then renders those values — not the visible content of your page — as the preview card. If the tags are missing, the platform improvises: it may use the <title> tag, the first paragraph, or nothing at all.

The critical detail people miss: the og:image URL must be absolute and publicly reachable. A path like /images/og.png works in a browser but fails in a crawler that resolves it against its own domain.

Why OG images matter more than you think

When your link is pasted into a chat or feed, the preview is not decoration — it is the ad:

It is the first impression. Readers see a 1200×630 image, a title and a description before they see anything else about your site.
It decides the click. A link with a clear, branded image reads as legitimate; a bare URL reads as spam, even when the content is identical.
It compounds. Every share — every tweet, every Discord message, every WhatsApp forward — reuses the same image. One hour of setup works for years.

If you run a blog, a SaaS, or any page you ever want people to share, a correct og:image is the highest-leverage HTML you will write.

The essential Open Graph tags

Tag	Required	What it does
`og:title`	Yes	The headline of the preview card. Keep under 60 characters.
`og:description`	Yes	One or two lines of summary. Keep under 200 characters.
`og:image`	Yes	The preview image, 1200×630, absolute HTTPS URL.
`og:url`	Recommended	The canonical URL, so shares consolidate.
`og:type`	Recommended	`website` for pages, `article` for posts.
`og:site_name`	Optional	Your brand name.

A minimal, correct setup is four tags — title, description, image, url — and you are covered on every major platform.

The right OG image size (2026 edition)

One size genuinely works everywhere:

Platform	Recommended	Notes
X (Twitter)	1200×628 (2:1)	1200×630 is accepted and looks identical.
Facebook	1200×630	Hard limit 5 MB; bigger files get dropped.
LinkedIn	1200×627	Crops 1200×630 by 3 pixels — keep margins safe.
Discord	1200×630	Renders as an embed image.
WhatsApp	1200×630	Image must be under 300 KB or the preview disappears.

So: 1200×630 pixels, JPG or PNG, under 300 KB if WhatsApp matters to you, under 5 MB always. Avoid SVG — most platforms refuse to render it.

File size is the underrated half of that rule. WhatsApp quietly drops previews for images over 300 KB, which is why a page can look perfect on Facebook and arrive as bare text in a WhatsApp group. Compress before uploading.

How to see your OG image (before your audience does)

Open the OG Image Checker and paste your URL. You will get:

Live previews for X, Facebook, LinkedIn, Discord and WhatsApp side by side — the closest thing to testing in each app without opening five apps.
A tag audit: every og:* and twitter:* tag, marked pass / warn / fail, with the exact fix for each problem.
The real image diagnostics: dimensions, file size and format of your actual og:image, not just whether the tag exists.

It is free, requires no signup, and there is also a free API if you want to check pages from CI or a script.

Why your OG image is not showing (the big four)

The tag is missing — or it is there, but a framework renders it client-side after the crawler has already left. Crawlers do not run your JavaScript.
The image URL is relative — /og.png instead of https://yoursite.com/og.png.
The file is too big — over 5 MB fails on Facebook; over 300 KB fails on WhatsApp.
The platform cached an old preview. Platforms cache aggressively. After fixing, re-scrape: use X’s post checker or Facebook’s Sharing Debugger, and give LinkedIn and WhatsApp a few minutes.

Making the image: three honest options

1. Use your free OG Image Generator. Pick one of three templates, drop in your title and brand color, download a 1200×630 PNG. Runs entirely in your browser, no watermark, no account. This is the right choice for most blogs and side projects.

2. Design it. Figma, Canva or Photoshop with a 1200×630 frame gives you full control. Export PNG, compress if needed.

3. Generate it in code. If every page needs a unique image (docs sites, e-commerce), render them automatically with Satori and Vercel’s OG image pipeline — the same library our generator uses, server-side. One line in your framework’s head component points og:image at the generated file.

Open Graph vs Twitter Cards

You will meet two tag families:

<meta property="og:image" content="https://yoursite.com/og.png" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://yoursite.com/og.png" />

Open Graph (og:*) is read by Facebook, LinkedIn, Discord and WhatsApp. Twitter Cards (twitter:*) apply to X. The good news: with twitter:card set to summary_large_image, X falls back to your og:* tags when twitter:image is missing — so correct Open Graph tags cover every platform, plus two extra lines if you want to be explicit for X.

FAQ

What does OG stand for? Open Graph — the protocol Facebook created in 2010 that standardized how web pages declare preview metadata.

Do I need a different image for every page? Not strictly, but you should. A shared blog post with an image matching its title dramatically outperforms a generic site-wide image. Use a generator or automated rendering for this.

Does Google use the OG image in search results? Not for regular blue links (it uses its own thumbnails and favicons), but correct OG tags help Google understand your page, and Google Discover frequently reuses og:image.

Can I use an SVG as an OG image? No. Facebook, LinkedIn, WhatsApp and Discord do not reliably support SVG. Export a PNG or JPG at 1200×630.

How do I test an OG image? Paste your live URL into the OG Image Checker — you will see the actual previews for all five major platforms plus a full tag audit, in about ten seconds.