Fix Your OG Image Not Showing: Troubleshooting Guide
Few things are more frustrating than deploying a page with a carefully designed OG image only to see a blank space when someone shares it on social media. The good news is that the cause is almost always one of a handful of common issues, and each one has a straightforward fix.
Relative Image URL Instead of Absolute
This is the single most common reason OG images fail. If your og:image tag contains a path like '/images/og.png' instead of 'https://yoursite.com/images/og.png', social platform crawlers cannot resolve it. These crawlers fetch your HTML from their own servers, so relative paths point to nothing. The fix is simple: always use a fully qualified URL with the protocol and domain. In Next.js, construct the URL using your NEXT_PUBLIC_APP_URL or VERCEL_URL environment variable. In other frameworks, use the request URL or a hardcoded domain. Double-check by viewing your page source and confirming the meta tag contains a complete URL.
Image File Is Too Large or Returns an Error
Social platform crawlers have timeouts and file size limits. Facebook will not process images larger than 8MB, and Twitter caps at 5MB. More importantly, if your image server takes longer than a few seconds to respond, the crawler gives up and shows no image. Check your image URL directly in a browser to confirm it loads quickly and returns the correct content type. If you are generating images on the fly, consider pre-generating and caching them so the crawler gets an instant response. Also verify that your server does not block requests without standard browser user agents, as social crawlers use their own user agent strings.
Client-Side Rendering Hiding Your Tags
If your meta tags are injected by JavaScript after the initial page load, social crawlers will never see them. Facebook, Twitter, and LinkedIn crawlers do not execute JavaScript. They only read the HTML that your server sends in the initial response. This is a common issue with single-page applications built with React, Vue, or Angular that rely on client-side routing. The solution is to render your meta tags server-side using SSR, SSG, or a prerendering service. In Next.js, use generateMetadata or the metadata export, which both render on the server. If you are stuck with a client-side SPA, look into prerendering services like Prerender.io.
HTTPS and Mixed Content Issues
If your page is served over HTTPS but your og:image URL points to an HTTP resource, some platforms will refuse to load the image due to mixed content policies. Always use HTTPS for your og:image URL. Another related issue is SSL certificate problems on your image server: if the certificate is expired, self-signed, or has a mismatched domain, crawlers will fail silently. Test your image URL with an SSL checker tool and ensure the certificate chain is valid. Platforms like LinkedIn are particularly strict about SSL validation compared to Facebook, which is slightly more lenient.
Caching Is Showing an Old or Missing Image
If your OG image was previously missing or broken and you have since fixed it, platforms may still be showing the cached broken state. Facebook caches OG data for up to 30 days. Go to the Facebook Sharing Debugger and click 'Scrape Again' to force an update. For Twitter, re-validate using the Card Validator. LinkedIn's cache is the most persistent and may require 24-48 hours to update naturally, or you can use the Post Inspector to trigger a refresh. To prevent caching issues in the future, add a version query parameter to your image URL (like '?v=2') when you update the image, which forces platforms to treat it as a new URL.
Generate your OG image in seconds
Paste a title, pick a brand color, and get production-ready social cards for every platform — with framework-specific meta tag snippets included.
Generate Problem-Free OG Images