Skip to content
OGCheckup

Preview doctorog:image:width

Why your preview image is small or cropped

There is an image, but it shows as a small thumbnail, loses its edges, or doesn't load on some apps. The size, shape and weight of the file decide which.

Shows on
Check your page

Updated

The 2-minute fix

Export the image at 1200×630 pixels as a JPEG under about 300 KB, then declare its size with these tags. That fits every major platform. The OG image size cheat sheet has each one’s exact numbers.

<meta property="og:image" content="https://example.com/images/share.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

Why it shows as a small thumbnail

Each platform has a threshold below which it switches from the large image card to a small square beside the text, or drops the image:

  • Facebook: below 600×315 it shows a thumbnail, and below 200×200 no image at all.
  • X: the large card needs at least 300×157 and twitter:card set to summary_large_image (see the twitter:card guide).
  • LinkedIn: images narrower than 401 pixels become a thumbnail.
  • WhatsApp and Telegram: images under 300 pixels wide, or close to square, become a thumbnail.

The checker measures the real pixel size from the file, so it catches a small image even when the tags claim a large one. It warns below 600×315 and notes anything under 1200×630, which can look soft on high-density screens.

Why it’s cropped

Large cards are wide: about 1.91:1 on Facebook, LinkedIn and WhatsApp, and 2:1 on X. A square or portrait image is cut to fit, so it loses its top and bottom. The checker flags images whose width divided by height is outside 1.6 to 2.2.

Use 1200×630 and keep text and faces away from the edges. X crops a 1200×630 image to 2:1, which takes about 15 pixels off the top and the bottom.

When the file is too heavy

  • Facebook doesn’t show images over 8 MB, X none over 5 MB and LinkedIn none over 5 MB.
  • WhatsApp has no published limit, but often skips images over a few hundred KB. The checker notes files over about 600 KB.

A 1200×630 JPEG at quality 80 to 85 is usually 100 to 300 KB. PNG suits flat graphics and text; photos are much smaller as JPEG. If you replace the file, give it a new URL so platforms don’t keep the old one.

The width and height tags

og:image:width and og:image:height tell platforms the size before they download the image. Without them, Facebook may show no image the first time a link is shared, while it fetches the file in the background. Use the image’s real pixel size: wrong values can make a platform pick the wrong layout, and the checker compares them with what it measured.

Making a good image

  • Design at 1200×630, with a short headline in large type, readable at thumbnail size.
  • Use one image per page where you can, so each shared link looks different.
  • To generate one per page automatically, Next.js can render images from code with an opengraph-image.tsx file (Next.js docs (opens in a new tab)), and other frameworks can use the same library, Satori.

Then check the image to see its measured size, ratio and file weight in all eight previews.