谷歌在呈现JavaScript方面已经走过了很长一段路。随着各种JavaScript框架被越来越多地用于发布内容,确保谷歌能够准确地呈现页面上的所有内容是至关重要的。如果由于某些原因谷歌不能准确地呈现页面,那么其中一些内容可能没有被索引。在最坏的情况下,主要内容的重要部分将不会被索引。
首先,如果你不熟悉谷歌渲染JavaScript的方式,那么这个来自谷歌的Martin Splitt的视频片段可以很好地总结一下(在视频的10:46)。谷歌抓取页面并将页面发送到处理器进行呈现。静态HTML被建立索引,而找到的链接被传递回爬虫进行发现。处理器将页面插入Chrome(目前版本为41)并呈现内容,包括通过JavaScript发布的内容。然后,生成的页面被编入索引,而发现的任何其他链接都被传递回爬虫程序以供发现。
因此,有一种两阶段的方法来索引基于javascript的内容:
除了呈现的HTML中的内容差异之外,您可能会发现重要的指令丢失了,或者转移到了代码中的新位置。我最近写了一个案例研究,在这个案例中,meta robots标签在代码中移动了1000行代码,从文档的头部移到了文档的主体部分。可怕的,对吧?
对于站点所有者和seo来说,这就是为什么测试页面以确保所有重要内容都被正确呈现是极其重要的。不幸的是,在过去几年帮助了许多公司的同时,我注意到许多公司不知道查看呈现的HTML的最佳方式。他们只是在当前版本的Chrome中浏览他们的网页,也许是爬上他们的网站(没有使用JavaScript渲染),然后认为一切都很好。不幸的是,这为错误留下了很大的空间。同样,在最坏的情况下,一个站点最终可能会有大量内容没有呈现。
所以测试是非常非常重要的。
这就是我决定写这篇文章的原因。下面,我将介绍查看页面呈现的HTML的六种方法。本文的重点将是谷歌自己的工具,但最后我还将介绍一些第三方工具。
1. 网址检查工具在GSC
谷歌搜索控制台(GSC)通过Fetch作为谷歌工具(在旧的GSC中)提供了长期使用Googlebot桌面和智能手机的Googlebot渲染页面的能力。这个功能运行得很好,但是谷歌最近推出了一个功能更强大的新工具——URL检查工具。
URL检查工具提供了关于站点上URL的大量信息,包括它们是否建立了索引、是否存在任何可能导致索引问题的问题、规范化信息、查看呈现的HTML的能力等等。
正如您可能在最后一句话中看到的那样,您可以查看所测试页面的呈现的HTML。如果你点击“查看爬行页面”,你会看到右边的三个标签。这些选项卡包含到目前为止谷歌在索引过程中为页面提供的HTML。
理解这一点很重要,因为它可以包含静态HTML,也可以包含呈现的HTML,这取决于完全处理它所花费的时间。在测试该工具时,我很快就注意到了这一点,并询问了谷歌的John Mueller和Martin Splitt。在纽约谷歌总部的SEO会议上,我也亲自问了他们这个问题。以下是我的推特:
第二个选项卡包含呈现的页面的屏幕截图(仅当通过“test live URL”按钮测试实时URL时)。在一个完美的世界里,你的渲染看起来是准确的,不会丢失内容的关键部分。但是,我们并不是在一个完美的世界。不幸的是,截图有时不能准确地反映呈现的页面。这可能是由于渲染问题,也可能是因为检查工具超时了。这就是为什么检查呈现的HTML代码以查看内容是否存在(而不只是依赖于屏幕截图)很重要的原因。
关于工具超时,谷歌的John Mueller解释说这是可以的,因为谷歌实际的渲染系统通常会缓存资源并且超时时间更长。使用URL检查工具时请记住这一点。我知道大家对此有很多疑惑。以下是约翰·穆勒解释这一点的视频(在视频43:35):
第三个选项卡包含有关URL的有用信息,比如响应代码、无法加载的页面资源,以及JavaScript控制台消息(可以在其中查看错误和警告)。
关于Googlebot用户代理的重要提示:当URL检查工具首次推出时,您可以在该工具中同时查看桌面渲染和移动渲染。由于某种原因,这种情况很快发生了改变,该工具仅允许通过符合当前i的用户代理查看呈现的HTML