Open Graph in a React SPA: why your preview is blank
You added og: tags with react-helmet, but Facebook, X and Slack show nothing? That is correct behavior: social platform scrapers do not execute JavaScript. They only see the bare index.html your server returns — and your tags are not in it. This is not a bug in your code; it is an architectural problem of client-side rendering.
The free checker shows your previews for nine platforms — from X and WhatsApp to iMessage, Discord and Bluesky.
Understand the problem
A React SPA ships one empty index.html and builds the page in the browser with JavaScript. Social scrapers (Facebook, X, LinkedIn, Slack, Discord, WhatsApp) do not render JS — so for every route they see the same empty head. Everything react-helmet adds client-side does not exist for them.
Solution 1 (best): server-side rendering
Migrate to a framework with SSR or static generation: Next.js, Remix or Astro. The tags are then part of the HTML response itself and every scraper sees them. This is the structural fix.
Solution 2: prerendering
Generate a static HTML snapshot per route at build time (e.g. with your bundler's prerender options). Works well for sites with a limited set of fixed routes.
Solution 3: meta injection on the server/edge
Have your web server or an edge function inject the right og: tags into index.html per route before sending it. A pragmatic middle ground when migrating is not an option.
Check like a scraper
Never test only in the browser — JS runs there. Paste your URL into the MetaPeek checker: it fetches the page the way a scraper does, without JavaScript.
Common mistakes
- "But Google sees my tags"Google renders JavaScript, social scrapers do not. Your page indexing fine says nothing about your social previews.
- Testing in the browserView-source (Ctrl+U) shows what the server sends — that is where your tags must be. The elements inspector shows the result after JS and is therefore misleading.
Frequently asked questions
So react-helmet is useless?
For the browser tab and for Google: it works fine. For social previews: only when combined with SSR, so the tags are already in the server response.
What is the fastest fix without migrating?
Meta injection on your server or edge (solution 3): one middleware that puts the right tags into the HTML per route. No React changes needed.
Paste your URL and see within two seconds whether everything is right — on every platform.