OG image generator — social previews that get clicked

What makes a social card work

A good OG image is read in half a second in a crowded feed, which argues for exactly three things: a short headline in large type, enough contrast to survive a dimmed phone screen, and your site name so the source registers even without a click. The templates here are built around that — no decoration that competes with the headline, and automatic text contrast on any background color.

Write the card headline for curiosity, not completeness: the page title can be precise, but the card is an invitation. Six to ten words is the sweet spot — the generator shrinks longer titles to fit, but shorter almost always reads better.

A card for every page, without a designer

Blogs, changelogs, documentation pages, event announcements, job posts — anything shared in Slack or on social benefits from its own card. A consistent template with a changing headline takes seconds per page here and reads as deliberate branding. Once downloaded, run the PNG through the image compressor if your site budget counts every kilobyte, and check how the headline reads with the word counter character limits for social platforms.

Frequently asked questions

What is an OG image and why does it matter?

The Open Graph image is the link preview picture platforms show when a link is shared — on X, LinkedIn, Facebook, Slack, Discord and iMessage. Links with a purposeful card get noticeably more clicks than a grey placeholder or a random screenshot, which makes the OG image the highest-leverage pixel on most pages.

What size should an Open Graph image be?

1200 × 630 pixels is the size every major platform documents, and it is exactly what this generator exports. The 1.91:1 ratio survives cropping on X and Facebook, and LinkedIn's recommended 1200 × 627 is close enough that the same card works there too. Keeping the headline inside the central area — as the templates here do — avoids edge cropping on smaller previews.

How do I add the image to my page?

Upload the PNG to your site and reference it in the page head: <meta property="og:image" content="https://yoursite.com/og.png"> plus <meta name="twitter:card" content="summary_large_image">. Most frameworks (Next.js metadata, Astro, Hugo) have a field for it. After deploying, paste the URL into a platform's share debugger to refresh its cache.

Is anything uploaded when I design a card?

No. The card is drawn on a canvas in your browser and the PNG is generated locally — text, colors and any uploaded logo never leave your device. There is no watermark and no sign-up.

Can I use my own brand colors and fonts?

The Gradient template accepts any two colors and Paper/Accent accept any background, with text color switching automatically for contrast. Text renders in Inter, a neutral sans-serif that stays legible at preview sizes. Custom font upload is deliberately left out — mismatched fake-brand typography usually looks worse than a clean neutral card.

What does Toolizto Pro add to the OG image generator?

The free tier includes all four templates, custom colors, alignment and standard 1200×630 PNG download. Pro ($9.99/month or $79.99/year, covering every Toolizto tool) adds your own logo on the card, 2× resolution export (2400×1260), and removes ads.