OG Image Generator

An Open Graph image is a fixed box with user-supplied text in it, which is the oldest hard problem in typesetting. The text is whatever someone types, and the box does not move. Most generators handle the conflict by cutting the text off.

How to use it

1. Type your headline. Watch it re-fit as you go.
2. Add a subtitle and a label if you want them.
3. Check the sidebar size readout underneath the preview.
4. Download the PNG and copy the meta tags.

Fitting instead of truncating

When text does not fit a box there are three things you can do: make the box bigger, make the text smaller, or throw some text away. The box is fixed at 1200×630 by the platforms, so that leaves two.

Nearly every generator picks a font size, wraps at it, and truncates the overflow with an ellipsis. It is easy to build and it means a headline of 70 characters arrives on Twitter with its last three words missing.

This one searches instead. It sets the type at the maximum size you allow, measures the wrapped result, and steps the size down until the block fits the available height in no more than four lines. Whatever size that lands on is what gets drawn. Truncation only happens if the text will not fit even at the readable floor, and when that happens the tool says so explicitly rather than hiding it behind three dots.

The search steps down rather than bisecting, because the wrap boundary is not monotonic — adding two pixels of size can change the line count by one and the total height by more than the size difference. Stepping guarantees the true maximum; bisection can skip it.

The number nobody else shows you

Cards are consumed at wildly different sizes. A Facebook feed post renders the image near its full width. A Slack sidebar unfurl renders it at roughly 360 pixels — under a third.

That scaling applies to your type. A 40-pixel headline in a 1200-pixel canvas arrives at about 12 pixels in a sidebar, which is smaller than body text on a phone. It looked generous in the editor and it is unreadable where a large share of your links get seen.

So the tool reports both numbers as you type: the size in the file, and the size it renders at in a small card. Below about 14 pixels it warns you outright. The fix is always the same and always the same one people resist — write a shorter headline.

Layout from the bottom up

The card is composed upwards. The label sits on a baseline near the bottom edge, the subtitle sits above it, a short rule above that, and the headline takes whatever vertical space is left.

Doing it the other way round — headline first, then everything below — means a long headline pushes the label off the bottom of the canvas. Anchoring the small elements and giving the flexible one the remainder keeps the composition stable across headlines of any length, which matters when you are generating cards for a hundred pages from the same template.

Empty fields collapse rather than leaving gaps, so a card with only a headline is centred sensibly instead of floating at the top.

The meta tags matter as much as the image

An image nothing links to is not a social card. The generated snippet includes og:title, og:description, og:image, the explicit width and height, and twitter:card set to summary_large_image.

That last one is the single most common omission. Without it, X and several other services fall back to the small summary layout and squeeze your carefully composed 1200×630 into a square thumbnail. The width and height tags matter less but still help: they let a platform reserve the right space before the image has downloaded, which avoids a layout shift in the feed.

Set the og:image URL to wherever you actually upload the PNG. It has to be an absolute URL — relative paths do not work in Open Graph, because the crawler is not resolving them against your page.

Everything renders on your own device, and nothing is uploaded.