By OGMagic · 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.

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)

3. Image Size & Format Requirements

Each platform has specific requirements:

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

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

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: Create and save an OG image, then put its public URL in a meta tag in the initial HTML

// Next.js App Router — this works ✅
export const metadata = {
  openGraph: {
    images: ['https://images.example.com/my-post.png'],
  },
};

// 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:

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.

// Run on your server, at build time, or when publishing content.
const response = await fetch("https://www.ogmagic.dev/api/images", {
  method: "POST",
  headers: {
    Authorization: "Bearer " + process.env.OGMAGIC_API_KEY,
    "Content-Type": "application/json",
  },
  body: JSON.stringify({ title: "My article", template: "gradient-mesh" }),
});
if (!response.ok) throw new Error("Image creation failed");
const image = await response.json();
// Save image.url with your content; use it in og:image and twitter:image.

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 new images per 30 days, email access

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.