OG Preview
Guide

The perfect OG image: size, safe zones & file weight

The image is the part of a link preview that stops the scroll — and the part most likely to be cropped, blurred or dropped. One master size works everywhere, but only if you respect where each platform trims it and how heavy the file can be.

The one size to design for

1200 × 630 pixels, an aspect ratio of 1.91:1. This is the size Facebook, LinkedIn and X all use for the large image card, and it's what you should export every preview image at. Declaring the dimensions helps the first render land correctly:

<meta property="og:image" content="https://yoursite.com/preview.jpg"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="630"> <meta property="og:image:alt" content="Plain-language description of the image">

Going larger (2400 × 1260) keeps the same ratio and looks crisper on high-density screens — fine, as long as the file stays light. Going smaller than 600 × 315 downgrades you to a tiny thumbnail on several platforms.

Where each platform crops

Everyone starts from 1.91:1, but the visible area differs by surface. The safe move is to keep anything critical — logo, headline text, a face — inside the centre, away from the edges.

SurfaceEffective cropWatch out for
Facebook / LinkedIn feedFull 1.91:1Edges can be shaved a few px
X (Twitter) large card~1.91:1, slight side trimRounded corners clip the very edge
WhatsApp / iMessageOften a smaller square-ish thumbFine detail and small text vanish
Slack / Discord unfurlFull image, smaller scaleText must survive shrinking
The safe-zone rule: imagine a margin of ~10% on every side. Keep the headline and logo inside that inner ~960 × 500 box. Then no matter how a platform trims, the message stays intact.

Make the text legible

Your preview is often seen at half its resolution in a crowded feed. Design for that:

  • Big type. Six to ten words maximum, in a weight and size that reads on a phone. If you'd squint at it, so will everyone.
  • High contrast. Dark text on a light panel, or light text on a solid brand colour. Avoid text over a busy photo without an overlay.
  • Don't rely on the title tag. The og:title shows below the image; the words in the image are what carry at a glance. Repeating the key phrase visually is good.

File format and weight

  • PNG or JPG only. Crawlers do not render SVG, WebP support is inconsistent, and animated GIFs show as a single frame. Use JPG for photos, PNG for flat graphics and text.
  • Keep it light. Facebook accepts up to 8 MB and X up to 5 MB, but aim for well under 1 MB. A heavy image that's slow to fetch may be skipped, leaving you with no preview at all.
  • No transparency. Transparent PNGs get an unpredictable background (often black) in feeds. Fill it with a solid colour.
Absolute URL, always. og:image must be a full https:// address. A relative path like /preview.jpg can't be resolved by an external crawler, so the image quietly disappears — the single most common cause of a "text-only" preview.

One image, or one per page?

A single branded default is fine for a small site — it's better to have one clean, on-brand card everywhere than a blank preview. But per-page images (the article's headline baked into the graphic) measurably lift click-through, because the preview mirrors the specific content. Many teams automate this with a template that renders the title onto a background at build time.

Check before you publish

You don't have to guess whether your image survives the crop. Paste your tag values — or fetch them from a live URL — into the preview tool and look at the Facebook, X and LinkedIn cards side by side. If the headline is readable and nothing important sits under the crop line in all three, your image is ready. For the full pre-launch checklist, see link preview not showing?

Next: how each platform reads your tags · fix a broken preview · back to the tool