What is the best Open Graph image size?

1200×630 pixels at a 1.91:1 ratio. Every major platform accepts it, renders it as a large card, and downscales it cleanly to the 600×315 minimum. Keep the file under 1 MB so crawlers fetch it quickly.

Do I need a separate image for X (Twitter)?

No. X falls back to og:image whenever twitter:image is absent. Adding twitter:card set to summary_large_image is enough to get the wide layout instead of a small square thumbnail.

Why does my image look cropped on some platforms?

Platforms use different ratios. LinkedIn and Slack are close to square-ish thumbnails in some surfaces, and Discord crops to the centre. Keeping text inside the middle 80% of a 1200×630 canvas means every crop still contains the message.

Should I use PNG or JPG for an OG image?

PNG when the design is mostly text and flat color — edges stay crisp. JPG when the background is photographic and you want a smaller file. Either way stay under 1 MB, and never go below 600×315.

Does the OG image affect search rankings?

Not directly. It affects click-through rate on social and messaging platforms, which in turn affects how much traffic a page earns. Google also shows the image in some rich results, so a clean card is still worth the effort.

OG image sizes for every platform and the shared safe zone

A share card is the first thing anyone sees of your page, and it is assembled from a handful of <meta> tags that most teams write once and never check again. The image is the part that breaks most often, because every platform crops it differently.

Here is the short version: ship one 1200×630 PNG, and keep everything that matters inside the middle 80%.

What each platform actually renders

Platform	Preferred ratio	Minimum	Notes
Facebook	1.91:1	600×315	Falls back to a 1:1 crop in some feed placements
X / Twitter	1.91:1	600×335	Needs `twitter:card` set to `summary_large_image` for the wide layout
LinkedIn	1.91:1	1200×627	Rejects images it considers too small instead of upscaling
Slack	1.91:1	—	Unfurls the `og:image`; blocks over-sized files
Discord	1.91:1	—	Crops to centre; ignores `twitter:*` entirely
iMessage	1.91:1	—	Uses `og:image`, falls back to the site favicon if missing

Notice that the ratio column is identical. That is the whole point: 1200×630 is the lowest common denominator, and producing a second asset per platform buys you almost nothing.

The differences appear in the crop. A 1.91:1 image placed in a square feed slot loses roughly 25% from each side.

The safe zone

Keep the following inside a centred 960×504 rectangle — that is 80% of the canvas:

the headline
your logo or wordmark
any call to action

The outer 120 pixels on each side are expendable. Background texture, gradients and decorative shapes can live there; text cannot.

A practical way to check: shrink your image to 200 pixels wide and look at it. If the message is still readable at that size, it will survive every crop a platform applies.

What to put in the image

Four elements, in priority order:

A headline under 60 characters. Front-load the promise. Anything past the first six or seven words gets clipped in small placements.
A visual anchor — a product shot, a diagram, a large number. This is what makes the card scannable in a busy feed.
The site name, small, in a corner of the safe zone. It builds recognition on repeat shares.
A contrast check. Light text on a light photo disappears. Pick a background dark enough that your headline holds at 200 pixels wide.

Do not put your URL in the image. The platform renders the domain underneath the card anyway, so it is duplicated information.

Wiring it up

The image is useless unless the tag points at an absolute URL:

<meta property="og:image" content="https://example.com/og/launch.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Launch announcement card">
<meta name="twitter:card" content="summary_large_image">

The og:image:width and og:image:height tags are not decoration — they let Facebook and LinkedIn render the correct aspect ratio on the first scrape instead of the second. The alt tag is read aloud by screen readers on some surfaces and is worth filling in.

Common mistakes

Relative paths. content="/og.png" silently fails. Crawlers do not resolve relative URLs against your page. Every image URL in a meta tag must be absolute and HTTPS.

Optimising for the wrong surface. A card that looks beautiful in the Facebook feed may be unreadable in the Slack unfurl, which renders at roughly a third of the width. Design for the smallest placement you care about, not the largest.

Never checking the result. The tags you wrote and the tags the crawler received are frequently different things — a framework may override your <head>, or a CDN may rewrite it. Fetching the live page and looking at what actually came back is the only way to know.

Shipping a 4 MB PNG. Some platforms skip images above a few megabytes rather than downscaling them. Export at 1200×630 and keep it well under 1 MB.

Where this tool fits

Our OG image generator renders the 1200×630 canvas in your browser, shows the safe zone, and hands you the meta block above ready to paste. Nothing is uploaded — the file is drawn on a canvas locally.

Once it is deployed, run the URL through the meta preview debugger to confirm the card the platforms actually receive.