Why Your Open Graph Tags Aren't Working (And the Fix)

You added the Open Graph tags. You pasted the URL into Facebook, LinkedIn, or Slack. And the preview is wrong — missing image, old title, or just a blank card with a URL. This is one of the most frustrating issues in front-end SEO because the markup looks correct in your source, yet crawlers refuse to cooperate.

Below is a focused diagnostic walkthrough covering the actual reasons OG tags fail, with the fix for each one.

First, confirm the tags are actually reaching the crawler

Before debugging anything else, verify that what you see in the browser is what the social crawler sees. Many OG problems come from tags being injected by JavaScript after page load — crawlers like facebookexternalhit and LinkedInBot don't execute JS reliably.

Quick check

1. Open the page and view source (Ctrl+U), not the inspector.
2. Search for og:title, og:image, and og:url.
3. If they're missing from raw HTML but visible in DevTools, your tags are rendered client-side. That's the bug.

Frameworks like Next.js, Nuxt, and SvelteKit handle this correctly through SSR or static generation, but only if you've set metadata in the right place (e.g. generateMetadata in Next.js App Router, not a useEffect). React SPAs without SSR will need pre-rendering or a service like Prerender.io.

The 7 most common reasons OG tags don't work

1. The image URL is relative, not absolute

This is the single most frequent cause of missing previews. og:image must be a full URL starting with https://.

<!-- Wrong -->
<meta property="og:image" content="/images/share.jpg" />

<!-- Correct -->
<meta property="og:image" content="https://example.com/images/share.jpg" />

2. The image is too small, too large, or the wrong ratio

• Recommended size: 1200 x 630 pixels (1.91:1 ratio)
• Minimum: 600 x 315 pixels
• Max file size: 8MB for Facebook, 5MB for LinkedIn
• Format: JPG or PNG. Avoid WebP — LinkedIn and some Slack integrations still don't render it.

3. The image is behind authentication or a redirect

If the OG image URL returns a 301, 302, or requires cookies, most crawlers give up. Test the image URL in an incognito window. Also avoid pointing og:image at a CDN that hotlink-protects against unknown user agents.

4. Mixed http/https or wrong protocol

Your site is HTTPS but the image references http://? Crawlers will reject it. Same goes for og:url — it must match the canonical, secure version of the page.

5. Duplicate or conflicting tags

WordPress sites are notorious for this. Yoast SEO, Rank Math, Jetpack, and your theme can each output their own OG tags. The crawler picks one (usually the first), which may not be the one you edited. Check raw HTML for multiple og:image entries.

6. Cached old preview

Facebook, LinkedIn, and X aggressively cache OG data — sometimes for 7 to 30 days. Updating the tags doesn't refresh the preview automatically. You need to force a re-scrape (covered below).

7. Missing required properties

The minimum viable OG set is:

<meta property="og:title" content="..." />
<meta property="og:description" content="..." />
<meta property="og:image" content="https://..." />
<meta property="og:url" content="https://..." />
<meta property="og:type" content="website" />

Omit any of these and some platforms degrade gracefully — others (looking at you, LinkedIn) show a blank card.

Force a re-scrape after fixing the tags

Even with perfect markup, you'll still see the old broken preview until you flush the cache on each platform.

• Facebook: Sharing Debugger at developers.facebook.com/tools/debug/ → paste URL → click "Scrape Again"
• LinkedIn: Post Inspector at linkedin.com/post-inspector/ → paste URL → it re-scrapes automatically
• X (Twitter): Twitter doesn't have a public validator anymore. Append a dummy query string (?v=2) to bust the cache.
• Slack/Discord: Unfurl cache lasts ~30 minutes. Add a query parameter to force a refresh.
• WhatsApp: Cache is roughly 7 days, also bypassable with a query string.

Audit your tags before sharing

Rather than playing whack-a-mole with each platform's debugger, run your page through a meta tag analyzer first. The AXOX Hub Meta Tag Analyzer shows you exactly which Open Graph and Twitter Card tags are present in the rendered HTML, flags missing required fields, and previews how the card will look — without needing to push changes live and trigger platform caches.

This is particularly useful when you're testing a staging environment that the public Facebook debugger can't reach.

Twitter Cards: the separate-but-related fix

X falls back to Open Graph tags when Twitter-specific ones are missing, but for proper large image cards you need both:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="..." />
<meta name="twitter:description" content="..." />
<meta name="twitter:image" content="https://..." />

Note twitter: uses name=, while og: uses property=. Swapping these is a surprisingly common copy-paste bug.

Edge cases worth knowing

CloudFlare or WAF blocking crawlers

If you're running aggressive bot protection, you may be blocking facebookexternalhit/1.1, LinkedInBot, Twitterbot, or Slackbot-LinkExpanding. Whitelist these user agents explicitly.

CSP headers stripping meta refresh

Some strict Content-Security-Policy setups interact badly with OG image hosting on a different domain. If your image is on a subdomain, ensure it's reachable without CSP-triggered blocks for unauthenticated requests.

Single-page apps and dynamic routes

If /blog/post-a and /blog/post-b show the same OG tags, your router isn't updating <head> per route. Use your framework's metadata API — react-helmet-async, next/head, or @vueuse/head — and make sure it's rendering server-side.

Trailing slash and canonical mismatches

If og:url points to /page but the canonical is /page/, some crawlers treat them as different resources and re-scrape unnecessarily, sometimes pulling stale data. Keep them identical.

Validate before you share

Don't wait until a marketing tweet looks broken to find out your OG tags are misconfigured. Drop your URL into the AXOX Hub Meta Tag Analyzer to inspect every OG, Twitter Card, and SEO meta tag on the page, see a live social preview, and catch missing or duplicate properties before they hit production.