BETWAY平台致力打造网络营销行业第一品牌
服务:SEO优化、SEM推广、网站建设、运营推广
bet资讯

当前位置:主页 > bet资讯 > 如何通过桌面和移动设备查看呈现HTML的6种方法

如何通过桌面和移动设备查看呈现HTML的6种方法

来源:bet dozu.com.cn发布时间:2019/03/07

始终使用Google自己的工具和第三方资源测试您的网页,以查看呈现的HTML,以确保您的所有内容都显示出来。
Google在渲染JavaScript方面取得了很大进展。随着各种JavaScript框架越来越多地用于发布内容,确保Google能够准确呈现页面上的所有内容至关重要。如果由于某种原因Google无法准确呈现您的网页,则可能无法将某些内容编入索引。在最糟糕的情况下,主要内容的重要部分将不会被编入索引。
编入索引图示
首先,如果您不熟悉Google如何呈现JavaScript,那么来自Google的Martin Splitt的视频片段可以很好地总结(在视频中的10:46)。Google抓取页面并将页面发送到处理器进行渲染。静态HTML被索引,而找到的链接将传递回爬虫以进行发现。处理器将页面插入Chrome(截至目前版本41)并呈现内容,包括通过JavaScript发布的内容。然后,对结果页面建立索引,同时将找到的任何其他链接传递回爬网程序以进行发现。
因此,有一个两阶段的方法来索引基于JavaScript的内容:
除了呈现的HTML中的内容差异之外,您可能会发现缺少重要的指令,或者已移至代码中的新位置。我最近写了一个案例研究,其中元机器人标签在代码中移动了一千行,从头部移动到文档的正文中。可怕,对吧?
对于网站所有者和SEO,这就是为什么测试您的网页以确保正确呈现所有重要内容非常重要的原因。不幸的是,在过去几年帮助许多公司的同时,我注意到他们中的许多人并不知道查看呈现的HTML的最佳方式。他们只是在当前版本的Chrome中查看他们的页面,可能会抓取他们的网站(没有JavaScript渲染),并认为一切都很好。不幸的是,这留下了很大的错误空间。而且,在最糟糕的情况下,网站最终可能会有大量内容未被呈现。
所以测试确实非常重要。
这就是我决定写这篇文章的原因。下面,我将介绍六种查看页面呈现HTML的方法。重点将放在谷歌自己的工具上,但最后我将介绍一些第三方工具。
1. GSC中的URL检查工具
Google Search Console(GSC)提供了使用Googlebot桌面和Googlebot for Smartphones通过Google提取工具(旧版GSC)长时间呈现网页的功能。这一点运作良好,但谷歌最近推出了一个功能更强大的新工具 - URL检测工具。URL检查工具提供了大量有关您网站上的URL的信息,包括它们是否被编入索引,是否存在可能导致索引问题的问题,规范化信息,查看呈现的HTML的能力等等。正如您可能在最后一句中找到的那样,您可以查看您测试的页面的呈现  HTML。如果单击“查看已爬网页面”,您将在右侧看到三个选项卡。这些标签包含Google 在索引编制过程中为该页面提供的HTML 。
这一点很重要,因为它可以包含静态HTML或呈现的HTML,具体取决于完全处理所花费的时间。在测试该工具时,我发现这很快,并且谷歌的John Mueller和Martin Splitt对此表示不满。在谷歌纽约总部举行的SEO聚会期间,我也亲自向他们提出了这个问题。
第二个选项卡包含呈现页面的屏幕截图(仅在通过“测试实时URL”按钮测试实时URL时)。在完美的世界中,您的渲染将看起来准确,并且不会丢失关键内容。但是,我们并不是一个完美的世界。不幸的是,截图不会准确反映您呈现的页面。这可能是由于渲染问题,或者可能是因为检查工具超时。这就是为什么检查呈现的HTML代码以查看内容是否存在(而不仅仅是依赖于屏幕截图)的重要性。
关于工具超时,Google的John Mueller已经解释说可以,因为Google的实际渲染系统通常会缓存资源并且具有更长的超时时间。因此,在使用URL检查工具时请记住这一点。我知道这有很多混乱。
第三个选项卡包含有关URL的有用信息,例如响应代码,无法加载的页面资源,然后是JavaScript控制台消息(您可以在其中查看错误和警告)。
关于Googlebot用户代理的重要说明:首次推出网址检查工具后,您可以在工具中查看桌面渲染和移动渲染。出于某种原因,这种情况很快就发生了变化,该工具只允许您通过适合当前索引状态的用户代理查看呈现的HTML 。例如,如果您已转移到移动优先索引,那么您将只能通过Googlebot for Smartphones查看呈现的HTML和屏幕截图。如果您尚未转移到移动优先索引,那么您将看到桌面渲染。
我已经在URL检查工具中特别要求提供双重渲染功能,而John Mueller已经表示他将对GSC产品团队进行ping操作。但是不能保证会回来。不过我很有希望。
2.移动友好测试(MFT)
查看页面呈现HTML的下一种方法是通过Google的移动友好测试。该工具将使用Googlebot for Smartphones呈现页面,显示呈现页面的屏幕截图,并提供页面的呈现HTML代码。
注意:如果您真的想深入了解渲染代码,那么您应该将HTML从适合移动设备的测试复制并粘贴到第三方文本编辑器中。使用工具本身的代码有点笨拙。
3.丰富的结果测试
根据我到目前为止所介绍的前两种方法,你应该注意到一个共同的主题。渲染主要集中在移动而非桌面。当然,我们现在生活在一个移动世界,这应该是焦点,但你仍然应该仔细检查桌面渲染!同样,URL检查工具仅显示尚未移动到移动优先索引的网站的桌面渲染和屏幕截图。
那么,网站所有者要做什么?
好吧,谷歌已经覆盖了你,但只是不在你想象的那个地方。许多人不知道这一点,但您可以使用Rich Results Test来查看基于Googlebot 桌面的呈现HTML !谷歌之前曾提到这一点,但我发现许多人仍然不知道。
测试URL后,您可以查看呈现的HTML,页面加载问题以及包含警告和错误的JavaScript控制台。请记住,这是桌面渲染,而不是移动。该工具将向您显示用于呈现的用户代理是Googlebot桌面。
奖励方法:Chrome,抓取工具和插件:当您想要查看网页的呈现HTML时,我会从Google的工具开始(如上所述)。但这并不意味着它们是检查渲染页面的唯一方法。在Chrome,第三方抓取工具和一些插件之间,您的SEO工具中还有几种渲染武器。
我不会在这里详细介绍(这篇文章已经很久了),但我确实想提到它们至少。
4.爬行器 - 批量渲染
我上面介绍的方法非常适合检查特定的URL,但是当您想要批量检查渲染时会发生什么?例如,您可能正在抓取具有10K,50K或500K页面的网站,并希望检查呈现与静态HTML。
好吧,这就是爬行工具非常方便的地方。我之前已经介绍了我最喜欢的抓取工具,重要的是要注意每个工具都能够在抓取过程中呈现JavaScript。例如,DeepCrawl(我在客户顾问委员会),Screaming Frog和Sitebulb都提供JavaScript渲染功能。
5. Chrome开发工具 - 检查元素
有时您只需要在检查页面时快速查看呈现的HTML。无需启动工具或抓取网站即可。当您使用Chrome开发工具(Chrome中包含大量功能)时,您可以轻松检查页面并查看呈现的HTML。这是查看呈现代码的快捷方式。
6. Chrome插件 - 查看渲染源
最后,但并非最不重要的,是一个漂亮的Chrome插件乔恩·霍格称为视图中呈现源,使您同时查看静态的HTML和呈现的HTML 并排侧。它不仅会向您显示静态和渲染的代码,还会突出显示差异!因此,如果某些内容看起来不正确,并且您想要仔细检查差异,那么这个插件应该绝对可以帮到您。我经常使用它。
渲染完成 - 一些结束说明和提示
以下是一些结束提示,以确保从渲染的角度来覆盖您的基础:
确保查看呈现的HTML以确保您的主要内容准确地出现在代码中。不要在当前版本的Chrome中页面看起来很棒,但Google在渲染后无法找到重要的内容。并检查移动和桌面渲染。
检查通过元机器人标签提供的重要指令。我解释了我写的一个案例研究,其中使用noindex的元机器人标签被移动了一千行代码。确保你的指令没有发生类似奇怪的事情。从SEO的角度来看,这可能会对您的网站产生巨大影响。
确保在呈现的HTML中正确设置了rel canonical。哎呀,确保它仍然存在于代码中!再一次,我看到渲染的HTML中的一些代码会发生一些疯狂的事情。并且您不希望破坏规范的URL标记,这是肯定的。
检查结构化数据以确保呈现的代码是准确的,包含所有必要的标记等。结构化数据是容易被忽视的项目之一。
检查导航和内部链接,确保您没有删除呈现的HTML中的链接。内部链接非常重要,因为它们为Google(和人类)提供了在您的网站上查找其他内容的方法。它们还为Google提供了在链接另一端可以找到的内容。
如果您要定位不同的语言和国家/地区,请务必检查呈现的HTML中的hreflang标记。我已经看到hreflang标签要么丢失,要么在呈现的HTML中断。并确保在群集中包含的每个页面上提供整个hreflang群集。
确保在渲染的HTML中查看图像,尤其是在图像搜索对您很重要的情况下。如果您正在使用它们,请仔细检查图像代码,替代文字,标题属性和标题。不要只是在最新版本的Chrome中查看您的页面,并认为一切正常。绝对检查移动和桌面上呈现的HTML。
总结 - 呈现页面的方法不止一种
阅读这篇文章之后,我希望您已准备好在多个工具中呈现您的页面。正如我在上面解释的那样,测试页面以确保您的内容在呈现的HTML中显示是至关重要的。然后还有肉眼看不见的其他元素也需要检查。例如,元机器人标签,rel规范,结构化数据,hreflang标签等。通过使用Google自己的工具以及我在本文末尾提到的第三方工具,您可以从JavaScript呈现角度介绍您的基础。这只能帮助您进行有机搜索工作。所以回去吧!
网站首页| sunbet | 关于bet | bet资讯 |

© 2009-2019 uedbet官网版权所有 地图

BETWAY宗旨:打造国内最大最专业的在线营销服务