Open Graph Debugging Guide

Troubleshoot and fix Open Graph tag issues. Learn how to debug missing images, incorrect previews, caching problems, and common OG tag errors.

Updated December 2025 10 min read

Quick Answer

To debug Open Graph tags, use platform-specific validators (Facebook Sharing Debugger, Twitter Card Validator, LinkedIn Post Inspector), check that tags are in the HTML source (not injected by JavaScript), verify absolute HTTPS image URLs, and clear platform caches. Use our preview tool to test across all platforms at once.

Open Graph Debugging Tools

The first step in debugging Open Graph tags is using the right tools:

Universal Preview Tool

Our Open Graph Preview Tool lets you test your tags across all platforms at once, making it the fastest way to identify issues.

Platform-Specific Validators

Common Open Graph Issues

1. Missing or Broken Images

Symptoms: No image appears in preview, or a broken image icon shows.

Common Causes:

  • Relative image URLs instead of absolute URLs
  • Images blocked by CORS or authentication
  • Images too large or in unsupported format
  • HTTPS mixed content issues

Solutions:

  • Use absolute HTTPS URLs: https://example.com/image.jpg
  • Ensure images are publicly accessible (no login required)
  • Verify image loads in a browser
  • Check image file size (keep under 1MB)
  • Use supported formats: JPG, PNG, GIF, or WebP

2. Incorrect Title or Description

Symptoms: Preview shows wrong title or description, or uses default page content.

Common Causes:

  • Meta tags not in HTML source (injected by JavaScript)
  • Multiple og:title or og:description tags
  • Tags in wrong location (not in <head>)
  • Character encoding issues

Solutions:

  • View page source (not rendered HTML) to verify tags exist
  • Ensure tags are in the <head> section
  • Use Server-Side Rendering (SSR) or Static Site Generation (SSG)
  • Remove duplicate tags
  • Check for HTML entities or encoding issues

3. Cached Old Preview

Symptoms: Preview shows old content even after updating tags.

Common Causes:

  • Platform caching (Facebook, LinkedIn cache for days)
  • CDN caching
  • Browser caching

Solutions:

  • Use platform debuggers to clear cache (Facebook Debugger, LinkedIn Inspector)
  • Add cache-busting query parameters: ?v=2
  • Wait 24-48 hours for natural cache expiration
  • Check CDN cache settings

Learn more: Why OG Images Not Updating

4. Preview Not Appearing at All

Symptoms: Only URL shows, no preview card.

Common Causes:

  • Missing required tags (og:title, og:description, og:image, og:url)
  • Server not responding or timing out
  • robots.txt blocking crawlers
  • HTTPS certificate issues

Solutions:

  • Verify all required tags are present
  • Test server response time (should be under 3 seconds)
  • Check robots.txt doesn't block crawlers
  • Verify HTTPS certificate is valid
  • Test URL accessibility from external networks

Step-by-Step Debugging Process

Follow this systematic approach to debug Open Graph issues:

Step 1: Verify Tags in HTML Source

  1. View page source (right-click → View Page Source)
  2. Search for "og:title", "og:description", "og:image"
  3. Verify tags are in the <head> section
  4. Check for typos or missing quotes

Step 2: Test with Preview Tool

  1. Use our Open Graph Preview Tool
  2. Enter your URL
  3. Check which tags are detected
  4. Verify image loads correctly

Step 3: Test with Platform Validators

  1. Use Facebook Sharing Debugger
  2. Use Twitter Card Validator
  3. Use LinkedIn Post Inspector
  4. Check for errors or warnings

Step 4: Clear Platform Caches

  1. Use debugger tools to clear cache
  2. Wait a few minutes
  3. Test again

Step 5: Verify Image Accessibility

  1. Open image URL directly in browser
  2. Check image loads without authentication
  3. Verify HTTPS is working
  4. Check image file size and format

JavaScript and Client-Side Rendering Issues

One of the most common Open Graph problems is tags injected by JavaScript:

The Problem

Social media crawlers (Facebook, Twitter, LinkedIn) don't execute JavaScript. If your Open Graph tags are added by JavaScript after the page loads, crawlers won't see them.

How to Identify

  • View page source - tags are missing
  • Inspect element - tags are present
  • Preview tool shows no tags

Solutions

  • Use SSR/SSG: Server-Side Rendering or Static Site Generation
  • Pre-render: Generate HTML with tags at build time
  • Avoid client-side injection: Don't add meta tags with JavaScript

Framework-Specific Solutions

  • Nuxt 3: Use useSeoMeta() - it handles SSR automatically
  • Next.js: Use Metadata API or next-seo
  • React: Use react-helmet with SSR
  • Vue: Use vue-meta with SSR

URL and Image URL Issues

Common problems with URLs in Open Graph tags:

Relative vs Absolute URLs

❌ <meta property="og:image" content="/images/og.jpg" />

✅ <meta property="og:image" content="https://example.com/images/og.jpg" />

All Open Graph URLs must be absolute with the full protocol (https://).

HTTPS Requirements

Most platforms require HTTPS URLs:

  • Use HTTPS for all OG image URLs
  • Avoid HTTP URLs (may be blocked)
  • Ensure SSL certificate is valid

Image Accessibility

Images must be publicly accessible:

  • No authentication required
  • No CORS restrictions
  • Accessible from external networks
  • Not behind a firewall

Cache Debugging

Platform caching is a major source of Open Graph issues:

Platform Cache Durations

  • Facebook: 7-30 days (use Sharing Debugger to clear)
  • LinkedIn: 7-14 days (use Post Inspector to clear)
  • Twitter: 7 days (use Card Validator to clear)
  • Slack/Discord: 24-48 hours (no official clearing tool)

How to Clear Caches

  • Facebook: Use Sharing Debugger → Click "Scrape Again"
  • LinkedIn: Use Post Inspector → Click "Clear cache"
  • Twitter: Use Card Validator → Re-validate URL
  • Slack/Discord: Wait 24-48 hours or use query parameters

Open Graph Validation Checklist

Use this checklist to verify your Open Graph tags:

  • ✅ All required tags present (og:title, og:description, og:image, og:url)
  • ✅ Tags are in HTML source (not injected by JavaScript)
  • ✅ Tags are in <head> section
  • ✅ Image URL is absolute HTTPS URL
  • ✅ Image is publicly accessible
  • ✅ Image loads in browser
  • ✅ Image size is appropriate (1200×630px recommended)
  • ✅ Image file size is reasonable (<1MB)
  • ✅ Title and description are appropriate length
  • ✅ No duplicate tags
  • ✅ Server responds quickly (<3 seconds)
  • ✅ HTTPS certificate is valid
  • ✅ robots.txt doesn't block crawlers

Debug Your Open Graph Tags

Use our free tool to test and debug your Open Graph tags across all platforms.

Try the Free Preview Tool