OG Image Generator (1200×630 Social Card)
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>.
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.
Part of: Build an Open Graph preview card
1200×630, and JPG rather than PNG — a few scrapers still refuse PNG for og:image.
- 1 OG image The 1200×630 card, title and all
- 2 Text to PNG Set a headline as its own image if you need more control
- 3 PNG to JPG The format every scraper accepts
- 4 File size Keep it under 300 KB or previews time out
Part of: Build a starter brand kit from one logo
Everything downstream wants a different shape of the same mark. Make the square master once and derive the rest from it.
- 1 Initials avatar A fallback mark if there is no logo yet
- 2 Solid color Flat brand-colour plates at any size
- 3 OG image The 1200×630 social card
- 4 Watermark The mark, applied over photography
- 5 Favicon kit Every icon size a browser and an OS ask for