后端开发教程 - Java、Spring Boot 实战 - msg200.com
搜索引擎和社交媒体爬虫如何呈现 JavaScript
JavaScript 是 SEO 社区中广泛讨论的话题，因为它可能会给试图访问我们网站页面的搜索引擎和其他爬虫程序带来严重问题。
SEO 人员在 JavaScript 渲染主题上收集的信息应该得到更广泛的分享，因为这些发现将影响到每个拥有大量 JavaScript 并希望新用户能够看到的网站的用户。
这就是我编写本指南来解释一些需要注意的关键事项的原因。
搜索引擎如何呈现 JavaScript
从这个示例代码来看，像 Google 这样的搜索引擎不会知道这个页面的内容是什么：
<body>
<app-root></app-root>
<script src="runtime.js"></script>
<script src="polyfills.js"></script>
<script src="main.js"></script>
</body>
代码中包含的 JavaScript 需要经过处理和执行，才能将输出代码显示给客户端。为了让 JavaScript 内容丰富的页面对搜索引擎或社交媒体爬虫有意义，它们需要渲染页面。
然而，渲染是一个成本高昂且资源密集的过程，大多数搜索引擎机器人和社交媒体机器人都难以应对。因此，了解它们的渲染能力至关重要，这样您才能知道它们在您的网站上难以看到哪些内容。
重要的是要记住，大多数搜索引擎根本无法呈现，而那些可以呈现的搜索引擎也有自己的呈现限制，正如我将在本文后面解释的那样。
如果您的网站依赖 JavaScript 来支持其内容和导航，搜索引擎最终可能会看到一个空白屏幕，没有任何有价值的内容可供抓取或索引。
我整理了有关主要搜索引擎当前如何进行渲染的最新更新，以及构建可抓取和索引的网站的一些关键注意事项。
Google 的渲染功能
Google 是目前少数几个呈现 JavaScript 的搜索引擎之一，并提供了大量有关JavaScript 搜索最佳实践的文档和资源。
这意味着我们能够非常清楚地了解我们需要做什么才能让我们的网站在 Google 的 SERP（搜索引擎结果页面）中被编入索引。
Google 渲染时，会根据模板以及数据库或 API 提供的数据生成标记。此过程中的关键步骤是获取完整生成的标记，因为只有这样，Google 的网络爬虫 Googlebot 才能读取这些标记。
为了执行此过程，Googlebot 使用无头浏览器来执行其网页渲染服务 (WRS)。Google 的 WRS 以前基于 Chrome 41，而 Chrome 41 是 2015 年推出的过时版本。
然而，谷歌现在已经将其 WRS 打造为“常青版”，这意味着它将定期更新以持续运行最新版本的 Chrome 。
这一变化使 Googlebot 能够处理以前无法处理的功能，例如 ES6、IntersectionObserver 和 Web Components。
对于不依赖 JavaScript 的网站来说，抓取和索引过程通常非常快，但是，由于互联网的规模和所需的处理能力，Google 无法在一个即时过程中完成抓取、呈现和索引。
互联网非常庞大，这就是问题所在。我们每天在网络上查看超过 160 万亿份文档，因此 Googlebot 非常繁忙。即使在云时代，计算资源的获取也相当困难。这个过程需要花费大量时间，尤其是在页面非常大、需要渲染大量图像或处理大量兆字节的 JavaScript 代码的情况下。
- Martin Splitt，Google 网站站长趋势分析师
这就是为什么 Google 会采用两波索引流程。在第一波索引中，HTML 页面会被抓取并编入索引，Googlebot 会使用分类器来判断哪些页面包含 JavaScript 代码，哪些页面需要渲染。
这些页面将被添加到队列中，待资源充足时，即第二波索引中渲染。页面只有在渲染完成后，才会在第二波索引中被添加到索引中。
“Google 通过比较初始 HTML 和渲染的 DOM 中的内容来确定是否需要渲染页面。”
-Martin Splitt，Google 网站站长环聊
当资源可用时，没有特定的方法来确定首先呈现的页面的优先级，这意味着无法保证页面在被 Googlebot 首次发现后何时真正呈现。
那么，第一波和第二波索引之间的间隔是多少呢？根据谷歌的 Tom Greenaway 和 Martin Splitt 在2018 年 Chrome 开发者峰会上的说法，谷歌在抓取页面后，可能需要“几分钟、一小时、一天甚至长达一周”的时间才能呈现内容。
如果您的网站在这两波索引之间停滞，那么您添加的任何新内容或对网站所做的任何更改都将在一段不确定的时间内无法被看到或索引。
这将对依赖新搜索结果的网站（例如电子商务或新闻网站）产生最大影响。
“电子商务网站应避免通过 JavaScript 提供产品页面内容。”
—John Mueller，Google 网站站长环聊
“新闻网站应避免需要 JavaScript 加载的内容。”
—John Mueller，Google 网站站长环聊
Bing 的渲染功能
据称，Bing 的爬虫确实可以渲染 JavaScript，但在处理最新浏览器功能和大规模渲染方面受到限制。
Bing 团队建议实施动态渲染，以确保 Bingbot 能够抓取和索引您的 JavaScript 内容和链接。
一般来说，Bing 对使用 JavaScript 的网站不会出现抓取和索引问题，但 Bingbot 偶尔会遇到严重依赖 JavaScript 来呈现内容的网站，尤其是在过去几年。其中一些网站需要对每个网页发起远不止一次的 HTTP 请求才能呈现整个页面，这意味着 Bingbot 很难像其他搜索引擎一样，对每个大型网站的每个页面进行大规模处理。
因此，为了提高 Bing 抓取和索引高度依赖 JavaScript 的网站的可预测性，我们推荐使用动态渲染作为替代方案。动态渲染通过解析 HTTP 请求的用户代理来检测搜索引擎的机器人，在服务器端预渲染内容并输出静态 HTML，从而帮助最大限度地减少每个网页所需的 HTTP 请求数量，并确保每次 Bingbot 访问您的网站时，我们都能获得最佳、最完整的网页版本。
当谈到专门为搜索引擎爬虫渲染内容时，我们不可避免地会被问到这是否被视为隐藏内容……对于 SEO 社区来说，没有什么比因隐藏内容而受到惩罚更可怕的了。好消息是，只要您真诚地努力向所有访问者返回相同的内容，唯一的区别在于内容是在服务器上为机器人渲染，在客户端为真实用户渲染，那么这种做法是可以接受的，不会被视为隐藏内容。
- Bing 首席项目经理Fabrice Canel
尽管 Bing 可以在某种程度上进行渲染，但它无法提取和跟踪 JavaScript 中包含的 URL。
“不要将内容链接埋在 JavaScript 中。”
Yahoo 的渲染功能
Yahoo 目前完全无法渲染。建议确保内容没有被 JavaScript“隐藏”，否则搜索引擎将无法渲染并找到由该脚本生成的任何内容。只有 HTML 中提供的内容才会被提取。
您可以使用元素来解决这个问题<noscript>。
取消隐藏 JavaScript 背后的内容。仅通过 JavaScript 才能访问的内容应使用 noscript HTML 元素呈现给非 JavaScript 用户代理和爬虫。
Yandex 的渲染功能
Yandex 的文档解释说，他们的搜索引擎不渲染 JavaScript，也无法索引其生成的任何内容。如果您希望您的网站出现在 Yandex 中，请确保在页面初始请求时，您的关键内容已在 HTML 中返回。
确保页面向机器人返回完整的内容。如果使用 JavaScript 代码，机器人将无法索引脚本生成的内容。您想要包含在搜索中的内容应该在请求页面后立即显示在 HTML 代码中，而无需使用 JavaScript 代码。为此，请使用 HTML 副本。
其他搜索引擎的渲染能力
DuckDuckGo、百度、AOL 和 Ask 对其渲染能力的公开程度远不及 Google，而且缺乏官方文档作为参考指南。目前，唯一的办法就是自己进行测试。
2017 年，Bartosz Góralewicz使用一个使用不同 JavaScript 框架提供内容的测试网站进行了一些实验，并分析了哪些搜索引擎能够呈现和索引它们生成的内容。
我们永远无法仅根据测试站点的索引得出明确的结论，但结果表明，只有 Google 和 Ask（令人惊讶）能够索引呈现的内容。
“Bing、Yahoo、AOL、DuckDuckGo 和 Yandex 完全不支持 JavaScript，如果您的内容不在 HTML 中，它们将无法看到它。”
-Bartosz Góralewicz，Onely 首席执行官
查看涵盖实验和结果的完整文章，以了解有关 Bartosz 的结论的更多信息。
社交媒体平台如何渲染 JavaScript
重要的是要知道社交媒体和共享平台通常无法在客户端呈现任何 JavaScript。
“Facebook 和 Twitter 的爬虫无法呈现 JavaScript。”
-Martin Splitt，Google 网站站长环聊
例如，如果您依靠 JavaScript 来提供内容，这些内容将输入到 Open Graph 标签、Twitter Cards 或甚至在 Slack 上分享文章时显示的元描述中，那么这些内容将无法显示。
确保您预渲染、服务器端渲染或动态内容（如特色图片、标题和描述），以供 Twitterbot 和 Facebot 等爬虫程序使用，这样它们就可以正确显示您的网站及其内容。
文章来源：https://dev.to/rachelcostello/how-search-engines-social-media-crawlers-render-javascript-438e