我们测试了谷歌爬虫如何抓取JavaScript，下面是我们从中学到的东西。

觉得谷歌处理不了JavaScript？再想想。Audette Audette分享了一系列测试结果，他和同事测试了谷歌会抓取和包含哪些类型的JavaScript函数。

长话短说

1.我们进行了一系列的测试，证明了谷歌可以在很多方面执行和记录JavaScript。我们还确认谷歌可以渲染整个页面并读取DOM，其中可以包括动态生成的内容。

2.DOM中的SEO信号(页面标题、元描述、规范标签、元机器人标签等。)都很关心。动态插入到DOM中的所有内容也可以被捕获和记录。此外，在某些情况下，DOM甚至可能优先于HTML源语句。虽然还需要做更多的工作，但这是我们的几个测试之一。

简介：谷歌执行JavaScript读取DOM

早在2008年，谷歌就成功抢到了JavaScript，但可能在某种程度上受到了限制。

如今，很明显，谷歌不仅可以计算出它们抓取和包含的JavaScript类型，而且在渲染整个网页方面也取得了显著的进展(尤其是在过去的12到18个月中)。

在Merkle，我们的SEO技术团队希望更好地了解谷歌爬虫可以捕获和记录什么样的JavaSscript事件。经过研究，我们发现了引人注目的结果，证实了谷歌不仅可以执行各种JavaScript事件，还可以收集动态生成的内容。你是怎么做到的？谷歌可以读取DOM。

什么是DOM？

许多搜索引擎优化人员不明白什么是文档对象模型。

当浏览器请求页面时会发生什么，DOM是如何参与的？

当在网络浏览器中使用时，DOM本质上是一个应用程序接口，或称API，用于标记和构造数据(如HTML和XML)。这个界面允许网络浏览器将它们组合成文档。

DOM还定义了如何获取和操作结构。虽然DOM是一个独立于语言的应用编程接口(不依赖于特定的编程语言或库)，但它广泛用于JavaScript和网络应用程序的动态内容。

DOM代表接口，即“桥梁”，它用编程语言连接网页。解析HTML和执行JavaScript的结果就是DOM。网页的内容不是(不仅仅是)源代码，而是DOM。这使得它非常重要。

JavaScript如何通过DOM接口工作。

我们兴奋地发现，谷歌可以读取DOM并解析信号和动态插入的内容，例如标题标签、页面文本、标题标签和元注释(例如，rel=canonical)。你可以阅读全部细节。

这一系列的测试和结果

因为我们想知道将捕获和包含哪些JavaScript函数，所以我们单独为Google crawler创建了一系列测试。通过创建控件，确保可以独立理解URL活动。下面，我们来详细划分一些有趣的测试结果。它们分为五类：

1.JavaScript重定向2。JavaScript链接3。动态插入内容4。元数据和页面元素的动态插入5。rel="nofollow "的一个重要例子

示例：用于测试谷歌爬虫理解JavaScript能力的页面。

1.JavaScript重定向

我们首先测试了常见的JavaScript重定向。用不同方式表达的网址会怎么样？我们为两个测试选择了window.location对象：测试A使用绝对路径URL调用window.location，而测试B使用相对路径。

结果：重定向很快被谷歌跟踪。从包含的角度来看，它们被解释为301-最终状态的网址，而不是谷歌包含中的重定向网址。

在随后的测试中，我们使用权威网页上的相同内容来完成一个由JavaScript重定向到同一站点的新页面。而原网址是谷歌热门查询的第一页。

结果：果不其然，重定向被谷歌追踪到了，但原页面没有被收录。新的网址被包括在内，并立即排列在同一查询页面的同一位置。这让我们很惊讶。从排名来看，似乎JavaScript重定向行为(有时)与永久301重定向非常相似。

下次，如果你的客户想为他们的网站完成JavaScript重定向，你可能不需要回答，或者回答：“请不要”。因为这似乎和转会排名有信号关系。为了支持这一结论，我们引用了谷歌指南：

使用JavaScript重定向用户可能是合法的。例如，如果您将登录用户重定向到内部页面，您可以使用JavaScript来实现这一点。当仔细检查JavaScript或其他重定向方法时，请确保您的网站遵循我们的指导方针并考虑其意图。请记住，301重定向最好跳转到您的网站，但是如果您没有访问您的网站服务器的权限，您可以为此目的使用JavaScript重定向。

2.JavaScript链接我们已经用各种编码方法测试了不同类型的JS链接。

我们测试下拉菜单的链接。历史上的搜索引擎一直无法追踪这类链接。我们想确定onchange事件处理程序是否会被跟踪。重要的是，这只是为了执行特定的类型，但我们需要的是其他变化的影响，而不是上面JavaScript重定向的强制操作。

示例：谷歌工作页面的语言选择下拉菜单。

结果：链接被完全抓取和跟踪。

我们还测试了常见的JavaScript链接。以下是最常见的JavaScript链接类型，而传统的SEO推荐纯文本。这些测试包括JavaScript链接代码：

作用于外部href键值对(AVP)，但在标签内(“onClick”)

角色href内部AVP(“JavaScript : window . location”)

在标签的外部进行操作，但在href中调用AVP(“JavaScript : openlink()”)

等等

结果：链接被完全抓取和跟踪。

我们的下一个测试是进一步测试事件处理程序，比如上面测试的onchange。具体来说，我们想用鼠标移动事件处理程序，然后隐藏URL变量，该变量只在事件处理程序函数(本例中为onmousedown和onmouseout)被触发时执行。

结果：链接被完全抓取和跟踪。

构建链接：我们知道谷歌可以执行JavaScript，但我们想确保他们可以读取代码中的变量。所以在这个测试中，我们连接可以构造URL字符串的字符。结果：链接被完全抓取和跟踪。

3.动态插入内容

显然，这些是关键点：动态插入文本、图像、链接和导航。高质量的文本内容对于搜索引擎理解网页的主题和内容非常重要。在这个动态网站的时代，没有必要质疑它的重要性。

这些测试旨在检查在两种不同情况下动态插入文本的结果。

1).测试搜索引擎是否可以统计动态插入的文本，这些文本来自页面的HTML源代码。2).测试搜索引擎是否可以统计动态插入的文本，这些文本来自页面的HTML源代码之外(在外部的JavaScript文件中)。

结果：在这两种情况下，文本都可以被抓取和包含，页面根据内容进行排名。酷！

为了了解更多相关信息，我们测试了一个由JavaScript编写的客户端全局导航，通过document.writeIn函数插入导航中的链接，确定可以完全抓取和跟踪。需要指出的是，谷歌可以对用AngularJS框架和HTML5 History API(pushState)构建的网站进行解释、渲染和记录，并像传统静态网页一样进行排名。这就是为什么不禁止谷歌爬虫获取外部文件和JavaScript很重要，这可能也是谷歌将其从《支持 Ajax 的 SEO 指南》中移除的原因。当你可以简单地渲染整个页面时，谁需要HTML快照？

经过测试发现，不管是什么类型的内容，都是一样的结果。例如，图像在加载到DOM后将被捕获和记录。我们甚至做了这样一个测试：我们通过动态生成data-vocabulary.org结构数据来制作面包屑，并将它们插入到DOM中。结果呢？成功插入后的面包屑会出现在搜索结果中(搜索引擎结果页面)。

值得注意的是，谷歌现在建议使用JSON-LD标签来形成结构化数据。我相信未来会有更多基于此的东西。

4.动态插入元数据页面元素

我们动态地将对搜索引擎优化至关重要的各种标签插入到DOM中：

标题元素的元描述

结果：在所有情况下，标签都可以被抓取，它们的行为就像HTML源代码中的元素。

一个有趣的补充实验帮助我们理解优先顺序。当有冲突的信号时，哪一个会赢？如果源代码中有noindex和nofollow标签，DOM中有noindex和follow标签，会发生什么？在这个协议中，HTTP x-robots响应头作为另一个变量的行为是怎样的？这将是未来综合测试的一部分。然而，我们的测试表明，当有冲突时，谷歌会忽略源代码中的标签，并支持DOM。

5.rel="nofollow "的一个重要例子

我们想测试谷歌如何在源代码和DOM的链接级别处理nofollow属性。因此，我们创建了一个没有nofollow应用程序的控件。

对于nofollow，我们分别测试由源代码和DOM生成的注释。

源代码中的Nofollow如我们所料运行(链接未被跟踪)。但是，DOM中的nofollow是无效的(链接被跟踪，页面被包括在内)。为什么呢？因为修改DOM中的href元素发生得太晚了：Google准备抓取链接并等待URL，然后用rel="nofollow "执行JavaScript函数。但是，如果带有href="nofollow "的元素被插入到DOM中，nofollow和link将被跟踪，因为它们是同时插入的。

结果

历史上，各种搜索引擎优化建议都是尽可能关注“纯文本”。在动态生成内容的同时，AJAX和JavaScript链接会破坏主流搜索引擎的SEO。显然，这对谷歌来说不再是问题。JavaScript链接像普通的HTML链接一样运行(这只是一个表面，我们不知道幕后程序是做什么的)。JavaScript重定向被视为301重定向。

动态插入的内容，甚至元标签，如rel规范注释，都以相同的方式处理，无论是在HTML源代码中，还是在最初解析HTML后触发JavaScript生成DOM。

谷歌似乎能够完整地渲染页面并理解DOM，而不仅仅是源代码。真是不可思议！(记得让谷歌爬虫获取那些外部文件和JavaScript。)

谷歌在创新方面以惊人的速度落后于其他搜索引擎。我们希望看到其他搜索引擎也有同样类型的创新。如果他们想在网络新时代保持竞争力并取得实质性进展，这意味着他们应该更好地支持HTML5、JavaScript和动态网站。

对于SEO来说，不懂以上基本概念和Google技术的人，应该好好学习，好好钻研，赶上现在的技术。如果你不考虑DOM，你可能会损失一半的份额。

本文表达的观点并非全部由Search Engine Land提供，但部分观点由客座作者提供。所有作者列表。