近年来，单页面应用程序（SPA）在前端开发中越来越广泛地被运用。SPA 本质上是一个在单个页面上加载不同内容、实现无刷新体验的 Web 应用程序。但是，由于 SPA 在前端部分的交互效果以及加载方式上的优越性，大部分搜索引擎无法正确抓取 JavaScript 渲染的内容，导致 SPA 对 SEO 有很大的挑战。本文将给出一些解决方案和实战经验，旨在帮助读者解决 SPA 和 SEO 的问题。
SPA 对 SEO 的挑战
由于 SPA 是 JavaScript 驱动的，它们的内容并不是预先渲染好的 HTML 页面。尤其是对于搜索引擎来说，这些应用程序中大多数内容都是动态加载的。传统的搜索引擎爬虫和代码分析工具无法抓取这些动态内容，因此，SPA 对 SEO 的挑战主要在以下几个方面：
- 搜索引擎无法正常抓取和索引 SPA 的内容，导致 SPA 难以在搜索结果中排名；
- 由于 SPA 的重度依赖 JavaScript，加载速度较慢，容易产生反用户体验；
- 如果 SPA 无法正确处理搜索引擎爬虫的请求，会导致 SEO 的质量下降，从而影响业务的发展。
所以，怎么让 SPA 可以高效地维护 SEO，这是我们需要解决的问题。
SPA 的解决方案
- 服务器端渲染（SSR）
SSR 是解决 SPA 对 SEO 问题的一个好办法。它的原理是将应用程序的初始 UI 渲染放在服务器上进行，然后将渲染好的页面 HTML 内容传输给客户端。这样，搜索引擎可以快速地爬取页面呈现出来的 HTML，对于 SPA 内容来说，搜索引擎爬虫和其他代码分析工具将能够正确地读取 SPA 的内容。SSR 采用了预编译和缓存的方式，使得 SPA 在浏览器端首次渲染更加迅速和优化。Express、Next.js 和 Nuxt.js 等框架都提供了成熟的 SSR 的方案。
下面是一个 Nuxt.js 的示例代码：
----------
-----
------ ----- -------
------
-----------
--------
------ ------- -
----------- -
------ - ------ ------- ------- -
-
-
---------- 预渲染
预渲染与 SSR 的原理类似，但是它不需要服务器端参与静态内容的渲染；而是在构建应用程序时，利用 Node.js 服务将 SPA 的每一个页面预渲染成静态 HTML，然后提供给浏览器当做服务器端响应。这样 SPA 在浏览器端的渲染流程中，就不再需要等待或执行过多的 JavaScript 代码了。预渲染适用于数据变动不是太频繁，且页面数量不太多的 SPA 应用。
下面是一个基于 prerender-spa-plugin 的示例代码：
-- -----------------
----- ------------------ - -------------------------------
-------- -
--- --------------------
---------- -------------------- --------
------- ----- --------- ------------
--
-- 动态数据填充
由于 SSR 和预渲染是在服务器端进行渲染，而 SPA 往往包含许多动态加载的数据，按照默认的方式，在浏览器端就会等待那些初始化过程。为了提高用户体验，我们可以在渲染的时候就动态的将数据填充进去。Vue.js 的服务端渲染(SSR) 框架 Nuxt.js 提供了 asyncData 方法可以解决这种问题，但在 React 中我们可以使用 react-async 或 react-loadable 等方式来实现异步加载页面组件，然后再将这些数据存储到 Redux 或者 Context 中，最后再渲染页面以供搜索引擎抓取。
下面是一个基于 react-loadable 的示例代码：
------ -------- ---- ----------------
----- ---- - ----------
------- -- -- -----------------
-------- -- -- ----------------------
------- -------- ------ -- -
--------------- ---------- --
--
--除此之外，还可以启用无 JavaScript 开启页面、使用 HTML5 的 History API 和 Sitemap 等方式来优化 SPA 的 SEO。
实战经验
以下是一些操作实践和最佳做法，帮助你优化 SPA 的 SEO。
- 使用序言标签（<meta name=”description” content=””>）优化搜索引擎显示的文本描述。这部分应该包括一段简短的概括、关键字和网站 URL。
- 优化页面的标题，使其简明易懂。每个页面都应该有一个独特的标题，包含有关页面内容的关键词，这些关键词有助于在搜索引擎中排名。
- 使用动态的 URL 和页面标题，这可以让搜索引擎更好的辨认页面的内容。如果搜索引擎在爬取过程中发现页面 URL 与标题不一致，这可能会对 SEO 产生负面影响。
- 当SPA初始渲染后，将页面的 HTML 标记和内容填充好，并让搜索引擎爬虫将它们加入索引中。
- 如果使用了 SSR 或预渲染，就必须要安装 Sitemap，主要目标就是识别网站的 URL 并通知搜索引擎爬虫需要抓取的 url。* 下载免费 Sitemap 生成器: https://www.xml-sitemaps.com/
结论
能否做好 SPA 的 SEO 与开发人员的设计和技术水平密切相关。这个问题不是简单的是与否，而是需要我们综合考虑各种因素，采取最佳实践措施才能完成。我们在设计和开发 SPA 的过程中，需要尽可能的与搜索引擎爬虫”合作”，从而达到更好的 SEO 效果，让更多的用户能够发现我们的应用程序。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6731b86c0bc820c5823a115c