React 电子商务网站的 SEO 最佳实践

React 已经成为领先的 JavaScript 框架之一，在各种不同的网站上使用，尤其是在电子商务网站上。

由于它们的构建方式，React 网站在搜索引擎优化 (SEO) 方面有一些特定的考虑因素，并为 React 单页应用程序 (SPA) 提供了一组独特的 SEO 最佳实践。

在本指南中，我们将了解如何确保为 SEO 正确配置 React 电子商务网站，以及在搜索优化的电子商务网站上使用 React 的一些优缺点。

什么是反应？

React 是一个 JavaScript 库，可用于基于通用 UI 组件构建用户界面。 它由 Facebook 的母公司 Meta 以及包括公司和个人在内的开发人员的开源社区维护。

因为它是开源的，所以 React 也可以免费使用。 它可以形成单页应用程序（上面提到的 SPA）或移动应用程序的基础框架。

为什么 React 对电子商务有好处？

React 对 UI 的关注意味着它是一个有用的工具，可以创建流畅、无缝的电子商务网站，将用户体验 (UX) 置于设计的核心。

内容在客户端提供，页面不需要刷新，使客户可以更快、更轻松地浏览网站，减少影响页面加载速度的服务器延迟。

React 的多功能性意味着它可以在桌面电子商务网站和移动应用程序中使用，使其成为想要创建渐进式 Web 应用程序的开发人员最简单的选择之一。

搜索引擎可以抓取 React 网站吗？

与任何搜索优化网站一样，了解机器人（尤其是 Googlebot）如何查看 React 网站上的内容非常重要。

通常，Google 分两个阶段抓取网站，即在内容过程中对其进行识别。

爬取源代码

首先，Googlebot 会抓取网站并检索源代码，包括 HTML、页眉等。

渲染 DOM

其次，Googlebot 呈现域对象模型 (DOM)，包括页面上使用的任何 JavaScript——您可以使用 Chrome 的内置开发人员工具和其他浏览器中的等效功能来识别这一点。

React 是一个客户端 JavaScript 框架，这意味着 Googlebot 可能难以识别页面。 这是因为与传统网站不同，React 在从一个页面导航到另一个页面时不会向服务器发送请求——这使得 Google 很难看到不同的页面。

您可以将 React 配置为使用服务器端呈现，但 Googlebot 在导航您的站点时仍不会呈现 JavaScript 文件和其他基于服务器的资源。 因此，根据最佳实践为 SEO 设置 React 电子商务网站非常重要。

React 的常见 SEO 问题

React 电子商务网站有几个常见的 SEO 问题：

未发现内容/索引缓慢

Googlebot 会为其抓取的每个网站分配一个“渲染预算”，并且通常会在该预算用完后离开。 这可以确保较小的网站获得爬虫的注意力，并防止无限的爬取循环，例如在导航期间生成动态 URL 的网站上。

由于 React 网站的功能是 SPA，因此必须先渲染整个网站，然后才能抓取其所有内容。 这可能会延迟内容的发现并消耗爬虫端的额外资源，这可能会导致爬取和索引的页面减少。

服务器端渲染和预渲染可以减轻机器人的一些资源负担，有助于提高新页面出现在索引中的速度。

搜索机器人缓慢地注意到更新的内容

这是上述问题的一个分支——当您更改页面时，这些更改可能需要一些时间才能过滤到搜索结果中。

同样，这是因为使用 React 时页面是如何呈现的，这可能导致更新的页面被 Google 有限的爬虫资源更长时间地忽视。

“深度”页面很少（或从不）爬网

Googlebot 不太可能访问深埋在您网站层次结构中的页面，特别是如果它已经在您的层次结构中花费了大量的渲染预算。

再一次，预渲染可以成为一种有价值的工具，可以帮助搜索爬虫在耗尽可分配的爬虫预算之前深入渗透到您网站的文件夹结构中。

[电子书] 可抓取性

确保您的网站满足搜索引擎对可抓取性的要求，以提高 SEO 性能。

阅读电子书

如何优化 React 电子商务网站

借助 React 电子商务 SEO 的一些最佳实践，您可以为您的网站以及您的各个页面提供更好的进入搜索索引的前景。

唯一页面 URL

与上述动态 URL 问题相对应的最佳实践是在您的网站上为每个页面提供其自己唯一的静态 URL。 然后，内容与单个永久位置相关联——页面的规范 URL——搜索引擎可以在其结果页面中自信地抓取、索引和排名。

React Router 是在 React 网站上实现这一目标的方法。 React Router 可以为站点上的每个页面提供其自己的永久 URL，以及将 UI 与特定 URL 对齐。

同构反应

同构 React 是一种启用服务器端渲染的方法，以减轻爬虫渲染预算的压力。 它的工作原理是检测客户端何时禁用 JavaScript，并创建网站 HTML 的服务器端呈现形式。 如果客户端渲染可用，则网站将以通常的方式加载为 React SPA。

通过这样做，Isomorphic React 克服了搜索爬虫的可见性问题，提高了页面的可发现性，而不会损害打开客户端 JavaScript 的人类访问者的流畅无缝 React 体验。

预渲染

预渲染是实现与 Isomorphic React 类似结果的另一种方式。 它通过生成渲染 HTML 的缓存版本来工作，然后爬虫可以访问该版本而不是未渲染的源代码。

人类访问者收到客户端 React 网站，再次为他们提供流畅、闪电般快速的 SPA 的所有好处。 有许多预渲染服务可供选择，包括 Google Puppeteer、Prerender.io 和 SEO4Ajax。

优化元数据

最后，确保您的内容具有优化的元数据——即使经过这么多年，它仍然是页面 SEO 中的一个重要元素。

除了一个独特的、优化的 URL，每个页面都应该有一个唯一的标题标签和任何其他相关的元标签，帮助页面脱颖而出，并指示搜索机器人将页面与某个主题或主要关键字相关联。

React Helmet 是实现这一目标的好方法，它允许直接访问 React 电子商务网站上的编辑元数据 SEO。 通过这种方式，您可以结合老式的 SEO 最佳实践和经典的元数据关键字，以及现代、移动友好的 React 电子商务网站的所有好处。