You share your link. The preview is blank. You look unprofessional.
You just launched your product. You write a compelling LinkedIn post, paste your URL, and hit publish. The preview card shows... nothing. No title. No description. No image. Just a bare link.
You try Slack. Same thing — no unfurl. X/Twitter? No card. Discord? Just a URL.
Your product looks unfinished. But it isn't. The problem is invisible — and it's the same one affecting millions of JavaScript SPAs.
Why social previews are broken on SPAs
When you share a URL on any social platform, that platform sends a bot to fetch your page and extract Open Graph (OG) meta tags for the preview card.
These social bots read the raw HTML your server sends. They do not execute JavaScript.
In a React, Vue, or Angular SPA, your OG tags are typically injected by a library like React Helmet:
<Helmet>
<meta property="og:title" content="My Product — The Best Tool for X" />
<meta property="og:description" content="A clear, compelling description." />
<meta property="og:image" content="https://my-site.com/og-image.jpg" />
<meta property="og:url" content="https://my-site.com" />
</Helmet>
This works in the browser. React renders the component, the meta tags get inserted into the <head>, and browser-based tools show everything as correct.
But the raw HTML that social bots receive looks like this:
<head>
<meta charset="UTF-8" />
<title>Vite + React</title>
</head>
No OG tags. No description. No image reference. The social bot has nothing to work with.
Which platforms are affected
| Platform | Bot Name | Executes JS | Sees React Helmet OG tags |
|---|---|---|---|
| LinkedInBot | No | No | |
| X (Twitter) | Twitterbot | No | No |
| facebookexternalhit | No | No | |
| Slack | Slackbot | No | No |
| Discord | Discordbot | No | No |
| No | No | ||
| iMessage | (Apple link preview) | No | No |
| Telegram | TelegramBot | No | No |
Every major social and messaging platform is affected. None of them execute JavaScript to read your OG tags.
What a good social preview needs
Required OG tags
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A compelling 1-2 sentence description." />
<meta property="og:image" content="https://your-site.com/og-image.jpg" />
<meta property="og:url" content="https://your-site.com/page" />
<meta property="og:type" content="website" />
For X/Twitter specifically
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="Description for Twitter." />
<meta name="twitter:image" content="https://your-site.com/og-image.jpg" />
Image requirements
- Minimum size: 1200 x 630 pixels (recommended for all platforms)
- Format: JPG, PNG, or WebP
- URL: Must be an absolute URL (not a relative path)
- Filename: No spaces or special characters
- File size: Under 5MB (under 1MB recommended)
- Aspect ratio: 1.91:1 for large cards
Common OG tag mistakes
- Relative image URLs:
/images/og.jpgwon't work. Usehttps://your-site.com/images/og.jpg - Spaces in filenames:
og image (1).jpgbreaks on many platforms - Missing protocol:
your-site.com/og.jpgneedshttps:// - Description too long: Keep under 200 characters for best display
- Title too long: Keep under 60 characters
How to fix social previews on your SPA
Fix 1: Add static OG tags to index.html (quick, limited)
Add default OG tags directly to your index.html:
<head>
<meta property="og:title" content="Your Product Name" />
<meta property="og:description" content="Your default description." />
<meta property="og:image" content="https://your-site.com/og-default.jpg" />
<meta property="og:url" content="https://your-site.com" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
</head>
Pros: Quick fix. Social bots see OG tags for your homepage.
Cons: Every route on your SPA shares the same OG tags. If someone shares your-site.com/pricing, the preview shows the homepage title and description — not the pricing page content.
Fix 2: Pre-rendering (recommended)
Pre-rendering middleware serves fully rendered HTML to social bots — including route-specific OG tags injected by React Helmet.
With CrawlReady or similar tools:
/pricinggets the pricing page OG tags/blog/my-postgets that blog post's OG tags/featuresgets the features page OG tags
Each URL gets its own correct social preview card.
Pros: Every route gets correct, unique OG tags. No code changes required.
Cons: Requires a pre-rendering service ($9–$29/mo).
Fix 3: SSR framework migration
Migrate to Next.js, Nuxt, or another SSR framework. The server renders OG tags into the HTML for every route.
Pros: Clean architectural solution.
Cons: $30K–$80K+ rewrite. Not practical for existing SPAs.
How to test your social previews
Facebook Sharing Debugger
Go to developers.facebook.com/tools/debug/ and paste your URL. This shows exactly what Facebook's crawler sees, including OG tags and the preview card.
X/Twitter Card Validator
Go to cards-dev.twitter.com/validator (or use X's post composer). Paste your URL to see the Twitter card preview.
LinkedIn Post Inspector
Go to linkedin.com/post-inspector/ and paste your URL. This shows LinkedIn's preview and lets you refresh the cache.
Manual test with curl
curl -s https://your-site.com | grep -i "og:"
If nothing comes back, social bots see no OG tags.
CrawlReady audit
The CrawlReady audit checks for OG tags in the raw HTML and flags missing or misconfigured social meta tags as part of its comprehensive scan.
Cache and refresh issues
Social platforms cache your URL's preview data. If you've fixed your OG tags but old previews persist:
Use the Post Inspector to manually refresh. LinkedIn typically updates within minutes.
Use the Sharing Debugger and click "Scrape Again." This forces Facebook to re-fetch your page.
X/Twitter
Twitter caches aggressively. You may need to wait 24–72 hours or append a query parameter to force a fresh fetch: your-site.com?v=2
Slack
Send the URL in a channel, then edit the message and re-paste the URL. Slack re-fetches on edit.
The business impact of broken previews
Social sharing is a primary distribution channel for most products. When your previews are broken:
- Lower click-through rates. Rich preview cards get 2–5x more clicks than bare URLs
- Reduced credibility. Blank previews signal "unfinished" or "low quality" to viewers
- Missed virality. Content that looks professional gets reshared. Bare links don't.
- Poor first impressions. If someone's first encounter with your product is a broken preview card, they're less likely to click through
This affects every social share — by you, your team, your users, press coverage, blog mentions, and anyone who pastes your URL anywhere.
The connection to AI visibility
The same problem that breaks your social previews — JavaScript-only meta tags — also makes your site invisible to AI crawlers. The fix is the same: serve rendered HTML that contains your meta tags, content, and structured data.
Pre-rendering solves both problems simultaneously:
- Social bots get proper OG tags → rich preview cards
- AI bots get full content → AI search citations
- Search engines get rendered HTML → better indexing
One fix. Multiple benefits.
Next steps
- Test your previews using the debugger tools above
- Run a CrawlReady audit to check OG tags and overall crawler visibility
- Read our guide on what crawlers actually see for the technical deep-dive
- Check the 5 signs of AI visibility problems for a quick diagnostic
Social platform preview requirements change occasionally. Test your previews after any site update and refer to each platform's current documentation for the latest specifications.
Is your site invisible to AI search?
Run a free audit and see exactly what Google, ChatGPT, Perplexity, and 20+ crawlers see on your site. Results in 15 seconds.
Run Free Audit