OG Image Sizes, Specs, and the One Mistake That Breaks Every Preview

Get the dimensions wrong and your link preview will be cropped, stretched, or blank. Here are the exact specs for every major platform in 2026 — with visual guides.

Getting Open Graph images right comes down to the details. The wrong dimensions, file size, or image format can silently break previews across every platform your users share links on. Here are the exact specs — with visual guides so you can see exactly what you’re designing for.

The Universal OG Image Spec

If you only remember one number, make it 1200×630. That’s the canonical OG image size — 1200 pixels wide, 630 pixels tall, a 1.91:1 aspect ratio.

Standard OG Canvas

1200 × 630

1.91 : 1

safe zone 1000×500

This size works across Facebook, LinkedIn, iMessage, Slack, Discord, and most other platforms. Design for this canvas and you’ll cover 95% of use cases.

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

The og:image:width and og:image:height tags are optional but recommended — declaring them lets crawlers skip an extra HTTP request to measure the image.

Platform Comparison

Each platform renders the same image slightly differently. Here’s what to know:

Facebook / Meta

✓ Full 1200×630

No cropping

Max 8MB · JPG, PNG · caches aggressively

<div class="px-3 py-2.5 border-b border-zinc-800">
  <p class="text-xs font-semibold text-zinc-100">LinkedIn</p>
  <span class="text-xs text-amber-400">⚠ Strict 1200×627 min</span>
</div>
<div class="p-3">
  <div class="relative w-full bg-zinc-800 rounded overflow-hidden" style="padding-bottom: 52.3%;">
    <div class="absolute inset-0 flex items-center justify-center">
      <p class="text-xs text-zinc-500 text-center">1199px wide<br>= no preview</p>
    </div>
    <div class="absolute inset-y-0 right-0 w-px bg-red-500/50"></div>
  </div>
  <p class="text-xs text-zinc-500 mt-2">Max 5MB · strictest platform</p>
</div>

<div class="px-3 py-2.5 border-b border-zinc-800">
  <p class="text-xs font-semibold text-zinc-100">Twitter / X</p>
  <span class="text-xs text-emerald-400">✓ 1200×628</span>
</div>
<div class="p-3">
  <div class="flex gap-2">
    <div class="flex-1">
      <p class="text-xs text-zinc-500 mb-1">large_image ✓</p>
      <div class="relative w-full bg-zinc-800 rounded overflow-hidden" style="padding-bottom: 52.5%;">
        <div class="absolute inset-0 flex items-center justify-center">
          <p class="text-xs text-zinc-500">Wide</p>
        </div>
      </div>
    </div>
    <div class="w-12">
      <p class="text-xs text-zinc-500 mb-1">summary</p>
      <div class="relative w-full bg-zinc-800 rounded overflow-hidden" style="padding-bottom: 100%;">
        <div class="absolute inset-0 flex items-center justify-center">
          <p class="text-xs text-zinc-500">□</p>
        </div>
      </div>
    </div>
  </div>
  <p class="text-xs text-zinc-500 mt-2">Set <code class="bg-zinc-800 px-0.5 rounded">twitter:card = summary_large_image</code></p>
</div>

<div class="px-3 py-2.5 border-b border-zinc-800">
  <p class="text-xs font-semibold text-zinc-100">Slack · Discord · iMessage</p>
  <span class="text-xs text-emerald-400">✓ Follows OG spec</span>
</div>
<div class="p-3">
  <div class="relative w-full bg-zinc-800 rounded overflow-hidden" style="padding-bottom: 52.5%;">
    <div class="absolute inset-0 flex items-center justify-center">
      <p class="text-xs text-zinc-500 text-center">Standard 1200×630</p>
    </div>
  </div>
  <p class="text-xs text-zinc-500 mt-2">HTTPS required on all three</p>
</div>

Safe Zone for Text

Platforms crop differently depending on context — a sidebar preview or mobile thread may show less. Keep text and logos within the 1000×500 safe zone (the inner 83% × 79% of the canvas).

Safe Zone Guide

Safe zone

crop crop crop crop

Safe May crop

The One Mistake That Breaks Everything

Using a relative URL for og:image. Crawlers fetching your page in isolation don’t know your domain. A relative path gives them nothing to work with.

<!-- ❌ This will fail on every platform -->

<meta property="og:image" content="/images/og.png" />

<!-- ✅ Always use the full absolute URL -->

<meta property="og:image" content="https://yoursite.com/images/og.png" />

File Format Recommendations

JPG is the safest default — small file sizes, universal support. Aim for 80% quality in your compression settings.

PNG is better for images with text, logos, or flat color. Text in a JPG often looks slightly muddy due to compression artifacts. If your OG image is a branded card with a title and logo, use PNG.

WebP is supported by Twitter and Discord but not universally. Don’t use it as your primary format.

GIF only shows the first frame. Animated previews aren’t supported on any major platform.

Generating Images at Scale

For a static site with a handful of pages, design OG images manually and call it done. For anything dynamic — blog posts, product listings, user profiles — you need automation.

ShareMagic handles this at the URL level. Set up a template once, and every page on your site gets a unique, branded OG image without any pipeline to maintain.

Want beautiful link previews automatically?

ShareMagic generates branded OG images for every page on your site — no design work, no pipeline to maintain.

Try ShareMagic free →