Guides

Building SPA indexing and rendering strategies with React...

This guide provides actionable steps to implement SEO for single-page applications (SPAs) using React, Vue, or Angular. Focuses on resolving indexing issues, dynamic content rendering, and crawlability challenges specific to client-rendered frameworks.

30-60 minutes5 steps
1

Configure server-side rendering (SSR) or prerendering

Implement SSR using Next.js/Nuxt or prerendering with Prerender.io. Ensure server returns 200 status code for all routes and serves pre-rendered HTML. Use framework-specific SSR middleware for React/Angular.

pages/_document.js
/* Next.js example: pages/_document.js */
import Document, { Html, Head, Main, NextScript } from 'next/document';
export default class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

⚠ Common Pitfalls

  • •Forgetting to set proper HTTP headers for prerendered content
  • •Not handling 404 routes in SSR setup
2

Implement dynamic meta tags and Open Graph data

Use framework-specific meta tag managers (React Helmet, vue-meta) to set page-specific title, description, and Open Graph tags. Ensure values update on route changes and match content.

components/SeoMeta.tsx
/* React Helmet example */
import { Helmet } from 'react-helmet';
function Page({ title, description }) {
  return (
    <div>
      <Helmet>
        <title>{title}</title>
        <meta name="description" content={description} />
        <meta property="og:title" content={title} />
        <meta property="og:description" content={description} />
      </Helmet>
      {/* Page content */}
    </div>
  );
}

⚠ Common Pitfalls

  • •Not updating meta tags during client-side navigation
  • •Using static meta values across all pages
3

Validate URL structure and navigation

Ensure all client routes use proper HTTP 200 responses and match server-rendered content. Implement hash-based or HTML5 history navigation consistently across the app.

router/index.js
/* Vue Router example: router/index.js */
import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({
  history: createWebHistory(),
  routes: [...]
});
export default router;

⚠ Common Pitfalls

  • •Using hash-based URLs without 301 redirects to canonical versions
  • •Not testing deep linking in SPA routing
4

Test crawlability with Googlebot

Use Google Search Console's URL Inspection tool to verify how Googlebot renders pages. Check for JavaScript errors in the console and ensure all content is visible in the rendered HTML.

crawl-test.sh
curl -I https://your-spa-domain.com/your-page
# Verify response code 200 and check for rendered HTML content

⚠ Common Pitfalls

  • •Ignoring JavaScript execution errors in crawl tests
  • •Not verifying content visibility in Google's rendered view
5

Set up server-side redirects for legacy URLs

Configure server to handle 301 redirects for old URLs when migrating from traditional server-rendered apps. Use middleware to maintain SEO value during SPA transitions.

server.js
/* Express.js redirect example */
app.get('/old-page', (req, res) => {
  res.redirect(301, '/new-page');
});

⚠ Common Pitfalls

  • •Forgetting to update sitemap.xml after redirects
  • •Creating redirect loops during migration

What you built

After implementing these steps, verify crawlability with Google Search Console and monitor organic traffic patterns. Regularly audit dynamic content rendering and ensure SSR/prerendering pipelines remain aligned with application changes.