You paste a link into a Facebook post and get a blank box, a random image, or no preview at all. Facebook needs valid Open Graph tags and a reachable image to build a link card. When either piece fails, the preview breaks.
Short answer
A broken Facebook link preview usually means one of three things: missing or wrong og:title / og:description / og:image tags, a crawler that cannot fetch your page, or an image URL that returns an error. View your page source, confirm absolute HTTPS URLs, test the image directly, then run the URL through the Facebook Sharing Debugger. Use OpenGraph Check to preview tags before sharing.
How Facebook builds a link preview
When you add a URL to a post, Facebook sends facebookexternalhit to fetch the HTML. It looks for Open Graph meta tags in the <head>:
<meta property="og:title" content="Your Page Title"><meta property="og:description" content="A short summary."><meta property="og:image" content="https://example.com/og.jpg"><meta property="og:url" content="https://example.com/page"><meta property="og:type" content="website">If og:image is missing, Facebook may fall back to the first large image on the page, your favicon, or nothing. The result is inconsistent and often ugly.
Twitter Card tags (twitter:image) do not replace Open Graph on Facebook. You need og:* properties. See Open Graph vs Twitter Card for the full picture.
Diagnose in 5 minutes
1. Check raw HTML, not the rendered DOM
Single-page apps often inject meta tags with JavaScript after load. Facebook's crawler reads the initial HTML response only.
- Right-click → View Page Source
- Search for
og:image
If tags are absent in source but visible in DevTools, you need server-side rendering or static meta tags in your framework's <head>.
2. Test the image URL
Copy the og:image value and open it in a browser tab. It must:
- Return HTTP 200
- Load without authentication
- Use HTTPS (HTTP images may fail)
- Not redirect to an HTML login page
3. Run the Sharing Debugger
Paste your URL at developers.facebook.com/tools/debug. The tool shows exactly what Facebook extracted and lists scrape errors.
Common error messages:
| Error | Meaning |
|---|---|
| "Could not resolve canonical URL" | Conflicting og:url or redirect loops |
| "Image too small" | Below minimum dimensions |
| "Timeout" | Server too slow or firewall blocking |
| "SSL error" | Invalid or expired certificate |
4. Scan with OpenGraph Check
Paste the URL into OpenGraph Check. You get a side-by-side preview and a list of missing or invalid tags without waiting for Facebook's cache.
Required Open Graph tags for Facebook
At minimum, include:
| Tag | Purpose |
|---|---|
og:title | Headline in the preview card |
og:description | Subtitle text (keep under ~200 characters) |
og:image | Thumbnail image (absolute URL) |
og:url | Canonical page URL |
og:type | Usually website or article |
For articles, add article:published_time and article:author if relevant. Full reference: Open Graph Tags Explained.
Image requirements that break previews
Facebook rejects or downgrades images that fail these checks:
- Minimum size: 200 × 200 px (use 1200 × 630 px for best results)
- Max file size: 8 MB (stay under 1 MB for speed)
- Format: JPG, PNG, GIF, or WebP
- URL: Must be publicly accessible, no IP whitelist for Facebook's crawler
Broken image URLs are the number one cause of missing previews. Read How to Fix a Missing OG Image if the card shows text but no thumbnail.
Server and security issues
robots.txt blocking Facebook
Your robots.txt must not block facebookexternalhit. A safe pattern:
User-agent: facebookexternalhit
Allow: /
Firewall or bot protection
Cloudflare "Under Attack" mode, aggressive WAF rules, or rate limiting can block Facebook's crawler. Whitelist facebookexternalhit or reduce bot challenges on public marketing pages.
CDN caching empty responses
If your CDN cached a 404 or error page for the OG image, Facebook keeps seeing the failure. Purge the CDN cache after fixing the image.
Redirect chains
Each redirect adds latency and risk. Point og:url and shared links directly to the final HTTPS URL with a single redirect at most.
Framework-specific gotchas
Next.js: Use the metadata API or generateMetadata so tags appear in server HTML. Client-only next/head in app router pages may not reach crawlers.
WordPress: SEO plugins (Yoast, Rank Math) generate OG tags. Disable duplicate tag output from theme and plugin.
Shopify: Edit social sharing image in admin under Online Store → Preferences or per-product SEO fields.
Webflow: Set OG image in page settings → SEO. Publish after changes.
Preview works in debugger but not when sharing
If the Sharing Debugger shows correct data but your post does not:
- Click Scrape Again twice
- Wait 5-10 minutes
- Try sharing a URL with a query string:
?fb=1
For stale previews after a site update (old image still showing), see Facebook Preview Not Updating.
FAQ
Why does Facebook show my logo instead of the OG image?
The og:image tag is missing or broken. Facebook picks the largest image on the page, which is often a header logo.
Do I need Facebook App ID meta tags?
fb:app_id is optional for basic link previews. It is required for some Insights features, not for showing an image.
Can I use a relative URL in og:image?
No. Always use an absolute URL: https://example.com/image.jpg.
Why does Instagram show a different preview than Facebook?
Instagram and Facebook share Meta's crawler infrastructure. Fix OG tags once and both improve. Re-scrape in the Sharing Debugger.
Does Facebook read JSON-LD instead of OG tags?
Facebook primarily uses Open Graph meta tags. JSON-LD helps Google, not Facebook previews.
My preview disappeared after I changed hosting. Why?
DNS or SSL misconfiguration during migration. Confirm HTTPS works and re-scrape.
Bottom line
Facebook link previews fail when crawlers cannot read your tags or fetch your image. Put OG meta tags in server-rendered HTML, use a 1200 × 630 image on HTTPS, unblock facebookexternalhit, and verify with the Sharing Debugger. Fix those four items and most broken previews resolve on the next scrape.
