带有Chromium渲染引擎的Evergreen Googlebot：技术SEO需要知道什么

这是令人兴奋的一周，2019年Google I / O活动的舞台上发布了重要公告。 可能最有影响力的公告是Google现在承诺定期更新其Googlebot抓取服务，以开始使用其无头Chromium渲染引擎的最新稳定版本。 这是一个重大的飞跃，与以前的版本相比，现在支持了1,000多个功能。

几乎所有新功能支持都是现代JavaScript语法，正式称为ECMAScript（ES6）。 如果您是JavaScript开发人员，那么您真的想使用该语言的最新版本来访问语法糖，该语法糖会随着语言的成熟而不断出现。 的确，如果您是普通的JavaScript用户，或者喜欢使用现代的反应式框架之一，则开发人员会提供许多简洁的新功能，这些开发人员建议使用更好的模式编写常用代码块。

一个基本的示例是向数组添加值，这是使用push()的非常常见的操作：

 <脚本>
名称= [
“艾米”
'布鲁斯'，
'克里斯'
];
names.push（'David'）;
</ script>

果壳中的反应性

在上面的示例中，定义了一个名称数组，并分配了3个值：Amy，Bruce和Chris。 然后，使用push()方法push() David添加到列表中。 使用现代的反应框架，值的变化可以触发框架针对新的“虚拟DOM”对页面DOM的“差异”评估，并且由于数组值不同，因此可以通过JavaScript更新页面值，而无需重新加载浏览器窗口。

面对Web的应用程序中的反应性是JavaScript真正增加了我们的功能的地方，随着现代JavaScript在服务器和浏览器中的进一步发展，我们的能力也在不断提高。 跟踪为服务器编写的JavaScript与随浏览器附带的JavaScript的关系非常棘手。 例如，使用ES6，您可以执行以下操作，包括在定义语句中使用“ let”（和“ const”）的能力：

 <脚本>
让名字= [
“艾米”
'布鲁斯'，
'克里斯'
];
名称= [...名称，'David'];
</ script>

向后兼容

上面的名称数组突变使用更新的'spread operator'语法[...names]表示名称数组的当前值，然后使用赋值操作（而非push（）方法）添加David。 较新的语法与Chrome 41不兼容，因此在Googlebot将其更新为Chrome 74之前不起作用。对于开发人员来说，为向下兼容而不得不写下或转译ES6简直就是千篇一律。

现在，现代JavaScript语法将在Googlebot中立即开始直接使用，并且实际上有数十种新功能可用，例如上述功能。 请注意，Bing和DuckDuckGo（以及社交共享搜寻器）可能无法解释ES6语法。

现实生活中的例子

Svelte框架最近进行了重大更新，并修订为版本3。随着这一重大改进，更精确地触发了基于任务的页面反应性。 有个有趣的病毒视频介绍了它。 在Svelte中必须将'names'数组代码编写或转换为Google的较早的push（）语法需要Google采取额外的步骤，因为push（）将值添加到数组中，但这不是变量赋值操作，这是触发页面所必需的Svelte 3中的反应性。

 <脚本>
让名字= [
“艾米”
'布鲁斯'，
'克里斯'
];
names.push（'David'）;
名称=名称; //触发Svelte反应
</ script>

显而易见，为什么现在可以使用ES6：

 <脚本>
名称= [...名称，'David'];
</ script>

……对Svelte用户而言，开发人员比以前更加友好。

常绿铬渲染

现在可以依靠Googlebot的常绿Chromium渲染引擎了，React，Angular，Vue，Svelte 3和香草JavaScript用户可以不必再为Chrome 41特有的polyfill和在项目中编写或转换ES6语法而担心了。 但是，仍然存在担忧。 您需要测试并确保渲染引擎的行为符合您的预期。 与用户的浏览器相比，Google更加谨慎地公开其资源。

Google建议用户查阅文档，以查找对Google的Web渲染服务（WRS）实例的引用：目前，基本上像Chromium 74这类产品都在适用于移动设备的测试和URL Inspection Tool等产品中使用。 例如，地理位置脚本可能会要求浏览器定位服务。 Google的呈现引擎未公开该API。 JavaScript中的此类异常可能会中断索引。

追踪Googlebot

如果您仍在服务器日志中跟踪来自较旧版本的Chrome的访问，则最终它们将更新用户代理字符串以反映它们正在运行的Chrome的版本。 另外，请记住，Google是一家规模较大且分散的公司，其部门对网络资源的访问权限不同。 某个特定部门可能需要进行设置修改才能开始使用新的Chrome引擎，但是可以肯定的是，一切都会很快使用，特别是对于关键的Web爬网服务。

SEO技术建议

这对技术型SEO意味着什么？ 对于运行现代JavaScript的网站，指出的关键索引问题将更少。 但是，传统建议将在很大程度上保持不变。 例如，新的渲染引擎不会使索引渲染队列快捷方式用于反应式代码。 这意味着运行React，Angular或Vue等的站点在预渲染相对静态的站点方面仍然会更好，而在服务器端渲染（SSR）真正的动态站点方面则更好。

成为技术搜索引擎优化的好处是，我们可以向开发人员提供有关应与Googlebot保持一致的做法的建议，并且大多数情况下，他们应该首先这样做。 成为SEO开发人员的好处是，有无穷无尽的令人兴奋的现代代码可以玩，尤其是当Google现在赶上Chromium 74时。唯一的缺点是常绿的Chromium Googlebot不能帮助您使用Bing，DuckDuckGo，或社交媒体共享抓取工具。

那是一个很大的缺点

变化越多，它们保持不变的可能性就越大。 您仍应建议客户有关预渲染和SSR。 这样可以确保无论您要处理的是什么用户代理，它都将接收呈现的内容以进行搜索或共享。 我们发现自己面临的困境是，如果计划的应用程序具有大量的反应性部分，例如不断更新运动成绩或股票市场价格，则我们必须进行反应性，仅SSR不能工作。

那时，有必要进行SSR并交付自定义JavaScript以实现延迟水合作用，类似于代码拆分。 基本上，完整的HTML会在服务器上完全呈现，然后JavaScript负责更新反应性部分。 如果JavaScript不能在Bing或DuckDuckGo中呈现，那么就可以了，因为您已经交付了完全呈现的HTML。 这似乎有些过分，但请记住，无论如何，搜索引擎将只能在特定时间点的状态下显示页面的排名。

为什么会有这种反应性？

SSR可以为您完成跨用户代理的SEO渲染专长，并且用户浏览器可以运行JavaScript来实现响应式功能。 但是为什么要打扰呢？ 如果您只是因为可以而使用反应式框架，那么也许您一开始就不需要。 如果您想避免在站点性质不需要太多响应时管理大量复杂细节的麻烦和花销，那么最好使用带有必要时预渲染策略的静态站点来构建静态站点，或为实际上可能需要反应的一两个功能编写原始JavaScript。

服务器端渲染

如果您认为服务器端渲染只是小菜一碟，请阅读一本描述您在充电之前可能会遇到的恐惧的文章，尤其是当您尝试对现有应用程序进行改造时。 简而言之，您应该编写通用的JavaScript，并且它会很快变得复杂，包括安全隐患。 幸运的是，如果您是从头开始的话，还有一组很棒的新文章，写得很好，包括相当全面的React教程。 我们强烈建议阅读以补充官方的React指南。

新希望

事情发展很快，即使对于Google而言，跟上步伐也可能很艰难。 它已经更新到Chrome 74以渲染更多现代Web的消息早就应该出现。 重要的是，我们知道它打算将Googlebot改进到消费者版本的Chrome版本数周之内。 现在，我们可以使用本地软件测试更多代码，以确保我们的网站可以与Googlebot一起使用。 Svelte是一个非常有趣的反应性新范例。 Svelte具有SSR输出模式，您可以在其教程REPL中直接进行测试。 Svelte给我们带来了比其他JavaScript更接近原始JavaScript的反应性，这是真正的成就。

<**all>SEO的更多开发技巧

• <**all>我们的开发人员SEO专栏
• <**all>如何使用自定义功能在Google表格中显示Lighthouse评分
• <**all>使用React或Vue以及NodeJS和其他后端堆栈的反应式JavaScript SEO
• <**all>使用HTML5，CSS3和Javascript增强SEO友好标记