React SEO：构建 SEO 友好型 Web 应用程序的技巧

介绍

SEO 已成为 Internet 上任何 Web 应用程序不可或缺的一部分。它不仅控制着市场上产品或服务的整体性能，而且直接或间接地阻碍了任何企业主的利润和效率。因此，考虑到同样的因素，当我们谈论搜索引擎优化或 SEO 时，React 网站面临着巨大的挑战。一个主要原因是大多数 React JS 开发人员和开发公司更多地关注客户端渲染，而谷歌则专注于服务器端渲染。这给 React 中的 SEO 带来了巨大的挑战。继续阅读博文，让我们首先了解 Google Bot 如何抓取网页。

Google Bot 如何抓取网页？

在现有的所有在线搜索和搜索引擎中，Google 获得了大约 90% 的 SEO，使其成为 SEO 友好型网站最受欢迎的搜索引擎。在深入研究 SEO React 的工作原理之前，让我们先了解一下 Google 的抓取和索引过程。

下图摘自谷歌文档。

Googlebot 索引网站的图表。

注意：这是框图。最初的 Googlebot 非常复杂。

要记住的要点：

• 当爬虫保持空闲时，它会在队列中选择即将到来的 URL，请求并收集 HTML。

• 随后，Googlebot 决定需要在解析 HTML 后收集并执行 JavaScript。如果是这样，该 URL 将被添加到渲染队列中。

• 在后一点，呈现器收集并执行 JavaScript 来呈现页面，从而将呈现的 HTML 发送回其位置。

• 处理单元取出网页上提到的所有URL标签，并将它们添加回抓取队列。

• 内容被添加到 Google 的索引中。

您是否注意到执行 JavaScript 的渲染阶段和解析 HTML 的处理阶段之间的明显区别？好吧，这种差异化是基于成本的。执行 JavaScript 的成本很高，因为它需要查看 130 万亿个网页。

一般 SEO 挑战

基于 React 的网站的 SEO 非常重要。以下是软件工程师和开发人员可以解决和修复的一些 SEO 挑战。

1.清空首关内容

众所周知，React 应用程序依赖于 JavaScript。结果，他们与搜索引擎作斗争。发生这种情况是由于 React 采用的应用程序外壳模型。最初，HTML 不包含有意义的内容，因此机器人或用户需要执行 JavaScript 才能查看页面内容。这种方法表示 Googlebot 在初始遍历期间跟踪空白页面。因此，仅当页面呈现时，Google 才会查看内容。最终，这会导致数千页内索引的延迟。

2. 页面元数据

元标记非常出色，因为它们使社交媒体网站和 Google 能够显示特定页面的有效缩略图、标题和描述。但是，这些网站依赖于所收集网页的标签来获取这些信息。本网站不为着陆页执行 JavaScript。React 渲染每个内容，甚至 Meta 标签。由于应用程序/网站的应用程序外壳保持不变，因此各个页面很难适应元数据。

3. 网站地图

站点地图是一个文件，其中提供了有关您站点的视频、页面和其他分叉的所有详细信息，以及它们之间的关系。作为智能搜索引擎，Google 读取此文件以轻松爬入您的网站。React 没有任何内置方法来创建站点地图。如果你使用 React Router 来管理路由，你需要找到创建站点地图的工具。虽然，这可能需要您付出一些努力。

4. 用户体验和加载时间

无论是什么任务，获取、执行和解析 JavaScript 都需要花费大量时间。此外，JavaScript 甚至可能需要进行网络调用以收集内容，而用户必须等待才能查看请求的详细信息。关于排名标准，谷歌开发了一套关于用户体验的网络生命力。加载时间延长会影响用户体验得分，从而通知谷歌将网站排名降低。

5.其他搜索引擎优化注意事项

以下是与建立优秀的 SEO 实践相关的一些注意事项。

• 使用 CDN 服务每个静态资产，如 JS、CSS、字体等，并使用响应式图像来降低加载时间。

• 改进 robots.txt 文件可以帮助搜索机器人分析如何在您的网站上爬行。

如果您想提高您的React 应用程序性能，那么 React.memo 是实现相同目标的绝佳解决方案！

应对 SEO 挑战

让我们了解为 SEO 优化 React 如何以及为什么具有挑战性。

ReactJs 是 2022 年 Web 开发的一个有利可图的选择，但让我们看看 React 开发人员在开发 SEO 友好网站时面临哪些挑战。

1.单页应用（SPA）的使用

为了帮助减少加载时间问题，开发人员开发了基于 JS 的单页应用程序 (SPA)。这是 React 应用程序 SEO 和 React 网站 SEO 的主要问题。他们不会重新加载全部内容。相反，他们刷新内容。因此，这项技术自推出以来一直在提升网站性能方面发挥着至关重要的作用。

2. 缺少动态 SEO 标签

SPA 在动态过程中加载信息。因此，当爬虫点击某个链接时，它会挑战完成页面加载周期。元数据无法刷新。这是爬虫无法显示 SPA 的主要原因，最终以空页面格式被索引。通常，在排名方面，这些都不好。然而，这需要一点关注，因为开发人员可以通过为 Google 机器人生成单独的页面轻松解决这些问题。但是，这里又出现了另一个挑战。创建单独的页面除了难以在 Google 的首页搜索结果中对网站进行排名外，还会增加业务开支。

3. SPA 的 Seo 问题

众所周知，单页应用优化了网站性能；关于 SEO 有几个问题。

想要构建 SEO 友好的 Web 应用程序？
今天就联系我们，聘请 React 开发人员为您的企业构建最佳的 SEO 网站。

如何使 React 应用程序对 SEO 友好

正如我们所读到的，有几个因素导致 React 对 SEO 不友好。但是，现在问题出现了“如何使 React 网站 SEO 友好？” 出色地！这是有关如何实施 React Js SEO 方法并使您的 React Web 应用程序 SEO 友好的答案。

1.同构反应

同构 JavaScript 技术具有自动检测服务器端 JavaScript 是否启用的能力。在禁用 JavaScript 的情况下，同构 JavaScript 在服务器端工作，从而向客户端服务器提供最终内容。页面加载后，所有必需的内容和属性都变得可用。但是，当启用 JavaScript 时，它的表现就像一个具有多个组件的动态应用程序。这使得加载速度比传统网站更快，让用户在 SPA 中获得流畅的体验。

2.预渲染

作为制作单页和多页 Web SEO 友好应用程序的主要方法之一，预呈现通常在爬虫或搜索机器人无法有效呈现网页时使用。Pretenders 是一种独特的程序，可以限制对网站的请求。如果请求来自爬虫，预呈现器会向您的网站发送缓存的静态 HTML 版本。如果您的集合发送请求，页面将正常加载。

优点：

• 这些程序在执行多种现代 JavaScript 和转换为静态 HTML 方面非常有效

• 易于整合

• 支持最新的网络新奇事物

缺点：

• 服务不是免费的

• 不适合频繁更改数据的页面

• 如果网站太大，加载时间会很长

3. 服务器端呈现：获取包含全部内容的 HTML 文件：

如果你想构建一个 React Web 应用程序，你需要对客户端渲染和服务器端渲染有准确的了解。客户端呈现是一个 Googlebot 和一个浏览器，它接收内容较少或没有内容的空 HTML 文件。

随后，JavaScript 代码从服务器下载内容并允许用户在他们的屏幕上查看。然而，客户端呈现面临着与 SEO 有关的几个挑战。这是因为 Google 抓取工具无法查看任何内容或查看较少未正确编入索引的内容。相反，通过服务器端呈现，浏览器和 Google Bots 会接收 HTML 文件以及全部内容。这有助于谷歌机器人毫无困难地执行索引和排名更高。

反应 SEO 最佳实践

这些最佳实践将为您提供有关如何使您的 React 网站对 SEO 友好的答案：

1. React路由器使用

要知道，React 遵循的是 SPA（Single-Page Application）。但是，如果您在页面中适当地描述某些 SEO 元素和规则，则可以更好地利用 SPA 模型。本指南需要将页面打开为不带井号 (#) 的单独 URL。

（根据谷歌，它无法读取与哈希链接的 URL，因此它可能不会索引任何由 React 生成的 URL）。

因此，我们以在单独页面中打开的方式创建 URL。我们必须在 URL 中使用React Router 钩子。以下是相同的示例：

在构建内容时，我们建议您不要运行带有 setTimeout 的进程。在这些情况下，Googlebot 可能会在无法读取内容时离开页面和网站。

2. 网址大小写

当 URL 包含小写或大写时，Google 会将某些页面视为单独的页面。
例如：
/vendi
/Vendi
这两个 URL 将被 Google 视为两个单独的页面。为避免此类页面重复，请将每个 URL 都写成小写。

3.链接中的“A Href”用法

确保为链接提供“a href”。遗憾的是，Googlebot 无法读取通过 onclick 提供的链接。因此，使用 Href 定义链接变得至关重要，这样 Googlebot 就可以更轻松地发现其他相关页面并访问它们。

4.反应头盔

SEO 的一个重要组成部分是元数据。因此，即使使用 React，它也应该出现在源代码中。将描述和标题保持在相同的结构中可能对 CTR 和其他 SEO 规模没有足够的帮助。

这是 React Helmet 发挥作用的时候。下面是一个示例代码结构以及元数据：

如果描述元素无法发挥作用，请尝试通过接收第一个页面内容样本的 160 个字符来填写描述。

确保将结构化数据项与元数据一起保存在源代码中。（组织架构、产品等）

例如，下面是 yolcu360.com 的 Raw & Render 版本。结构化数据在两个版本中都以受保护的形式显示。理想情况下，我们看不到这种差异。

生的：

渲染：

当您使用 Rich Results 测试工具测试页面时，Googlebot 可以轻松查看您页面上的结构化数据。

您可以通过同时运行头盔和服务器端渲染来显示 Google 中的元数据或内容和元素。任何缺陷或潜在的元数据错误都会对搜索结果中出现的每个指标产生负面影响。

5. 404错误代码

所有有缺陷的页面都运行 404 错误代码。因此，这是一个温和的提醒，要设置 server.js 和 route.js 等文件。

6. 图片

您应该使用“img src”指定您的页面图像。根据一项研究，尽管图像在其工具中显示时没有任何并发症，但它仍然无法为它们编制索引。

正确使用：在 React 中使用任何类似 CSS 背景的东西都会导致索引图像困难。

错误使用：了解前端框架比较：

7.反应懒惰

实施延迟加载将帮助用户更快地浏览网站，并对我们在 Google 中的页面速度得分产生积极影响。

你可以在 npm 上找到这个包。

您可以使用React-Snap来优化网站速度。下面是一个示例：与 Vue 或 Angular 等其他几个 JavaScript 框架相比，React 可以获得更小的文件。它不会发布不需要的和不适用的代码。因此，它有助于极大地提高页面速度。更准确地说，您可以将 2MB 的 JS 文件拆分为 60-70kb 的文件，并在单独的进程中运行。

结论

言鼎科技