站群域名批发:使用JavaScript发布内容？ 这是通过桌面和移动设备查看渲染的HTML的6种方法

Google在呈现JavaScript方面已经走了很长一段路。 随着越来越多地使用各种JavaScript框架发布内容，确保Google可以准确呈现页面上的所有内容至关重要。 如果由于某种原因Google无法准确呈现您的页面，则其中的某些内容可能未编入索引。 在最坏的情况下，您主要内容的重要部分将不会被索引。

首先，如果您不熟悉Google呈现JavaScript的方式，那么来自Google的Martin Splitt的此视频片段可以很好地进行总结（视频中的10:46）。 Google会对页面进行爬网，然后将页面发送到处理器以进行渲染。 当找到的链接传递回搜寻器进行发现时，会对静态HTML编制索引。 处理器将页面插入Chrome（目前为41版），然后呈现内容，包括通过JavaScript发布的内容。 然后，对结果页面进行索引，同时将找到的所有其他链接传递回搜寻器进行发现。

因此，有两种分阶段的方法来索引基于JavaScript的内容：

除了呈现的HTML中的内容差异之外，您可能还会发现重要的指令丢失或已移至代码中的新位置。 我最近写了一个案例研究，其中meta robots标签正在代码中向下移动1000行，并从头到文档的正文。 吓人吧？

对于网站所有者和SEO，这就是测试页面以确保正确显示所有重要内容至关重要的原因。 不幸的是，在过去几年中为许多公司提供帮助的同时，我注意到其中许多公司并不了解查看呈现的HTML的最佳方法。 他们只是在当前版本的Chrome中查看了自己的页面，也许爬了他们的网站（未启用JavaScript渲染），并认为一切都很好。 不幸的是，这留下了很多错误的余地。 同样，在最坏的情况下，网站最终可能会呈现大量内容无法渲染的情况。

因此测试非常非常重要。

这就是为什么我决定写这篇文章的原因。 在下面，我将介绍六种查看页面呈现的HTML的方法。 重点将放在Google自己的工具上，但最后我还将介绍一些第三方工具。

1. GSC中的URL检查工具

Google Search Console（GSC）提供了使用Googlebot桌面和适用于智能手机的Googlebot通过“ Google抓取方式”工具（在旧版GSC中）长时间呈现网页的功能。 效果很好，但是Google最近推出了功能更强大的新工具– URL Inspection Tool。

URL检查工具提供了有关您站点上URL的大量信息，包括是否对它们进行了索引，是否存在任何可能引起索引问题的问题，规范化信息，查看呈现的HTML的能力等等。

正如您可能在最后一句话中所看到的，您可以查看所测试页面的渲染HTML。 如果您单击“查看抓取的页面”，则会在右侧看到三个标签。 这些选项卡包含Google在索引编制过程中到目前为止页面所具有的HTML。

理解这一点很重要，因为它可以包含静态HTML或呈现的HTML，具体取决于要花多长时间才能完全处理它。 在测试该工具时，我很快注意到了这一点，并对Google的John Mueller和Martin Splitt进行了ping操作。 我还在纽约Google总部的SEO聚会期间亲自向他们问了这个问题。 这是我的推文：

第二个选项卡包含渲染页面的屏幕截图（仅当通过“ test live URL”按钮测试实时URL时）。 在理想的环境中，您的渲染将看起来准确且不会丢失关键内容。 但是，我们并不是一个完美的世界。 不幸的是，有时屏幕截图无**确反映您渲染的页面。 这可能是由于渲染问题，也可能是因为检查工具正在超时。 这就是为什么检查渲染的HTML代码以查看内容是否存在（而不仅仅是依靠屏幕截图）很重要的原因。

关于工具超时，谷歌的约翰·穆勒（John Mueller）解释说可以，因为谷歌的实际渲染系统通常会缓存资源并具有更长的超时时间。 因此，在使用URL检查工具时，请记住这一点。 我知道对此有很多困惑。 这是约翰·穆勒（John Mueller）解释的视频（视频中43:35）：

第三个选项卡包含有关URL的有用信息，例如响应代码，无法加载的页面资源，然后是JavaScript控制台消息（您可以在其中查看错误和警告）。

关于Googlebot用户代理的重要说明：首次推出URL检查工具时，您可以从该工具中查看桌面渲染和移动渲染。 由于某种原因，这种情况不久后发生了变化，该工具仅使您能够通过适合当前索引状态的用户代理来查看呈现的HTML。 例如，如果您已移至移动优先索引，则只能通过Googlebot for Smartphones查看渲染的HTML和屏幕截图。 而且，如果您尚未移至移动优先索引，那么您将看到桌面渲染。

URL检查工具最初显示了桌面和移动渲染：

我特别要求URL检查工具提供双重渲染功能，约翰·穆勒（John Mueller）说，他将为此对GSC产品小组进行检查。 但是不能保证会回来。 不过我很希望。

2.行动装置相容性测试（MFT）

查看页面呈现的HTML的下一种方法是通过Google的移动设备友好测试。 该工具将使用适用于智能手机的Googlebot渲染页面，为您显示渲染页面的屏幕截图，并提供页面的渲染HTML代码。

此外，您可以查看未正确加载的页面资源以及带有警告和错误的JavaScript控制台（就像URL检查工具一样）。

注意：如果您确实想深入研究渲染的代码，则应将适合移动设备的测试中的HTML**并粘贴到第三方文本编辑器中。 在工具本身中使用代码有点麻烦。

3.丰富的结果测试

根据我到目前为止介绍的前两种方法，您应该已经注意到一个共同的主题。 渲染主要集中在移动设备而非台式机上。 当然，我们现在生活在一个移动世界中，这应该成为焦点，但是您仍然应该仔细检查桌面渲染！ 同样，URL检查工具将仅显示尚未移至移动优先索引的网站的桌面渲染和屏幕截图。

那么，网站所有者要做什么？

好的，Google已经为您提供了服务，但没有在您认为会的位置提供。 许多人不知道这一点，但是您可以使用Rich Results Test来基于Googlebot桌面查看渲染的HTML！ Google员工以前曾提到过这一点，但我发现许多人仍然对此一无所知。

测试URL之后，您可以查看呈现的HTML，页面加载问题以及包含警告和错误的JavaScript控制台。 请记住，这是桌面渲染，而不是移动渲染。 该工具将向您显示用于渲染的用户代理是Googlebot桌面。

额外的方法：Chrome，搜寻器和插件：当您要查看页面的渲染HTML时，我将从Google的工具开始（如上所述）。 但这并不意味着它们是检查渲染页面的唯一方法。 在Chrome，第三方抓取工具和某些插件之间，您的SEO工具库中还有其他几种渲染武器。

我在这里不会做过多的详细介绍（这篇文章已经很久了），但是我确实想至少提及它们。

4.爬虫-批量渲染

我上面介绍的方法非常适合检查特定的URL，但是当您要批量检查呈现时会发生什么？ 例如，也许您正在抓取具有10K，50K或500K页面的网站，并希望检查渲染的HTML与静态的HTML。

好吧，这就是爬网工具非常方便的地方。 我之前已经在这里介绍了我最喜欢的爬网工具，并且需要注意的是，每个工具都可以在爬网期间呈现JavaScript。 例如，DeepCrawl（我在客户咨询委员会的位置），Screaming Frog和Sitebulb均提供JavaScript渲染功能。

在DeepCrawl中设置抓取时，请确保选中“启用JavaScript渲染：”

对于“尖叫的青蛙”，请使用“蜘蛛配置”选项中“渲染”选项卡中的下拉列表：

此外，Screaming Frog使您可以查看所抓取的每个页面的渲染屏幕截图，并将渲染的HTML与静态HTML进行比较：

而且Sitebulb提供了相同类型的功能（JavaScript爬网具有比较呈现的HTML与静态HTML并查看屏幕截图的能力。Sitebulb还突出显示了差异）：

5. Chrome开发工具–检查元素

有时，您只想在查看页面时快速查看呈现的HTML。 无需启动工具或爬网站点。 使用Chrome开发工具（在Chrome中包含很多功能）时，您可以轻松检查页面并查看呈现的HTML。 这是查看渲染代码的快速方法。

6. Chrome插件–查看渲染的源

最后，但并非最不重要的，是由乔恩·霍格一记漂亮的Chrome插件叫视图中呈现源，使您可以查看静态的HTML和呈现的HTML并排侧两者。 它不仅向您显示了静态代码和渲染代码，而且还将突出显示差异！ 因此，如果某些事情看起来不正确，并且您想仔细检查差异，那么此插件绝对可以帮助您。 我经常使用它。

渲染完成-一些结束语和提示

以下站群域名批发是一些关闭提示，以确保您从渲染的角度覆盖基础知识：

• 确保检查渲染的HTML，以确保您的主要内容正确存在于代码中。 在当前版本的Chrome浏览器中，页面不要看上去很漂亮，但是Google渲染后找不到重要的内容。 并检查移动和桌面渲染。
• 检查通过meta robots标签传递的重要指令。 我解释了我写的一个案例研究，其中使用noindex的meta robots标签在代码中向下移动了1000行。 确保您的指令没有发生类似奇怪的事情。 从SEO角度来看，这可能会对您的网站产生巨大影响。
• 确保在渲染的HTML中正确设置了rel canonical。 哎呀，确保它仍然在代码中！ 再次，我看到呈现的HTML中的代码片段发生了一些疯狂的事情。 当然，您不想破坏规范的URL标记。
• 检查结构化数据以确保所呈现的代码正确，包含所有必要的标记等。结构化数据是可以轻易忽略的那些项之一。
• 检查您的导航和内部链接，以确保您没有在呈现的HTML中删除链接。 内部链接非常重要，因为它们为Google（和人类）提供了一种在您的网站上查找其他内容的方式。 它们还为Google提供了有关链接另一端将要找到的内容的上下文。
• 如果您要针对不同的语言和国家/地区，请确保检查呈现的HTML中的hreflang标签。 我已经看到hreflang标记丢失或在呈现的HTML中中断。 并确保在整个群集中包含的每个页面上都提供了整个hreflang群集。
• 确保以渲染的HTML格式查看图像，尤其是在图像搜索对您很重要的情况下。 仔细检查图像代码，替代文本，标题属性和标题（如果正在使用它们）。 不要简单地在最新版本的Chrome中检查您的页面，并认为一切正常。 绝对在移动设备和桌面设备上查看呈现的HTML。

摘要–呈现页面的方法不止一种

阅读本文后，希望您已准备好使用多种工具来呈现页面。 如前所述，测试您的网页以确保您的内容显示在呈现的HTML中至关重要。 然后还有其他一些肉眼不可见的元素也需要检查。 例如，元机器人标签，相关规范，结构化数据，hreflang标签等。 通过使用Google自己的工具以及我在本文结尾处提到的第三方工具，您可以从JavaScript渲染的角度介绍基础知识。 那只能帮助您进行自然搜索。 所以渲染！

本文中表达的观点是来宾作者的观点，不一定是Search Engine Land。 工作人员作者在此处列出。