随着 Web 技术的不断发展，越来越多的网站采用 SPA（Single-Page Application，单页应用）架构提供更加流畅的用户体验。然而，SPA 带来的一个最为显著的问题就是 SEO（Search Engine Optimization，搜索引擎优化）的问题。由于 SPA 是一种在客户端生成 HTML 内容的技术，在 SEO 方面与传统的多页应用相比存在不少挑战。本文将会介绍 SPA 单页应用 SEO 优化的一些实践经验和技巧，希望能对前端开发者们有所帮助。
SPA 单页应用 SEO 问题
为了更好地理解 SPA 单页应用 SEO 问题，我们先来了解一下多页应用的工作流程。在传统的多页应用中，用户访问一个页面时，浏览器向服务端请求并下载 HTML 页面，并渲染生成 DOM 树，接着通过下载 JS、CSS 和图片等资源，完成页面的渲染。在这个过程中，服务端能够根据用户的请求返回相应的 HTML 内容，以及搜索引擎能够从 HTML 中提取出有用的信息并建立索引。
而在 SPA 单页应用中，所有的内容都在一个 HTML 页面中加载，通过 AJAX （或更现代化的 fetch/API） 去做页面渲染和接口交互等，通过前端路由控制具体的展现。因此，SPA 单页应用中的 HTML 不再是服务端生成的，由于浏览器生成的 HTML 常常包含很多无用的代码，同时 SPA 的页面内容一般较少，导致问题变得复杂。很多搜索引擎无法理解和处理 SPA 中的内容。
SPA 单页应用 SEO 优化实践
1. 使用服务端渲染（SSR）
SPA 单页应用中的 HTML 文档只有基本的结构和少量的数据，而搜索引擎爬虫看到的是没有动态数据的空壳。因此，在 SPA 单页应用 SEO 优化中，最直接的解决方案就是使用服务端渲染（SSR），这样搜索引擎在爬取页面的时候就可以获取到完整的 HTML 内容。同时，使用 SSR 还可以解决 SPA 带来的首屏渲染速度慢的问题，提高用户的体验。
使用 SSR 的第一步就是搭建一个 Node.js 环境。接着，在 Node.js 中使用相应的框架（如 React、Vue）编写服务端渲染的代码。最后，将渲染后的 HTML 输出给客户端即可。
下面是一个使用 React 和 Express 框架的 SSR 示例代码：
-- -------------------- ---- -------
----- ------- - -------------------
----- -------------- - ----------------------------
----- ----- - -----------------
----- --- - -----------------
----- --- - ----------
------------ ------------- ---- -
----- ------- - ---------------------------------- ----
----- ---- - -------
------
--------- -----------
-------
------
---- --------------------------
------- ---------------------------
-------
---------
---------------
---
---------------- ---------- -
------------------- ------- -- -------------------------
---2. 预渲染（Prerendering）
使用 SSR 的成本比较高，需要搭建 Node.js 服务器，并且在客户端与服务器之间增加了网络传输，对服务器和浏览器都带来了额外的负担。因此，在某些情况下，预渲染（Prerendering）是一种更为简单的解决方案。
预渲染就是在构建 SPA 项目时，预先生成 HTML 文件并保存到服务器上。在访问时，如果用户使用的是普通浏览器，则会通过 JavaScript 渲染。如果请求来自搜索引擎，则直接使用预渲染的 HTML 文件，以达到 SEO 的目的。
下面是一个使用 Prerender SPA Plugin 插件的 webpack 配置代码：
-- -------------------- ---- -------
----- ------------------ - -------------------------------
-------------- - -
-- ----------
-------- -
--- --------------------
---------- -------------------- --------
------- -----
--
-
-3. 动态转化
实际上，不是所有 SPA 都适合使用 SSR 和 Prerendering。一些 SPA 可能涉及到频繁变化的数据，无论是 SSR 还是 Prerendering，都无法得到最新的数据。在这种情况下，我们需要动态转换（Dynamic Transformation），将 SPA 中的数据与静态 HTML 页面结合起来，形成一个完整又可被搜索引擎理解的页面。
我们可以使用 Headless Chrome（一个不带 UI 的浏览器）来模拟服务器端渲染的过程，将渲染好的 HTML 返回给搜索引擎。这样搜索引擎就可以看到完整的 HTML 页面，而不仅仅是 SPA 生成的小片段。
在Puppeteer库帮助下，实现动态转化很简单：
-- -------------------- ---- -------
----- --------- - ---------------------
----- -------- --------------------- -
----- ------- - ----- -------------------
----- ---- - ----- ------------------
----- -------------- -
---------- --------------
---
----- ---- - ----- ---------------
----- ----------------
------ -----
-这样你就可以在你的 NodeJS 应用中截取页面的 HTML，并把它返回给搜索引擎。
总结
以上是 SPA 单页应用 SEO 优化的三种主要实践方法：使用服务端渲染（SSR）、预渲染（Prerendering）、动态转化。如果你的应用有频繁变化的数据，使用 SSR，如果不需要频繁更新数据，可以尝试使用 Prerendering 或动态转化。当然，这些方法并不能完整解决 SPA 对 SEO 的挑战，我们需要在团队规范和流程上做更多的工作，以期取得最好的结果。希望本文能对你的 SPA 单页应用 SEO 优化有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6503a70195b1f8cacd06fabb