Laying out the card…
Size1200 × 630
Weight—
Deepest crop15 px
LegibilityReads
The picture that appears when someone pastes your link into Slack, X, or a group chat. Designing one at full size is the easy part — the failure nobody catches is that a card built at 1200 pixels wide is drawn at 400, where a headline set at 48px arrives at 16 and is skipped. This shows the card at the two shapes destinations display and at the three widths they draw it, so both failures are visible before you ship the tag.
Step by step
01Write the card, not the design
An eyebrow, a headline, a description, a site name. The headline is clamped to three lines and the description to two, because a card that overflows its own box is the most common way these go wrong.
02Check the crop
Facebook, LinkedIn, Slack, Discord and iMessage show 1.91:1 as-is. X's large summary card is 2:1 and trims a band off the top and bottom. Each destination is previewed at the shape it uses.
03Check the size it is really drawn at
The ledger converts your headline size to what it becomes at three feed widths. This is the number that decides whether anyone reads the card, and it is the one no other generator reports.
04Take the PNG and the tags
The image, plus the six meta tags it is useless without — including og:image:width and og:image:height, whose absence is why a correct image sometimes still unfurls small.
Worked example
A card is authored at 1200 pixels wide and never displayed at that size. Everything else follows from the ratio between the two.
Given
Authored size against rendered size
550px wide ×0.46 → 22px comfortable
400px wide ×0.33 → 16px readable, not inviting
300px wide ×0.25 → 12px at the floor
220px wide ×0.18 → 9px decorationMultiply the authored size by a quarter and you have what a narrow feed shows. That is the number to design against: a headline needs to survive at 300 pixels of card width, which puts the practical floor at roughly 56 pixels authored and makes 72 a comfortable default. Designers used to print or to web layout consistently set this two sizes too small, because at 1200 pixels on a large screen a 48px headline looks enormous.
Before you ship the tag
1200 × 630 is the one size worth having
The 1.91:1 ratio originated with Facebook's large link card and was adopted by LinkedIn, Slack, Discord, WhatsApp and X. A single asset at that size renders correctly everywhere, and maintaining per-platform variants buys nothing but drift.
X is the only common destination that crops
X's summary_large_image card displays at 2:1, so a 1.91:1 asset loses a shallow band from the top and bottom. It is small enough that a card with normal padding never notices — and large enough to take the descender off a headline pushed to the edge.
Rendered width is the number that matters
Platforms publish the size to upload and never the width they draw it at, because that moves with window size, column layout and every redesign. Somewhere between 300 and 550 pixels covers the range, and a headline has to survive the bottom of it.
Declare the width and height in the tags
Without og:image:width and og:image:height, a scraper that has not yet fetched the image does not know its shape, and several will fall back to a small thumbnail on first encounter. The two tags cost nothing and remove that failure entirely.
A gradient card should not be a PNG
PNG is lossless, so a smooth gradient costs it dearly: the default card here is 654 KB as PNG and 45 KB as JPEG at quality 0.9 — fourteen times smaller, with no difference visible at any width a feed draws it. Keep PNG for flat colour and hard-edged type, and only then.
Text in the image is not text to a machine
A headline drawn into a picture is invisible to search engines, screen readers, and anyone with images disabled. The og:title and og:description tags are what those read, so the card should repeat the title rather than replace it.
The judgement call
Authored size, and what it survives.
A short headline, five words or fewer
80–96px
Short copy can afford the size, and it still reads at 300 pixels of card width.
A full sentence headline
64–72px
Two or three clamped lines at a size that survives the narrow case. The safest general answer.
A long title you cannot cut
56px
The floor. Below this a narrow feed drops it under 11 pixels and readers skip the card entirely.
A title longer than three lines at 56px
Rewrite the title
The card clamps and ellipsises it. A cut headline reads as a broken page, not a long one.
A card that is mostly a logo
Any size
A mark survives scaling in a way type does not. The legibility check only governs the headline.
Anything under 48px
Too small
It looks generous on a 1200-pixel canvas and arrives at 12 pixels in a feed. This is the most common mistake in OG design.
Reference
FAQ
1200 × 630 pixels, a 1.91:1 ratio. That single asset renders correctly on Facebook, LinkedIn, Slack, Discord, WhatsApp, iMessage and X, and keeping per-platform variants buys nothing. Declare the dimensions in og:image:width and og:image:height as well, or a scraper that has not yet fetched the file may fall back to a small thumbnail.
Because it was designed at 1200 pixels wide and is displayed at roughly 300 to 550. A headline set at 48px on the canvas arrives at about 12px in a narrow feed, which readers skip. Design against the narrow case: around 72px authored is a comfortable default, and 56px is the practical floor.
Yes, slightly. X's summary_large_image card displays at 2:1 while the standard OG asset is 1.91:1, so a shallow band is trimmed from the top and bottom. It is small enough that a card with normal padding is unaffected, which is why 1200 × 630 remains the right size to upload rather than making a separate one for X.
Facebook documents a ceiling of 8 MB, but the practical target is under 1 MB. The image is fetched before the preview can be drawn, often on a phone over a mobile connection, so file size decides whether the card unfurls immediately or arrives well after the message it belongs to.
JPEG, for almost any card with a gradient or a photograph behind it. PNG is lossless and pays heavily for smooth tonal change — the default card in the Tinapps OG image generator measures 654 KB as PNG against 45 KB as JPEG at quality 0.9, with no visible difference at the width a feed draws it. Reserve PNG for flat colour and hard-edged type.
Yes. Text drawn into an OG image is invisible to search engines, screen readers, and anyone browsing with images off — the og:title and og:description tags are what those read, and several platforms display them beside the picture. Repeat the headline in the tags rather than treating the image as a substitute.
No. The Tinapps OG image generator lays the card out with satori running in your browser and rasterises it on a canvas in the page, so your copy, colours and logo are never sent anywhere. That also means it keeps working with the network disconnected once a typeface has loaded.
The card is laid out and rasterised entirely in your browser. Copy, colours, and any logo you add are never uploaded.
Keep going
GitHub social preview
The same job for a repository card, at 1280 × 640.
SVG background
Generate a shape to sit behind the card instead of a flat gradient.
Contrast checker
Check the headline against its background before exporting.
Image compressor
Bring the PNG under a megabyte if a photograph pushed it over.