Open Graph Image Size: 1200 × 630 and What Actually Breaks

When someone pastes your link into Slack, iMessage, LinkedIn, WhatsApp or Facebook, a preview card appears with a picture. That picture is the Open Graph image, and most sites get it wrong in a way nobody tells them about, because the page itself looks fine.

The Size

1200 × 630 pixels. That is a 1.91:1 ratio, and it is what Facebook, LinkedIn and most link-preview systems are built around.

Other numbers you will see quoted:

• Minimum 200 × 200 — below this, many platforms refuse to show a card at all and fall back to a plain text link.
• Minimum 600 × 315 for a large card. Under this, you often get the small thumbnail layout instead of the wide one, which is far less noticeable in a feed.
• Under 1 MB as a practical target. The documented ceilings are higher, but a slow-loading preview image sometimes simply does not appear — the platform gave up waiting.

Use 1200 × 630. It is above every minimum, it is the native ratio for the most common layout, and it downscales cleanly everywhere else.

It Is Not the First Image on the Page

This is the misunderstanding that causes most of the trouble. The preview image is declared, in a tag in the page’s head:

<meta property="og:image" content="https://example.com/img/card.jpg">

If you declare nothing, each platform guesses. The guesses are bad: a logo from the header, an icon, a tracking pixel, an advertisement, or nothing at all. Different platforms guess differently, so the same link looks different in Slack than on LinkedIn.

The full set worth declaring:

• og:image — the absolute URL. This is the single most common failure; a relative path like /img/card.jpg works in your browser and fails for every preview crawler.
• og:image:width and og:image:height — let the platform reserve the right space before it has downloaded the file.
• og:image:alt — a description, for screen readers.
• og:title and og:description — the text on the card.
• twitter:card set to summary_large_image — without it, X shows the small square layout even when your image is perfect.

The Crop Problem

You design one image, and every platform crops it differently.

• Facebook and LinkedIn: roughly the full 1.91:1 frame.
• X’s large card: closer to 2:1 — the top and bottom edges go.
• Chat apps in a message list: often a small square or a narrow strip — the left and right thirds go.
• Some apps show no image at all in the list and only reveal it when the message is opened.

You cannot satisfy all of them exactly. What you can do is treat the centre as the only reliable area. Keep the essential subject and any text inside a centred box of roughly 1000 × 520, and let the outer band carry background only. Anything that must survive a square crop has to sit inside the middle 630 × 630.

Text on the Card

A 1200-pixel-wide image is displayed at around 500 pixels in a desktop feed, and smaller in a phone chat list. That is roughly a 40% reduction, before any crop.

So text on an OG image needs to be far bigger than it looks in your design tool. A good check: shrink your 1200 × 630 export to 500 pixels wide and look at it. If you have to lean in, it is too small. In practice this means a headline of a handful of words at a very large size, not a sentence.

And remember the card already shows your og:title as real text underneath. Repeating the same words inside the image wastes the space — use the image for something the title does not say.

The Caching Trap

Platforms fetch your OG image once and cache it, sometimes for a very long time. The consequence catches people out constantly: you fix the image, re-share the link, and the old one still appears.

Two reliable responses:

• Use each platform’s own sharing debugger to force a re-fetch of that URL.
• Or change the filename. A new URL has no cache entry, so it is fetched fresh. This is the approach that works everywhere without logging into anything.

One Image for the Whole Site, or One per Page?

A single site-wide OG image is the common shortcut. It is better than nothing — it at least stops the platform from guessing — but every link you ever share looks identical, which tells the reader nothing about what they are about to open.

Per-page images do better, and they do not have to be hand-made. A reasonable middle path is a template: a consistent background and logo position, with the page’s own title rendered into it. That keeps production cheap while giving each link a card that says something specific.

Five Silent Failures

• Relative URL. Looks correct in the source, fetches nothing. Must be absolute, including https://.
• Transparent PNG. Transparency is not supported in most preview renderings and typically fills with black. Export OG images as JPEG, or as a PNG with a solid background painted in.
• Blocked crawler. If the image path is disallowed in robots.txt, or sits behind a login, or is served from a host that blocks unknown agents, the card renders empty.
• Image too slow. A very large file can time out the preview fetch. Keep it under 1 MB.
• No twitter:card. The image is fine, the layout is just small — an easy one to stare past.

Quick Reference

• 1200 × 630, ratio 1.91:1, under 1 MB, JPEG
• Declare og:image with an absolute URL — relative paths are the number one failure
• Add twitter:card = summary_large_image or X shows the small card
• Keep subject and text in a centred 1000 × 520; assume the edges are cropped
• Check your text at 500 px wide, not at full size
• Change the filename to defeat preview caching
• No transparency — it renders black