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.Does the image have enough resolution for the intended preview placement?
  4. 4.Does the image return quickly with an image content type and a reasonable file size?
  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 — Very small images may be ignored or shown as thumbnails. A 1200 × 630 PNG or JPEG is a practical starting point for a wide card.
  • Unsupported response — The URL should return an image content type. PNG and JPEG are conservative choices; support for SVG, animation, and newer formats varies by service.
  • 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 — The Open Graph protocol gives the first value preference, though an individual service may apply additional selection rules.
  • CDN caching — Your CDN may be serving a stale version of the HTML. Purge the CDN cache too.

Fix:

Request a fresh scrape with the platform's current inspection tool, then remove unintended duplicate og:image tags. Deliberate alternatives should be ordered by preference.

Image Looks Cropped or Distorted

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

Fix:

  • Use 1200 x 630 pixels (about 1.91:1) as a widely useful starting canvas. See full size guide
  • Keep important content away from the edges and test both wide and square crops; there is no universal 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:

  • X: Add <meta name="twitter:card" content="summary_large_image" /> when you want to explicitly request the large-image card type.
  • LinkedIn: LinkedIn recommends a 1.91:1 image at 1200 × 627; its help center says images wider than 200 pixels can use the larger format.
  • Discord: Check that your server doesn't block Discord's user agent. Discord identifies as Discordbot.
  • Prefer HTTPS and confirm the public image request returns a successful status without authentication

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 compare approximate layouts, then confirm the published URL with each platform.

Preview Your OG TagsCreate OG Image