OG Image Guide: Size, Format, and Common Mistakes

The OG image is often the single most important element of a link preview.
If it's missing, broken, or poorly formatted, your link will be ignored—no matter how good the content is.

This guide explains how OG images work, the correct size and format, and the most common mistakes that cause previews to fail across social platforms.

---

Table of Contents

• What is an OG image?
• How social platforms use OG images
• Recommended OG image size
• Image formats and file size
• Common OG image mistakes
• Caching and image updates
• FAQ
• Next to read

---

What is an OG image?

An OG image is the image defined by the Open Graph tag:

html
<meta property="og:image" content="https://example.com/og-image.jpg" />

It tells social platforms which image to display when a page is shared.

If this tag is missing or invalid, platforms may show no image, pick a random image, or fall back to text-only previews.

---

How social platforms use OG images

When a link is shared:

1. The platform fetches the page HTML
2. It looks for Open Graph tags
3. It downloads the image at og:image
4. It caches the result

Important: The image must be publicly accessible, fast to load, and served over HTTPS.

---

Recommended OG image size

Universal safe default

1200 × 630 px (aspect ratio 1.91:1)

This works reliably across Facebook, WhatsApp, Telegram, LinkedIn, and Threads.

Q: Can I use smaller images?
A: Yes, but smaller images may appear blurry or be ignored by some platforms.

---

Minimum sizes to avoid issues

• Width: ≥ 600 px
• Height: ≥ 315 px

Below these values, previews often degrade.

---

Image formats and file size

Recommended formats

• JPG → best for photos
• PNG → best for sharp graphics or text
• WebP → sometimes unsupported by older scrapers

File size guidelines

• Aim for < 300–500 KB
• Avoid huge images (>2 MB)

Q: Does file size affect previews?
A: Yes. Very large images may time out or be skipped by preview fetchers.

---

Common OG image mistakes

1) Relative image URLs

❌ Bad:

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

✅ Good:

html
<meta property="og:image" content="https://example.com/images/og.jpg" />

---

2) Image blocked by permissions

Q: Why does my OG image not show?
The image may require authentication, block bots, return a 403/401 error, or be behind a firewall.

---

3) Redirects on the image URL

Some platforms fail if og:image redirects multiple times.

Best practice:
Serve the image directly with a 200 OK response.

---

4) Wrong content-type

Q: Why does WhatsApp ignore my image?
A: The server may return the wrong Content-Type.

Correct example:

code
Content-Type: image/jpeg

---

5) Text too close to edges

Social platforms may crop images differently.

Rule:
Keep important text and logos inside a safe area (center 80%).

---

Caching and image updates

Q: I updated my OG image. Why does the old one still appear?
A: Social platforms cache OG images aggressively.

Fixes:

Change the image filename (e.g., og-v1.jpg → og-v2.jpg) or update the og:image URL, then wait for cache expiration.

Best practice:
Version OG images instead of replacing files.

---

FAQ

Is OG image a ranking factor?

No. But it strongly affects CTR and engagement.

Can I use different images for different platforms?

Yes, but it increases complexity. One strong universal image is usually enough.

Should every page have an OG image?

Yes—especially landing pages, blog posts, and shareable content.

Next to read

• Open Graph for WhatsApp: Why Previews Break and How to Fix Them
• OpenGraph vs Open Graph: Naming, Usage, and Pitfalls
• Meta Keywords: Dead Tag or Still Useful?