Open Graph image best practices that survive every feed

Most OG image advice stops at "use 1200 x 630". The size is the easy part. The harder part is making a card that still works when a platform crops it, shrinks it, and places it next to a dozen competing links. These are the rules that hold up across those containers.

Start with the thumbnail, not the canvas

The card you design at 1200 px wide will often be seen at 300 px or smaller. Open your canvas, zoom out to roughly the width of a phone thumbnail, and judge it there. If the headline is not readable and the brand is not recognisable, the card is not finished, no matter how good it looks at full size.

One idea, six to ten words

A card is a billboard. The headline should name the specific thing and give one reason to care. "How we cut build times by 40 percent" works. "Introducing our new platform for modern teams" does not, because it could describe a thousand companies.

If the headline needs a second sentence to make sense, the card needs a smaller idea, not smaller type. The description below the card carries the context. The image carries the hook.

Type sizes that survive a crop

At 1200 x 630, a headline between 72 and 96 px is a reliable starting range. A single line at 88 px fits roughly 18-22 characters; two lines at 72 px fit more. Anything below 48 px starts to disappear in a Slack sidebar. Anything above 110 px usually forces an awkward line break that loses the point.

• Headline: 72-96 px, 1.02-1.1 line height, tight tracking (-0.02 to -0.04 em).
• Kicker or label: 22-28 px, uppercase, generous tracking. It is secondary; do not let it compete.
• Domain or wordmark: 24-32 px. Keep it inside the safe area, not in a corner.
• Body copy: avoid it. A card is not a slide. If you need a sentence, use the og:description.

Line height matters as much as size. Display type set at 1.4 leading looks loose and pushes the block into the crop. Set it between 1.0 and 1.1, and use text-wrap: balance where you can so the lines break evenly.

Design for the aggressive crop

Every platform uses its own container. A 1.91:1 card may be shown closer to 2:1, cropped to a square in a messaging app, or reduced to a thumbnail in a dense feed. Keep the meaning in the centre and treat the edges as decoration.

One image, sent to every feed that matters

Rescales to X, LinkedIn, YouTube, and stories without redoing the layout.

• Keep type and the logo at least 64 px from every edge. Use 80 px for serif or decorative faces.
• Put the headline in the middle 80 percent of the canvas, not against the left or right edge.
• Avoid corner marks, corner text, and decorative elements that carry meaning.
• Repeat the test with a square crop. If a square removes the point, move the content inward.

Contrast beats decoration

The most common legibility failure is mid-tone type on a mid-tone gradient. Light type on a dark field or dark type on a light field is more reliable. If the background is a photograph, add a scrim or place the type in a solid panel; do not rely on the photo being dark where the text lands.

Aim for a contrast ratio of at least 4.5:1 for body-sized text and 3:1 for large display type. You do not need a calculator for every card, but if you squint and the type fades into the background, it will fail in a feed.

Make the brand recognisable, not loud

The brand mark tells people where the link goes before they read the title. A wordmark or domain line is usually enough. A full logo lockup can work if it stays legible at 300 px, but a detailed symbol often turns into a smudge. Keep the mark in the same place across cards so a series feels like a series.

ogimg.in

Now shipping

The free canvas is open, and it stays in your browser

Read the announcement

Build a system, not a pile of one-offs

If you publish more than a few times a month, consistency is a ranking asset in its own right: people start to recognise the card before they read the headline. Pick one layout per content type, then vary only the headline, the label, and the image. That is what a template does well.

• One layout per content type. Blog posts, launches, changelogs, and episodes can each have a fixed composition.
• One typeface pairing. A display face for the headline and a neutral sans for the small line. More than two faces looks like a poster.
• One accent rule. A single colour, gradient, or texture that appears across the series.
• A fixed wordmark position. Same place, same size, every card.
• A versioned filename. card.png becomes card-v2.png when the design changes, so caches refresh.

File weight and format

The card is fetched by a scraper, often on a phone, often while the reader is in a chat app. A 2 MB PNG is a liability. Target under 1 MB, and under 300 KB when you can. JPG at 85 percent or WebP at 80 percent is usually indistinguishable from PNG for a card with a photographic background. Use PNG when the design is flat colour and sharp type.

Write alt text as if the image were missing

og:image:alt and twitter:image:alt describe the image for people who cannot see it. Do not repeat the headline verbatim and do not stuff keywords. Describe what is visible: "Dark card with the headline 'Ship previews in 90 seconds' and the ogimg.in wordmark". That is also the text some platforms show when the image fails to load.

A pre-publish checklist

• 1200 x 630, 1.91:1, with the important content inside the middle 80 percent.
• One headline of six to ten words, readable at 300 px wide.
• High contrast between type and background; no mid-tone gradients behind text.
• Brand mark inside the safe area, same position as the rest of the series.
• Solid background, sRGB, JPG/PNG/WebP, under 1 MB.
• Absolute HTTPS image URL that returns 200 without a login.
• og:image:width and og:image:height match the real file.
• og:image:alt describes the image literally.
• Facebook, LinkedIn, X, Slack, and Discord previews checked.
• New filename if the design changed, so the cache refreshes.