Link preview fixes

Wrong-shaped share images get cropped and mangled

Logos, banners, and square art crammed into a 1.91:1 slot, cut differently by every platform.

Sprite®

coca-cola.com

Sprite - Official Home Page

Broken

A 477px logo upscaled into a 1200px slot: fuzzy, clipped, and anonymous. Very common.

Obey Your Thirst

Obey Your Thirst

coca-cola.com

The OpenGraph+ Fix

Composed at the slot's own size, nothing cropped or stretched.

The share slot has a shape: roughly 1200x630, a 1.91:1 rectangle. Everything that isn’t that shape gets negotiated by the platform, and the platform always wins.

The usual suspects are assets that already existed for another job. Sprite points its og:image at a 477x180 logo, so the large card it declares gets a tiny wordmark upscaled into fuzz. Spindrift ships a page banner, wide and thin with the subject off to one side, so the centre-crop cuts the subject out. SoundCloud ships an asset literally named unfurl-square, album-art instincts in a widescreen world. Twitch points its tags at a logo and declares the small summary card on top of it, so a video platform unfurls as a thumbnail with nothing to watch.

None of this shows up in a tag validator, because the tags are valid. The failure is aesthetic, it happens per platform, and the person who shipped the tag usually only ever checked one.

What's at stake

You look broken exactly where it matters

Group chats crop hardest, and that's where your link sits next to a friend saying "you have to try this." A mangled card next to that endorsement reads as a broken site.

Every platform mangles you differently

X letterboxes, Facebook centre-crops, iMessage does its own thing. You designed one brand and feeds are showing four accidental ones.

The small card caps every impression

Declare the summary format and even a perfect image renders as a thumbnail. One meta tag caps the size of every share.

How to fix it

By hand

Compose at 1200x630

Build share images at 1.91:1 with the subject centred and text inside the safe area. A logo file or a page banner is composed for a different job and will crop badly.

Declare the large card

Set twitter:card to summary_large_image so platforms use the big format. Then check the result on more than the one platform you usually test.

With OpenGraph+

Rendered per platform, per size

OpenGraph+ renders your card at each platform's exact dimensions, so X, Facebook, LinkedIn, and iMessage each get an image built for their slot instead of a crop of something else.

Composition instead of cropping

Because the card is rendered, not resized, nothing important can fall outside the frame. The layout is the frame.

Fix it once, keep it fixed

Connect your site and OpenGraph+ renders every page into its own card, synced automatically as your site changes.