SEO 百科

单页应用（SPA）

本页目录

单页应用（SPA）

单页应用（SPA）是只加载一个网页文件、由脚本换内容来切换视图的网站[1]。做 SEO 的人要留意它，因为网址变化发生在浏览器里，服务器并不知情。一份 HTML 要对应多个网址，收录要多花功夫。

客户端路由

单页应用用客户端路由切换视图。访客点了导航，脚本拦住这次跳转，把新内容写进页面，再用 History API 改写地址栏，把网址换成新的[3]。History API 是浏览器提供的接口，能让脚本在不刷新页面的情况下改写网址，并留下历史记录。

服务端对这次切换一无所知。它没有收到新网址的请求，也就没有发出新页面。整个前端只有一份入口文件。

服务端不知道的网址

站在爬虫的位置上看，问题在这里：它请求 /products，服务器返回的还是那份入口 HTML。正文要等脚本取回数据才会出现。

Google 会执行脚本，渲染后能读到内容。可发现网址这一步更早。Google 说明，只有当链接是带 href 属性的 <a> 元素时，它才能发现这些网址[3]。单页应用的导航若只挂点击事件，没有真实地址，爬虫就走不过去。

历史上有人用网址片段绕开这个问题。片段是 # 后面的一段，例如 example.com/#/products。这条路已经关闭。Google 自 2015 年起弃用了 AJAX 抓取方案，不能用片段让 Googlebot 抓取[4]。

软 404 的成因

软 404 指网址返回成功状态码，内容却是错误页。Google 把这类情况列为要防范的问题[4]。

成因在客户端处理错误的方式上。错误逻辑写在脚本里，服务器照样返回 200，页面照样渲染出“未找到”。Google 说明，单页应用用客户端脚本处理错误时，通常会报告 200 HTTP 状态代码，而不是相应的状态代码[4]。结果就是错误页被编入索引。

404 才是正确的状态码，含义是网页不存在。返回它，搜索引擎会把这条网址从索引里去掉。

预渲染与服务端渲染

解决上面几个问题，思路都是把内容提前生成好。

服务端渲染指服务器收到请求后，直接返回带正文的 HTML。预渲染指构建或缓存阶段先把页面生成成静态文件，请求到了原样返回。Google 建议采用这两种方式，理由是用户和抓取工具能更快看到内容，以及并非所有漫游器都能运行 JavaScript[3]。

Bing 提供的方案叫动态渲染。它按 User-Agent 区分访客和爬虫，对爬虫返回预渲染好的静态 HTML。Bing 说明，只要尽力给所有访客返回同样的内容，只是渲染位置不同，这种做法可以接受，不算作弊[2]。

与抓取和收录的关系

抓取是收录的第一步。百度把搜索的工作原理概括为从互联网抓取网页、建立索引数据库、再将索引库中的数据展现给用户[5]。单页应用若每个视图各有独立网址，就要让每个网址都能被抓到。

自己核对时，打开 Search Console 的网址检查工具，看渲染后的 HTML 里有没有目标内容。也可以临时关掉浏览器的 JavaScript，看源码里还剩多少内容。所剩无几，就说明页面离不开脚本。

常见误用

  • 导航只挂点击事件，链接没有 href。
  • 用 # 片段承载不同视图。
  • 错误页一律返回 200，把空页送进索引。
  • 只把首页做成服务端渲染，其余视图留给脚本。

附录

参见

参考资料

官方（境外）

  1. 《SPA（单页应用）》，MDN Web 文档，2025-10-10 更新。
  2. 《bingbot Series: JavaScript, Dynamic Rendering, and Cloaking. Oh My!》，Bing 网站管理员博客，2018-10-31。
  3. 《了解 JavaScript SEO 基础知识》，Google 搜索中心，2026-03-05 更新。
  4. 《解决与 Google 搜索相关的 JavaScript 问题》，Google 搜索中心，2025-12-18 更新。

官方（国内）

  1. 《百度搜索的工作原理》，百度搜索资源平台，2023-12-21 更新。

外部链接

无。