shadcn.io— 1,000s of shadcn/ui blocks
Skip to content

Generate an Open Graph image

Every unfurl — Slack, iMessage, a link in an email — reads og:image. The size they all agreed on is 1200×630. I built this so you can compose that PNG in the tab, keep the pixels on the device, and skip the “paste your URL, we will screenshot it” sites.

Open Graph · 1200×630
on this device1.91∶1

Template properties

The copy and marks on the card. Files stay on this device.

Background

Gradient or solid, then direction, grid and grain.

Gradient direction

Grid overlay
0.15

1200×630 · Slack, iMessage, WhatsApp, most crawlers

How it works

  1. 1Type the title you want the unfurl to say out loud — one claim, not the whole meta description — and add a logo if the brand has to survive at 200 pixels wide.
  2. 2Pick a layout (centered, hero, split, notice) and a background. Toggle the safe-zone overlay and keep type inside the dashed rectangle; crawlers crop the rim.
  3. 3Download the 1200×630 PNG, host it at a stable HTTPS URL, and point og:image (plus og:image:width / og:image:height) at that file.

The size, honestly

A screenshot of the page is the usual shortcut, and it is the wrong one: crawlers crop aggressively, UI chrome survives, and type that was readable at 1440px becomes mud at 600. A purpose-built 1200×630 card is the file the protocol actually asked for — one title, one idea, no browser chrome. If the destination is X, Twitter Card Image Maker is the tighter crop; Facebook’s crawler is pickier about cache, so Facebook OG Image Maker is the page I keep for that fight.

Canvas1200×630 px
Ratio1.91∶1
Used bySlack, iMessage, WhatsApp, most crawlers
ExportPNG, composed in this tab

Frequently asked questions