OG Image Not Showing?

Step-by-step solutions for the most common Open Graph image problems

Quick Checklist

Run through these first — they cover 90% of OG image issues:

  1. 1.Is the og:image URL absolute? (starts with https://)
  2. 2.Can you open the image URL directly in a browser?
  3. 3.Is the image at least 200x200 pixels?
  4. 4.Is the file under 5 MB?
  5. 5.Did you clear the platform's cache after updating?

Common Problems & Solutions

Image Not Appearing at All

The link preview shows a title and description but no image.

Possible Causes:

  • Relative URL — The og:image content must be an absolute URL. /images/og.png won't work; use https://yoursite.com/images/og.png.
  • Broken URL — The image URL returns a 404 or redirect. Open it in a new browser tab to verify.
  • Too small — Most platforms require at least 200x200 pixels. Facebook needs 600x315 for a large card.
  • Wrong format — SVG files are not supported as OG images. Use PNG, JPEG, or WebP.
  • Server blocks crawlers — Your server or CDN may be blocking the platform's bot. Check your robots.txt and firewall rules.

Fix:

<!-- Correct -->
<meta property="og:image" content="https://yoursite.com/og-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

<!-- Wrong -->
<meta property="og:image" content="/og-image.png" />
<meta property="og:image" content="og-image.png" />

Wrong Image Showing

The preview shows an old image or the wrong one entirely.

Possible Causes:

  • Cached by the platform — Social platforms cache OG data for hours to days. You need to explicitly clear the cache.
  • Multiple og:image tags — If you have more than one og:image meta tag, platforms take the first one.
  • CDN caching — Your CDN may be serving a stale version of the HTML. Purge the CDN cache too.

Fix:

Clear the cache on each platform (see below), then ensure only one og:image tag exists on the page.

Image Looks Cropped or Distorted

The image appears but parts are cut off or it looks stretched.

Fix:

  • Use 1200 x 630 pixels (1.91:1 ratio) — this works on all platforms. See full size guide
  • Keep important content in the center 80% of the image (safe zone)
  • Include og:image:width and og:image:height tags to help platforms render correctly before loading the full image

Image Works on Some Platforms But Not Others

Facebook shows the image, but Twitter or LinkedIn doesn't (or vice versa).

Fix:

  • Twitter: Add <meta name="twitter:card" content="summary_large_image" /> — without it, Twitter defaults to a small card with no image
  • LinkedIn: Image must be at least 1200px wide. LinkedIn is stricter than other platforms.
  • Discord: Check that your server doesn't block Discord's user agent. Discord identifies as Discordbot.
  • Make sure the image is served over HTTPS — some platforms reject HTTP image URLs

Tags Present But Not Detected

You've added the meta tags, but platforms say they can't find them.

Possible Causes:

  • Client-side rendering — If your meta tags are injected by JavaScript (React, Vue), crawlers won't see them. OG tags must be in the initial server-rendered HTML.
  • Meta tags outside <head> — OG tags must be inside the <head> element, not in <body>.
  • Malformed HTML — An unclosed tag above your meta tags can cause parsers to miss them.

How to verify:

View your page source (Ctrl+U / Cmd+U) and search for og:image. If it's not in the raw HTML, your tags are being injected client-side and need to be moved to server-side rendering.

How to Clear OG Cache

After updating your OG tags, you must tell each platform to re-fetch the data. Simply re-sharing the link is not enough.

Facebook / Meta

Use the Facebook Sharing Debugger. Paste your URL and click "Scrape Again" to force a refresh. You may need to click it twice.

Twitter / X

Use the Card Validator. Enter your URL to preview the card and force a cache refresh. Note: X may have limited public access to this tool.

LinkedIn

Use the Post Inspector. Paste your URL to see the current cached version and force a re-scrape.

Discord

Discord doesn't have a public cache-clearing tool. The simplest method: edit your message containing the link, then paste it again. Discord re-fetches OG data on new message sends. Cache typically expires within 24 hours.

Slack

Slack caches link previews aggressively. To force a refresh, paste the URL in a new message. If that doesn't work, add a query parameter to the URL (e.g., ?v=2) to make Slack treat it as a new link.

Debugging Step by Step

  1. 1.
    Check your tags exist. Use our Preview Tool or view page source (Ctrl+U) and search for og:image.
  2. 2.
    Open the image URL directly. Copy the URL from og:image content and open it in a new tab. It should load as an image.
  3. 3.
    Check the image size. Right-click the image and check its dimensions. It should be at least 1200x630 for best results. Size guide
  4. 4.
    Use the platform's debugger. Each platform has a tool to test and re-scrape your URL (see cache clearing section above).
  5. 5.
    Check your server. Ensure your server responds to crawler user agents. Some security tools or CDNs (Cloudflare) block bots by default.

Test Your OG Tags Now

Use our preview tool to see exactly how your link looks on 5 platforms.

Preview Your OG TagsCreate OG Image