Opengraphly
Get started
Tutorial25 Jun 2025·7 min read

OG image not showing? How to debug it step by step

You've added the OG image tag. You can see the URL in your page source. But when you share the link, either nothing appears or you see the wrong image.

This is one of the most common frustrations in web development. The fix is almost always one of five things. Here's how to find which one.

Step 1: Check what the platform is actually seeing

Before anything else, go to the official validator for the platform you're testing on.

Twitter / X: cards-dev.twitter.com/validator — enter your URL and see exactly what Twitter reads.

LinkedIn: linkedin.com/post-inspector — shows the image LinkedIn will display, and lets you clear its cache.

Facebook: developers.facebook.com/tools/debug — the most detailed debugger. Shows every tag it found, any errors, and the image preview.

Generic: Use the free Opengraphly OG image checker to preview the image, title, description, dimensions, and alt text found on any public URL.

If the validator shows the correct image, the problem isn't your tags — it's a caching issue. Jump to Step 5. If the validator shows nothing or an error, keep reading.

Step 2: Verify the tag exists in your page source

Open your page in a browser, right-click, and choose "View Page Source." Do not use Inspect Element — that shows the DOM after JavaScript runs, which can mislead you.

Search for og:image. You're looking for:

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

Common issues at this step:

The tag isn't there at all. Your OG image setting didn't save, or it's only being applied to some pages.

The URL is relative, not absolute. content="/og-image.png" doesn't work. It must be a full URL starting with https://. Social platforms are not on your server — they can't resolve relative paths.

The tag appears in the wrong place. OG tags must be inside the <head> element. Tags in the <body> are ignored.

Step 3: Check the image URL is accessible

Copy the URL from the og:image content attribute and paste it directly into your browser's address bar. The image should load.

It doesn't load? The most common causes:

  • The image is behind authentication (logged-in users can see it, crawlers can't)
  • The image path has a typo
  • The file doesn't exist at that path
  • Your CDN or storage bucket has public access disabled

Social platform crawlers have no session and no cookies. If the URL requires any kind of login or token to access, they'll see a 401 or 403 and show nothing.

Step 4: Check the image dimensions and file size

Platform crawlers don't just fetch the image — they validate it. If the image is too small or too large, they silently drop it.

Minimum size requirements:

  • LinkedIn requires at least 1200×627 pixels
  • Twitter requires at least 300×157 pixels
  • Facebook has a minimum of 600×315 pixels

If your image is 400×200, it will work on Twitter but fail silently on LinkedIn. This is easy to miss because the image looks fine in the validator on one platform but not another.

File size: Keep OG images under 5MB (most platforms) and ideally under 300KB for fast loading. Large files time out.

Step 5: Clear the platform cache

Every major social platform caches OG data aggressively. Once a URL has been fetched, the platform stores the result for hours or days. Even after you fix your tags, the old (broken) preview persists until the cache expires.

This is the most common reason a fix doesn't appear to work.

Force a cache refresh:

  • Twitter / X: Use the Cards Validator — fetching through the validator clears the cache for that URL.
  • LinkedIn: Use the Post Inspector and click "Re-scrape." Wait a few minutes.
  • Facebook: Use the Sharing Debugger and click "Scrape Again."
  • Slack: No manual way to clear — Slack will eventually re-fetch, usually within 24 hours.

After clearing the cache, wait a few minutes before testing. Don't test in the app you already have open — open a new tab or a different device.

Step 6: Check for JavaScript rendering issues

If your site uses a JavaScript framework (React, Next.js, Vue, etc.), OG tags in the <head> may only be injected after JavaScript runs.

Social platform crawlers often don't execute JavaScript. They read the initial HTML only. If your OG tags are added by client-side JavaScript, the crawler never sees them.

How to check: Use curl or a browser extension that disables JavaScript to view your page source. If the OG tags disappear without JavaScript, that's your problem.

The fix: OG tags must be server-rendered — present in the initial HTML that the server sends, before any client-side code runs. For Next.js, use the metadata export or <Head> component server-side.

Step 7: Check robots.txt

Your robots.txt file might be blocking the platform's crawler.

Open yoursite.com/robots.txt. Look for Disallow: / or any broad disallow rules. If the crawler is blocked, it can't fetch your page or image.

Platform crawlers have specific user agent names:

  • Twitterbot — Twitter
  • LinkedInBot — LinkedIn
  • facebookexternalhit — Facebook

A rule like Disallow: / with User-agent: * blocks all of them.

The quick diagnosis checklist

CheckWhat to look for
Platform validatorDoes it show the image?
Page sourceIs og:image in the <head> with an absolute URL?
Image URLDoes it load in a browser without authentication?
Image dimensionsAt least 1200×630 pixels?
CacheHave you cleared the platform cache after fixing?
JavaScript renderingAre tags present in raw HTML, not just after JS runs?
robots.txtAre platform crawlers allowed?

Work through this list in order. The problem is usually found by step 3 or step 5.

Fix it today

Your next shared link should look this good.

Design your OG image once. Paste the URL once. Done forever. Takes about four minutes.

Get started free