🪧 OG Image Generator

Design the 1200×630 card your link unfurls into on X, LinkedIn and Slack. Live preview, entirely in your browser.

output 1200×630 PNG — the size every platform renders

About the OG Image Generator

When a link is pasted into Slack, X, LinkedIn or WhatsApp, the platform fetches the page, reads its og:image meta tag, and renders that image as the preview card. A page without one gets a grey box and a fraction of the clicks. This tool designs that image at the one size every platform renders — 1200×630 — with a live preview and no design software.

The generator favours the layout that works: a bold left-aligned title that steps its size down as it grows, an optional subtitle, and a small site label anchored bottom-left. Drop a screenshot behind it and a dark overlay keeps the text readable — the text must win, or the card is decoration rather than a headline.

How to use it

Write the title — under 70 characters reads best at card size.
Pick a template and colours, optionally dropping a screenshot as the background.
Download the PNG and upload it to your site.
Wire the meta tags: og:image (absolute URL), og:title, og:description, and twitter:card = summary_large_image.
Re-scrape with the platform's debugger after changes — cards are cached hard.

Frequently Asked Questions

What size should an OG image be?

1200×630 pixels (a 1.91:1 ratio) is the size Facebook, LinkedIn, Slack, WhatsApp and X/Twitter all render well. This tool outputs exactly that. Keep important content away from the extreme edges — some clients crop a few percent when fitting the card into their layout.

How do I use the generated image on my site?

Upload the PNG to your site, then reference it in your page's <head>: <meta property="og:image" content="https://yoursite.com/og.png"> plus og:title and og:description. Twitter/X additionally reads <meta name="twitter:card" content="summary_large_image">. The URL must be absolute and publicly reachable — crawlers fetch it, browsers don't.

Why does my new OG image not show when I share the link?

Social platforms cache the card aggressively. After changing the image, run the page through the platform's debugger — Facebook's Sharing Debugger or LinkedIn's Post Inspector — to force a re-scrape. Renaming the image file (og-v2.png) sidesteps every cache at once.

Can I use my own screenshot or photo as the background?

Yes — drop an image and it is drawn cover-fit behind the text with a dark overlay so the title stays readable. Busy screenshots benefit from nudging the overlay darker; the text must win or the card is decoration, not a headline.

Is anything uploaded when I generate a card?

No. The card is drawn on a canvas in your browser and downloaded from there. Draft titles for unannounced posts stay on your machine.

What makes a good OG title?

Under ~70 characters, front-loaded with the concrete promise, no site name (that's what the small label is for). The generator steps the font size down for longer titles, but a title long enough to need 44px is usually a title worth shortening.

Open Graph images: the guide to link previews that get clicked

Paste a link into Slack, WhatsApp, LinkedIn or X and the platform fetches the page, reads its Open Graph meta tags, and renders a preview card. The og:image is most of that card's area — a page without one gets a grey placeholder and measurably fewer clicks, which makes the OG image the highest-visibility image most pages ship while being the one nobody assigns design time to.

Braxik's OG image generator produces the card in your browser: type the title, pick a template and colours, optionally drop a screenshot behind the text, and download the finished 1200×630 PNG. No design tool, no template marketplace, no upload.

The layout decisions are opinionated on purpose. Text wraps with real measurement and steps its size down as titles grow rather than overflowing; a single overlong word — a URL, an identifier — hard-breaks instead of escaping the card; and a dropped background image gets a darkness-adjustable overlay because the title must stay readable over anything.

1200×630 (1.91:1) is the one size that renders correctly on every major platform, which is why it is the only size this tool produces. Platforms that want squarer crops cut from the centre — keep the important content away from the extreme edges and one image serves them all.

How it works

The card is drawn live on an HTML canvas as you type: background first (gradient, solid or your image cover-fitted with an overlay), then the title wrapped by measured text width with a font size stepped to its length, then the subtitle and the site label with its accent dot.

Text wrapping uses the canvas's own text measurement, so line breaks are computed against real rendered widths rather than character counts — the difference between clean wrapping and lines that overflow with wide characters.

Download exports the canvas as a PNG at exactly 1200×630. Your settings persist locally between visits, so regenerating a card for the next post starts from your house style rather than from scratch.

Common uses

Generate a card for each blog post so shared links unfurl with a headline instead of a grey box.
Create consistent cards for a documentation site or changelog, where individual page screenshots would be noisy and unbranded.
Put a product screenshot behind a dark overlay and a benefit-led title for launch announcements.
Produce event and webinar cards with date and title without waiting on a designer for a five-minute asset.
Refresh the card for an old post being re-promoted — re-scrape with the platform's debugger after uploading.
Standardise team blog cards: same template, same colours, different titles — the settings persist in your browser between sessions.
Mock up how a proposed title reads AS a card before committing to it — a headline that dies at 44px is a headline worth shortening.

Before you rely on the result

Keep titles under about 70 characters: the generator handles longer ones by stepping the font down, but card impact drops with font size.
Check contrast after dropping a background image — nudge the overlay darker until the text wins unambiguously.
Keep critical content away from the outer ~5% of the card; some clients crop slightly when fitting their layout.
Reference the image with an ABSOLUTE URL in og:image — crawlers resolve nothing relative, and localhost URLs obviously never work.
Add twitter:card = summary_large_image alongside the OG tags, or X renders a small thumbnail instead of the full-width card.
Re-scrape after every change with the platform's debugger (Facebook Sharing Debugger, LinkedIn Post Inspector) — preview caches are aggressive, and renaming the file (og-v2.png) beats every cache at once.
Test the card at thumbnail size — shrink the preview to 300px wide and check the title still reads; that is how most people will see it.