OG image size, safe zones and file format

Last updated: September 20, 2026.

This page is the Open Graph dimension guide: one landscape file, a safe inner area, PNG versus JPG, and why a 4 MB export never makes it into a chat preview. It is not a cheat sheet of every network. For Facebook, X, LinkedIn, WhatsApp and Pinterest as separate destinations, use thesocial media image size table.

The default canvas

Open Graph does not require a single pixel size. The protocol says you should provide an image URL; platforms then scale it into a card. In practice, almost every English-language article and landing page is served well by 1200×630 pixels(about 1.91:1). That is wide enough that type stays sharp on a phone, and it matches the landscape card used by Facebook, LinkedIn and WhatsApp link previews.

Smaller files (800×418, 600×315) still parse. They look soft when the app upscales them. Larger files (2400×1260) are fine if you keep the file weight down, but they do not buy you a different crop. Design at 1200×630 unless you are targeting a pin board or a square crop on purpose.

Put the real width and height in meta tags so crawlers can reserve space:

<meta property="og:image" content="https://yoursite.com/og-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />

The content URL must be absolute https. A path like /og.png is the most common reason a perfectly sized file never appears.

Safe zones

Platforms crop. They letterbox. They draw rounded corners. They show the card at a width you cannot control. None of them publish an identical “safe area” spec, so the dashed box below is a publishing convention: keep the headline and logo inside a roughly 10 percent inset. If a client trims the outer 40 pixels, the sentence still reads.

Open Graph safe areaA 1200 by 630 pixel landscape frame with an inner dashed rectangle showing a 10 percent margin where titles should stay so platform crops are less likely to cut the text.1200 × 630 canvasKeep the title in this box~10% margin — not a vendor spec
Dashed box is a publishing guide, not a documented Facebook or X crop mask. Platforms do not publish an identical inset.

What belongs in the box: the title people will see in a feed, and optionally a short site name. What does not: a paragraph of subtitle, a row of tiny icons, a URL in 14px type, or a face cut by the frame. If the title needs more than three lines at a readable size, shorten the title. Do not shrink the font until it “fits.”

The OG Image Generator has a “Show safe area” toggle that draws this inset on the live preview. Use it, then look at the PNG on a phone. A 27-inch monitor lies about contrast and line length.

File format

PNG is the default for a title on a flat color or a simple gradient. Edges stay sharp. There is no JPEG ringing around letters. If the canvas is mostly type, export PNG.

JPG is the default when the background is a photograph. PNG will store every pixel of that photo and the file will jump past a megabyte. Use the generator’s JPG quality slider and watch the estimated size. Stay at the lowest quality that does not muddy the headline.

SVG is the wrong og:image. Crawlers expect a raster they can thumbnail. Some will skip SVG entirely. WebP is still uneven. You can host WebP for humans on the page; the tagged share file should be PNG or JPG until you have scraped a live URL on each network you care about.

Animation does not belong in og:image. GIFs and video posters are a different product. The tag needs a still.

File size

Vendor maximums (8 MB, 5 MB) look generous. They are not a target. A 3 MB PNG can fail a fetch, get recoded into a muddy JPG, or delay the preview until the user has already scrolled past. Aim for well under 1 MB, and closer to 200–400 KB for a title card. The generator warns when an export crosses 1 MB. That warning is a publishing heuristic, not a protocol rule.

Ways to get under the line without redesigning: drop a photo background and use a gradient; switch PNG to JPG; reduce JPG quality from 90 to 75; avoid embedding a huge logo. Do not “compress” by shrinking the canvas to 600×315 — you will pay for that in softness.

The image must return 200 to an anonymous GET, with a Content-Type the crawler understands (image/png or image/jpeg). A 403 from hotlink protection, a 302 through a tracker, or a signed URL that expires in an hour will look like “og:image not showing” even when the dimensions are perfect.

One file versus many

Most sites should ship one 1200×630 file per URL. That file is og:image and usually twitter:image. Add a second file when the destination is actually different: a 2:3 pin for Pinterest, or a 1080×1080 crop you will upload by hand. Do not maintain five near-identical landscapes “for each network.” You will forget to update four of them.

When you do need a second ratio, generate it from the same title in theOG Image Generatorand host it at a stable path. Changing pixels but keeping the URL is how caches win.

What this page is not

It is not a table of every in-app upload size (cover photos, story frames, profile headers). Those objects are not og:image. Mixing them is how people tag a 1080×1920 story as the share picture and then ask why Facebook sliced the headline off.

Pixel figures for individual networks on this site are still marked unverified in the data file. When a row earns the “Verified against official docs” badge, that badge will appear on the platform page and on the cheat sheet — not on this essay. This page’s job is the contract: 1200×630, inner margin, PNG or JPG, small file, absolute URL.

Create a 1200×630 OG image