Published February 24, 2026 · 8 min read

OG Image Not Showing? How to Debug & Fix It

You've added og:image meta tags to your site, but when you share a link on Twitter, Facebook, or LinkedIn — no image appears. Frustrating. This guide covers every common cause and how to fix it, step by step.

In this guide:

Quick Debugging Checklist
Missing or Malformed Meta Tags
Image Size & Format Requirements
Relative vs Absolute URLs
Platform Caching Issues
Client-Side Rendering Problems
SSL & Redirect Issues
Platform Debugging Tools
Skip the Hassle: Use an API

1. Quick Debugging Checklist

Before diving deep, run through this checklist. Most OG image issues are caused by one of these:

☐The og:image meta tag exists in the page's <head>
☐The image URL is an absolute URL (starts with https://)
☐The image URL returns a 200 status code (not 404 or redirect)
☐The image is at least 200×200px (1200×630 recommended)
☐The image is PNG, JPEG, or WebP (not SVG or GIF)
☐The image is under 5MB (under 1MB recommended)
☐For Twitter: you have twitter:card set to summary_large_image
☐You've cleared the platform cache (see debugging tools below)

2. Missing or Malformed Meta Tags

The most common issue. Your page needs these meta tags in the <head> section:

<!-- Required Open Graph tags -->
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A brief description" />
<meta property="og:image" content="https://yoursite.com/og-image.png" />
<meta property="og:url" content="https://yoursite.com/page" />
<meta property="og:type" content="website" />

<!-- Required for Twitter/X -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://yoursite.com/og-image.png" />

Common mistakes:

Using name= instead of property= for OG tags (must be property="og:image")
Placing meta tags inside <body> instead of <head>
Duplicate or conflicting meta tags
Missing the twitter:card tag (Twitter won't show any image without it)

💡 View your page source (Ctrl+U) and search for "og:image" to verify the tag actually exists in the HTML that gets served to crawlers.

3. Image Size & Format Requirements

Each platform has specific requirements:

Platform	Recommended Size	Min Size	Max File Size
Twitter/X	1200×630	300×157	5MB
Facebook	1200×630	200×200	8MB
LinkedIn	1200×627	200×200	5MB
Discord	1200×630	Any	8MB
Slack	1200×630	250×250	5MB

The universal sweet spot is 1200×630 pixels in PNG or JPEG format, under 1MB. This works on every platform.

💡 SVG images are NOT supported by any social media platform for OG previews. Always use PNG or JPEG.

4. Relative vs Absolute URLs

This catches many developers. Your OG image URL must be absolute:

<!-- ❌ WRONG — relative URL -->
<meta property="og:image" content="/images/og.png" />

<!-- ✅ CORRECT — absolute URL -->
<meta property="og:image" content="https://yoursite.com/images/og.png" />

Social media crawlers don't know your domain when they see a relative path. Always include the full URL with protocol.

5. Platform Caching Issues

This is the #1 reason people think their fix didn't work. Social platforms aggressively cache OG metadata, sometimes for days or weeks. Even after you fix your tags, the old (broken) version will keep showing.

How to clear the cache:

Facebook: Use the Sharing Debugger — click "Scrape Again" 2-3 times
Twitter/X: Use the Card Validator (limited functionality now — may need to just share a link and wait)
LinkedIn: Use the Post Inspector
Discord: No official tool — send the link in a DM to yourself, or append a dummy query param like ?v=2 to bust the cache

💡 Quick hack: add a cache-busting query parameter to your URL when sharing, like ?v=2. This forces platforms to re-fetch the metadata.

6. Client-Side Rendering Problems

This is a very common issue with SPAs (React, Vue, Angular). Social media crawlers don't execute JavaScript. If your meta tags are injected client-side (e.g., using react-helmet or useHead()), crawlers won't see them.

The fix:

Your meta tags must be in the initial HTML response from the server. Options:

Next.js: Use the metadata export or generateMetadata() in App Router
Astro: Meta tags in the frontmatter layout — SSG by default, so this just works
SPA with no SSR: Consider using an OG image API service that generates images via URL, so you only need a static meta tag

// Next.js App Router — this works ✅
export const metadata = {
  openGraph: {
    images: ['https://yoursite.com/api/og?title=My+Post'],
  },
};

// Client-side only — this does NOT work for crawlers ❌
useEffect(() => {
  document.querySelector('meta[property="og:image"]')
    .setAttribute('content', imageUrl);
}, []);

7. SSL & Redirect Issues

Social media crawlers can be picky about redirects and SSL:

Use HTTPS: Most platforms now require or strongly prefer HTTPS image URLs
Avoid redirect chains: If your image URL redirects (301/302), some crawlers may not follow it
Check CORS: The image doesn't need CORS headers (crawlers fetch directly), but your server must respond to non-browser requests
SSL certificate issues: Self-signed or expired certs will cause crawlers to silently fail

Test your image URL directly in an incognito browser tab. If it doesn't load there, it won't work for crawlers either.

8. Platform Debugging Tools

Use these tools to see exactly what crawlers see when they fetch your page:

Facebook Sharing Debugger

Shows all OG tags detected, image preview, and any errors.

developers.facebook.com/tools/debug/ →

Twitter Card Validator

Preview how your link will appear on Twitter/X.

cards-dev.twitter.com/validator →

LinkedIn Post Inspector

Debug how LinkedIn renders your link preview.

linkedin.com/post-inspector/ →

opengraph.xyz

Multi-platform preview — shows how your link looks on Twitter, Facebook, LinkedIn, and more.

opengraph.xyz →

9. Skip the Hassle: Use an OG Image API

Tired of debugging image sizes, caching issues, and rendering problems? The simplest solution is to generate OG images from a URL. No files to host, no images to resize, no caching headaches.

<!-- One line. Always works. Always the right size. -->
<meta property="og:image"
  content="https://ogmagic.dev/api/og?title=My+Blog+Post&template=gradient-mesh" />

With OGMagic, you get:

Always 1200×630 PNG — the exact size every platform wants
Absolute URL by default — no relative path issues
Server-rendered — works with SPAs, SSR, static sites, anything
55+ templates — professional designs without a designer
Free tier — 50 calls/month, no signup

Every OG image issue in this article is eliminated when your image is generated from a URL. No files to manage, no cache problems (the URL is the image), and it works in every framework.

Stop debugging. Start generating.

Try OGMagic free — 50 API calls/month, no signup needed. Or check your current OG tags first.

Open the Editor →Read the Docs

The Complete Guide to Open Graph Images in 2026 →Social Media Preview Image Sizes: The Definitive Reference →Twitter Card Images: Complete Setup Guide →

📬

Get OG tips & product updates

Join our newsletter for Open Graph best practices, new template releases, and exclusive discounts. No spam, unsubscribe anytime.

🔒 We respect your inbox. No spam, ever.

← Back to all articles