How to Test OG Images: Debug Social Media Previews

Platform Debugger Tools

Each major platform provides a debugger tool that shows exactly how your link will appear and reports any issues with your OG tags:

Facebook Sharing Debugger

developers.facebook.com/tools/debug

• Shows all OG tags detected on your page
• Displays warnings and errors
• Click "Scrape Again" to force a cache refresh
• Requires Facebook login

LinkedIn Post Inspector

linkedin.com/post-inspector

• Shows how your link appears on LinkedIn
• Displays detected OG tags
• Refreshes cache when you inspect a URL
• Requires LinkedIn login

MyOG.social OG Preview Tool

myog.social/tools/og-preview

• No login required
• Shows preview across multiple platforms at once
• Displays all meta tags found
• Identifies common issues

Testing OG Images Locally

A common frustration: you can't test OG images from localhost because social media platforms need to fetch your URL from the public internet. Here are your options:

Option 1: Use a Tunnel Service

Services like ngrok or Cloudflare Tunnel expose your local server to the internet with a temporary public URL.

# 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

Push your changes to a staging environment (Vercel preview, Netlify deploy preview, etc.) and test the preview URL. This is often the most reliable method.

Option 3: Test Production URL Structure

If you're adding dynamic OG images (e.g., /og?title=...), you can often test the image URL directly in your browser without deploying the full page.

Common Issues and Fixes

Image Not Showing

• Relative URL: Use absolute URLs starting with https://, not /image.png
• Image too large: Keep under 5MB, ideally under 1MB
• Slow response: Platforms timeout after a few seconds — optimize image loading
• Wrong content type: Server must return proper Content-Type header (e.g., image/png)

CORS Errors

If your image is on a different domain or CDN, you may need to configure CORS headers:

Access-Control-Allow-Origin: *

Most CDNs (Cloudflare, AWS CloudFront, Vercel) handle this automatically, but custom setups may need explicit configuration.

Caching Problems

Platforms cache OG images aggressively — sometimes for 7+ days. To force a refresh:

• Facebook: Use the Sharing Debugger and click "Scrape Again"
• Twitter/X: No official debugger currently available — test by posting a link
• LinkedIn: Post Inspector refreshes automatically
• Nuclear option: Append a query string to your image URL (e.g., ?v=2)

Redirects Breaking Previews

If your image URL redirects, some platforms won't follow it. Ensure the og:image URL returns the image directly (HTTP 200), not a redirect (HTTP 301/302).

Mixed Content (HTTP/HTTPS)

Always use https:// for your image URLs. Some platforms reject or fail silently on HTTP images.

Debugging Checklist

When your OG image isn't working, check these in order:

1. Is the meta tag present? View page source and search for og:image
2. Is the URL absolute? Must start with https://
3. Can you open the image URL directly? Paste it in your browser
4. Does the image load quickly? Should load in under 2-3 seconds
5. Is the image the right size? At least 600 × 315, ideally 1200 × 630
6. Have you cleared the cache? Use the platform's debugger tool

Automated Testing

For sites with many pages, manual testing doesn't scale. Consider:

• Bulk OG Checker — Check all pages in your sitemap at once
• CI/CD integration: Add OG tag validation to your build pipeline
• Monitoring: Periodically check key pages for OG tag issues

Frequently Asked Questions

How do I test OG images locally?

You cannot test OG images directly from localhost because social platforms cannot reach your local server. Use a tunnel service like ngrok to expose your local server, deploy to a staging environment, or use an OG preview tool that fetches your production URL.

How do I clear cached OG images?

Use each platform's debugger tool to force a cache refresh: Facebook Sharing Debugger (click "Scrape Again") or LinkedIn Post Inspector. Some platforms cache for 7+ days, so use the debugger immediately after updating your OG image.

Why is my OG image not showing?

Common causes include: using a relative URL instead of absolute (must include https://), image file too large or slow to load, CORS headers blocking access, URL returning a redirect, or the image being cached. Use a debugger tool to identify the specific issue.

Related Resources

• What are OG Images? — Learn the basics of Open Graph images
• OG Image Size Guide — Get the dimensions right for every platform
• OG Image Generator — Create OG images with customizable templates