What size should an OG image be?

1200 by 630 pixels covers almost everything: X, Facebook, Slack, Discord and iMessage all read the same og:image tag. LinkedIn prefers a slightly shorter 1200 by 600. A square 1200 by 1200 suits WhatsApp and some feeds. Export the 1200 by 630 first, and only add the others if those platforms matter to you.

Why does my text get cut off when the image is shared?

Because platforms crop. The same file is letterboxed by one app, centre-cropped by another and shown whole by a third, so anything near the edge is at risk. Turn on the safe area overlay and keep the words inside the dashed box. That margin is why cards designed to fill the canvas look broken in a Slack unfurl.

Is the preview really what I get?

Yes, literally. The preview is the export canvas at full resolution, scaled down by CSS rather than redrawn. Most generators show you a styled div and then produce the PNG separately, which is how a card that looked fine ends up with clipped descenders. Here there is only one render.

Do I still need the meta tags?

Yes. The image does nothing until a page points at it. Host the PNG somewhere public, then paste the meta block from the panel below the preview into your head, with the image URL swapped for your own. Absolute URLs only, since crawlers do not resolve relative paths.

Why is my new image not showing when I share the link?

Platforms cache aggressively. Facebook, LinkedIn and X each run their own scraper and will keep serving the old card for a long time. Every one of them has a debugger or post inspector that forces a refetch, which is the fastest way to see a change.

Is anything uploaded?

No. The card is drawn on a canvas in your browser and the PNG is encoded there too, so neither the text you type nor the logo you add leaves the machine.

OG Image Generator

Design the image that shows up every time your page is shared. Live preview at the real export size, a visible safe area so platforms cannot crop the words off, and the meta tags to go with it.

Open Graph · 1200×630

—

Meta tags

<meta property="og:title" content="The modern toolkit for building online" />
<meta property="og:description" content="Tools, AI models and workflows, in one place." />
<meta property="og:image" content="https://example.com/og-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://example.com/og-image.png" />

Content

Template

Eyebrow9/60

Title38/120

Subtitle45/160

Title, subtitle and logo aligned left. The safe default.

Style

Presets

Background

Gradient to

TextAuto contrast

Logo

Optional. A square PNG or SVG sits above the title. Transparent backgrounds work best.

Drawn in your browser. Nothing you type or upload is sent anywhere.

Write the card

An eyebrow, a title and a supporting line. The title resizes itself to fit.

Set the look

Pick a preset or your own colours, add a logo, and check the safe area.

Export and wire it up

Download the PNG, host it, then paste the meta tags into your head.

Questions

What size should an OG image be?: 1200 by 630 pixels covers almost everything: X, Facebook, Slack, Discord and iMessage all read the same og:image tag. LinkedIn prefers a slightly shorter 1200 by 600. A square 1200 by 1200 suits WhatsApp and some feeds. Export the 1200 by 630 first, and only add the others if those platforms matter to you.
Why does my text get cut off when the image is shared?: Because platforms crop. The same file is letterboxed by one app, centre-cropped by another and shown whole by a third, so anything near the edge is at risk. Turn on the safe area overlay and keep the words inside the dashed box. That margin is why cards designed to fill the canvas look broken in a Slack unfurl.
Is the preview really what I get?: Yes, literally. The preview is the export canvas at full resolution, scaled down by CSS rather than redrawn. Most generators show you a styled div and then produce the PNG separately, which is how a card that looked fine ends up with clipped descenders. Here there is only one render.
Do I still need the meta tags?: Yes. The image does nothing until a page points at it. Host the PNG somewhere public, then paste the meta block from the panel below the preview into your head, with the image URL swapped for your own. Absolute URLs only, since crawlers do not resolve relative paths.
Why is my new image not showing when I share the link?: Platforms cache aggressively. Facebook, LinkedIn and X each run their own scraper and will keep serving the old card for a long time. Every one of them has a debugger or post inspector that forces a refetch, which is the fastest way to see a change.
Is anything uploaded?: No. The card is drawn on a canvas in your browser and the PNG is encoded there too, so neither the text you type nor the logo you add leaves the machine.

All labs

Pairs with

The catalog behind this tool: real, published entries with verified pricing and licensing, not a list of affiliate links.

Meta Tag GeneratorWire the image into a page.Favicon GeneratorThe other half of shipping.Growth toolsMeasure what the share earns.