React 是目前最受欢迎的前端框架之一，它的 SPA（单页应用）架构可以提供更好的用户体验，但是这会导致搜索引擎难以解析页面内容，从而降低了 SEO（搜索引擎优化）的效果。本文将介绍 React-SPA 应用的 SEO 优化方案，帮助开发者更好地推广其网站并获得更高的搜索引擎排名。
为什么 SPA 对 SEO 不友好？
对于传统的 Web 应用，搜索引擎爬虫会遵循链接并逐个页面进行扫描，然而 SPA 是通过 JavaScript 加载更改页面内容的，而链接页面是一个空的 HTML 文档，因此搜索引擎无法读取到页面内容。这也就意味着，单页应用在 SEO 方面存在以下问题：
- 首屏内容不容易索引：由于首屏是空的 HTML 文档，搜索引擎无法了解应用的整体结构和内容。
- 客户端路由难以索引：由于 React 使用客户端路由，也就是每个页面都没有真实的 URL 地址，搜索引擎也就不容易记录这些页面 URLs。
- 渲染时间长：由于单页应用通常需要加载大量的 JavaScript 和资源，而组合成页面通常需要在浏览器中进行渲染工作，所以 SPA 往往加载时间长，这也会对 SEO 的结果产生影响。
通过解决这些问题，我们可以为 SPA 应用带来更好的 SEO 效果。
SPA 应用 SEO 优化方案
1. 添加预渲染来提升首屏渲染速度
预渲染可以解决首屏内容不容易索引的问题。预渲染支持在服务器端将应用的 HTML 内容呈现为静态 HTML 文件，并将其发送到搜索引擎爬虫和浏览器，从而加快了首屏渲染速度。以下是一个基于 prerender-spa-plugin 插件的配置文件：
-- -------------------- ---- -------
----- ---- - ---------------
----- -------- - ----------------------------------------
-------------- - -
----------------- -
-------- -
--- ----------
-- ----
---------- -------------------- --------
-- -------------
---------------- -----
-- -------------
-------------- ---------
-- ---------------
------------------ -
------------
----------
--------------
------------
---------
--------------
----------
-
--
-
-
-2. 添加预渲染后的路由
预渲染后的路由，可以通过服务器端呈现静态 HTML 文件，以加速搜索引擎爬虫的解析。以下是一个预渲染后的路由示例：
-- -------------------- ---- -------
----- ---- - ---------------
----- ------- - ------------------
----- --- - ---------
----- ------ - -------------------- --- ------------
-- -------
----- --------------- - -
----
---------
-----------
--------
-
-- ------
------------------------------------------- ---------
-- ----------- ---- --
-- -------- -
------------------------ ----- ---- -- -
--------------------------------- ------- --------------
--
-
-- ----
----- ---- - ---------------- -- ----
---------------- -------- -- -
------------------- ----- -- ---- ---------
--3. 添加 Sitemap 提供结构化信息
Sitemap 是一种提供结构化信息以便于搜索引擎索引和解析网站的文件格式，是一种 XML 文件。你可以通过 React 应用中的 react-sitemap-generator 库来生成 Sitemap，以下是一个生成 Sitemap 的示例代码：
-- -------------------- ---- ------- ----- ---------------- - ------------------------------------------ ----- -------------- - - --------- ---------------------- ----------- --------- --------- ---- -------- --- ------ - --- --------------------------------------- -------- --------------- ----------------------------- -------- -- ------------------------ --- ---- -----------
4. 使用 React Helmet 来完善页面 SEO 信息
React Helmet 是一个用于 React 应用的方便地处理网页头部信息的包，可以帮助我们更加简便地完善 SEO 相关信息，包括页面标题、meta 描述等内容。以下是添加页面 title 和 meta 描述示例：
-- -------------------- ---- -------
------ ----- ---- -------
------ -------- ---- --------------
-------- ----- -
------ -
--
--------
--------- --- -------------------
----- ------------------ ---------- ----- --- ----------- --- --- ------------- --
---------
-----
---
------
---
-
-
------ ------- ---总结
本文介绍了 React-SPA 应用 SEO 优化的四种不同方案，分别是添加预渲染来提升首屏渲染速度，添加预渲染后的路由以加速搜索引擎爬虫的解析，添加 Sitemap 提供结构化信息，使用 React Helmet 来完善页面 SEO 信息。总体来说，这些方案都非常简单易用，并可以让我们提高 SEO 的效果，帮助我们更好地推广我们的 SPA 应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c0c8e883d39b488152186b