How to Design OG Images That Get Clicks

A strong Open Graph image can double click-through rate on shared links. The design rules are simple: one clear message, high contrast, readable text at thumbnail size, and safe margins so platforms do not crop your headline in half.

You do not need a design team. You need a repeatable template and the specs from the Open Graph Image Size Guide.

Start with the 1200 × 630 canvas

Every tip below assumes a 1200 × 630 px frame at 1.91:1. That size displays correctly on Facebook, LinkedIn, X, WhatsApp, Discord, and Slack. Platform-specific crops are covered in the size by platform guide.

Build one master template. Swap headline, background, and accent color per page.

One focal point, one message

Link preview cards are small. On mobile, your OG image may appear at roughly 300 px wide. If the viewer cannot read the headline in two seconds, they scroll past.

Do

• One headline, 5-8 words max
• One supporting element (logo, photo, or icon)
• Generous whitespace

Avoid

• Paragraphs of text
• Multiple CTAs competing for attention
• Thin decorative fonts below 24 px at export size

The og:title tag carries the full headline. The image supports it visually. You do not need to repeat the entire title inside the graphic.

Typography that survives the shrink

Social platforms downscale your image aggressively. Design for the thumbnail, not the full canvas.

Font size guidelines

Use bold sans-serif faces: Inter, Helvetica, Arial, or your brand font in a heavy weight. Avoid light weights and serif body text at small rendered sizes.

Contrast

Place light text on dark backgrounds or dark text on light backgrounds. Aim for WCAG AA contrast (4.5:1) at minimum. Gradients behind text look pretty in Figma and fail on a phone screen.

Safe zone: keep critical content centered

Platforms crop edges differently. Facebook and LinkedIn may trim the top or bottom on certain layouts. Discord and Slack scale to fit.

Draw a safe zone at 80% of the canvas center. Keep headline, logo, and faces inside it. Nothing important within 60 px of any edge.

┌─────────────────────────────────────┐
│  margin (no critical content)     │
│   ┌─────────────────────────┐     │
│   │                         │     │
│   │      SAFE ZONE          │     │
│   │   headline + logo       │     │
│   │                         │     │
│   └─────────────────────────┘     │
│                                     │
└─────────────────────────────────────┘

Color and brand consistency

Your OG image is a billboard for the page. Match site colors, logo placement, and tone.

Practical palette rules

• 2-3 colors max per image
• Brand accent for headline or underline
• Neutral background (white, dark gray, or brand primary at low saturation)
• No neon-on-neon combinations

Place the logo in the same corner on every template. Consistency builds recognition when someone sees multiple links from your domain in one feed.

Photos vs. illustrations

Both work. Choose based on content type.

Photos fit articles, case studies, and product pages. Use a single strong photo cropped to landscape. Add a semi-transparent overlay if you need text on top.

Illustrations and flat graphics fit docs, SaaS landing pages, and tools. They stay readable when compressed to JPG. Export text-heavy designs as PNG if JPG artifacts appear.

Templates that scale across a site

Manual OG design does not scale past a dozen pages. Set up tiers:

Use the free OG image generator at OpenGraph Check to build a base template without opening Photoshop. Export at 1200 × 630 and upload to your CDN.

Common design mistakes

Text too small

Looks fine at full size on your monitor. Illegible in WhatsApp. Zoom out to 25% in your design tool and re-read the headline.

Busy backgrounds

Stock photos with lots of detail fight your text. Blur the background, darken it, or use a solid color block behind the headline.

Square or portrait source art

Platforms crop to landscape. Design in 1.91:1 from the start instead of fixing aspect ratio later.

Ignoring dark mode feeds

LinkedIn and X feeds are often dark-themed. Pure black backgrounds with dark gray text disappear. Test on both light and dark UI backgrounds.

Mismatch with og:title

The image says "Free Guide" but og:title says "Pricing Plans." Users feel tricked and bounce. Align image headline with the meta title.

Pre-export checklist

• Canvas is 1200 × 630 px
• Headline readable at 25% zoom
• Logo and text inside safe zone
• File under 300 KB (JPG) or optimized PNG
• Headline matches og:title intent
• Preview scanned with OpenGraph Check

Testing your design on real previews

Design tools lie about how cards render. Always validate the live URL.

1. Upload the image to a public HTTPS path.
2. Set og:image, og:title, and og:description.
3. Scan with OpenGraph Check for Facebook, LinkedIn, X, WhatsApp, and Discord previews.
4. Send a test link to yourself on WhatsApp or Slack.

If the image looks wrong, fix design or specs before the campaign goes live. Read How to Test Open Graph Tags for the full workflow.

FAQ

What makes an OG image click-worthy?

One clear headline, high contrast, recognizable branding, and a visual that matches the page promise. Clarity beats decoration.

How much text should an OG image include?

5-8 words in the graphic. Put the full title in og:title, not squeezed into the image.

Should I put my logo on every OG image?

Yes, in a consistent position. Small corner logos work. Avoid oversized watermarks that reduce readable area.

Can I use Canva for OG images?

Yes. Set custom dimensions to 1200 × 630 px. Export as JPG for photos or PNG for text-heavy layouts.

Do OG images need alt text?

Open Graph has no alt attribute for og:image. Meaningful content belongs in og:title and og:description. For accessibility on the page itself, use normal alt on inline images.

How do I design OG images for a blog with hundreds of posts?

Use dynamic OG generation (Next.js ImageResponse, or a template pipeline). See Dynamic Open Graph Images Explained.

What font size works on mobile link previews?

Design headline at 48-72 px on the 1200 × 630 canvas. Verify at 25% zoom in your editor.

Bottom line

Design OG images at 1200 × 630 px with one bold headline, strong contrast, and a centered safe zone. Match the visual to your og:title, export under 300 KB, and preview with OpenGraph Check before every launch. Good design is the fastest way to improve link click-through without changing your content.