Common Open Graph Mistakes That Break Previews

8 min read

May 28, 2026

Your Open Graph tags look correct in the browser, but the shared link shows the wrong image, an old title, or no preview at all. Most broken link previews come from a small set of repeatable mistakes, not mysterious platform bugs. Here are the ones we see most often and how to fix each.

Short answer

The top Open Graph mistakes are: tags injected only by JavaScript, relative image URLs, duplicate conflicting meta tags, wrong og:url values, oversized or unreachable images, and stale platform cache. Fix them by confirming tags in View Page Source (not DevTools), using absolute HTTPS URLs, keeping one authoritative tag set, and scanning with OpenGraph Check before you share.

Why mistakes matter more than you think

A broken preview does not just look unprofessional. It cuts click-through rate, wastes ad spend, and makes shared content look like spam. The frustrating part: your page can render perfectly in Chrome while crawlers receive completely different HTML.

Social crawlers fetch your URL once, parse <head>, download og:image, and cache the result. They do not scroll, click, or run your React bundle. One mistake in that first response sticks until you fix it and clear the cache.

Mistake 1: Tags exist only after JavaScript runs

This is the number one cause of missing previews on modern sites.

You open DevTools, see all the og:* tags, and assume everything works. But View Page Source shows an empty <head> or a generic fallback from your CMS template.

Frameworks affected:

Client-rendered React and Vue SPAs
Next.js pages that set metadata in client components only
WordPress themes that inject tags via late-loading scripts

Fix: Emit Open Graph tags in the server HTML response. Use SSR, static generation, or your framework's metadata API. Always verify with View Source.

Mistake 2: Relative URLs in og:image or og:url

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

Crawlers resolve relative paths against unpredictable base URLs. Some platforms silently drop the image. Others fetch from the wrong domain entirely.

Every Open Graph URL must be absolute and HTTPS.

Mistake 3: Duplicate or conflicting tags

SEO plugins, themes, and custom code often output Open Graph tags twice. Example: Yoast sets og:title, then the theme overwrites it with the raw post slug.

Crawlers pick the first or last tag depending on the platform. You get inconsistent previews across Facebook, LinkedIn, and Slack without knowing why.

Fix: View Page Source, search for og:title, and count occurrences. Keep one source of truth. Disable duplicate output in your plugin settings.

Mistake 4: Wrong og:url (www, trailing slash, parameters)

You share https://example.com/blog/post but og:url points to https://www.example.com/blog/post/ with a trailing slash. Facebook treats these as separate cache keys. You update tags on one URL while the shared link serves cached data from the other.

Common variants:

www vs non-www
Trailing slash vs no trailing slash
http vs https
UTM parameters baked into og:url

Fix: Set og:url to the exact canonical URL you share. Match your <link rel="canonical">. Read Why Social Platforms Cache Link Previews.

Mistake 5: Image exists but crawlers cannot fetch it

The image loads fine in your browser but fails for bots. Causes:

Login wall or paywall on the image path
Cloudflare bot challenge blocking Facebook's crawler
Hotlink protection on CDN
robots.txt blocking /images/
Expired signed S3 or CloudFront URLs
Redirect chain that ends in 403

Fix: Open og:image in an incognito window. Test with the Facebook Sharing Debugger scrape log. See How to Fix a Missing OG Image.

Mistake 6: Image too small, wrong ratio, or wrong format

Platforms recommend 1200 × 630 px at roughly 1.91:1 aspect ratio. Common failures:

200 × 200 px favicon used as og:image
Square Instagram images cropped awkwardly
Animated GIF ignored by some crawlers
SVG files not supported on most platforms
Files over 5 MB timing out on slow connections

Fix: Export a dedicated OG image at 1200 × 630 px, JPG or PNG, under 1 MB. Details in Open Graph Image Size Guide.

Mistake 7: Using name instead of property

Open Graph uses the property attribute, not name:

<!-- Wrong - ignored by most crawlers -->
<meta name="og:title" content="My Title">
<!-- Correct -->
<meta property="og:title" content="My Title">

Twitter Card tags correctly use name. Mixing up the two attributes is a silent failure.

Mistake 8: Empty or auto-generated og:description

Missing og:description forces platforms to scrape random body text. You get navigation menus, cookie banner snippets, or legal footer copy in your preview.

Fix: Write a dedicated social description for every shareable page. See How to Fix Missing Open Graph Tags.

Mistake 9: Forgetting Twitter Card tags

X reads Open Graph as fallback, but without twitter:card set to summary_large_image, you may get a small text-only card even when og:image is perfect.

Minimum Twitter block:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://example.com/images/og.jpg">

Full comparison: Open Graph vs Twitter Card.

Mistake 10: Testing on localhost or staging with auth

You validate tags on localhost:3000 or a password-protected staging site. Crawlers cannot reach either. You ship to production assuming tags were verified.

Fix: Test on the public production URL with HTTPS. Use OpenGraph Check after every deploy.

Mistake 11: Ignoring platform cache after a fix

You fix the tags, share again, and see the old preview. The HTML is correct but the platform serves cached data from the previous scrape.

Fix:

Facebook / WhatsApp / Instagram: Facebook Sharing Debugger
LinkedIn: LinkedIn Post Inspector
Cache busting with query strings when appropriate: Open Graph Cache Busting

Never assume a fix is live until the debugger confirms a fresh scrape.

Mistake 12: One og:image for every page on the site

A global fallback image is fine for utility pages. But every blog post and product sharing the same generic logo kills click-through.

Fix: Override og:image per page with a relevant visual. Use templates from Open Graph Meta Tags Example.

Mistake 13: Blocking social crawlers in robots.txt

Some teams block all bots during development and forget to remove the rule:

User-agent: *
Disallow: /

Or they block /api/ paths that accidentally include OG image routes.

Fix: Confirm robots.txt allows Facebook (facebookexternalhit), LinkedIn (LinkedInBot), Twitter (Twitterbot), and Slack (Slackbot).

Mistake 14: Relying on og:tags without a standard meta description

SEO meta description and og:description serve different systems, but some platforms fall back to <meta name="description"> when Open Graph text is missing.

Fix: Set both explicitly on every important page.

How to audit your site for these mistakes

Run this five-minute audit on any URL:

View Page Source - tags present in raw HTML?
Search for duplicate og:title entries
Confirm all URLs are absolute HTTPS
Open og:image in incognito - 200 OK?
Scan with OpenGraph Check - previews correct on target platforms?

For a full workflow, follow How to Test Open Graph Tags Before You Publish.

Quick reference: mistake to fix

Mistake	Symptom	First fix
Client-side tags only	No preview on any platform	Server-render tags
Relative og:image	Image missing	Absolute HTTPS URL
Duplicate tags	Inconsistent across platforms	Remove duplicates
Wrong og:url	Cache will not update	Match canonical URL
Blocked image	Image in debugger fails	Fix auth / CDN / robots
Small image	Blurry or ignored	1200 × 630 px
Stale cache	Old preview after fix	Re-scrape in debugger

FAQ

Why does my preview work on Facebook but not LinkedIn?

Different crawlers, different caches. Test both independently. LinkedIn has its own cache via Post Inspector.

Can one Open Graph mistake break all tags?

Usually not. Platforms pick up whatever tags they find. A missing image does not remove the title. But multiple mistakes compound into a useless card.

Does HTTPS redirect break og:image?

If the image URL redirects from HTTP to HTTPS, most crawlers follow it. Long redirect chains or HTTP-only URLs cause failures.

Are Open Graph mistakes bad for SEO?

They do not directly affect Google rankings. They hurt social click-through, brand perception, and referral traffic.

How often should I audit Open Graph tags?

After every template change, CMS migration, or domain move. Spot-check key landing pages monthly on high-traffic sites.

What is the fastest way to find all mistakes on a URL?

Paste the URL into OpenGraph Check. One scan surfaces missing tags, broken images, and platform-specific preview issues.

Should I fix Open Graph or Twitter tags first?

Fix Open Graph first. Add Twitter tags second. Open Graph covers more platforms.

Bottom line

Broken link previews almost always trace back to fixable Open Graph mistakes: client-side tags, relative URLs, duplicates, wrong canonical URLs, unreachable images, or stale cache. Check View Page Source, fix the pattern, scan with OpenGraph Check, and clear platform cache before you share again.