了解搜索引擎是如何抓取、渲染和索引网页的，对于针对搜索引擎优化网站至关重要。多年来，随着谷歌等搜索引擎不断改变其流程，我们很难了解哪些有效，哪些无效--尤其是客户端 JavaScript。
我们注意到，一些陈旧的观念一直存在，让社区对应用 SEO 的最佳实践缺乏信心：
为了解决这些问题，我们与领先的搜索引擎优化和数据工程咨询公司 MERJ[1] 合作，对 Google 的抓取行为进行了新的实验。我们分析了不同网站上超过 100,000 次的 Googlelebot 抓取行为，以测试和验证 Google 的搜索引擎优化能力。
让我们来看看 Google 的渲染方式是如何演变的。然后，我们将探讨我们的发现及其对现代web应用的实际影响。
谷歌渲染能力的演变
多年来，谷歌抓取和索引网页内容的能力发生了显著变化。了解这一演变对于理解现代web应用的搜索引擎优化现状非常重要。
2009 年以前：对 JavaScript 的支持有限
在搜索的早期，谷歌主要索引静态 HTML 内容。搜索引擎基本上看不到 JavaScript 生成的内容，这导致静态 HTML 被广泛用于搜索引擎优化。
2009-2年：AJAX 抓取方案
谷歌推出了 AJAX 抓取方案，允许网站提供动态生成内容的 HTML 快照。这是一种权宜之计，需要开发人员为网页创建单独的可抓取版本
2-2018年：早期 JavaScript 渲染
谷歌开始使用无头 Chrome 浏览器渲染网页，标志着向前迈进了一大步。不过，这种旧版浏览器在处理现代 JavaScript 功能方面仍有局限。
2018 年至今：现代渲染能力
如今，谷歌使用最新版本的 Chrome 浏览器进行渲染，与最新的网络技术保持同步。当前系统的主要方面包括：
在更好地了解 Google 的能力之后，让我们来看看一些常见的误区以及它们对搜索引擎优化的影响。
方法
为了研究以下误区，我们使用 Vercel 的基础架构和 MERJ 的网络渲染监控器（WRM）技术进行了一项研究。我们的研究重点是 nextjs.org[2]，以及 monogram.io[3] 和 basement.io[4] 的补充数据，时间跨度为 2024 年 4 月 1 日至 4 月 30 日。
数据收集
我们在这些网站上放置了一个定制的边缘中间件[5]，用于拦截和分析来自搜索引擎机器人的请求。通过该中间件，我们可以：
该 JavaScript 库在页面渲染完成时触发，向长期运行的服务器发送数据，其中包括：
数据分析
通过比较服务器访问日志中的初始请求和我们的中间件向外部灯塔服务器发送的数据，我们可以：
数据范围
在本文中，我们主要关注来自 Googlebot 的数据，它提供了最大、最可靠的数据集。我们的分析包括超过 37,000 个与服务器-灯塔对匹配的渲染 HTML 页面，为我们提供了一个强大的样本来得出结论。
我们仍在收集其他搜索引擎的数据，包括 OpenAI 和 Anthropic 等人工智能提供商的数据，并希望在未来更多地讨论我们的发现。
在下面的章节中，我们将深入探讨每个误区，并在必要时提供更多相关方法。
误区1：谷歌无法渲染JavaScript内容
这一误区导致许多开发人员避开 JS 框架，或采用复杂的变通方法来实现SEO。
测试
为了测试 Google 渲染 JavaScript 内容的能力，我们重点关注了三个关键方面：
发现
误区2：谷歌对 JavaScript 页面的处理方式不同
一个常见的误解是，谷歌对 JavaScript 较多的网页有单独的处理程序或标准。我们的研究以及 Google 的官方声明揭穿了这一误区。
测试
为了测试 Google 在哪些方面对 JS 较多的页面采取了不同的处理方式，我们采取了几种有针对性的方法：
发现
误区3：渲染队列和时间对 SEO 有重大影响
许多SEO从业人员认为，由于渲染队列的原因，JavaScript 较多的网页在索引过程中会面临严重的延迟。我们的研究对这一过程有了更清晰的认识。
测试
为了解决渲染队列和时间对搜索引擎优化的影响，我们进行了以下调查：
发现
渲染延迟分布如下：
令人惊讶的是，第 25 百分位数的页面在初始抓取后 4 秒内就能渲染，这对 "长队列" 的概念提出了质疑。
虽然有些页面面临严重的延迟（第 99 百分位数的页面延迟时间长达约 18 小时），但这些都是例外，而不是常规。
我们还观察到一些有趣的模式，这些模式与 Google 如何快速渲染带有查询字符串 (?param=xyz)的 URL 有关：
这些数据表明，如果 URL 包含不影响内容的查询字符串，Google 会以不同的方式处理 URL。例如，在 nextjs.org[19] 上，带有 ?ref= 参数的页面的渲染延迟时间更长，尤其是在百分位数较高的情况下。
此外，我们注意到，与较静态的部分相比，/docs 等经常更新的部分的中位渲染时间较短。例如，/showcase 页面尽管经常被链接，但渲染时间却更长，这表明 Google 可能会放慢对变化不大的页面的重新渲染速度。
误区4：大量使用 JavaScript 的网站页面发现速度较慢
SEO界始终认为，JavaScript 量大的网站，尤其是那些依赖于客户端渲染（CSR）的网站，如单页应用程序（SPA），谷歌发现页面的速度较慢。我们的研究在这方面提供了新的见解。
测试
为了研究 JavaScript 对页面发现的影响，我们：
发现
总体影响和建议
我们的研究揭穿了 Google 处理 JavaScript 重度网站的几个常见误区。以下是主要结论和可行建议：
影响
推荐
渲染策略
正如我们已经探讨过的，在谷歌的能力方面，不同的渲染策略[30]存在一些差异：
|
特性 |
静态网站生成（SSG） |
增量式静态再生（ISR） |
服务器端渲染（SSR） |
客户端渲染（CSR） |
|
抓取效率：谷歌访问、渲染和检索网页的速度和效率。 |
优秀 |
优秀 |
非常好 |
差 |
|
发现：寻找要抓取的新 URL 的过程*。 |
优秀 |
优秀 |
优秀 |
平均 |
|
渲染完整性（错误、失败等）：谷歌加载和处理网页的准确性和完整性。 |
健全 |
健全 |
健全 |
可能失败** |
|
渲染时间：Google 完全渲染和处理网页所需的时间。 |
优秀 |
优秀 |
优秀 |
差 |
|
链接结构评估：谷歌如何评估链接以了解网站架构和页面的重要性。 |
渲染后 |
渲染后 |
渲染后 |
渲染后，如果渲染失败，链接可能会丢失 |
|
索引：谷歌存储和组织网站内容的过程。 |
健全 |
健全 |
健全 |
如果渲染失败，可能无法索引 |
** 谷歌渲染通常不会失败，我们的研究已经证明了这一点；如果失败，通常是由于 robots.txt 中的资源被封或特定的边缘情况。
虽然存在这些细微差别，但无论采用哪种渲染策略，谷歌都会很快发现并索引你的网站。与其担心谷歌渲染过程的特殊适应性，不如专注于创建有益于用户的高性能网络应用程序。
毕竟，页面速度仍然是一个排名因素，因为谷歌的页面体验排名系统会根据谷歌的核心Web指标[31]来评估网站的性能。
此外，页面速度与良好的用户体验息息相关--每节省 100 毫秒的加载时间，网站转化率就会提高 8%。更少的用户跳出你的页面意味着谷歌将其视为更相关的页面。性能决定一切，毫秒至关重要。
本文译自：
[1]MERJ:
[2]nextjs.org:
[3]monogram.io:
[4]basement.io:
[5]边缘中间件:
[6]轻量级 JavaScript 库:
[7]nextjs.org:
[8]Next.js.org:
[9]nextjs.org:
[10]nextjs.org:
[11]Next.js App Router:
[12]RSC:
[13]nextjs.org:
[14]流式传输不会对 SEO 产生不利影响:
[15]nextjs.org:
[16]nextjs.org:
[17]nextjs.org:
[18]nextjs.org:
[19]nextjs.org:
[20]nextjs.org:
[21]nextjs.org:
[22]2Fwebsite.com:
[23]Google 的懒加载最佳实践:
[24]错误边界:
[25]用于渲染的关键资源:
[26]增量静态再生:
[27]使用并定期更新网站地图:
[28]URL 检查工具:
[29]富媒体搜索结果工具:
[30]渲染策略:
[31]核心Web指标: