Guide

Open Graph image sizes for every network and app (2026)

One image has to look right in a Facebook feed, a LinkedIn post, an X card, a Slack unfurl and an iMessage bubble. Here is what each one documents, where it doesn't, and the single size that works everywhere.

By Roger Campos · Last updated: September 2026

TL;DR

Use a 1200 × 630 px image (1.91:1), JPEG or PNG, under 300 KB, at an absolute HTTPS URL in og:image, and set og:image:width and og:image:height. That meets Facebook's and LinkedIn's recommendations, survives X's 2:1 crop, clears Apple's 900 px minimum and stays inside WhatsApp's 600 KB limit. Keep important content away from the edges.

Start free See the API

Free plan, no credit card. 1,000 credits a month.

The answer

The one size that works everywhere

1200 × 630 pixels, JPEG or PNG, under 300 KB, at an absolute HTTPS URL. If you only read one paragraph, that's it — the rest of this page is why, and what each network actually documents.

1200 × 630 is a 1.91:1 ratio. It is the size Facebook and LinkedIn recommend outright, it is wider than Apple's 900-pixel minimum for Messages previews, and X crops it to its 2:1 card by trimming about 15 pixels from the top and bottom. The strictest documented file limit is WhatsApp's 600 KB; staying under half of that leaves room and loads fast on the phone that fetches it.

Keep the important part — a headline, a logo, a face — inside the middle of the image, clear of the edges. Every app crops a little, some round the corners, and several show the image as a small square thumbnail when space is short.

The tags, in the page's <head>

<meta property="og:image" content="https://example.com/og/launch-post.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="The launch post's headline over a product screenshot">
<meta name="twitter:card" content="summary_large_image">

Per network

What each network documents (checked September 2026)

Where it's shared	Recommended / minimum	Aspect ratio	File size limit	Notes
Facebook	At least 1200 × 630 recommended; 600 × 315 for the large layout; 200 × 200 absolute minimum	As close to 1.91:1 as possible	8 MB	Set og:image:width/height so the first share renders the image
LinkedIn	1200 × 627 minimum	1.91:1	5 MB	Reads og:image
X (summary_large_image card)	300 × 157 minimum, 4096 × 4096 maximum	2:1	Under 5 MB	JPG, PNG, WebP, GIF (first frame); no SVG
Slack	Not documented	Not documented	Not documented	Reads oEmbed, Twitter Card and Open Graph tags
Discord	Not documented	Not documented	Not documented	No public spec for link embeds
iMessage (Apple Messages)	At least 900 px wide; under 150 px may be ignored or shown as an icon	Not specified	Page 1 MB; icons, images and video 10 MB in total	Doesn't run JavaScript; icon square, 108 px or more
WhatsApp	300 px wide or more	4:1 or narrower	Under 600 KB	Tags must be in the first 300 KB of the HTML

Sources, each read in September 2026: Facebook's image guide for webmasters, LinkedIn's help article on post previews, X's summary card with large image, Slack's page on its robots, Apple's TN3156, rich previews for Messages and Meta's WhatsApp link-preview documentation.

Two honest gaps. X's current developer site doesn't serve its card documentation; the figures above are from the last published version of that page, which we read from an archived copy. And neither Slack nor Discord publishes image dimensions at all — anything you read giving exact numbers for them is someone's observation, not a spec. In practice both show a 1.91:1 image well, and fall back to a small thumbnail for images that are small or near-square.

The other tags

The og:image tags beyond the URL

og:image is the only one you must set. The rest cost a line each and fix real problems:

Tag	What it does
og:image:width / og:image:height	Lets a network lay out the preview before downloading the image. Facebook documents that without them, the first share of a page can appear with no image.
og:image:alt	A text description for people using screen readers. X's equivalent is twitter:image:alt, up to 420 characters.
og:image:type	The MIME type, e.g. image/jpeg — useful when the URL has no extension.
twitter:card	summary_large_image asks X for the large-image layout; without it you may get the small thumbnail card.
twitter:image	An image for X only. Leave it out and X falls back to og:image, which is usually what you want.

You can list more than one og:image; most readers take the first. And give each page its own image where you can — X's documentation asks for an image representing the page's content rather than a site-wide logo, and a distinct image is what makes a shared link stand out in a feed.

Why it breaks

Why your og:image doesn't show up

Most broken previews aren't a size problem. In rough order of how often they bite:

1
The tag is added by JavaScript. Preview bots read the HTML your server sends and don't run scripts — Apple says so explicitly for Messages. A framework that sets og:image after hydration produces a tag no preview bot sees. Check with curl, not DevTools.
2
The URL is relative. /og/post.jpg means nothing to a bot that isn't on your page. Use an absolute https:// URL.
3
The image can't be fetched. It's behind a login, a bot check, a hotlink rule or a robots.txt disallow. Request it yourself with a plain HTTP client.
4
The file is too big. WhatsApp's limit is 600 KB, and a 3 MB PNG that works on LinkedIn silently shows nothing there.
5
You're seeing a cached preview. Apps cache what they fetched, sometimes for days. Facebook's Sharing Debugger and LinkedIn's Post Inspector re-scrape on demand; elsewhere, adding a query string to the image URL forces a fresh fetch.
6
The tags are too far down. WhatsApp only reads the first 300 KB of the HTML. A head full of inlined CSS and scripts can push og:image past it.

Check what a bot sees

# Is og:image in the HTML the server sends — not just after JavaScript runs?
curl -sL https://example.com/post | grep -io '<meta[^>]*og:image[^>]*>'

# Is the image reachable, and how big is it?
curl -sIL https://example.com/og/launch-post.jpg | grep -iE '^(HTTP|content-type|content-length)'

Making the image

Generate og:images from an HTML template

Designing an image per page by hand doesn't scale. The usual approach is a template: an HTML page sized 1200 × 630 that takes the title, author and date from the URL, rendered to an image by a headless browser. You style it with the same CSS as your site, and every new post gets a preview the moment it's published.

Any screenshot tool does the rendering. With URLpipe's /screenshot endpoint it is one call: set the viewport to the image size and turn off full-page capture. The response carries an X-Result-Url header — a link to the image that needs no API key and stays valid for 30 days — or store the Base64 body on your own CDN, which is the better home for an image you'll reference from a page for longer than that.

POST /screenshot

{
  "url": "https://example.com/og-template?title=Launch%20week",
  "sync": true,
  "screenshot_options": {
    "full_page": false,
    "viewport_width": 1200,
    "viewport_height": 630,
    "format": "jpeg",
    "quality": 85
  }
}

Check it

See what a preview bot will find

The Open Graph checker takes a URL and returns the share image, title and description the page declares, reconciled across Open Graph, Twitter Card and standard tags. It renders the page first, so it also finds tags your JavaScript adds — which makes it a quick way to spot the first failure above: if the checker finds an og:image that curl doesn't, the tag is client-side and preview bots will miss it. For the reconciliation rules themselves, see the guide on extracting Open Graph metadata.

FAQ

Frequently asked questions

What is the best Open Graph image size?

1200 × 630 pixels, a 1.91:1 ratio. It is what Facebook and LinkedIn recommend, it fits X's large card with a small crop, and it is wide enough for Apple's Messages previews.

What is the maximum og:image file size?

It varies: Facebook allows 8 MB, LinkedIn 5 MB, X under 5 MB, and WhatsApp asks for under 600 KB. Aim for under 300 KB and every app will fetch it quickly, including on a phone.

Why isn't my og:image showing up?

The usual causes: a relative URL instead of an absolute one, the tag added by JavaScript (preview bots don't run it), an image behind a login or refused to automated clients, a file too large, or the app showing a cached preview from before you fixed it.

Should I set og:image:width and og:image:height?

Yes. Facebook documents that without them the first share may render with no image until Facebook has fetched the image once, and other clients use the dimensions to choose between a large image and a thumbnail.

Can I use WebP or SVG for og:image?

X documents WebP support and rejects SVG. Support elsewhere is uneven, and WhatsApp in particular is unreliable with WebP, so JPEG or PNG is the safe choice.

Try it yourself

Free tools for this

No signup — run these on a real page right now, then call the same endpoint from your code.

/meta API docs /screenshot API docs

Keep reading

Extracting page metadata Screenshot a website programmatically HTML to Markdown for LLMs Reading a Lighthouse audit Rendered vs. raw HTML All guides

Put this into practice.

Each of the eight kinds of data URLpipe returns has a free, no-signup tool — try the ideas from this guide on a real page, then grab an API key to run them from your code. 1,000 credits a month, no card.

Start free Email the team