What are OG Images?

Guide

OG Image Test Guide for Failed Social Previews

How I test Open Graph images when the browser looks fine but Facebook, LinkedIn, Slack, Discord, or X shows the wrong preview.

The Short Answer

A proper OG image test checks what the crawler sees, not what your browser sees. That one detail explains most Open Graph preview bugs.

Your browser can load the page because you have cookies, JavaScript, local network access, and patience for slow pages. Facebook, LinkedIn, X, Slack, Discord, and WhatsApp fetch the same URL from their own servers. They read the raw HTML, follow their own cache rules, fetch the image separately, and give up quickly when something looks wrong.

I built MyOG.social around that constraint. It generates a plain, absolute og:image URL that crawlers can fetch directly. No logged-in page state. No client-side rendering dependency. No guessing whether the image exists.

Run This OG Image Test First

I start with a boring checklist before opening every platform debugger. It tells me whether the page, the tag, or the image fetch is failing.

  1. Open the page source and confirm og:image is in the first HTML response.
  2. Check that the image URL is absolute, public, and starts with https://.
  3. Open the image URL directly and confirm it returns a 200 response.
  4. Check the image size, file size, and Content-Type.
  5. Paste the page URL into an Open Graph checker or the platform debugger for the app that shows the wrong preview.
  6. If the tags are right but the preview is stale, re-scrape the URL or change the image URL.

The important split: the page URL and the image URL are two separate crawler requests. If either one fails, the preview fails.

How Social Crawlers Build a Preview

When someone pastes your link into a social app, this is roughly what happens:

  1. Fetches your page URL from a crawler server.
  2. Reads the HTML response and looks for og: and twitter: tags.
  3. Resolves the og:image URL.
  4. Fetches that image URL as a separate request.
  5. Caches the title, description, image, and final preview layout.

The cache step is why this feels broken. You can fix the tag, refresh your browser, and still see the old preview in Facebook. Facebook is not looking at your browser. It is reusing its cached copy of the preview.

Why the Browser Test Lies

Pasting the image URL into your browser is useful, but it only proves the image loads for you. It does not prove the social crawler can fetch it.

These are the differences that matter:

  • Your browser may be logged in. Crawlers are not.
  • Your browser can reach localhost. Crawlers cannot.
  • Your app may inject tags with JavaScript. Some crawlers read the first HTML response.
  • Your CDN or firewall may allow browsers but block bot user agents.
  • Your image may load eventually. Crawlers often time out after a few seconds.
  • Your browser cache and the platform preview cache are separate caches.

Different platforms disagree because they are different crawlers with different user agents, timeouts, image limits, and cache durations. The crawler directory lists the important ones.

How I Debug It

I treat an OG preview like a tiny API response for bots. The API is your HTML <head>. The response is a few meta tags. The image is a public asset another server has to fetch.

That makes the debug path simpler. I check whether the crawler can make two clean requests: one to the page, one to the image. Most problems are in one of those two requests.

Platform Debugger Tools

Use a general Open Graph checker first, then the platform debugger for the app where the preview is wrong. That keeps the test focused.

Facebook Sharing Debugger

developers.facebook.com/tools/debug — paste your URL, see every OG tag it found plus warnings. Hit "Scrape Again" to force a re-fetch instead of the cached version. You need a Facebook login.

LinkedIn Post Inspector

linkedin.com/post-inspector — paste a URL, see how it'll look on LinkedIn, check which OG tags were picked up. Cache refreshes automatically each time you inspect. LinkedIn login required.

MyOG.social OG Preview Tool

myog.social/tools/og-preview — ours. Free, no login. It shows your link's preview across multiple platforms at once, lists all meta tags found, and flags missing images, slow fetches, and bad URLs. Use the Chrome extension after the web checker when you want to inspect pages while you browse. After installing, follow the Chrome extension setup steps to pin it and run your first side-panel check.

Testing OG Images Locally

This trips people up constantly. You've got your site on localhost:3000, paste the URL into Facebook's debugger, and... nothing. Of course nothing — their crawler fetches from the public internet. It can't reach your laptop.

Option 1 - Use a Tunnel Service

ngrok or Cloudflare Tunnel give your local server a temporary public URL. Takes about 30 seconds to set up, and then you can test with the real debugger tools. 

# Install ngrok, then:
ngrok http 3000

# Use the generated URL (e.g., https://abc123.ngrok.io)
# in the platform debugger tools

Option 2 - Deploy to Staging

The most reliable approach. Push to a Vercel preview or Netlify deploy preview and test that URL. Closest to what your actual users will see.

Option 3 - Test the Image URL Directly

If your OG images are dynamic (like /og?title=...), just paste the image URL into your browser. Does it render? Not a full end-to-end test, but catches rendering bugs early.

Common Issues and Fixes

Image Not Showing

Nine times out of ten it's a relative URL (/image.png instead of the full https:// path), a file that's too big (keep it under 1MB), a slow server (platforms give up after a few seconds), or the wrong Content-Type header. Check these first before going down any rabbit holes.

CORS Errors in Browser Tools

A browser-based checker may need CORS headers when your image is hosted on a different domain or CDN: 

Access-Control-Allow-Origin: *

Facebook and LinkedIn fetch images server-side, so CORS is rarely the reason their crawlers fail. For social previews, check public access, redirects, response time, and Content-Type first.

Caching Problems

The most frustrating one. You update your OG image, share the link, and the old image persists. Platforms cache hard. Facebook sometimes holds onto images for over a week. Your options:

  • Facebook: open the Sharing Debugger and hit "Scrape Again"
  • Twitter/X: no official debugger right now — you just have to post and see
  • LinkedIn: the Post Inspector refreshes automatically when you inspect
  • If the cache will not clear, append a query string like ?v=2 to your image URL to bust it entirely

Redirects Breaking Previews

Some platforms refuse to follow redirects on image URLs. If your og:image returns a 301 or 302 instead of the actual bytes, you get a blank preview. Serve the image directly — 200 response, no redirect.

Mixed Content (HTTP/HTTPS)

Use https://. Always. Some platforms silently drop HTTP image URLs — no error message, no warning. Just a blank preview. Annoying to debug if you don't know to look for it.

Debugging Checklist

Go through these in order when an OG image test fails. Most problems show up in the first four:

  1. View page source — is the og:image meta tag there?
  2. Is the URL absolute? It needs to start with https://
  3. Paste the image URL into your browser. Does the image load?
  4. Fetch the page as a bot if your server has bot protection or firewall rules.
  5. Does the image load fast? Anything over 2-3 seconds and platforms may time out.
  6. Check the dimensions — at least 600 x 315, ideally 1200 x 630.
  7. Still not working? Clear the cache using the platform's debugger.

Automated Testing

If you've got hundreds of pages, you're not pasting each URL into a debugger. I built a Bulk OG Checker that scans your entire sitemap at once. You can also add OG tag validation to CI/CD — broken tags get caught before they hit production. For key pages, periodic monitoring catches regressions early.

Frequently Asked Questions

How do I run an OG image test?

Check the raw HTML first, then the image URL, then the platform preview. The page needs a visible og:image tag, the image needs to be public and fast, and the social app may need a cache refresh before it shows the new card.

Why does my OG image still show the old image?

Platform cache. Your browser may show the new image, but Facebook, LinkedIn, X, Slack, or Discord may still have the old preview cached. Use the platform debugger first. If the old image will not clear, change the image URL with a versioned path or query string.

Why does my OG image work in the browser but not on Facebook, LinkedIn, or X?

Because your browser is the easiest client your site will ever get. Crawlers do not have your cookies, cannot see localhost, may be blocked by bot protection, and may time out before a slow dynamic image renders. Test what the crawler sees, not what you see.

How do I test OG images locally?

Not directly — social platforms can't reach localhost. Use a tunnel service like ngrok for a public URL, push to a staging environment, or use a preview tool that fetches your production URL.

How do I clear cached OG images?

Each platform has its own debugger. Facebook: Sharing Debugger, click "Scrape Again." LinkedIn Post Inspector refreshes automatically. Some platforms hold cached images for a week or more — run the debugger right after you make changes.

Why is my OG image not showing?

Usual suspects: relative URL instead of absolute (needs https://), image too large or slow to load, bot protection blocking crawler requests, the wrong Content-Type, or a redirect on the image URL. Sometimes just cached. Paste your URL into a debugger tool — it'll tell you what's wrong.

Related Resources

Skip the debugging headaches

MyOG.social generates reliable OG images that work on every platform — no CORS, caching, or sizing issues.

Already have an account?

de5303dc80820b50071741451619305001794b90