How to Test OG Images: Debug Social Media Previews

Platform Debugger Tools

The major platforms provide debugger tools that show exactly what they see when they crawl your URL.

Facebook Sharing Debugger

developers.facebook.com/tools/debug — paste your URL and it shows every OG tag it found, plus warnings. The "Scrape Again" button forces Facebook to re-fetch instead of using its cache. Requires Facebook login.

LinkedIn Post Inspector

linkedin.com/post-inspector — paste a URL, see how it'll look on LinkedIn, check which OG tags were detected. Refreshes the cache automatically each time you inspect. Requires LinkedIn login.

MyOG.social OG Preview Tool

myog.social/tools/og-preview — ours. Free, no login. Previews your link across multiple platforms at once, lists all meta tags found, flags common problems. We also have a Chrome extension if you want to check OG tags on any page while you browse.

Testing OG Images Locally

This trips people up. You've got your site running on https://myog.social, paste the URL into Facebook's debugger, and nothing happens. Platforms fetch your page from the public internet — they can't reach your laptop.

Option 1: Use a Tunnel Service

ngrok or Cloudflare Tunnel give your local server a temporary public URL. Quick to set up, and you can test with real debugger tools right away.

# 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

Most reliable approach. Push to a Vercel preview or Netlify deploy preview and test that URL. Closest to what your users actually experience.

Option 3: Test the Image URL Directly

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

Common Issues and Fixes

Image Not Showing

Almost always one of these: relative URL (/image.png instead of the full https:// path), image too big (keep under 1MB), server too slow (platforms give up after a few seconds), or wrong Content-Type header. Check these before investigating anything else.

CORS Errors

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

Access-Control-Allow-Origin: *

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

Caching Problems

The most frustrating issue. You update your OG image, share the link, and the old image still shows up. Platforms cache aggressively — Facebook sometimes holds onto cached images for over a week. 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 won't follow redirects on image URLs. If your og:image URL returns a 301 or 302 instead of the actual image, the preview is blank. Serve the image directly with a 200 response.

Mixed Content (HTTP/HTTPS)

Use https://. Always. Some platforms silently drop HTTP image URLs without any error message — annoying to debug if you don't know to look for it.

Debugging Checklist

Work through these in order. Most issues get caught in the first three steps:

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. Does it load fast? Anything over 2-3 seconds and platforms may time out
5. Check the dimensions — at least 600 x 315, ideally 1200 x 630
6. Still not working? Clear the cache using the platform's debugger

Automated Testing

Hundreds of pages? You're not pasting each URL into a debugger one by one. Our Bulk OG Checker scans your entire sitemap at once. You can also add OG tag validation to your CI/CD pipeline — broken tags get caught before they hit production. For key pages, set up periodic monitoring so you catch regressions early.

Frequently Asked Questions

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

• What are OG Images? — the basics if you're just getting started
• OG Image Size Guide — exact dimensions for each platform
• OG Image Generator — make an OG image in a few clicks
• How to Configure Pre-rendering in Vue — getting OG tags to work in Vue and other SPAs
• Ghost Integration Guide — set up OG images on your Ghost blog
• Jekyll & GitHub Pages Guide — add OG images to static sites