我们测试了Google抓取工具如何抓取JavaScript，以下是我们学到的内容。认为Google无法处理JavaScript？再想一想。AudetteAudette分享了一系列测试的结果，在这些测试中，他和他的同事测试了哪些类型的JavaScript功能被Google抓取和索引。长话短说1.我们进行了一系列测试，确认Google以多种方式执行和包含JavaScript。我们还确认Google可以呈现整个页面并读取DOM，因此它可以包含动态生成的内容。2.DOM中的SEO信号（页面标题、元描述、规范标签、元机器人标签等）都受到关注。动态插入DOM的内容也可以被抓取和包含。此外，在某些情况下，DOM甚至可能优先于HTML源语句。虽然这需要更多的工作，但它只是我们进行的几项测试之一。简介：GoogleExecutesJavaScript&ReadstheDOM早在2008年，Google就成功地抓取了JavaScript，但很可能仅限于某种方法。然而，今天很明显，谷歌不仅确定了他们抓取和包含的JavaScript类型，而且在渲染整个网页方面取得了重大进展（尤其是在过去12到18个月）。在Merkle，我们的技术SEO团队希望更好地了解哪些类型的JavaSscript事件被Google的爬虫抓取并编入索引。经过研究，我们发现了令人惊讶的结果，并确认Google不仅执行各种JavaScript事件，还包括动态生成的内容。如何？Google可以读取DOM。什么是DOM？许多SEO人员不了解文档对象模型(DOM)是什么。当浏览器请求页面时会发生什么，以及DOM如何参与其中。当在Web浏览器中使用时，DOM本质上是一个应用程序编程接口或API，用于标记和结构化数据，例如HTML和XML。该接口允许Web浏览器将它们组合起来形成文档。DOM还定义了如何访问和操作结构。尽管DOM是一种语言中立的API（不依赖于特定的编程语言或库），但它通常用于JavaScript和Web应用程序中的动态内容。DOM表示将网页与编程语言连接起来的接口或“桥梁”。解析HTML和执行JavaScript的结果就是DOM。网页的内容不是（不仅仅是）源代码，它是DOM。这使得它非常重要。JavaScript如何通过DOM接口工作。我们很高兴地发现Google能够读取DOM并解析信号和动态插入的内容，例如标题标签、页面文本、head标签和元注释（例如：rel=canonical）。完整的细节可以在这里阅读。这一系列测试和结果因为我们想知道爬取和包含了哪些JavaScript函数，所以我们单独为谷歌爬虫创建了一系列测试。通过创建控件确保可以独立理解URL活动。下面，让我们详细分解一些有趣的测试结果。它们分为5类：JavaScript重定向JavaScript链接动态插入的内容动态插入的元数据和页面元素rel="nofollow"的重要示例示例：用于测试Google爬虫理解JavaScript能力的页面。1.JavaScript重定向我们首先测试了常见的JavaScript重定向，不同方式表达的URL会是什么结果呢？我们为两个测试选择了window.location对象：测试A使用绝对路径URL调用window.location，而测试B使用相对路径。结果：重定向很快被谷歌跟踪。在索引方面，它们被解释为301-最终状态URL替换Google索引中的重定向URL。在随后的测试中，我们执行了JavaScript重定向到同一站点上的新页面，该页面在权威页面上具有完全相同的内容。原始URL是排名靠前的Google查询的第一个页面。结果：果然，重定向被谷歌跟踪了，但是原始页面没有被索引。相反，新的URL被编入索引并立即在同一查询的页面上排名相同的位置。这让我们感到惊讶，从排名的角度来看，这似乎表明JavaScript重定向的行为（有时）很像永久性301重定向。下次您的客户想要为他们的网站完成JavaScript重定向移动时，您可能不需要回答，或者回答：“请不要”。因为似乎有一种传递排名信号的关系。支持这一结论的是对谷歌指南的引用：使用JavaScript来重定向用户可能是一种合法的做法。例如，如果您将已登录的用户重定向到一个内部页面，您可以使用JavaScript执行此操作。在仔细检查JavaScript或其他重定向方法以确保您的网站符合我们的指南时，请考虑其意图。请记住，301重定向到您的网站是最好的，但如果您无法访问您的网络服务器，您可以为此使用JavaScript重定向。2.JavaScript链接我们测试了不同类型的JS链接，各种编码方式。我们测试下拉菜单的链接。搜索引擎历来无法跟踪这些类型的链接。我们要确保跟踪onchange事件处理程序。重要的是，这只是特定类型的执行，我们需要的是：其他变化的影响，而不是上面JavaScript重定向的强制操作。示例：GoogleWork页面的语言选择下拉菜单。结果：链接被完全抓取和跟踪。我们还测试了常见的JavaScript链接。以下是最常见的JavaScript链接类型，而传统的SEO推荐纯文本。这些测试包括以下JavaScript链接代码：作用于外部href键值对(AVP)，但在标签内部（“onClick”）作用于href内部AVP（“javascript:window.location”）作用于外部a标签，但在href中调用AVP(“javascript:openlink()”)等结果：链接被完全抓取和跟踪。我们的下一个测试是更进一步，测试事件处理程序，如上面测试的onchange。具体来说，我们想利用鼠标移动事件处理程序，然后隐藏URL变量，该变量仅在触发事件处理程序（在本例中为onmousedown和onmouseout）时执行。结果：链接被完全抓取和跟踪。构建链接：我们知道Google可以执行JavaScript，但希望确保他们可以读取代码中的变量。所以在这个测试中，我们连接组成URL字符串的字符。结果：链接被完全抓取和跟踪。3.动态插入内容以下是显而易见的要点：动态插入文本、图像、链接和导航。高质量的文本内容对于搜索引擎了解网页的主题和内容至关重要。在这个动态网站时代，它的重要性是毋庸置疑的。这些测试旨在检查在两种不同情况下动态插入文本的结果。1).测试搜索引擎是否可以统计动态插入的文本，文本来自页面的HTML源代码。2).测试搜索引擎是否可以计算动态插入的文本，并且文本来自页面的HTML源代码之外（在外部JavaScript文件中）。结果：在这两种情况下，文本都被抓取并编入索引，页面根据该内容进行排名。凉爽的！为了了解更多相关信息，我们测试了一个用JavaScript编写的客户端全局导航，其中包含通过document.writeIn函数插入的链接，并确保它们被完全抓取和跟踪。需要注意的是：Google可以解释使用AngularJS框架和HTML5HistoryAPI(pushState)构建的站点，对其进行渲染和索引，并像传统的静态网页一样对其进行排名。这就是为什么不要阻止Google的爬虫获取外部文件和JavaScript很重要，也许这就是为什么Google将其从《支持 Ajax 的 SEO 指南》中删除的原因。当您可以简单地呈现整个页面时，谁需要HTML快照？测试发现不管是什么类型的内容，结果都是一样的。例如，图像在加载到DOM中后被提取和索引。我们甚至做了一个测试，通过动态生成data-vocabulary.org结构数据并将其插入DOM来制作面包屑。结果？成功插入的面包屑出现在搜索结果页面（搜索引擎结果页面）。值得注意的是，Google现在建议对结构化数据使用JSON-LD标记。我相信将来会有更多基于此的东西。4.动态插入元数据和页面元素我们将各种SEO关键标签动态插入DOM：Title元素MetaDescriptionMetarobotsCanonicaltags结果：在所有情况下，标签都可以被抓取，并且它们的性能类似于HTML源代码中的元素。一个有趣的补充实验可以帮助我们理解优先顺序。当存在相互冲突的信号时，哪一个会获胜？如果源代码中有noindex、nofollow标签，DOM中有noindex、follow标签会怎样？在此协议中，HTTPx-robots响应标头作为另一个变量的行为如何？这将是未来综合测试的一部分。但是，我们的测试表明，当发生冲突时，Google会忽略源代码中的标记以支持DOM。5.rel="nofollow"的一个重要示例我们想测试Google如何响应出现在源代码和DOM中链接级别的nofollow属性。因此，我们创建了一个没有应用nofollow的控件。对于nofollow，我们分别测试源代码和DOM生成的注释。源代码中的nofollow按预期工作（未跟踪链接）。但是DOM中的nofollow失败（链接被跟踪并且页面被索引）。为什么？因为DOM中href元素的修改发生得太晚了：Google准备好在执行添加rel=”nofollow”的JavaScript函数之前抓取链接并将URL排队。但是，如果将带有href="nofollow"的a元素插入到DOM中，则将跟随nofollow和链接，因为它们是同时插入的。结果从历史上看，各种SEO建议都尽可能关注“纯文本”内容。动态生成的内容、AJAX和JavaScript链接会损害主要搜索引擎的SEO。显然，这不再是谷歌的问题。JavaScript链接的行为类似于普通的HTML链接（这只是装饰性的，我们不知道幕后发生了什么）。JavaScript重定向的处理方式与301重定向类似。动态插入的内容，甚至是rel规范注释等元标记，无论是在HTML源代码中还是在解析初始HTML后触发JavaScript生成DOM，都会以相同的方式处理。Google似乎能够完整地呈现页面并理解DOM，而不仅仅是源代码。那真是难以置信！（请记住允许Google的爬虫获取这些外部文件和JavaScript。）Google一直在以惊人的速度进行创新，并将其他搜索引擎甩在了后面。我们希望在其他搜索引擎中看到相同类型的创新。这意味着更好地支持HTML5、JavaScript和动态网站，如果它们要在新的网络时代保持竞争力并取得真正的进步的话。对于SEO，不了解以上基本概念和谷歌技术的朋友，要好好学习学习，赶上现在的技术。如果你不考虑DOM，你可能会失去一半的份额。并非本文表达的所有观点都是SearchEngineLand（搜索引擎网站）的观点，有些观点是客座作者的观点。所有作者的列表。
