此页面由 Cloud Translation API 翻译。

让 JavaScript 与 Google 搜索协同工作

了解 2019 年 Google I/O 大会的最新动态和洞见。

Lizzi Harvey

Martin Splitt

Google 搜索发生了一些伟大的事情，我们很高兴在 2019 年 Google I/O 大会上分享这些好消息！

在这篇博文中，我们将重点介绍让 JavaScript Web 应用能在 Google 搜索中被发现的最佳做法，其中包括：

持续更新的新版 Googlebot
Googlebot 用于抓取、呈现和编入索引的流水线
特征检测和错误处理
渲染策略
在 Google 搜索中测试您网站的工具
常见挑战和可能的解决方案
JavaScript Web 应用中的 SEO 最佳实践

体验与时俱进的 Googlebot

今年，我们发布了众所期待的常规的新版 Googlebot。

拿着 Chrome 徽标的 Googlebot — Googlebot 现在使用的是新型 Chromium 渲染引擎。

Googlebot 现在使用新型 Chromium 引擎来呈现针对 Google 搜索的网站。最重要的是，我们会测试较新版本的 Chromium，以便让 Googlebot 保持最新状态，通常在每个稳定版 Chrome 发布后的几周内。这个公告对 Web 开发者和搜索引擎优化人员来说是个重大消息，因为它标志着 Googlebot 即将迎来 1000 多种新功能，例如 ES6+、IntersectionObserver 和 Web Components v1。

了解 Googlebot 的工作原理

Googlebot 是包含多个组件的流水线。让我们来看看 Googlebot 如何将网页编入索引以供 Google 搜索访问。

此图展示了网址从抓取队列移到处理步骤，该步骤提取链接的网址并将其添加到抓取队列（一个呈现队列，流向生成 HTML 的呈现器）。处理器使用此 HTML 再次提取链接的网址，并将内容编入索引。 — 用于抓取、呈现网页并将其编入索引的 Googlebot 流水线。

该工作流程如下：

Googlebot 会将网址加入抓取队列。
然后，它会根据抓取预算，通过 HTTP 请求来提取网址。
Googlebot 会扫描 HTML 中的链接，并将发现的链接加入待抓取队列。
然后，Googlebot 会将相应网页加入渲染队列。
无头 Chromium 实例会尽快呈现网页，其中包括执行 JavaScript。
Googlebot 会使用所呈现的 HTML 将网页编入索引。

您的技术设置可能会影响抓取、呈现和编入索引的过程。例如，响应缓慢或服务器错误可能会影响抓取预算。另一个例子是要求 JavaScript 呈现链接，可能会导致这些链接的发现速度变慢。

使用特征检测和处理错误

长期以来的 Googlebot 新增了很多功能，但某些功能仍不受支持。如果依赖不受支持的功能或未正确处理错误，可能会导致 Googlebot 无法呈现您的内容或无法将其编入索引。

让我们看一个示例：

 <body>
   <script>
     navigator.geolocation.getCurrentPosition(function onSuccess(position) {
       loadLocalContent(position);
     });
   </script>
 </body>

在某些情况下，此页面可能不会显示任何内容，因为当用户拒绝授予权限或 getCurrentPosition 调用返回错误时，代码无法处理。默认情况下，Googlebot 会拒绝此类权限请求。

这是一个更好的解决方案：

 <body>
   <script>
     if (navigator.geolocation) {
       // this browser supports the Geolocation API, request location!
       navigator.geolocation.getCurrentPosition(
         function onSuccess(position) {
           // we successfully got the location, show local content
           loadLocalContent(position);
         }, function onError() {
           // we failed to get the location, show fallback content
           loadGlobalContent();
         });
     } else {
       // this browser does not support the Geolocation API, show fallback content
       loadGlobalContent();
     }
   </script>
 </body>

如果您在将自己的 JavaScript 网站编入索引时遇到问题，请浏览我们的问题排查指南以查找解决方案。

为您的 Web 应用选择合适的渲染策略

目前，单页应用的默认呈现策略是客户端呈现。HTML 会加载 JavaScript，后者会在执行时在浏览器中生成内容。

我们来看一个显示一系列猫咪图片的 Web 应用，该应用使用 JavaScript 完全在浏览器中呈现图片。

一个代码框，显示了用于加载某些脚本的 HTML。移动设备上网页的屏幕截图，其中显示了加载实际内容时的占位图片。 — 渲染策略会影响 Web 应用的性能和稳健性。

如果您可以自由选择呈现策略，不妨考虑采用服务器端呈现或预呈现。它们在服务器上执行 JavaScript 以生成初始 HTML 内容，从而提高用户和抓取工具的性能。这些策略可让浏览器在 HTML 通过网络传入时开始呈现它们，从而加快网页加载速度。I/O 大会上的渲染会议或关于 Web 渲染的博文介绍了服务器端渲染和水化功能如何提升 Web 应用的性能和用户体验，并提供了有关这些策略的更多代码示例。

如果您希望寻找解决方法来帮助不执行 JavaScript 的抓取工具，或者您无法更改前端代码库，不妨考虑采用动态呈现，您可以在此 Codelab 中试用一下。但请注意，您不会像使用服务器端呈现或预呈现那样带来用户体验或性能优势，因为动态呈现只会向抓取工具提供静态 HTML。这使其成为一种权宜之计，而不是长期策略。

测试您的页面

虽然大多数网页通常都可使用 Googlebot，但我们建议您定期测试网页，以确保您的内容可供 Googlebot 访问，且没有任何问题。有多种实用工具可帮助您实现这一目标。

快速检查网页的最简单方法是进行移动设备适合性测试。除了向您显示移动设备适合性方面的问题，该页面还会为您提供首屏内容和所呈现的 HTML（即 Googlebot 看到的内容）的屏幕截图。

移动设备适合性测试会显示 Googlebot 在呈现网页后所观察到的所呈现 HTML — 移动设备适合性测试会显示 Googlebot 使用的所呈现 HTML。

您还可以检查是否存在资源加载问题或 JavaScript 错误。

建议您在 Google Search Console 中验证您的网域，以便使用网址检查工具详细了解网址的抓取和索引编制状态，在 Search Console 检测到问题时收到消息，并详细了解您的网站在 Google 搜索中的表现。

网址检查工具，其中显示了已编入索引的网页，其中包含与某一网址相关的发现、抓取和索引编制信息 — Search Console 中的网址检查工具会显示网页的抓取、呈现和索引编制状态。

如需获得一般性 SEO 提示和指南，您可以使用 Lighthouse 中的 SEO 审核。如需将 SEO 审核集成到您的测试套件中，请使用 Lighthouse CLI 或 Lighthouse CI 聊天机器人。

灯塔 SEO 报告，得分为 44，显示移动设备适合性警告，还有内容最佳实践警告 — Lighthouse 显示针对某个网页的常规 SEO 建议。

这些工具可帮助您识别、调试和修复 Google 搜索中的网页问题，您应在应用开发过程中使用。

随时了解最新动态并保持联系

如需随时了解 Google 搜索的公告和变更，请密切关注我们的网站站长博客、Google 网站站长 YouTube 频道和我们的 Twitter 帐号。另请参阅我们的 Google 搜索开发者指南和 JavaScript SEO 视频系列，详细了解 SEO 和 JavaScript。