What are OG Images?

Guide

Why OG Images Fail on Social Platforms

OG image not showing up, stuck on an old version, or working on LinkedIn but not Facebook? The browser is not the test. The crawler is.

The Short Answer

Social previews are generated by crawler bots, not by the browser tab you are looking at. That one detail explains most OG image 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.

How Social Crawlers Actually 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.

That last 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 one thing: 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.

This is also why different platforms disagree. 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

Each major platform has a debugger that shows exactly what their crawler sees when it fetches your URL. I use these constantly.

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 — this is ours. Free, no login. Shows your link's preview across multiple platforms at once, lists all meta tags found, flags problems. Use the Chrome extension after the web checker when you want to inspect pages while you browse.

Testing OG Images Locally

This trips people up constantly. You've got your site on https://myog.social, 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 one of these: relative URL (/image.png instead of the full https:// path), file too big (keep under 1MB), server too slow (platforms give up after a few seconds), or wrong Content-Type header. Check these first before going down any rabbit holes.

CORS Errors

Image hosted on a different domain or CDN? You might need CORS headers:

Access-Control-Allow-Origin: *

Cloudflare, CloudFront, and Vercel handle this for you. Custom setups might need the header added manually.

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
  • Last resort: append a query string like ?v=2 to your image URL to bust the cache 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. Most problems show up in the first four:

  1. View page source — is the og:image meta tag actually 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

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, CORS headers blocking access, 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?

ace63667185965d5dad03e00b34309526e5f0607