SEO for Single-Page Applications

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

html

<!-- 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

typescript

// 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

javascript

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

javascript

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

→ Rendering Patterns: SSR vs SSG vs ISR
→ Technical SEO Checklist