OG
OGProof
Debugging7 min read

Why Is My OG Image Not Showing on Social Media? (And How to Fix It)

Step-by-step debugging guide for the most common reasons OG images fail to appear on Twitter, LinkedIn, Facebook, Discord, and Slack — with copy-paste fixes for each.

You added an og:image tag, deployed your page, and posted the link. No image. This is one of the most frustrating developer experiences because the failure is silent — platforms show a text-only card with no error message, no indication of what went wrong, and no obvious place to look.

This guide covers every common reason OG images fail to appear, platform by platform, with the exact fix for each.

The Most Common Reasons OG Images Fail

1. The image URL is relative, not absolute

Social crawlers fetch your page and then try to download the image at the URL you specified. If that URL is relative (e.g. /og-image.jpg instead of https://example.com/og-image.jpg), the crawler cannot resolve it and silently drops the image.

<!-- ❌ Relative URL — will not work -->
<meta property="og:image" content="/og-image.jpg" />

<!-- ✅ Absolute URL — required by all platforms -->
<meta property="og:image" content="https://example.com/og-image.jpg" />

2. The image is served over HTTP, not HTTPS

Twitter, Facebook, and iMessage silently drop images served over HTTP. LinkedIn may display them inconsistently. If your page is on HTTPS but your og:image URL starts with http://, the image will not appear.

<!-- ❌ HTTP image — dropped by Twitter, Facebook, iMessage -->
<meta property="og:image" content="http://example.com/image.jpg" />

<!-- ✅ HTTPS image — required -->
<meta property="og:image" content="https://example.com/image.jpg" />

3. The platform cached a bad version of your page

Social platforms aggressively cache OG data. If you fixed your og:image after the URL was already shared, you may be seeing the old cached (broken) version. Each platform has a cache-busting tool:

  • —Twitter/X: No official cache purge tool. Append a query parameter to force a re-fetch: ?v=2
  • —Facebook: Use the Sharing Debugger at developers.facebook.com/tools/debug — click 'Scrape Again'
  • —LinkedIn: Use the Post Inspector at linkedin.com/post-inspector — enter your URL and click 'Inspect'
  • —Discord: Automatically re-fetches. Wait ~5 minutes or post in a new message.
  • —Slack: Unfurl is per-message. Paste the URL again in a new message.

4. Your og:image is too small (or the wrong aspect ratio)

Platforms have minimum image size requirements. Images below the minimum are either rejected or displayed at a tiny size. Here are the exact requirements:

  • —Twitter summary_large_image: minimum 300×157px, recommended 1200×628px (2:1 ratio)
  • —Twitter summary: minimum 144×144px, recommended 400×400px (1:1 square)
  • —LinkedIn: minimum 200×200px, recommended 1200×627px (1.91:1 ratio)
  • —Facebook: minimum 200×200px to show at all; 600×315px for large format; recommended 1200×630px
  • —Discord: any size works, displayed at up to 400px wide
  • —Slack: thumbnail shown at ~75×75px but any size is fine

5. The image URL returns a 4xx or 5xx error

If the image file does not exist, has moved, or the server rejects the crawler's request (some servers block known crawler user-agents), the image will not appear. This is particularly common with:

  • —Dynamic OG image generators that have a bug or rate-limit issue
  • —CDN or storage bucket configurations that block non-browser user agents
  • —Images behind authentication or signed URLs that expire
  • —Images on preview deployment URLs that don't exist in production

6. Your page requires JavaScript to render the og:image tag

Social crawlers do not execute JavaScript. If your og:image is set by a JavaScript framework after page load (common in single-page apps built with React, Vue, or Angular), the crawler will see the HTML skeleton without the meta tag, and show no image.

The fix is server-side rendering: the og:image must be present in the initial HTML response, before any JavaScript runs. For Next.js, this means using the Metadata API or generateMetadata(). For other frameworks, it means server-rendering the <head>.

7. Twitter-specific: wrong card type for your image

Twitter has two image card types: summary (small square thumbnail) and summary_large_image (large banner). If you have a landscape 1200×628 image but specify twitter:card=summary, Twitter will crop it to a small square. If you specify summary_large_image but have no image, Twitter may show no card at all.

<!-- For landscape images (1200×628 recommended) -->
<meta name="twitter:card" content="summary_large_image" />
<meta property="og:image" content="https://example.com/og-banner.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="628" />

8. LinkedIn-specific: using twitter: tags instead of og: tags

LinkedIn only reads og: namespace tags. It completely ignores twitter:image, twitter:title, and twitter:description. If your page only has twitter: tags without og: equivalents, LinkedIn will show a text-only card with no image.

<!-- ❌ linkedin ignores these entirely -->
<meta name="twitter:image" content="https://example.com/image.jpg" />

<!-- ✅ linkedin reads these -->
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="627" />

How to Diagnose the Exact Problem

The fastest way to find the root cause is to fetch your page exactly as each social crawler does — server-side, with no JavaScript, using each platform's user agent. This shows you precisely what the crawler receives.

You can do this with curl:

# Fetch as Twitterbot
curl -A "Twitterbot/1.0" https://example.com/your-page | grep -i "og:image\|twitter:image"

# Fetch as LinkedInBot
curl -A "LinkedInBot/1.0" https://example.com/your-page | grep -i "og:image"

# Fetch as facebookexternalhit
curl -A "facebookexternalhit/1.1" https://example.com/your-page | grep -i "og:image"

OGProof does this automatically for all six platforms at once and shows you the extracted tags alongside a visual preview of what each platform will render. If your og:image is missing from the server response, OGProof will show no image in the preview and flag it as a critical issue with the exact fix.

The Correct Minimum OG Image Setup

For a landing page or blog post that will be shared across all major platforms, use these tags:

<!-- Works across Twitter, LinkedIn, Facebook, Discord, Slack, iMessage -->
<meta property="og:image" content="https://example.com/og-image.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Description of what the image shows" />
<meta name="twitter:card" content="summary_large_image" />
TipImage dimensions: 1200×630px at 2:1 aspect ratio works for all platforms. Twitter requires 2:1, LinkedIn prefers 1.91:1 (1200×627), and Facebook recommends 1.91:1 (1200×630). The 1200×630 size is the best all-platform compromise.

Quick Checklist for OG Image Debugging

  • —☐ Is the og:image URL absolute (starts with https://)?
  • —☐ Does the image URL return HTTP 200 in a browser?
  • —☐ Does the server return the og:image tag in the initial HTML (not added by JavaScript)?
  • —☐ Is the image at least 200×200px (ideally 1200×630)?
  • —☐ Is the image served over HTTPS (not HTTP)?
  • —☐ For Twitter: is twitter:card set to summary_large_image?
  • —☐ For LinkedIn: is og:image present (not just twitter:image)?
  • —☐ Has the platform cached a stale version? (Use platform cache-clearing tools)

Validate your OG tags now

Paste any URL and see exactly how it renders on Twitter, LinkedIn, Facebook, Discord, Slack, and iMessage — in seconds.

Try OGProof free →
← All articles