The Single-Page Application (SPA) Trap
You have built a beautiful, fast, interactive Single-Page Application (SPA) using React, Vue, or Angular. You share a link to your app, but instead of the custom title and image you set, it displays a blank white box or a generic fallback.
This is the most common issue developers face when building client-side rendered apps. It happens because social media crawlers do not execute JavaScript.
Why Social Media Crawlers See a Blank Page
When a user opens your SPA, their browser downloads a minimal HTML shell:
<!DOCTYPE html>
<html>
<head>
<title>My React App</title>
<!-- React bundle loaded here -->
<script src="/static/bundle.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>The browser then runs the JavaScript bundle, which renders the components and injects the title and meta tags.
However, social media bots (like Twitterbot, LinkedInBot, and Discordbot) are simple scrapers designed for speed. They request your page, read the raw HTML shell, and immediately parse the metadata. Because they do not wait for the JavaScript to execute, they see a completely blank page with no OG tags.
3 Ways to Fix React App OG Tags
1. Server-Side Rendering (SSR) — The Gold Standard
If you use Next.js (for React) or Nuxt.js (for Vue), the server pre-renders the complete HTML page, including all the correct meta tags, before sending it to the client. When a crawler requests the page, it gets clean, readable HTML.
2. Static Site Generation (SSG) / Prerendering
If your site consists of static pages, you can use prerendering tools (like React Snap or Prerender.io). These tools build static HTML files for each route during deployment, ensuring crawlers have access to the headers.
3. Edge Middleware / User-Agent Redirection
You can configure an Edge middleware function or serverless rule that checks the incoming User-Agent header. If the request comes from a social bot, you redirect them to a static, server-rendered version of the metadata. If it is a real human, you serve the standard React bundle.
Spotting SPA Errors Visually with LinkPeek
Debugging client-side rendering errors is difficult because the page looks perfect when you open it in your browser. Since your browser executes the JavaScript, you cannot easily tell what a bot is seeing.
LinkPeek is designed to solve this. When you run a scan, our engine fetches the URL without executing JavaScript, simulating a real bot's crawler environment.
Our pixel-perfect layout engine then renders a mockup of the output. If your React app is serving a blank HTML shell, you will immediately see an empty card in the editor, making it easy to catch SPA rendering bugs before deploying to production.
FAQ: React OG Previews
Q: Can I use React Helmet to set Open Graph tags?
A: React Helmet works by injecting tags into the DOM client-side. While it helps search engines like Google (which runs some JS), it is ignored by social crawlers like WhatsApp and X.
Q: How do I test what a social bot sees on my local React app?
A: Paste your local server URL into LinkPeek. It crawls the page in a bot-like sandbox environment and shows a mockup of the actual crawled results.
Q: Why does Google show my page title correctly but LinkedIn doesn't?
A: Google's search bot executes JavaScript rendering queues, whereas LinkedIn's preview crawler only scrapes the raw static HTML from the server response.