Open Graph Image Size - the 1200x630 Standard

The one file size every platform turns into a link card, and the tag that declares it.

The words "One tag, every card" in bold white type over a purple-and-navy grainy gradient with a small code icon, the featured image for this post. Try this template
Photo by MagicPattern on Unsplash

Make your Open Graph image 1200×630 pixels, a 1.91:1 ratio, and declare it with an og:image tag in the page head. That one file is what Facebook, LinkedIn, X, Slack, and Discord each turn into a link card. One image, one tag, every platform. That is the whole answer; the rest is the tag itself, how each platform unfurls it, and why a preview sometimes comes up wrong.

A diagram of an Open Graph card: a 1200 by 630 pixel frame at a 1.91 to 1 ratio, with a dashed centered safe zone where content survives every platform's crop.
The whole spec in one frame: 1200x630 at 1.91:1, with the centered safe zone every platform's crop keeps.

The reason this has a single right answer is that you are not designing for your own site here. You are handing a file to someone else’s scraper and letting it decide the crop. The platforms read the same protocol and converged on the same shape, so the spec is narrow on purpose. Get the tag and the ratio right and the card renders itself.

The tag that declares the image

A link preview starts with one line in your page’s <head>:

<meta property="og:image" content="https://yoursite.com/blog/post/cover.webp"/>

That content value has to be an absolute URL - full https://, not a path starting with /. Scrapers run off your site, so a relative path resolves to nothing and the card comes up blank. This is the single most common reason a preview shows text but no image.

The og:image tag carries the picture. A small set of companion tags makes it render faster and more reliably:

TagWhat it carriesWorth setting
og:imageThe absolute image URLRequired
og:image:widthWidth in pixels (1200)Recommended
og:image:heightHeight in pixels (630)Recommended
og:image:altA plain description of the imageRecommended
og:image:typeThe MIME type, like image/webpOptional

Setting og:image:width and og:image:height lets the scraper reserve the right box before the file finishes downloading, so the card does not flicker or collapse on first paint. og:image:alt is the accessibility line a screen reader announces for the card; keep it a real sentence describing the picture, the same way you would write alt text for any featured image. The full protocol, including the handful of other og: properties, lives in the Open Graph protocol spec.

One more line is worth knowing if X matters to you. X reads your og:image as a fallback, but it stays on a small thumbnail card unless you opt into the big one:

<meta name="twitter:card" content="summary_large_image"/>

Add that and X renders your 1200×630 image as a full-width card instead of a cramped square tile.

Why 1.91:1, and not 16:9 or 2:1

The 1.91:1 ratio is just the shape Facebook published for its link card, and the rest of the ecosystem matched it so one file would work everywhere. 1200 divided by 630 lands at 1.905, which everyone rounds to 1.91:1. That is the whole reason the magic numbers are 1200 and 630 and not a rounder pair.

It is close to 16:9 but not the same, which is why a hero built for your article and the link card the platform shows are slightly different shapes; which size to use for which job is its own piece. Here, the only shape that matters is the card, and the card wants 1.91:1.

You will also see “2:1” thrown around for X. Do not design to it. X reads your og:image and center-crops it to its own card, so a centered 1200×630 is already safe. Build for 1.91:1, keep the subject centered, and X handles the rest.

How each platform reads the tag

Facebook, LinkedIn, Slack, and Discord all read the same og:image and unfurl it into a card on their own. You write the tag once and they each handle the fetch. X is the one that needs a nudge: it reads og:image as a fallback but stays on a small thumbnail unless you opt into the large card with twitter:card set to summary_large_image, the line from the section above.

The other thing they share is a cache. Every one of these scrapers fetches your og:image once and holds the result, sometimes for days, so a freshly changed image keeps showing the old one until the scraper re-fetches. Each platform ships a sharing debugger that forces a fresh scrape on demand, which is the fix when a preview comes up stale.

What actually differs between platforms is the pixel size each feed wants, and a centered 1200×630 clears almost all of them. The per-platform breakdown - the tall pin Pinterest prefers, the square Instagram post, which feed wants which file - is its own reference.

The floor, the ceiling, and the file weight

The size you design at is 1200×630. The limits around it are worth knowing so you do not trip over them.

There is no hard minimum in the protocol. The Open Graph spec sets none, and the example image in the spec is a tiny 400×300. Facebook recommends a 200×200 floor as the smallest it will accept, but accepted and good-looking are different things: anything under roughly 600×315 renders as a small thumbnail card instead of a full-width one. So the real practical floor is 600×315 if you want the big card, and there is no reason to ship below 1200×630 anyway.

On the ceiling, X rejects any image over 5MB, which is the cap most worth remembering because it is the one a heavy export can actually hit. Stay well under it. A photographic 1200×630 card saved as WebP lands comfortably under 150KB at a quality around 80 to 86, so file weight is a non-issue unless you ship an uncompressed PNG. WebP has around 96% browser support and runs 25 to 34% smaller than JPEG, so it is the safe default for the card.

Why your preview looks wrong

When the card comes up stale, blank, or with the old picture, it is almost always the scraper’s cache or a relative og:image URL, and the full debugging walkthrough lives in why your link preview is not showing. If the terms themselves are blurring - whether this is your featured image, your cover, or a separate OG file - the difference between them sorts that out, and if you are setting it through a CMS, adding a featured image in WordPress shows where the platform writes the tag for you.

Make the file once

The whole spec comes down to one file and one tag: a 1200×630 image at 1.91:1, declared with og:image and pointed at by an absolute URL. Build that, keep the subject centered, and every platform turns it into a card without you fighting the crop. When you want to make the file, open Lede - it has a 1200×630 OG preset and a one-click 2x WebP export - or start from a gallery template and swap in your own title.