OG Image Size Guide (2026)

What is an OG image?

An OG (Open Graph) image is the preview image shown when someone shares your URL on social platforms and chat apps. It is typically controlled by the og:image meta tag, and it can heavily influence click-through rate because it is the most visible part of the preview.

The universal OG image size: 1200x630

A lot of guides will quote slightly different numbers (1200x628, 1200x627, etc.). In practice, 1200x630 is a stable, universal baseline that works across most major platforms. It is close to a 1.91:1 aspect ratio, which is what many link preview layouts are designed around.

Platform differences (and what to do about them)

The annoying truth is that platforms render previews differently and cache aggressively. The winning strategy is to keep one universal image and validate it with real tools.

• Twitter/X: optimize for Twitter Card image size and validate with the Card validator.
• LinkedIn: check LinkedIn link preview sizing and re-scrape with Post Inspector.
• Facebook: use Facebook OG image sizing and refresh cache with Sharing Debugger.
• Discord/Slack: chat unfurls can truncate long titles; keep your first line high-signal.

Design for a safe area (so text does not get clipped)

Even when your aspect ratio is correct, platforms add UI: rounded corners, padding, overlays, and link metadata blocks. If your title is glued to the edges, it will look cramped or get clipped. Treat the outer 5-8% as unsafe and keep key text and logos closer to the center.

A practical rule: if your design still looks readable when you scale it down to the size of a phone screenshot, you are in a good place. If not, increase font size and simplify.

If you want concrete numbers: for a 1200x630 canvas, leave roughly 60-80px padding on all sides for your key text and logos. You can still use backgrounds that go edge-to-edge, but keep important information away from the edge.

Typography: your image is viewed on phones

Most people see previews on small screens. This is why "beautiful" OG images often perform worse: they use thin fonts, small text, and subtle contrast that disappears after compression. Optimize for readability, not for designer approval.

• Use fewer words. Short beats clever.
• Use higher contrast than you think you need.
• Prefer one headline + one small brand element.
• Assume your image will be compressed and slightly blurred.

When 1200x630 is not enough

In most cases, one image is enough. But there are a few scenarios where you might choose alternatives:

• Square-first ecosystems: if most shares happen in places that favor 1:1, you may want a square variant. Test before investing in multiple pipelines.
• Ultra-wide hero designs: if your brand relies on a specific wide layout, you can create a second image and serve it with platform-specific logic (advanced).
• Dynamic per-page previews: if each page needs unique data, consider dynamic OG generation and keep the size constant.

If you are unsure, do not over-engineer. Use one universal OG image and spend your time improving the message.

PNG vs JPG (and why WebP can be risky)

Use PNG for crisp text and flat colors. Use JPG for photo-heavy backgrounds where you need smaller file size. WebP may work in some cases, but social scrapers are inconsistent. If you want fewer surprises, stick to PNG or JPG for og:image.

File size, compression, and performance

Platforms and bots are not trying to be helpful. They just fetch your page, fetch your image, and move on. If your OG image is huge, you increase the chance of a timeout or a "fallback to something else" preview.

Practical tips:

• Use JPG for photo templates to reduce bytes.
• Remove unnecessary metadata (EXIF) when exporting.
• Avoid heavy transparent layers unless you need them.
• Host on a fast path (CDN) if possible.

Meta tags that make sizing more reliable

Some scrapers do better when you provide explicit width and height. It removes guesswork and helps platforms avoid probing the image too aggressively.

<meta property="og:image" content="https://example.com/og.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

If you want to be extra clear, you can also add og:image:alt and use Twitter tags in parallel. The simplest strategy is: one image URL, reused everywhere.

Do not fight platform caches (version instead)

If you reuse the same image URL and overwrite the bytes, you will eventually run into cache confusion: your browser shows the new image, but a platform still shows the old one. The easiest fix is to version the URL when you change the image in a meaningful way.

• Use a versioned filename or hash in the path.
• Or add a query string like ?v=2026-02-12 when you update.
• Then re-scrape using platform tools where available.

Implementation checklist

Before you ship, run through this quick checklist. It prevents almost all real-world preview issues.

1. Use a stable, absolute image URL (https, not relative).
2. Ensure the image is publicly accessible (no auth, no geo blocks, no hotlink protection).
3. Use 1200x630 (or very close) and avoid odd aspect ratios.
4. Add width and height meta tags when possible (helps some scrapers).
5. Validate the URL preview and refresh caches before announcing the link.

Tools to generate and validate

If you want the fast path: generate a clean 1200x630 image, then generate tags, then validate.

Common mistakes that ruin previews

Most "platform bugs" are self-inflicted. Avoid these mistakes and you will rarely fight previews:

• Using a relative image URL (bots need an absolute HTTPS URL).
• Serving an image URL that redirects multiple times.
• Blocking bots via WAF rules or hotlink protection.
• Exporting an image with tiny, low-contrast text that becomes unreadable after compression.
• Overwriting an image at the same URL and expecting caches to magically update.

A safe default layout (that works almost everywhere)

If you are not sure how to design the image, use a simple structure that survives compression:

1. One short headline (6-10 words).
2. Optional small subline (1 line max).
3. One brand element (logo or product mark) that is not in the corner.
4. Background that does not fight the text (flat color, gradient, or subtle photo with overlay).

You can implement this layout quickly with a template and tweak colors to match your brand. The key is not "unique design". The key is "readable preview".