OG Image Best Practices 2026 — 1200x630, Fonts, Safe Zones

An Open Graph image is the single most influential design asset for click-through on social platforms. The right one increases CTR by 2-3x. The wrong one (or none) kills your share rate. Here is the complete specification for OG images that work in 2026.

Dimensions: 1200x630 and why

The de facto standard is 1200 wide x 630 tall pixels (1.91:1 aspect ratio). Why those exact numbers?

• Twitter and Facebook both crop OG images to ~1.91:1
• 1200 is wide enough for retina display sharpness
• 630 (instead of 627 or 628) gives a clean math to designers
• LinkedIn uses 1200x627; Slack uses 1200x630; WhatsApp uses ~400x209 thumbnail

If you ship 1200x630, every major platform displays it correctly.

The safe zone

Different platforms crop differently. Always design within a centered "safe zone" of approximately 1100x550. The outer 50px ring may be cropped on certain platforms.

Typography rules

1. Title size: 48-72pt — must be readable on a phone screen at 400px wide
2. Subtitle size: 24-36pt
3. Brand mark size: 18-24pt
4. Line length: max 6-8 words per line — wrap title at logical breaks
5. Sans-serif preferred — Inter, Roboto, Helvetica are battle-tested
6. Avoid italics or scripts — they don't survive at thumbnail sizes

Color and contrast

1. WCAG AA contrast minimum: 4.5:1 for body text on background
2. Avoid pure white on pure black — looks harsh; use #f5f5f5 on #1a1a1a
3. Limit to 2-3 colors — busy palettes confuse at thumbnail size
4. Use brand color for the background — instantly recognizable
5. Reserve high contrast for the title — make it the visual anchor

Layout patterns that work

• Title left, image right — classic, used by Stripe, Vercel
• Title centered, brand below — Medium-style
• Title with author photo — adds personality, Twitter loves it
• Quote pull-out — for opinion pieces, dramatic effect

Layout patterns to avoid

• Title at top edge — gets cropped on some platforms
• All-image with no text — robs you of the title's CTR boost
• Tiny text — fails the 400px-width test
• Logo in the center — distracts from the title

File format and size

• PNG — best quality, larger file. Recommended.
• JPEG — smaller file, fine for photo-heavy designs. Quality 85%.
• WebP — supported by some platforms, not all. Avoid for now.
• SVG — works on Twitter, fails on Facebook. Avoid unless you also serve PNG.
• File size: under 1MB — many crawlers will skip larger files

The text-overflow problem

Long titles overflow your design. Solutions:

1. Auto-truncate with ellipsis at 100 characters — losing meaning
2. Auto-wrap to 3 lines max — best balance, what most generators do
3. Auto-shrink font size — most polished, complex to implement

The og.hjlabs.in templates use auto-wrap with a 3-line cap and gracefully truncate beyond.

Branding consistency

Every OG image from your site should be recognisably from the same brand. Achieve this with:

• Same background or accent color
• Same brand logo placement (typically bottom-left or bottom-right)
• Same typography
• Same per-category accent (blog vs product vs case study)

Per-platform tuning

Testing

1. Twitter Card Validator — cards-dev.twitter.com/validator
2. Facebook Sharing Debugger — developers.facebook.com/tools/debug
3. LinkedIn Post Inspector — linkedin.com/post-inspector
4. opengraph.xyz — multi-platform preview
5. Send to yourself in Slack/Discord — most realistic preview

Caching and CDN

Set Cache-Control: public, max-age=31536000, immutable on OG images. Crawlers and CDNs will cache for a year. If you change an image, change the URL (e.g., add ?v=2).

The 30-second solution

Designing OG images per post is unsustainable. Use a generator that takes the title and produces a branded image automatically. og.hjlabs.in outputs 1200x630 with title, subtitle, brand, 6 templates — pass query string params, get a URL.

Bottom line

1200x630 PNG, sans-serif title at 48-72pt, brand color background, 1100x550 safe zone, WCAG AA contrast. Test on Twitter, Facebook, LinkedIn, and Slack. Cache aggressively. Generate yours.