Designers usually start from the canvas: 1200 × 630, generous margins, a headline that looks great in Figma. Then a crawler crops 12% off the left edge and the layout falls apart. The fix is not a bigger margin — it is a grid with a defined safe area.
Start from the safe area, not the canvas
Work backwards. The canvas is 1200 × 630, but only the centred 1024 × 512 is guaranteed to survive a square crop. Put every element that must be readable inside that box, then let the outer band carry texture and brand colour only.
- Canvas — 1200 × 630 (1.91:1).
- Safe area — 1024 × 512, centred. Everything critical lives here.
- Bleed — the remaining 88px horizontally and 59px vertically. Background only.
- Logo — top-left inside the safe area, 72 × 72 with a 16px radius.
- Headline — starts at 76px, drops to 56px when it wraps past two lines.
- Footer strip — site name and domain, always inside the safe area.
Crop differences, in practice
Every platform keeps the 1.91:1 ratio for large cards, so wide layouts are safe. The problems appear in compact and square contexts.
- 01 Discord compact embeds and WhatsApp both render a square thumbnail. A centre-weighted composition survives; a left-aligned headline does not.
- 02 X keeps the full card but truncates the title around 70 characters. Keep the headline front-loaded.
- 03 LinkedIn renders the card in a narrow mobile feed, so anything below 32px of visual weight becomes noise.
- 04 Slack renders at a fixed 360 × 188 in the sidebar, roughly 30% of the native size. Hairlines disappear entirely.
Hierarchy that survives scaling
A card is read in roughly 0.4 seconds at scroll speed. Three levels are enough: an identifier (logo plus site name), one headline, and one line of supporting text. Anything else competes for the same 512px of safe height.
- Level 1 — headline at 76px, 700 weight, 1.1 line height, maximum three lines.
- Level 2 — supporting line at 32px, 400 weight, maximum two lines.
- Level 3 — site name at 22px, always in the footer strip, never competing with the headline.
Colour and contrast
Platforms render cards on light, dark and tinted backgrounds. A card that relies on a light grey background to separate a light grey headline will look flat in dark mode. Pick a foreground from the background luminance instead of hand-picking it — that is what the brand template does, computing contrast from your brand colour.
luminance = 0.299R + 0.587G + 0.114B
if luminance > 150 → foreground #2a2418 (ink)
else → foreground #ffffff (paper)Build the grid once, reuse it everywhere
The generator ships four templates built on exactly this grid — minimal, gradient, dark and brand. Export the same parameters as PNG, WebP and SVG and the composition stays identical, so a card you approved in the preview is the card that ships.
An OG image is not a poster. It is a 1024 × 512 interface with a decorative border.