Open Graph image sizing: what breaks on social previews

Facebook, LinkedIn, and Slack crop, letterbox, or replace an Open Graph image when the aspect ratio is wrong, and they keep the old preview until you force a new scrape. The size that survives most of those crops is 1200 by 630 pixels (1.91:1). Crop Image reframes an existing picture to that ratio, and Resize Image scales a file that is already larger. Do not upscale a small asset.

A square 1080 by 1080 Instagram export pointed at og:image will fail this way in public. LinkedIn wants about 1.91:1. The crawler center-crops, and a logo can shrink to a corner of the icon.

What the tags do

When someone shares your URL, crawlers read:

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

That image is the link preview. A cropped or missing one is often the difference between a click and a scroll-past.

Sizes that hold up

| Platform | Recommended | Aspect | Notes | | --- | --- | --- | --- | | Facebook / Meta | 1200 by 630 | 1.91:1 | Minimum 600 by 315 | | LinkedIn | 1200 by 627 | about 1.91:1 | Similar crop behavior | | Twitter/X large card | 1200 by 600 | 2:1 | Set twitter:card | | Slack | 1200 by 630 | 1.91:1 | Unfurl from OG tags | | Discord | 1200 by 630 | 1.91:1 | Uses OG when present |

The default that covers this table is a 1200 by 630 PNG or JPEG under 5 MB. Under 1 MB is better when you care about speed.

Where text and logos can sit

Mobile crops shave the edges. Keep anything that must remain inside the center 80 percent:

• Title: two lines at most, 60 to 80 px type at a width of 1200
• Logo: a corner or the center, not bleeding off the edge
• Thin borders: they disappear when the preview is scaled down

Build the template at the export size. A poster scaled down later will not land on 1200 by 630.

Crop Image reframes existing art to 1.91:1. Use Resize Image when the source is larger. Upscaling a small file only makes it blurry. See Hero Image Weight Budgets.

Format and file weight

• JPEG for photos and gradients. Compress Image at quality 80 to 85 keeps the file smaller.
• PNG for flat graphics, text overlays, and sharp logos.
• WebP support is growing. Check each platform. JPEG and PNG are the safer Open Graph files today.

A heavy Open Graph image slows crawlers. It also hurts the page if you reuse the same 2 MB hero as the preview. See Lazy Loading Mistakes.

Images generated per route

Next.js opengraph-image.tsx can build an image per route, which fits tool pages and blog posts. Check three things:

• Font files are embedded, or the system fallback is still readable
• The template is tested at 1200 by 630
• Generated routes send cache headers

For how tool pages should read, see Helpful Content on Tool Pages.

Tags you need at minimum

<meta property="og:title" content="..." />
<meta property="og:description" content="..." />
<meta property="og:image" content="absolute HTTPS URL" />
<meta property="og:url" content="canonical URL" />
<meta property="og:type" content="website" />

Image URLs have to be absolute. A relative path breaks crawlers. Most platforms also require HTTPS.

How to test before you publish

1. Deploy the page with the final Open Graph image.
2. Open Facebook Sharing Debugger and choose Scrape Again after a change.
3. Open LinkedIn Post Inspector.
4. Share into a private Slack channel.
5. Check the crop on a phone.

Caches last for days. A new filename (og-launch-v2.jpg) refreshes faster than overwriting the same URL.

What the broken preview usually means

| Symptom | Likely cause | | --- | --- | | A random image from the page | Missing og:image; the crawler used the first <img> | | Blurry preview | Image under 600 px wide | | Square image cropped badly | Wrong aspect ratio | | No image | robots.txt blocked the crawler, or the page is behind a login | | Stale image | Platform cache; refresh in the debugger |

Open Graph, favicon, and the hero are different files

• A favicon is 16 to 512 px and sits in the tab. See Favicon Format Sizes.
• A hero is the on-page LCP image. It can be a portrait.
• The Open Graph image is a wide preview for shares.

Pointing og:image at favicon.ico, or at a tall blog crop, sends the wrong aspect ratio.

Contrast on the overlay

Screen readers on your site do not read the Open Graph image. The overlay is still the thing people see in the feed. Keep enough contrast when you put a headline on it. See WCAG Contrast on Image Text.

Platform quirks

Slack unfurls can cache for 7 days or more, so a new filename matters. Discord shows the embed at about 400 px wide and still looks better from a 1200 px source. iMessage crops square sources hard. Some email clients and CRMs build link previews from Open Graph tags, so test the sales sequence too.

A template you can reuse

Keep a Figma component with the safe zone locked, an export preset at 1200 by 630, and text layers bound to CMS fields if Next.js opengraph-image.tsx generates the file.

Testing two images

Some teams try two Open Graph images on a blog post and track click-through from social analytics with UTM parameters. Change the image URL for each test. Reusing the same URL for a different picture leaves the old preview in the cache.

Limits

Platforms cache the preview by URL. After you upload a corrected 1200 by 630 image, you usually have to trigger a re-scrape in the card inspector, or change the filename, before the new picture shows up.

Ship 1200 by 630 images, keep text in the safe zone, use absolute HTTPS URLs, and check the platform debuggers. A square Instagram export is a different asset. One aspect ratio keeps the launch crop from eating the logo.