JavaScript SEO：确保您的网站可索引

什么是 JavaScript SEO？

JavaScript SEO 是优化网站上 JavaScript 的做法，以最大限度地提高网站在 Google 等搜索引擎中排名的能力。 由于我们正在优化页面元素，并且它直接影响技术 SEO 指标，因此 JavaScript SEO 通常属于技术 SEO 类别。

JavaScript 对 SEO 不利吗？

有很多 JavaScript 网站。 虽然 JavaScript 提供了很多好处，但它也会对 SEO 产生负面影响。 JavaScript 本身对于 SEO 来说并不是坏事，但如果实施不当，它可能会使 Googlebot 更难抓取和索引页面。 另外，过度使用 JavaScript 会增加加载时间，直接损害排名能力和用户浏览体验。

并非所有网站都以相同的方式使用 JavaScript。 虽然有些网站在代码中到处使用 JavaScript，但其他网站则使用 JavaScript 来支持核心框架和功能。

例如，Angular 和 React 等 JavaScript 框架可以帮助开发人员更高效地构建 Web 应用程序。 这些框架还需要比一般网站更广泛和更复杂的 JavaScript 代码。

使用此应用程序 shell 模型构建的网站（其中 UI 和数据模块分开）需要执行 JavaScript 代码来显示对访问者和搜索爬虫都至关重要的内容。 因此，某些网站比其他网站更容易出现与 JavaScript 相关的 SEO 问题。 如果内容可以为访问者正确加载，但不能为搜索爬虫正确加载，则依赖 JavaScript 加载页面内容的网站可能会遇到 SEO 问题。

Google 如何处理 JavaScript？

在深入讨论优化之前，让我们仔细看看 Google 实际上是如何处理 JavaScript 的。

Google 分三个阶段处理 JavaScript：抓取、渲染和索引。 Googlebot 首先抓取其队列中的网址。 它使用移动用户代理向服务器发送请求，并从站点提取 HTML。 谷歌只有有限数量的计算资源，并且它只能分配这么多资源来抓取任何一个网站（其抓取预算）。 Google 首先处理 HTML 资源以节省抓取资源，并通过将页面的 JavaScript 资源放入渲染队列来推迟其稍后抓取。

渲染允许 Googlebot 执行 JavaScript 代码并查看用户在浏览网站时会看到什么，从而使 Googlebot 能够正确索引它。 在处理大量使用 JavaScript 的网站时，尤其是使用应用程序 shell 模型以 JavaScript 形式显示关键信息的网站时，Googlebot 必须首先执行并呈现 JavaScript 代码，以了解有关页面内容的更多信息。

当 JavaScript 代码被踢到 Web 渲染服务队列中等待处理时，此渲染过程会产生延迟。 虽然这个过程过去需要很长的时间，但谷歌最近表示，渲染延迟实际上平均只有 5 秒，90% 的网站在几分钟内处理完毕。 不幸的是，这并不是 SEO 所拥有的经验。 一项研究表明，Google 抓取 JavaScript 的时间是 HTML 的九倍。 此外，错误、超时或 robots.txt 设置仍然会阻止 Googlebot 渲染页面并为其编制索引。

由于需要渲染 JavaScript，Googlebot 分两次对页面进行索引。 使用无头 Chromium 渲染 JavaScript 后，Googlebot 再次抓取渲染的 HTML，并将任何新发现的 URL 添加到列表中以供进一步抓取。 然后，它使用呈现的 HTML 为站点建立索引。

渲染 JavaScript

不仅仅是 Googlebot 需要渲染您的页面。 渲染获取您网站上的代码并以可视方式生成它，以便访问者可以在浏览器上查看它。 许多与 JavaScript 相关的索引问题是由于网站用于显示其内容的呈现类型而发生的。 在呈现 JavaScript 页面时，有多种不同的选项，其中一些选项比其他选项更适合搜索机器人。

服务器端渲染

顾名思义，当渲染过程直接发生在服务器上时，就会发生服务器端渲染 (SSR)。 渲染后，最终的 HTML 网页将被传送到浏览器，访问者可以查看它，机器人可以抓取它。

服务器端渲染被认为是 SEO 的一个不错的选择，因为它可以减少内容加载时间并防止布局变化。 服务器端方法还有助于确保所有元素实际呈现，并且客户端技术不会忽略它们。

但是，服务器端呈现也会增加页面接受用户输入所需的时间。 这就是为什么一些严重依赖 JavaScript 的网站更喜欢在对 SEO 真正重要的网页上使用 SSR，而不是在对可靠功能至关重要的页面上使用 SSR。

客户端渲染

客户端渲染 (CSR) 将渲染工作负载从服务器转移到客户端（浏览器）。 用户不是直接从服务器接收完全渲染的 HTML，而是接收一些准系统 HTML 以及 JavaScript 文件以供自己的浏览器渲染。

由于浏览器本身需要处理渲染负载，因此客户端渲染通常比服务器端渲染慢。 这可能会导致明显的 SEO 问题，因为页面速度是 Google 用于对页面进行排名的众多技术 SEO 信号之一。 此外，较慢的加载速度也会增加跳出率，虽然跳出率本身可能不是一个信号，但较高的跳出率可能表明浏览体验不佳且网站访问者感到沮丧。 如果您希望提高网站速度，放弃客户端渲染可能不是一个坏主意。

动态渲染

动态渲染在不同时间使用客户端和服务器端渲染。 来自浏览器的请求将收到页面的客户端版本，而来自可能存在 JavaScript 问题的机器人的请求将获得服务器端版本。 这可以保护最重要页面上的功能，同时使搜索爬虫更容易访问需要索引的页面。

具有大量需要频繁更新和重新索引的动态内容的网站可能会受益于这种更灵活的呈现样式。 然而，虽然动态渲染听起来像是解决渲染问题的可靠解决方案，但它实际上并不是 Google 所建议的。 事实上，Google 的 JavaScript 搜索中心页面特别警告说，由于额外的复杂性和资源需求，动态渲染是一种“解决方法”而不是“长期解决方案”。 也就是说，在需要时它仍然可以作为短期解决方案。

静态渲染

静态渲染也称为预渲染，涉及在构建或部署过程中而不是在运行时生成页面的 HTML 内容。 然后，根据请求将预渲染的 HTML 文件直接提供给浏览器或客户端。

在静态呈现中，服务器生成包含页面所需的所有内容和数据（包括动态元素）的 HTML 文件。 这意味着浏览器或客户端会收到完全呈现的 HTML 页面，而不需要额外的处理或 JavaScript 执行。

搜索引擎机器人可以轻松抓取预渲染的 HTML 文件，从而更好地对网站内容建立索引。 此外，静态渲染可以显着缩短页面加载时间，因为内容已经存在于 HTML 文件中，并且不需要在客户端进行额外渲染。

哪种类型的渲染最适合 SEO？

Google 建议使用服务器端渲染、静态渲染或通过补水结合客户端和服务器端渲染（类似于动态渲染）。 谷歌并不禁止客户端渲染，但由于它可能会出现更多问题，因此并不是首选。 随着应用程序或页面上 JavaScript 数量的增加，在客户端渲染时，可能会对页面与下一次绘制（INP，将于 2024 年 3 月成为 Core Web Vitals 的一部分）的交互产生负面影响。 当谈到客户端 JavaScript 时，Google 建议采取“在需要时仅提供所需服务”的方法。

减少 JavaScript SEO 问题的技巧

让您的网站的 JavaScript 适合 SEO 并不一定非常复杂，但是您应该遵循一些最佳实践才能获得良好的结果。 以下是一些 SEO JavaScript 技巧，可帮助您和您的开发团队制定不会损害排名的 JavaScript 策略。

1. 确保 Google 正在为 JavaScript 内容建立索引

不要相信 Google 会自动呈现并索引您的 JavaScript 内容。 花一些时间自行检查，方法是对页面上用引号括起来的特定文本字符串进行站点搜索（站点：yourdomain.com“特定文本”）。 如果该页面出现，您可以放心它已被索引。

您还可以使用多种不同的 Google 工具（URL 检查工具、移动设备友好测试）和第三方工具（Screaming Frog、JetOctopus）来更深入地挖掘并测试您的 JavaScript 实现。 查看本指南底部的“测试和故障排除”部分，了解有关使用这些工具检查 JavaScript 相关索引错误的更多信息。

最后，不要忘记 robots.txt 可以阻止搜索爬虫访问特定页面。 如果 Google 不为某个页面建立索引，请确保 robots.txt 文件没有禁止该页面。 Google 不建议使用 robots.txt 来阻止 JavaScript 文件，因为这可能会影响 Googlebot 正确呈现页面内容和索引页面的能力。

2.遵循页面搜索引擎优化最佳实践

仅仅因为您使用的是 JavaScript 而不是 HTML，并不意味着页面上的 SEO 过程将会改变。 所有常见的技术和页面优化（标签、标题、属性等）仍然是必不可少的。 Google 实际上已经建议开发人员避免使用 JavaScript 来创建或管理规范标签。

3.使用有效的内部链接

如果没有内部链接，搜索机器人将无法找到网站架构中的所有页面，并且无法对它们进行爬网或排名。 出于 JavaScript SEO 的目的，最好在 HTML 中而不是 JavaScript 中包含链接，这样就可以立即抓取它们，而不是在渲染后抓取。

如果您确实使用 JavaScript 将链接动态输入到代码中，请确保仍然使用正确的 HTML 标记来设置它们。 我还建议使用 Google 的 URL 检查工具来检查锚文本是否存在于最终呈现的 HTML 中。 此外，Google 建议避免与 JavaScript 事件处理程序或 HTML 元素（如 <div> 或 <span>）链接，因为这些可能会给 Googlebot 带来问题，并可能阻止其抓取链接。

4. 远离 URL 中的哈希值

SPA（单页应用程序）可以使用分段 URL 来加载不同的视图。 但是，Google 希望网络管理员避免在分段 URL 中使用哈希值，这表明您不应指望他们与 Googlebot 一起工作。 相反，他们建议使用 History API 根据 URL 加载不同的内容。

5. 使用延迟加载图像

延迟加载是延迟加载不太重要或不可见的页面资源的做法。 它对于优化性能和用户体验很常见。 但如果您不注意延迟的内容以及延迟的方式，最终可能会遇到索引问题。

Googlebot 在查看内容时不会滚动； 它只是调整其视口的大小。 这意味着脚本化的滚动事件可能不会触发，并且内容可能不会被渲染。 Google 建议了几种不同的方法来确保延迟加载时加载页面上的所有内容。

最好为您的图像保留延迟加载。 延迟加载内容是有风险的，因为它可能会超时并最终无法被索引。

6.修复重复内容

谷歌表示，重复内容不能成为手动操作的理由，除非其本质上是恶意或欺骗性的。 但它仍然会消耗您的抓取预算，延迟索引，并导致您的页面相互竞争排名。 JavaScript 倾向于为相同内容创建多个 URL，因此请决定要对哪个版本建立索引，并对其余版本应用规范和 noindex 标签。

7. 定期进行现场审核

随着页面 JavaScript 代码的数量和复杂性不断增加，检查其是否正确呈现和索引非常重要。 定期安排的网站审核可以帮助您发现在第一轮实施测试期间可能遗漏的任何内容，因此不要忘记将 JavaScript SEO 纳入您的常规 SEO 检查表中。

测试和故障排除

您可以使用多种不同的工具来测试 Google 是否正在努力为您网站上的 JavaScript 建立索引，或者您最近的 Google JavaScript SEO 修复是否有效。

您的第一站应该是 Google 的网络工具，特别是 URL 检查工具和移动设备友好测试工具。 这些工具并不完美，因为它们根据可用资源实时生成页面的版本，而不是渲染器使用的缓存版本。 但它们仍然可以为您提供 Google 如何处理您的 JavaScript 的相当准确的快照。

移动设备友好测试工具允许您在页面上的代码和 Google 看到的屏幕截图之间进行切换，以便您可以比较两者是否存在可能无法正确执行的 JavaScript。 测试完成后，您可以通过单击“查看测试页面”来访问此功能。 单击“更多信息”选项卡还会显示来自 JavaScript 控制台的任何潜在错误消息，以及有关哪些页面资源加载失败及其原因的更多信息。

同样，Google 的 URL 检查工具为您提供了 Googlebot 如何查看您的页面的屏幕截图，以便您可以直观地检查其元素。 它还显示页面的索引状态，以便您可以快速发现其中一个包含大量脚本的页面是否尚未建立索引并且可能需要注意。

除了这些 Web 工具之外，您还可以使用多种第三方工具进行测试和故障排除。 Screaming Frog 和 JetOctopus 等爬虫工具都可以呈现页面的 JavaScript 屏幕截图。 但是，请记住，这些渲染不一定与 Googlebot 生成的渲染相同，因为其他抓取工具正在生成它们。

获得技术 SEO 专家的帮助

JavaScript SEO 有很多变化的部分。 有了专门的合作伙伴，您就不必单独解决这些技术 SEO 问题。 Victorious 可以帮助您和您的开发团队确保您的网站得到适当优化，并且您的 SEO 努力有助于实现您的业务目标。 联系我们免费咨询以了解更多信息。