js抓取网页内容(谷歌爬虫是如何抓取JavaScript的?Google能读取DOM是什么?)

　　js抓取网页内容(谷歌爬虫是如何抓取JavaScript的?Google能读取DOM是什么?)

　　项目招商找A5快速获取精准代理商名单

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

　　认为 Google 无法处理 JavaScript？再想想。 Audette Audette 分享了一系列测试结果。他和他的同事测试了 Google 和收录 会抓取哪些类型的 JavaScript 函数。

　　概述

　　1. 我们进行了一系列测试，已经确认 Google 可以通过多种方式执行收录 JavaScript。我们还确认了 Google 可以渲染整个页面并读取 DOM，以便收录 可以动态生成内容。

　　2. DOM 中的 SEO 信号（页面标题、元描述、规范标签、元机器人标签等）都受到关注。动态插入DOM的内容也可以爬取收录。此外，在某些情况下，DOM 甚至可能优先于 HTML 源代码语句。虽然这需要更多的工作，但这是我们的几个测试之一。

　　简介：Google 执行 JavaScript 并读取 DOM

　　早在 2008 年，Google 就成功抓取了 JavaScript，但可能仅限于某种方式。

　　而今天，很明显，Google 不仅可以制定他们的抓取和 收录 JavaScript 类型，而且在呈现整个网页方面也取得了重大进展（尤其是在过去的 12 到 18 个月内）。

　　在 Merkle，我们的 SEO 技术团队希望更好地了解 Google 爬虫可以抓取哪些类型的 JavaScript 事件以及收录。经过研究，我们发现了令人大开眼界的结果，并确认Google不仅可以执行各种JavaScript事件，还可以收录动态生成内容。怎么做？ Google 可以读取 DOM。

　　什么是 DOM？

　　很多从事 SEO 的人不了解什么是文档对象模型 (DOM)。

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

　　在 Web 浏览器中使用时，DOM 本质上是一个应用程序接口或 API，用于标记和构建数据（例如 HTML 和 XML）。该接口允许 Web 浏览器将它们组合成一个文档。

　　DOM 还定义了如何获取和操作结构。尽管 DOM 是一种独立于语言的 API（不依赖于特定的编程语言或库），但它通常用于 Web 应用程序中的 JavaScript 和动态内容。

　　DOM 代表接口或“桥”，将网页与编程语言连接起来。解析 HTML 并执行 JavaScript 的结果就是 DOM。网页的内容不仅（不仅）是源代码，而且是 DOM。这使它变得非常重要。

　　JavaScript 如何通过 DOM 接口工作。

　　我们很高兴地发现 Google 可以读取 DOM，并且可以解析信号和动态插入的内容，例如标题标签、页面文本、标题标签和元注释（例如：rel = canonical）。您可以阅读完整的详细信息。

　　关于这一系列的测试和结果

　　因为想知道会爬取哪些JavaScript特性以及收录，我们分别针对谷歌爬虫创建了一系列测试。通过创建控件，确保可以独立理解 URL 活动。下面，让我们详细介绍一些有趣的测试结果。它们分为 5 类：

　　JavaScript 重定向

　　JavaScript 链接

　　动态插入内容

　　动态插入元数据和页面元素

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

　　示例：用于测试 Google 抓取工具理解 JavaScript 能力的页面。

　　1. JavaScript 重定向

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

　　结果：Google 很快跟踪了重定向。从收录 开始，它们被解释为 301 最终状态 URL，而不是 Google 收录 中的重定向 URL。

　　在随后的测试中，我们在权威网页上使用完全相同的内容来完成使用 JavaScript 重定向到同一站点的新页面。原创网址在 Google 热门查询的首页上排名。

　　结果：果然重定向被谷歌跟踪了，但是原来的页面不是收录。新的URL是收录，它立即被安排在同一个查询页面上的相同位置。这让我们感到惊讶。从排名的角度来看，JavaScript 重定向行为（有时）似乎与永久性 301 重定向非常相似。

　　下次，您的客户想要为他们的网站 完成 JavaScript 重定向操作，您可能不需要回答，或者回答：“请不要”。因为这好像有转职排名信号的关系。引用 Google 指南支持此结论：

　　使用 JavaScript 重定向用户可能是一种合法的做法。例如，如果您将登录用户重定向到内部页面，则可以使用 JavaScript 来完成此操作。在仔细检查 JavaScript 或其他重定向方法时，请确保您的网站遵循我们的指南并考虑其意图。请记住，将 301 重定向重定向到您的 网站 是最好的，但如果您无权访问您的 网站 服务器，则可以为此使用 JavaScript 重定向。

　　2. JavaScript 链接

　　我们使用多种编码方法测试了不同类型的 JS 链接。

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

　　示例：Google Work 页面上的语言选择下拉菜单。

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

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

　　对外部 href 键值对 (AVP) 进行操作，但在标记内 (“onClick”)

　　函数 href 内部 AVP("javascript: window.location")

　　在 a 标签外可用，但在 href 内调用 AVP("javascript: openlink()")

　　……

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

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

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

　　构造链接：我们知道谷歌可以执行JavaScript，但我们想确认他们是否可以读取代码中的变量。所以在这个测试中，我们连接了可以构造 URL 字符串的字符。

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

　　3.动态插入内容

　　显然，这些是要点：动态插入文本、图像、链接和导航。高质量的文本内容对于搜索引擎理解网页的主题和内容至关重要。在这个充满活力的网站时代，它的重要性是毋庸置疑的。

　　这些测试旨在检查在两种不同场景中动态插入文本的结果。

　　1. 测试搜索引擎是否可以统计动态插入的文本，文本来自页面的HTML源代码。

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

　　结果：两种情况都可以爬取文字和收录，页面根据内容排名。酷！

　　为了深入了解，我们测试了一个用 JavaScript 编写的客户端全局导航，导航中的链接是通过 document.writeIn 函数插入的，我们确信可以完全抓取和跟踪需要指出的是，谷歌可以解释网站使用AngularJS框架和HTML5 History API（pushState）构建，可以渲染和收录它，并且可以像传统静态网页一样排名。这就是不禁止 Google 爬虫获取外部文件和 JavaScript 的重要性，这可能也是 Google 将其从 Ajax Supporting SEO Guide 中删除的原因。当您可以简单地呈现整个页面时，谁需要 HTML 快照？

　　经过测试，发现无论是什么类型的内容，结果都是一样的。比如图片加载到DOM后，会被抓取，收录。我们甚至做了这样一个测试：通过动态生成结构数据并插入到 DOM 中来制作面包屑（面包屑导航）。结果？成功插入后的面包屑出现在搜索结果中（搜索引擎结果页面）。

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

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

　　我们将各种对 SEO 至关重要的标签动态插入到 DOM 中：

　　标题元素

　　元描述

　　元机器人

　　规范标签

　　结果：在所有情况下，标签都可以被抓取并表现得像 HTML 源代码中的元素。

　　一个有趣的补充实验可以帮助我们理解优先级的顺序。当出现相互矛盾的信号时，哪一个会获胜？如果源代码中没有index，nofollow标签，DOM中没有index，follow标签，会发生什么？在这个协议中，HTTP x-robots 响应头如何作为另一个变量使用行为？这将是未来全面测试的一部分。但是，我们的测试表明，当发生冲突时，Google 会忽略源代码中的标签并支持 DOM。

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

　　我们想测试 Google 如何响应出现在源代码和 DOM 链接级别的 nofollow 属性。我们还创建了一个没有应用 nofollow 的控件。

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

　　源代码中的nofollow按我们的预期工作（没有遵循链接）。 DOM中的nofollow无效（跟随链接，页面为收录）。为什么？因为修改 DOM 中的 href 元素的操作发生得太晚了：Google 在执行添加 rel="nofollow" 的 JavaScript 函数之前就准备抓取链接和 URL 队列。但是，如果在 DOM 中插入一个 href="nofollow" 的元素，nofollow 和链接将被跟踪，因为它们是同时插入的。

　　结果

　　从历史的角度来看，各种 SEO 建议都尽可能关注“纯文本”内容。动态生成的内容、AJAX 和 JavaScript 链接会损害主流搜索引擎的 SEO。显然，这对谷歌来说不再是问题。 JavaScript 链接的操作方式类似于普通的 HTML 链接（这只是表面，我们不知道程序在幕后做了什么）。

　　JavaScript 重定向的处理方式与 301 重定向类似。

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

　　Google 依赖于完全呈现页面和理解 DOM，而不仅仅是源代码。太不可思议了！ （请记住允许 Google 抓取工具获取这些外部文件和 JavaScript。）

　　Google 已经以惊人的速度在创新方面将其他搜索引擎甩在了后面。我们希望在其他搜索引擎中看到相同类型的创新。如果他们要在新的网络时代保持竞争力并取得实质性进展，就意味着他们必须更好地支持 HTML5、JavaScript 和 dynamic网站。

　　对于SEO来说，不了解以上基本概念和谷歌技术的人应该学习学习，跟上当前的技术。如果你不考虑 DOM，你可能会失去一半的份额。

　　申请创业报告，分享创业好点子。点击这里一起讨论创业的新机会！