Single Page Application (SPA) SEO

Single page application (SPA) SEO is the work of making JavaScript apps that load once and update content in the browser crawlable, indexable and rankable. SPAs feel fast to users, but without care they can hide content, links and URLs from search engines.

Written by Paul Hoda, SEO consultant since 2005. Last updated 8 November 2026.

What a single page application is

A traditional website loads a new HTML page from the server for every click. A single page application loads one HTML shell and a JavaScript bundle, then swaps content in and out as the user moves around. Frameworks such as React, Vue, Angular and Svelte are commonly used to build them.

By default, most SPAs use client-side rendering, which is where the SEO challenges start.

Common SEO problems with SPAs

  • Empty initial HTML: crawlers that do not run JavaScript see nothing, and even Google must render the page first.
  • Hash URLs: older SPAs used URLs like example.co.uk/#/products. Google generally ignores everything after the #, so every view looks like the homepage.
  • Links that are not links: navigation built with buttons and click events gives crawlers nothing to follow, leaving pages undiscovered.
  • One title for every view: the title tag, meta description and canonical may never change between views.
  • Wrong status codes: the server returns 200 for every URL, so missing pages become soft 404s.
  • Content behind interactions: text that only loads after a click, scroll or login is often never indexed.

How to optimise an SPA

  1. Render on the server: use server-side rendering or static generation for public pages. Frameworks such as Next.js, Nuxt, Angular’s SSR support and SvelteKit make this practical.
  2. Use clean URLs: give every meaningful view its own URL using the History API, without hash fragments.
  3. Use real links: make navigation <a href="/page/"> elements. Routers can still intercept clicks for smooth transitions.
  4. Update metadata per view: set a unique title, meta description and canonical for each URL, ideally in the server HTML.
  5. Handle errors properly: return a real 404 status for missing content, or add a noindex tag to error views.
  6. Keep resources crawlable: do not block JavaScript files or API endpoints in robots.txt.
  7. Submit an XML sitemap listing every indexable URL.

How to test an SPA

  • Compare view-source with the rendered DOM in browser developer tools.
  • Use the URL Inspection tool to see Google’s rendered HTML and screenshot.
  • Crawl the site with JavaScript rendering both off and on, and compare the number of URLs and links found.
  • Check the page indexing report for soft 404s and duplicate pages without a selected canonical.

Common myths

Google cannot index SPAs: it can, and many rank well. The issue is reliability, speed and other crawlers, not impossibility.

Pre-rendering for bots solves everything: dynamic rendering can help short term, but Google describes it as a workaround and it adds maintenance.

Key Takeaways

  • SPAs load one page and update content with JavaScript, which can hide it from crawlers.
  • Every view needs its own clean URL, not a hash fragment.
  • Use real anchor links and unique metadata for each view.
  • Server-side rendering or static generation is the most reliable fix.
  • Return proper 404 status codes to avoid soft 404 errors.

Related Terms

Wondering what to fix first on your site? Get a free check of your site’s SEO, or keep learning in the SEO Encyclopedia.