How to create OG images that get clicks

You can write the best blog post on the internet, and if your OG image is the default site banner (or worse, missing entirely), most of your audience will scroll past the link. Open Graph cards are the cover art of the modern web — Slack, X, LinkedIn, iMessage, Discord and link preview bots all use the same 1200 × 630 rectangle to decide whether a human bothers to click.

The good news: clickable OG images follow a tiny set of rules. Once you learn them, every post you ship gets a higher CTR for free.

The spec: 1200 × 630, 1.91:1, under 1 MB

The OG card is the most opinionated unit of social design:

• Dimensions: 1200 × 630 pixels exactly. Smaller and Slack falls back to a tiny inline thumbnail; bigger and most previewers downscale unpredictably.
• Aspect ratio: 1.91:1. LinkedIn, in particular, will letterbox or pad anything else.
• File size: under 1 MB. PNG for solid backgrounds, JPG (quality ~90) for photo or gradient backgrounds.
• Safe zone: keep critical content inside the central 1100 × 580. Edges get cropped on some surfaces.

Anatomy of an OG card that converts

Treat every OG card like a billboard you have one second to read. The pattern that performs is almost always the same:

1. One short headline. Six to ten words, maximum. Big enough to read on a 200-pixel-wide phone preview.
2. One visual proof. A screenshot, a chart, a logo, a product photo — something the eye can grab in under a second.
3. One brand mark. A tiny logo or wordmark in the corner so people know whose post is in the feed.

That’s it. No stock photos, no clever wordplay, no decorative noise. Three elements: text, proof, brand.

Typography rules that double your CTR

Most OG cards die from too-small type. Phones render OG previews at roughly 200 px wide — your beautifully kerned 48 pt headline looks like a smudge. Practical sizes for 1200 × 630:

• Headline: 70–96 px. If you can read it on a phone from arm’s length, ship it.
• Subtitle (optional): 30–40 px.
• Brand / URL: 18–24 px, top corner or bottom corner.

Use one typeface (two max). High contrast against the background. Left- or center-aligned. Avoid all-caps for anything longer than four words — it reduces reading speed.

Background: pick one mood, commit to it

The background does 60 % of the emotional work. Three patterns that perform reliably:

• Soft solid (cream, navy, off-black). Makes the headline the hero. Easiest to keep consistent across posts.
• Two-stop gradient (e.g. coral → pink, mint → sky). Reads as “designed” without screaming.
• Brand color block. The single most underrated choice. If your product is a color, that’s your OG card background.

Avoid: stock photography, photographs of laptops, blurry product hero images, anything busier than the headline.

Five OG-card mistakes that kill clicks

1. No image at all. Half the audience never scrolls; their feed sees a link with no thumbnail and skips. Always set og:image.
2. Site-wide default. One generic banner for every post = identical CTR for every post. Make a unique card per article.
3. Tiny type. If the headline isn’t legible in a 200- pixel-wide thumbnail, the card has failed.
4. Author photos as the focal point. Unless you’re a public figure, the headline + product is the draw, not your face.
5. Off-spec dimensions. A 1080 × 1080 OG image gets rendered tiny on LinkedIn. Honor the 1200 × 630.

Where the screenshot fits in

For product launches, changelog posts, demos and feature announcements, the most clickable OG cards put a screenshot at the center, frame it lightly, and overlay one short headline. The screenshot delivers the proof; the headline delivers the promise.

Layout patterns that work for screenshot-led OG cards:

• Top headline, bottom screenshot (60 / 40 split). Eye lands on text, then product. Best for benefit-led posts.
• Left screenshot, right headline (50 / 50). Best for feature releases where the visual is the proof.
• Screenshot bleeding off-canvas with a headline overlay. Modern, magazine-y, harder to do badly.

Whichever layout you pick, keep the screenshot itself well-padded with a soft shadow — never raw and edge-bleeding. A polished screenshot inside a card is the difference between “tweet” and “press release.”

Testing without going broke

You don’t need analytics infra to know if a card works. Two free, five-minute checks:

1. Squint test. Blur the image in your head. Can you still tell what the post is about? If yes, the headline is doing its job.
2. 200-pixel test. Resize the card to 200 px wide. If the headline is unreadable, bump every type size by 50 %.

For more rigorous testing, post the same blog twice with two different OG cards (one a baseline, one a variant) and compare engagement. CTR lifts of 30–80 % from OG card iteration are common.

One template, every post

The single highest-leverage move for any blog or indie product is to build one OG-card template — fonts, colors, screenshot placement — and then change only the headline and screenshot per post. Consistency makes your feed instantly recognizable; rotating one template makes monthly publishing sustainable.

Build the template once, save the preset, ship a card with every post. That’s the whole game.