SPA SEO Challenges — Why SPAs Struggle with Search Engines

// Check if your SPA is SEO-friendly
async function auditSPASEO() {
    const checks = {
        // 1. Check initial HTML has content
        initialContent: {
            test: document.querySelector('meta[name="description"]')?.content,
            expected: 'Meta description should exist'
        },

        // 2. Check for meaningful first render
        firstRender: {
            test: document.getElementById('root')?.innerHTML.length > 100,
            expected: 'Root element should contain meaningful HTML'
        },

        // 3. Check status codes for different routes
        statusCodes: {
            test: await checkRoute('/'),
            expected: 'All routes should return 200'
        },

        // 4. Check for JavaScript-rendered content
        jsContent: {
            test: document.querySelector('h1')?.textContent,
            expected: 'Page should have visible heading in HTML'
        },

        // 5. Check meta tags
        metaTags: {
            test: document.title && document.querySelector('meta[name="description"]'),
            expected: 'Title and meta description should be present'
        }
    };

    console.table(checks);
    return checks;
}

// Check if Google can render a route
async function simulateGoogleCrawl(url) {
    try {
        const response = await fetch(url);
        const html = await response.text();

        // Check if the HTML contains meaningful content
        const hasContent = html.includes('<h1') ||
                          html.includes('<article') ||
                          html.includes('<main');

        console.log(`URL: ${url}`);
        console.log(`Status: ${response.status}`);
        console.log(`HTML size: ${html.length} bytes`);
        console.log(`Has content: ${hasContent}`);

        // Check for common SPA patterns that hurt SEO
        const problems = [];
        if (html.includes('id="root"') && !hasContent) {
            problems.push('Empty root div — no server content');
        }
        if (html.includes('<script src="/static/js/main')) {
            problems.push('Heavy JavaScript bundle');
        }
        if (problems.length === 0) {
            console.log('Looking good for SEO!');
        } else {
            console.log('Problems found:', problems);
        }
    } catch (error) {
        console.error('Failed to crawl:', error);
    }
}

// Solution 1: Server-Side Rendering (SSR)
// Render HTML on the server, send fully-formed page
// Framework: Next.js, Nuxt.js
// Pros: Best SEO, fast initial load
// Cons: Server cost, complexity

// Solution 2: Pre-rendering (Static Generation)
// Generate HTML at build time
// Framework: Gatsby, Next.js SSG, react-snap
// Pros: Static hosting, great SEO
// Cons: Content is only as fresh as the last build

// Solution 3: Dynamic Rendering
// Serve pre-rendered HTML to crawlers, SPA to users
// Tool: Rendertron, Prerender.io
// Pros: Works with existing SPAs
// Cons: Extra infrastructure, potential cloaking concerns

// Solution 4: Hybrid (recommended)
// Pre-render critical content pages, SPA for interactive parts
// Example: Marketing pages as static HTML, app as SPA

// react-snap — pre-render a React SPA
// package.json
{
    "scripts": {
        "postbuild": "react-snap"
    },
    "reactSnap": {
        "include": ["/", "/about", "/products", "/products/**"],
        "exclude": ["/dashboard/**", "/admin/**"],
        "puppeteerArgs": ["--no-sandbox"]
    }
}

// Or use Prerender.io middleware (Express)
const prerender = require('prerender-node');
app.use(prerender.set('prerenderToken', 'YOUR_TOKEN'));

// The middleware detects crawler user agents
// and serves pre-rendered HTML instead of the SPA

// Dynamic meta tags (React Helmet)
import { Helmet } from 'react-helmet-async';

function ProductPage({ product }) {
    return (
        <div>
            <Helmet>
                <title>{product.name} — Buy Online</title>
                <meta name="description" content={product.description} />
                <meta property="og:title" content={product.name} />
                <meta property="og:description" content={product.description} />
                <meta property="og:image" content={product.image} />
                <meta property="og:url" content={`/products/${product.id}`} />
                <link rel="canonical" href={`/products/${product.id}`} />
            </Helmet>

            <h1>{product.name}</h1>
            <p>{product.description}</p>
        </div>
    );
}