Introduction
Single-Page Applications render content with JavaScript in the browser. The server sends a near-empty HTML shell. This creates a fundamental SEO problem: crawlers may see an empty div instead of content.
While Google can execute JavaScript, there's a delay. Other search engines have limited JS capabilities. Social media crawlers don't execute JS at all.
This guide covers practical solutions for making SPAs fully SEO-friendly.
Key Concepts
The SPA SEO Problem
<!-- Without SSR, crawlers see: -->
<body><div id="root"></div><script src="/app.js"></script></body>
<!-- They need: -->
<body><h1>Product Name</h1><p>Description...</p></body>
Solution: Server-Side Rendering
// Next.js — SSR by default
export async function generateMetadata({ params }) {
const product = await getProduct(params.id);
return {
title: product.name,
description: product.description,
openGraph: { images: [product.image] },
};
}
Practical Examples
1. React Helmet for CSR Apps
import { Helmet } from 'react-helmet-async';
function ProductPage({ product }) {
return (
<>
<Helmet>
<title>{product.name}</title>
<meta name="description" content={product.description} />
</Helmet>
<h1>{product.name}</h1>
</>
);
}
// ⚠️ Only works for Google, not social crawlers
2. Testing Crawlability
await page.setJavaScriptEnabled(false);
await page.goto('https://your-spa.com/product/123');
const content = await page.content();
console.log(content.includes('Product') ? '✅ SSR works' : '❌ Missing');
Best Practices
- ✅ Use SSR or SSG for pages that need indexing
- ✅ Generate meta tags on the server
- ✅ Use framework-native solutions (Next.js, Nuxt)
- ✅ Test by disabling JavaScript in browser
- ❌ Don't rely on JS rendering for critical SEO pages
- ❌ Don't use hash-based routing for SEO pages
Common Pitfalls
- 🚫 Assuming Google renders JS instantly
- 🚫 Hash-based routing — Google sees only the base URL
- 🚫 Missing social meta tags — Facebook/Twitter don't execute JS
- 🚫 Soft 404s — return proper status codes
Related Guides
- → Rendering Patterns: SSR vs SSG vs ISR
- → Technical SEO Checklist