You added an og:image tag, but when you share your link on Facebook, Twitter, LinkedIn, or Slack, the image is missing. This is one of the most common frustrations in web development. Here is a systematic troubleshooting guide that covers every known cause.

Step 1: Verify Your Meta Tags Exist

The first thing to check is whether the og:image tag is actually present in your rendered HTML. Open your page in a browser, view the page source (not the inspector — view source shows what crawlers see), and search for og:image.

<!-- You should see something like this: -->
<meta property="og:image" content="https://yoursite.com/og-image.png" />

Common issues at this step:

Tag is missing entirely. Your framework or CMS may not be rendering OG tags. See our guide on adding OG images for framework-specific instructions.
Tag is in JavaScript, not in HTML. If you are using a client-side React/Vue/Angular app, the OG tags may only exist after JavaScript executes. Social media crawlers do not run JavaScript. You need server-side rendering or pre-rendering.
Tag is in the body, not the head. OG meta tags must be inside <head>. Tags in <body> are ignored by crawlers.

Step 2: Check the Image URL

Copy the URL from your og:image content attribute and paste it directly into a browser. The image should load immediately.

Common URL problems:

Relative URL. The URL must be absolute, starting with https://. A relative path like /images/og.png will not work. Fix: https://yoursite.com/images/og.png.
HTTP instead of HTTPS. Some platforms (especially Facebook) prefer or require HTTPS. If your image is served over HTTP, switch to HTTPS.
URL returns a 404. The image file does not exist at that path. Check for typos, case sensitivity, and that the file was deployed.
URL returns a 403 or redirect. Your server may be blocking the request or redirecting it (e.g., to a login page). Make sure the image is publicly accessible without authentication.
URL has spaces or special characters. Encode special characters in the URL. Spaces should be %20.

Step 3: Check the Image Itself

Even if the URL works, the image itself might not meet platform requirements:

File too large. Facebook allows up to 8 MB, but images over 1 MB can cause timeout issues during crawling. Compress your image to under 1 MB. See our size guide for recommendations.
Image too small. Facebook requires a minimum of 200 × 200 pixels. For large card previews, you need at least 600 × 315. Use 1200 × 630 for best results.
Wrong format. Use PNG or JPG. WebP has partial support but is not universal. SVG and GIF are not supported as OG images on most platforms.
Corrupted file. Re-export the image from your editor or generate a new one with AI.

Step 4: Clear the Platform Cache

This is the most common cause of “I updated my OG image but the old one still shows.” Social platforms cache OG data aggressively and do not re-fetch it automatically when you update your page.

Facebook

Go to the Facebook Sharing Debugger (search for “Facebook Sharing Debugger” or find it in Meta for Developers).
Paste your URL and click “Debug.”
Click “Scrape Again” to force Facebook to re-fetch your OG data. You may need to click it twice.
Check the preview — it should now show your updated image.

Twitter / X

Twitter removed its standalone Card Validator in 2025. To test and refresh your card:

Compose a new tweet (you do not need to publish it).
Paste your URL. Twitter will generate a fresh preview after a few seconds.
If the old image persists, wait 10–15 minutes and try again. Twitter's cache usually refreshes within that window.

Go to the LinkedIn Post Inspector (search for “LinkedIn Post Inspector”).
Paste your URL and click “Inspect.”
LinkedIn will show the current cached preview and give you the option to refresh it.

Slack

Slack caches unfurled links per workspace. To refresh:

Delete the message containing the link.
Post the link again. Slack will re-fetch the OG data for the new message.

Discord

Discord caches embeds for about 15 minutes. To force a refresh:

Add a query parameter to your URL (e.g., ?v=2) to make Discord treat it as a new URL.
Or wait 15 minutes and re-post the link.

Step 5: Check Server-Side Issues

Crawler User-Agent Blocking

Some servers or CDNs block requests that do not come from a regular browser. Social media crawlers use specific user agents:

Facebook: facebookexternalhit
Twitter: Twitterbot
LinkedIn: LinkedInBot
Slack: Slackbot

Check your server logs, firewall rules, rate limiters, and CDN settings to ensure these user agents are not blocked. If you use Cloudflare, check your security rules and Bot Fight Mode settings.

Slow Server Response

Crawlers have timeout limits. If your page or image takes more than 5–10 seconds to respond, the crawler gives up. Check:

Page load time (aim for under 2 seconds)
Image file size (under 1 MB)
CDN configuration (serve images from a CDN near major crawl origins)
Server-side rendering speed (avoid slow database queries on initial render)

Redirect Chains

If the og:image URL goes through multiple redirects (e.g., HTTP → HTTPS → www → CDN), crawlers may not follow the full chain. Minimize redirects — ideally the image URL should resolve directly with no redirects.

Step 6: Framework-Specific Issues

Next.js

Metadata not rendering: Ensure you are exporting metadata from a Server Component (not a Client Component). Files with "use client" cannot export metadata.
Dynamic routes: Use generateMetadata instead of a static metadata export for pages with dynamic parameters.
Image in public folder: If your image is in /public/og-image.png, the URL should be https://yoursite.com/og-image.png (no /public prefix).

WordPress

Plugin conflict: If you have multiple SEO plugins active, they may output conflicting OG tags. Use only one SEO plugin.
Caching plugin: If you use a page caching plugin (WP Super Cache, W3 Total Cache, WP Rocket), purge the cache after changing OG images.
CDN caching: If your site uses Cloudflare or another CDN, purge the CDN cache as well.

Single-Page Apps (React, Vue, Angular)

Client-side rendered apps are the most common source of OG image problems. Crawlers see the initial HTML before JavaScript runs. If your OG tags are injected by JavaScript, crawlers will not see them.

Solutions: server-side rendering (Next.js, Nuxt, Angular Universal), static generation, or a prerender service.

Debugging Checklist

Run through this checklist when your OG image is not showing:

View page source — is og:image present in <head>?
Is the image URL absolute (https://...)?
Does the image URL load directly in a browser?
Is the image 1200 × 630 px and under 1 MB?
Is the image PNG or JPG (not SVG, GIF, or WebP)?
Have you cleared the platform's cache?
Is your server allowing crawler user agents (facebookexternalhit, Twitterbot, etc.)?
Does the page load in under 5 seconds?
Are there redirect chains on the image URL?
Is HTTPS working correctly (valid certificate, no mixed content)?

If you have checked everything above and the image still is not showing, the issue is almost certainly caching. Use the platform debug tools, clear caches at every layer (CDN, page cache, platform cache), and test again.

Preventing OG Image Issues

Automate testing. Add OG image validation to your CI/CD pipeline. Tools like html-validate or custom scripts can check for required meta tags.
Use a consistent image pipeline. Generate all OG images at the same dimensions (1200 × 630) and format (PNG) using a single tool or process.
Set cache-control headers. Use reasonable cache TTLs on your OG images so platforms pick up changes within hours, not weeks.
Monitor with alerts. Set up synthetic checks that verify your key pages return valid OG tags.

Skip the Hassle: Generate OG Images with AI

Many OG image problems stem from manual image creation workflows. Wrong dimensions, too-large files, broken URLs from manual uploads. Pixola's AI OG Image Generator outputs correctly sized (1200 × 630), optimized (< 1 MB) PNG images every time. Describe your content, generate, download, done.