OG Image Sizes: The Complete Guide for 2026

Here is the quick answer: 1200 x 630 pixels. If you remember nothing else from this article, remember that number. It works on every major platform without cropping or distortion.

But if you want to understand why, what the edge cases are, and how to avoid the mistakes that make your shared links look broken, keep reading.

Quick Reference Table

Bookmark this table. Reference it when you need it.

Why 1200 x 630 Is the Standard

Back in 2010, Facebook introduced the Open Graph protocol to let websites control how shared links appear in the News Feed. They settled on a roughly 1.91:1 aspect ratio for link preview images. Every other platform that came along afterward -- Twitter, LinkedIn, Slack, Discord -- adopted the same ratio or something close enough that a 1200x630 image displays without issues.

The result: one image at 1200 x 630 works everywhere. You do not need platform-specific images. Period.

Why 1200px wide specifically? Because it renders crisply on high-DPI (Retina) displays. On a standard feed where link cards are displayed at around 600px wide, a 1200px source image means 2x pixel density. Your text stays sharp, your gradients stay smooth.

PNG vs. JPEG: Which Format to Use

• PNG -- Use for images with text, solid colors, or sharp edges. Most OG images fall into this category.
• JPEG -- Use for photographic images. JPEG compresses these more efficiently.
• WebP -- Inconsistent support across platforms. Stick to PNG or JPEG.
• SVG -- Do not use SVG for OG images. Most platforms will silently ignore it.

The Safe Zone: Where to Place Your Content

Platforms do not all crop identically. Keep all important content within a 60px margin safe zone on all sides. That means your actual content area is roughly 1080 x 510 pixels.

Font Size Matters More Than You Think

OG images are typically displayed at 400-600 pixels wide in feeds. Rules of thumb:

• Title text: Minimum 48px at 1200px width
• Description text: Minimum 28px at 1200px width
• Limit text to 2-3 lines for the title
• High contrast: White text on dark backgrounds or vice versa

Common Mistakes (and How to Fix Them)

1. Using a square image -- A 1:1 image will get aggressively cropped. Always use 1200 x 630.

2. File size too large -- Aim for under 1 MB. Use TinyPNG or ImageOptim to compress.

3. Relative URLs in the meta tag -- Social platform crawlers need the full absolute URL starting with https://.

4. Caching issues -- Platforms cache OG images aggressively. Use each platform's debugger tool to bust the cache.

5. Missing width and height meta tags -- Providing og:image:width and og:image:height helps platforms render previews faster.

How to Test Your OG Images

1. Facebook Sharing Debugger -- Paste your URL, click Scrape Again
2. Twitter Card Validator -- Preview the card rendering
3. LinkedIn Post Inspector -- Check LinkedIn's cache
4. opengraph.xyz -- Previews across multiple platforms simultaneously

Automating OG Image Generation

For sites with many pages, manual OG image creation does not scale. Options:

• @vercel/og -- JSX to PNG on the edge. Free, self-hosted.
• Cloudinary -- Text overlay capabilities for dynamic transformations.
• ogimg.xyz -- Dedicated API for OG image generation. Free tier with 50 images/month.
• Puppeteer/Playwright -- Screenshot approach. Flexible but slow.

The One-Sentence Summary

Use 1200 x 630 pixels, PNG format, under 1 MB, with text inside a 60px safe zone, and always test with platform debugger tools before you ship.

---

Found this useful? Follow me for more practical web development guides.