OG Image Best Practices: Size, Format, and Design Tips

What Size Should OG Images Be?

The standard Open Graph image size is 1200 x 630 pixels with a 1.91:1 aspect ratio. This size works well across all major platforms:

Use 1200 x 630 and you'll cover every platform perfectly.

What Format Should OG Images Use?

PNG is the safest choice. It's universally supported, handles text crisply, and supports transparency. JPEG works too for photo-heavy images but can show compression artifacts on text.

• PNG: Best for text-heavy images, logos, illustrations. Larger file size.
• JPEG: Best for photographs. Smaller file size but lossy compression.
• WebP: Not yet universally supported for OG images. Avoid for now.
• SVG: Not supported as OG images by any platform.

Keep file size under 5MB. Most platforms will reject anything larger. Aim for under 1MB for fast loading.

What Makes a Great OG Image Design?

1. Large, readable text

Your title should be readable at small sizes — it will be displayed as small as 300px wide on mobile feeds. Use at least 48px font size (at 1200px width) and bold weight.

2. High contrast

White text on dark backgrounds or dark text on light backgrounds. Avoid placing text over busy images or gradients that reduce readability.

3. Safe zones

Keep important content away from the edges. Some platforms crop images slightly. Use at least 60px padding on all sides.

4. Brand consistency

Use your brand colors and fonts. People should recognize your content in a feed before reading the text. OGPix's branded theme lets you set custom colors for this.

5. Keep it simple

The best OG images have: a title, optionally a subtitle, and a background. That's it. Don't try to cram logos, author photos, dates, and decorations into a 1200x630 image.

Common OG Image Mistakes

• Using your logo as the OG image: Your logo is not informative. It doesn't tell anyone what the page is about.
• Same image for every page: Defeats the purpose. Every page should have a unique, descriptive image.
• Too much text: If you can't read it at 400px wide, there's too much text.
• Relative URLs: OG image URLs must be absolute (https://...). Crawlers can't resolve relative paths.
• Missing og:image:width and og:image:height: Without dimensions, platforms may delay rendering or choose wrong aspect ratios.