OG Image Generator (1200×630 Social Card)

1200×630 card · title + subtitle + brand · copy-paste meta tags included

Generate the social-share image that appears when your URL is pasted into Slack, Twitter, LinkedIn, Discord, iMessage, or Facebook. Type a title and subtitle, pick a background colour, and download a 1200×630 PNG — along with the exact og: and twitter: meta tags to paste into your <head>.

Title (the headline) Subtitle (optional) Background Foreground Brand badge (optional)

Ready.

Picking title length & copy

Title: aim for under 70 characters. The font auto-shrinks for longer text, but readability drops fast past ~80.
Subtitle: one line of context. Skip if the title is self-explanatory — empty is fine.
Brand badge: your domain or product name in the corner. Helps people identify the source at a glance.

How to wire it up

Save the output as og-image.png at your site root, then add to your page's <head>:

<meta property="og:image" content="https://yoursite/og-image.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:title" content="Your page title">
<meta property="og:description" content="One-line description">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://yoursite/og-image.png">

Per-post vs site-wide

Site-wide static OG: one image, used everywhere. Fastest to set up. Use this generator once.
Per-post OG: generate one image per article. Way better engagement. Use this tool per post, or build a programmatic generator (e.g. Vercel's @vercel/og) for hundreds of pages.

Testing the result

Facebook / LinkedIn: their debuggers re-fetch and show how the card renders.
Twitter: Card Validator (now in X dev portal).
Slack / Discord: just paste the URL into a private channel.
Cache: social platforms cache OG images aggressively. If you update the image, append a query string (?v=2) and re-share, or force re-fetch via the platform debugger.

FAQ

Do I need a different OG image for each platform?

No — one 1200×630 image covers Facebook, LinkedIn, Slack, Discord, and Twitter's large card (all render at 1.91:1). Set twitter:card to summary_large_image and the same image works everywhere.

Why 1200×630?

It's the size Facebook, LinkedIn, Slack, and Twitter (large card) all render at 1.91:1. Going bigger doesn't help; going smaller can be cropped or upscaled.

Can I use a background image instead of a colour?

Not in this tool — backgrounds are gradients between the two colours. For image-rich cards, build in Figma or a programmatic generator.

Why doesn't my new image show up in WhatsApp / iMessage?

Both cache OG images hard. Re-share with a cache-busting query string, or wait a few hours.