SPA SEO diagnosis covering HTML, routes, rendering, and status codes

Is a Single-Page Application Always Bad for SEO? Check HTML, Routes, and Status Codes

Author: JVDS Design Studio Reading time: about 8 min

SPA SEO is more complicated than saying that Google cannot understand JavaScript. More often, the server returns nearly empty HTML, important routes can be reached only through click handlers, every nonexistent page returns 200, and titles appear only after scripts run. A search engine may be able to render the site, but the application makes discovery, interpretation, and evaluation slower and less reliable.

SPA SEO is more complicated than saying that Google cannot understand JavaScript. More often, the server returns nearly empty HTML, important routes can be reached only through click handlers, every nonexistent page returns 200, and titles appear only after scripts run. A search engine may be able to render the site, but the application makes discovery, interpretation, and evaluation slower and less reliable.

01 Distinguish Crawling, Rendering, Indexing, and Ranking

Crawling means a search engine requests a URL. Rendering means it executes required scripts and sees the page. Indexing is the decision to store and interpret the content. Ranking is the page's competitive position for a specific query. An SPA can fail at any of these stages.

A page working in a browser does not prove that a search engine can discover every URL. Search Console showing a page as crawled does not prove the final content was indexed. Diagnosis must identify the exact stage where the process fails.

SymptomPossible ProblemCheck First
Page is never discoveredClick-only links, hash routing, or no sitemapReal <a href> links, URL structure, and internal links
Crawled page has no contentHTML shell, script error, or blocked resourcesCrawled HTML and rendered result
Many pages are not indexedDuplicate content, incorrect canonical, or soft 404Status code, body content, and canonical URL
Titles and descriptions are inconsistentMetadata changes only on the clientServer-rendered title and meta tags
Rankings fluctuate significantlyRendering delays or content dependent on login or APIsServer rendering, caching, and failure states

Routes must be accessible URLs rather than internal application state

02 Routes Must Be Accessible URLs, Not Internal Application State

Every indexable page needs a stable URL and must be discoverable through links with href attributes. Buttons with click handlers, front-end state, or fragment routes such as “#/products” make discovery and interpretation more difficult.

The History API does not solve the problem automatically. When a deep URL is refreshed, the server must return usable content for that page—not a 404, the same home page, or a shell that requires the client to infer the route again.

  • Use real <a href> links in navigation and body content.
  • Give products, services, case studies, and articles independent, stable URLs.
  • Decide which pagination, filter, and parameter URLs need indexing and which need canonicalization.
  • Return an appropriate 404 or 410 for deleted pages instead of displaying an error message with a 200 response.
  • Plan authenticated application routes separately from public content routes.

03 SSR, SSG, and Prerendering Are Not the Same Answer

An SPA can produce complete HTML through server-side rendering (SSR), static site generation (SSG), incremental generation, or prerendering. The right choice depends on update frequency, personalization, data dependencies, and operational capabilities.

Corporate websites, articles, and stable service pages often suit static generation. Pricing, inventory, or frequently changing content may require server-side rendering. An authenticated workspace may not need SEO at all. Do not force every page into one rendering mode merely to unify the technology stack.

Page TypeRecommended MethodReason
Home/service pagesSSG or SSRStable initial content and metadata support crawling
Articles/case studiesSSG or incremental generationLarge content volume, controlled updates, and strong performance
Real-time product catalogSSR + cachingUses current data while delivering complete HTML
Personalized user pagesClient-side renderingUsually not publicly indexed; interaction takes priority
Authenticated administrationCSR/SPANo search ranking requirement; permissions and efficiency take priority

How front-end routing often hides status codes and error pages

04 Front-End Routing Often Hides Status Codes and Error Pages

Many SPAs return the same index.html for every URL and then display “page not found” on the client. The server still returns 200, which can create soft 404s and large numbers of low-value URLs for search engines.

Redirects also should not rely on a script that runs after loading. Permanent migrations should use a server-side 301 or 308; temporary redirects should use an appropriate status code. Restricted content, service errors, and deleted resources must communicate their real state at the HTTP layer.

05 Output Metadata and Structured Data with Each URL

Page titles, descriptions, canonicals, language, Open Graph data, and structured data should not all depend on client components mounting before they change. Important pages should ideally include URL-specific metadata in the initial HTML.

Every route also needs a real H1 and primary content. If product data exists only in a JSON endpoint, canvas, or inaccessible component, a search engine may still fail to interpret it accurately even after rendering.

Why an API failure must not turn an empty page into a normal response

06 An API Failure Must Not Turn an Empty Page into a Normal Response

SPAs depend heavily on APIs. When an API times out, authentication fails, or an empty result is returned, a page may show only a loading indicator while still being cached and indexed. Design explicit loading, failure, empty, and partial-data states.

Public SEO pages should retain cacheable core content wherever possible. If dynamic data fails, preserve the title, explanation, navigation, and recovery path. If an object truly does not exist, return 404 rather than loading forever.

An SEO-friendly SPA does not make search engines wait longer; it communicates the URL, content, and status as early as possible.

07 A Diagnostic Process Based on Evidence, Not Guesswork

Start with one specific URL rather than blaming the framework. Inspect the server response HTML, final rendered content, status code, canonical, and internal links, then compare them with crawl and indexing results in Search Console.

After fixing the issue, verify again: does the crawled page immediately contain essential content, can deep URLs be refreshed, do invalid URLs return correct status codes, does the sitemap submit only canonical URLs, and do logs show that search engines can reliably access scripts and APIs?

StepTool/EvidencePass Criteria
1. URL discoveryInternal links, sitemap, and logsTarget URL is discoverable from a public page
2. Raw responsecurl/view sourceInitial HTML includes title, body content, and key links
3. Rendered resultBrowser with cache disabled and search crawler testNo script errors; content matches what users see
4. HTTP semanticsStatus codes and redirect chainLive, deleted, and migrated pages report the correct status
5. Indexing decisionSearch Console and site queryCanonical URL is selected without widespread duplication
6. Ranking contentQuery intent and competing pagesPage provides sufficient unique value

Frequently Asked Questions

Must a React or Vue website move to Next.js or Nuxt for SEO?

No. The key is whether public pages deliver complete HTML, stable URLs, correct status codes, and metadata. Next.js and Nuxt offer mature capabilities, but other SSR, SSG, and prerendering solutions can work as well.

If Google can execute JavaScript, why use server-side rendering?

The ability to execute JavaScript does not guarantee timely, successful, or equally efficient rendering every time. Putting essential content in the initial HTML reduces rendering dependencies and improves discovery, sharing, performance, and resilience during failures.

Does an authenticated SaaS dashboard need SEO?

Usually not. A dashboard should prioritize permissions, performance, and task efficiency. Public home, feature, industry, documentation, case study, and article pages are the areas that need SEO.

Can dynamic rendering serve search engines different content?

It is not recommended as a long-term primary solution. Search engines and users should receive materially consistent content. Prefer modern server-side rendering, static generation, or hybrid rendering.

ServiceView
Corporate Website Design ServicesView service details
Project ConsultationContact JVDS Design Studio
Design and Web Development ArticlesRead more articles
Link copied

From Idea to Launch, We Build It Together

Building useful, scalable digital products around user experience

Tell Us About Your Project