OG image size: the dimensions that work on LinkedIn, X, Facebook, Slack and WhatsApp

The short answer is 1200 x 630 pixels, a 1.91:1 ratio, saved as a PNG or JPEG well under 600 KB. Meta recommends that size for Facebook, LinkedIn asks for nearly the same, and it fits inside what X, WhatsApp and iMessage document. Now the caveat. No platform promises to show the whole image. X’s large card is 2:1, small previews shrink it, Apple advises against text in preview images at all, and Slack and Discord publish no image specs. This page gives the one OG image size, what each platform actually documents, and where to keep text so a crop cannot cut it.

Before you resize anything, look at what your page sends today. The free Open Graph checker reads your og:image and X card tags, checks the image they point to, and shows the link preview for LinkedIn, X, Facebook, Slack and WhatsApp. It draws the card from your tags; each app still has the final say on how it renders.

Each figure is a documented limit from the platform’s own page: Meta^[1], LinkedIn^[4], WhatsApp^[7] and Apple^[8]. No survey or study figures are used on this page.

The one OG image size that works almost everywhere

The 1200 x 630 figure is not folklore. It comes from Meta. Its page on images in link shares says: “Use images that are at least 1200 x 630 pixels for the best display on high resolution devices.” On shape, it says to “keep your images as close to 1.91:1 aspect ratio as possible to display the full image in Feed without any cropping”^[1]. 1200 divided by 630 is 1.905, which rounds to 1.91.

Other platforms land close by. LinkedIn’s minimum is 1200 x 627 at the same 1.91:1 ratio^[4], so 1200 x 630 clears it by three pixels of height. Apple advises images at least 900 pixels wide for iMessage previews^[8]. WhatsApp wants 300 pixels or more in width^[7]. X’s large card asked for a 2:1 ratio and at least 300 x 157^[5]. One image at 1200 x 630 meets every documented minimum on that list.

Bigger is not better past this point. Every extra pixel adds bytes, and the strictest documented file limit is WhatsApp’s: the image “should be under 600KB in size”^[7]. So check the exported file, not just its dimensions.

Open Graph image dimensions by platform

Every cell below is quoted from the platform’s own documentation, read on 6 October 2026. Where a platform says nothing, the cell says so. Many size charts online fill those gaps with numbers we could not trace to any platform.

Facebook

Meta sets three thresholds. “The minimum allowed image dimension is 200 x 200 pixels.” At least 600 x 315 is needed “to display link page posts with larger images”, and anything smaller “will still display in the link page post, but the size will be much smaller.” And 1200 x 630 or more is the size for high resolution screens. The file “must not exceed 8 MB”^[1].

LinkedIn

LinkedIn’s help page is short and specific: “Minimum image dimensions: 1200 (w) x 627 (h) pixels”, a “Recommended ratio: 1.91:1”, a 5 MB maximum, and JPG, PNG or GIF. Small images are not rejected, they are demoted: “Images less than 401 pixels wide display as a thumbnail image”^[4]. If a correct image still does not show, LinkedIn suggests your site may be blocking it from fetching the file. The LinkedIn post preview guide covers stale cards and how to refresh them.

X (Twitter)

For the large card, X’s documentation said: “Images for this Card support an aspect ratio of 2:1 with minimum dimensions of 300x157 or maximum of 4096x4096 pixels. Images must be less than 5MB in size. JPG, PNG, WEBP and GIF formats are supported. Only the first frame of an animated GIF will be used. SVG is not supported”^[5].

WhatsApp

Meta documents WhatsApp link previews in its business messaging docs. The og:image is “an absolute URL” and the image “should be under 600KB in size. Image should be 300px or more in width with 4:1 width/height or less aspect ratio.” The page’s <head> must also sit “within the first 300KB of the HTML”. When something is off, WhatsApp may relax the rules or fall back to a small preview, but Meta warns that “this should not be relied on”^[7]. The WhatsApp link preview guide walks through the usual failures.

iMessage

Apple’s technote gives the clearest numbers of any platform: “Images should be at least 900 pixels in width.” “Images less than 150 pixels in width may be ignored or presented as icons.” The linked page itself is limited to 1 MB, and its icons, images and videos to 10 MB in total. Apple adds that these are “guidelines only. Limits may change in the future”^[8]. Apple also gives advice most charts leave out, covered in the safe zone section below.

Slack and Discord

Slack documents how its crawler behaves, not what size to use. Slackbot reads “oEmbed and Twitter Card / Open Graph tags”, fetches “as little of the page as it can”, fetches any referenced image “to check validity and extract other metadata”, and caches results for around 30 minutes^[9]. It gives no image size, ratio, file limit or format.

Discord publishes no link preview documentation at all. A pull request to add it to Discord’s developer docs was opened on 16 September 2026 and was still open when we checked^[10]. Until it ships, Discord figures on other sites cannot be traced to a Discord document.

Pinterest

Pinterest is the exception to the landscape rule. For standard image Pins it says: “We recommend using a 2:3 aspect ratio, or 1000 x 1500 pixels.” It warns that “Pins with an aspect ratio greater than 2:3 might get cut off in people’s feeds”, and accepts PNG or JPEG^[11]. A 1200 x 630 card is the wrong shape for a Pin. If Pinterest matters to you, put a tall image in the page itself rather than changing your og:image for everyone.

Safe zones: where to put text so a crop cannot cut it

Start with the limit: no platform publishes a safe zone for link images. What follows is arithmetic on the documented shapes, plus our own rules of thumb. Treat it as practical guidance, not a platform rule.

A 1200 x 630 image is 1.91:1. When a platform shows it at that ratio, nothing is lost. When it shows a different shape, something has to go. The platforms do not document where they anchor a crop, so the table assumes an even trim from both sides.

Apple goes further than any crop table. Its advice for iMessage is to “Avoid text in preview images”, because images “may be displayed at varying sizes depending on context and device, potentially making text unreadable.” It suggests keeping the image graphical and putting words in the metadata instead^[8]. That is a fair warning even outside iMessage: the title already travels in og:title, so the image does not have to carry it.

Our rules of thumb, from the arithmetic above:

• Design at 1200 x 630, and keep anything that matters at least 60 to 80 px from every edge.
• Centre the key element. A headline or face in the middle survives the 2:1 trim and most of a square crop. One hugging the left edge does not survive a square.
• Use few words, very large. Five words at 60 px or more have room to shrink. A sentence at 30 px has none.
• Nothing important in the corners. Small logos, dates and borders at the edges are the first things a crop removes.

Our own cards are an honest example of the trade-off. This site renders every share image at 1200 x 630, with 72 px of padding top and bottom and 80 px at the sides. The headline is left-aligned, so it would not survive a square crop. The site declares X’s large 2:1 card instead, where, on the even-trim assumption above, only thin strips at the top and bottom are at risk. And the cards do put the headline in the image, against Apple’s advice, because one card has to serve every platform.

Image meta tags: og:image and the tags around it

The image is only half the job. The image meta tags tell each crawler where it is, what it is and how big it is. These are the ones worth setting:

<!-- Open Graph: read by Facebook, LinkedIn, WhatsApp, iMessage, Slack and others -->
<meta property="og:image" content="https://example.com/og/pricing.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Three pricing plans side by side, the middle one highlighted" />

<!-- X: the large 2:1 card, with its own image and alt text -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://example.com/og/pricing.png" />
<meta name="twitter:image:alt" content="Three pricing plans side by side, the middle one highlighted" />

og:image points at the file. Use an absolute URL, which WhatsApp requires^[7]. Meta caches images by URL: they “won’t be updated unless the URL changes”, so a new image needs a new URL^[2].

og:image:width and og:image:height are optional in the protocol^[12], but Meta asks for them so its crawler can “render the image immediately without having to asynchronously download and process it”^[3]. Its webmaster guide puts it as making sure the image “loads properly the first time it’s shared”^[2]. Without them, the first person to share a new page may get a card with no image.

og:image:type is the file’s MIME type^[12]. Meta lists three values: image/jpeg, image/gif or image/png^[2]. That is one more reason to skip WebP for share images, even though X accepts it.

og:image:alt describes the image for people who cannot see it. The protocol says it is “A description of what is in the image (not a caption)”, and that if a page specifies an og:image, “it should specify og:image:alt”^[12]. X has its own twitter:image:alt, with a maximum of 420 characters^[5].

More than one og:image is allowed. The protocol says “The first tag (from top to bottom) is given preference during conflicts”^[12], so put the image you want first. The Open Graph protocol guide covers every other tag, including the rest of the X card.

How to generate OG images

A handful of pages can live with images exported by hand from a design tool. Past that, people stop making them, and pages go out with no og:image or the same logo on every link. Generating them from code fixes that: each page gets a card built from its own title, at the right size, every time.

In the Next.js App Router, a file named opengraph-image in a route folder becomes that page’s image. It can be a static .jpg, .png or .gif, or a .tsx file that returns an image from code. Next.js then writes og:image, og:image:type, og:image:width and og:image:height into the page head, plus og:image:alt from an alt export. It also enforces the platform limits on static files: if an opengraph-image file passes 8MB or a twitter-image file passes 5MB, “the build will fail”^[13].

// app/pricing/opengraph-image.tsx
import { ImageResponse } from "next/og";

export const size = { width: 1200, height: 630 };
export const contentType = "image/png";
export const alt = "Pricing: three plans, from free";

export default function Image() {
  return new ImageResponse(
    (
      <div
        style={{
          width: "100%",
          height: "100%",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          padding: 80,
          background: "#ffffff",
          fontSize: 72,
          fontWeight: 700,
          textAlign: "center",
        }}
      >
        Pricing: three plans, from free
      </div>
    ),
    { ...size },
  );
}

The code route uses ImageResponse, which turns JSX and CSS into a PNG with Satori and Resvg. Its default canvas is 1200 x 630. Three limits catch people out: “Only flexbox and a subset of CSS properties are supported”, so no CSS grid; the bundle, fonts and images included, has a maximum of 500KB; and fonts must be ttf, otf or woff^[14].

This site works exactly this way. Every post folder, this one included, has a few-line opengraph-image.tsx that hands the post’s title to one shared template, so there is one card design rather than dozens drifting apart. The Next.js SEO guide covers the rest of what a Next.js site sends to search engines and AI crawlers.

Open Graph image examples: patterns that work

These are patterns, not other people’s images. Each one suits a kind of page, and each has a way to go wrong.

The last row is the most common mistake. X’s own card docs told sites not to use “a generic image such as your website logo, author photo, or other image that spans multiple pages”^[5]. A logo tells someone who made the page. It does not tell them what the page says, which is the reason they would click.

A good example of each pattern shares three traits. One subject. Large shapes that still read at thumbnail size. And a clear link to the page: the product it sells, the number it reports, the person who speaks.

How to check your OG image

Your own browser never shows the card, so check it the way the platforms see it. Start with the Open Graph checker, which reads the tags, checks the image and previews the card on five platforms in one pass. Then confirm on the platforms that matter most to you:

• Facebook: Meta’s Sharing Debugger shows how its crawler reads your markup, and “also triggers a scrape of your page”, which refreshes a stale card^[2].
• LinkedIn: Post Inspector does the same job. The LinkedIn guide has the steps.
• Slack: Slack documents no refresh tool, and it caches for around 30 minutes^[9], so wait half an hour before you test a fix.
• WhatsApp: send the link in a chat. Meta says that if no preview appears above the composer box after 10 seconds, check that every requirement is met^[7].

From the command line, two requests answer most questions: which image the tags name, and whether that image answers 200 with an image content type and a sensible file size.

# 1. Which image do the tags point at?
curl -s https://example.com/page | grep -io '<meta[^>]*\(og\|twitter\):image[^>]*>'

# 2. Does that image answer 200, with an image type and a sane size?
curl -sI https://example.com/og/page.png | grep -iE "^HTTP|^content-type|^content-length"

Put the tags early in the <head>, too. WhatsApp needs the head within the first 300KB of HTML^[7], Slack fetches as little of the page as it can^[9], and Apple stops at 1 MB for the page^[8]. Tags that only appear after JavaScript runs may never be seen: Apple says its previews do not run JavaScript^[8].

After the click

A good share card earns a click when someone posts your link. There is a step before that one, with no card at all: whether ChatGPT, Perplexity or Gemini name your brand when someone asks about your category. CoreCited tracks that. The free AI visibility checker gives a first reading, and every plan limit is on the pricing page.

Questions people ask

Sources