诊断基于JavaScript的网站的优先级

正确的方法

在开始更深入地研究JavaScript和与之相关的一些混乱之前，让我们看一下三个方面，这些方面将调整我们分析网站的方法：

答：问题的规模是多少？

我们需要了解并明确描述使用JavaScript构建的网站（应用程序）（例如单页应用程序（SPA））和对JavaScript的部分依赖关系。 以下是一些可能的情况，以及如何分辨SPA构建的内容和部分依赖关系：

• 没有JavaScript依赖项。 访问我们的网站并在浏览器中关闭JS-没什么改变。
• 部分JS依赖关系。 访问Angular.io网站并在浏览器中关闭JS，主导航不起作用（但是链接在文档对象模型[DOM]中可用，我将在后面讨论）。
• 有意义的JS依赖关系。 访问AutoZone并关闭JS —主导航可能不起作用，并且链接可能在DOM中不可用。
• 完整的JS依赖关系。 访问YouTube，关闭JS，然后注意所有内容都消失了！

您可能已经猜到，如果您对JavaScript有部分依赖性，那么解决的问题就更少了。

B.网站建在哪里？

静态HTML网站建立在您的服务器上。 在收到Googlebot（以及用户）的初始请求后，它会收到一个静态页面作为响应。

动态Web应用程序（DWA）内置在浏览器中，因此在发出初始请求后，我们会收到一个空的或几乎空的HTML文件，并且使用JavaScript以异步方式加载内容。 从更大的角度来看，当涉及到JS和搜索引擎优化（SEO）的问题时，我们可以假定客户端渲染是真正的坏蛋。

C. Google有什么限制？

不久前，谷歌透露了它是如何渲染网站的：共享的网络渲染服务（WRS）负责渲染页面。 它们的背后是无头浏览器，该浏览器基于Chrome 41于2015年推出，因此有点过时了。 Google使用使用了三年的浏览器这一事实对呈现现代Web应用程序具有真正的影响，因为它不支持现代应用程序使用的所有当前功能。

Google的工程师Eric Bidelman确认他们知道Google对JS的限制。 根据非官方的说法，我们可以预期Chrome 41会在2018年底更新到最新版本。

要深入了解受支持和不受支持的内容，请访问Caniuse.com，并将Chrome 41与最新版本的Chrome进行比较。 列表很长：

处理资源

超时是导致JS和SEO难以匹敌的下一件事。

JavaScript应用程序通常非常沉重，并且Google资源有限。 想象一下，就JavaScript而言，Google需要渲染每个页面才能看到内容。 下面的示例显示了JS执行的繁重程度。

如果您具有相同大小的JS文件和图像文件，则将看到解析大约需要2秒钟，然后执行JavaScript大约需要1.5秒。

Google需要处理大量数据，因此需要合理地管理其处理资源。 万维网由十亿多个网站组成，并且每天都在增长。 下图显示，过去五年中，桌面版页面的中位尺寸增长了近100％。 网站移动版本的适当指标增加了250％！

JavaScript网站的自然后果是延迟了这些网站的爬网，索引和排名。

准备和有用的资源

从事技术SEO的SEO必须注意细节。 就JavaScript网站而言，我们需要为需要解决的棘手问题做好准备，并且我们必须了解，我们不能总是依赖于通用和众所周知的规则。

Google知道SEO和开发人员在理解搜索行为时遇到了问题，他们正在努力为我们提供帮助。 以下是Google提供的一些资源，您应该遵循这些资源并进行检查，以帮助解决您可能遇到的任何JS问题：

• 网站管理员趋势分析师约翰·穆勒（John Mueller）。
• 网站管理员趋势分析师Gary Illyes。
• 工程师Eric Bidelman。
• Google搜索论坛中的JavaScript网站。
• 视频：John Mueller提供的“ SEO最佳实践和现代网站要求”。
• 视频片段：来自Google I / O 2018的“提供易于搜索的JavaScript网站”。

诊断JavaScript驱动的网站问题

现在我们知道了Google的局限性，让我们尝试在JavaScript网站上发现一些问题并寻找解决方法。

Google看到了什么？

三年前，谷歌宣布能够渲染和理解现代浏览器之类的网站。 但是，如果我们查看渲染JS网站上的文章和评论，您会发现它们包含许多警告性词，例如：“可能”，“一般”和“并非总是”。

这应该强调一个事实，尽管Google在JS执行方面越来越好，但仍有很大的改进空间。

源代码与DOM

源代码是Googlebot进入页面后看到的内容。 这是未将JS集成到代码中的原始HTML。 要记住的重要一件事是Googlebot不呈现页面。

Googlebot是搜寻器，因此它的工作是浏览页面，从源代码中提取元素并将其发送到索引器。 文档对象模型（DOM）是网站的呈现版本，这意味着原始HTML已通过JavaScript进行了更改，结构化和组织化。

“检查元素”显示文档对象模型。 渲染由Web渲染服务完成，该服务是Google索引器的一部分。 这里有一些重要的注意事项：

• 爬网时会考虑原始HTML。
• 索引时会考虑DOM。

JavaScript网站分为两波编入索引，这使整个索引编制过程变得截然不同：

• 第一波：Google仅提取元数据并根据此信息对URL进行索引。
• 第二波：如果Google有备用资源，它将渲染页面以查看内容。 它可以为页面重新索引并合并这两个数据源。

请记住，在第二次索引编制浪潮中，如果原始索引元素已被JavaScript更改，则Google不会更新它们。 如果您在JavaScript中添加rel =“ canonical”标签，则Google不会将其提取。

但是，最近约翰·穆勒（John Mueller）表示，如果Google在呈现页面时卡住，则可能会使用原始HTML进行索引。

即使您看到一个特定的URL已被索引，也不意味着该内容是由索引器发现的。 我知道这可能会令人困惑，所以这里有一个小备忘单：

1. 要查看发送到Googlebot的HTML，请转至Google Search Console并使用“提取并渲染”工具。 在这里，您可以访问原始HTTP响应。
2. 要查看页面的渲染版本，您也可以使用“获取并渲染”工具。
3. 要查看由Web渲染服务（WRS）为台式机设备构建的DOM，请使用Rich Results Test。 对于移动设备，请使用“移动设备友好”测试。

Google正式确认，我们可以依靠以下两种方法来检查Google如何“查看”网站：

和

比较源代码和DOM

现在，该分析代码和DOM了。

第一步，在可索引性方面比较它们，并检查源代码是否包含：

• 元机器人指令如索引规则。
• 规范标签。
• Hreflang标签。
• 元数据。

然后查看它们是否与网站的呈现版本兼容。

要发现差异，可以使用Diff Checker之类的工具，该工具将比较两个文件之间的文本差异。

使用Diff Checker，从Google Search Console获取原始超文本传输​​协议（HTTP）响应，并将其与上述第3点中提到的工具（Rich Results测试和Mobile-Friendly测试）与DOM进行比较。

JavaScript可能会修改某些元素，并且Google可能要遵循两个不同的说明。

Googlebot无法滚动

在查看DOM时，还值得验证依赖于单击，滚动和填写表单等事件的元素。

JavaScript允许在用户交互后加载其他内容，链接和图像。 Googlebot不会滚动或单击，因此，如果某些内容需要显示操作，则Google不会发现它。

两次索引编制及其后果

回到我之前提到的那两个浪潮，Google承认仅在第一波索引中才考虑元数据。 如果源代码不包含机器人指令，hreflangs或规范标签，则Google可能不会发现它们。

Google如何看待您的网站？

要检查Google如何查看您网站的渲染版本，请转到Google Search Console中的Google抓取方式工具，然后提供您要检查的网址，然后点击抓取并呈现。

对于复杂或动态的网站，仅验证网站的所有元素是否都位于其位置是不够的。

Google正式表示Chrome 41位于Fetch and Render工具的后面，因此最好下载并安装该浏览器的确切版本。

安装到个人计算机（PC）后，您可以与网站进行一些交互，导航到其他部分，并检查由JavaScript触发的控制台中的错误。 移动友好测试中的一项新功能还使得可以在JavaScript控制台中查看JavaScript错误。

我想提及一些常见和琐碎的错误，以避免：

• 在诊断渲染功能丰富的JavaScript的网站时，请不要查看Google的缓存。 它没有提供有意义的信息，因为缓存显示的是由您的浏览器呈现的Googlebot看到的RAW HTML。 JS网站的源代码仅包含几行代码，一些指向脚本的超链接。 实际内容在JavaScript执行后加载。
• 不要在robots.txt中阻止JavaScript资源; 它会阻止正确的渲染（我知道这很明显，但是仍然会发生）。

内部连结

内部链接是使网站可爬网的唯一方法。 由于JavaScript网站的源代码（通常）不包含链接，因此整个抓取过程会延迟。 Googlebot需要等待索引器呈现页面并将发现的链接发回。

诊断JS网站的关键要素是检查链接是否放置在DOM中。 源代码不必包含链接，但是如果DOM没有链接，则不会发现链接。 如果主导航是使用JavaScript构建的，这可能会产生巨大的影响。

分析大型菜单时要小心。 有时，它们充斥着一些花哨的功能，这些功能并不总是对SEO有利。 这是约翰·穆勒（John Mueller）提供的有关如何查看导航是否适用于Google的提示：

同时注意“更多加载”分页和无限滚动。 这些元素也很棘手。 他们以平滑的方式加载了其他内容，但是这些内容是在与网站互动之后发生的，这意味着我们不会在DOM中找到该内容。

在Google I / O会议上，汤姆·格林威（Tom Greenway）提到了两个可以解决此问题的解决方案：您可以预加载这些链接并通过CSS隐藏它们，或者可以提供指向后续页面的标准超链接，因此该按钮需要使用序列中的下一个内容。

下一个重要元素是嵌入内部链接的方法。 Googlebot仅遵循标准的超链接，这意味着您需要在代码中查看如下所示的链接：（不带空格）

<a href =“ http://www.domain.com”>文本< / a>

如果您看到的是OnClick链接，则它们看起来像这样，将不会被发现：

<div OnClick =” location.href =” http://www.domain.com”>文本</ div>

因此，在浏览源代码和DOM时，请始终检查以确保在内部链接上使用正确的方法。

网址-简洁而独特

为内容建立索引的基本规则是为每条内容提供干净且唯一的URL。

很多时候，基于JS的网站在URL中使用井号。 Google明确指出，在大多数情况下，搜寻器不会发现此类URL。

在分析网站时，请检查该结构不是使用以下URL构建的：

网址中#号之后的所有内容都会被Google修剪和忽略，因此不会为内容建立索引！

超时时间

没有人喜欢延迟渲染，即使是Google。 据说Google最多需要等待5秒才能获取并执行JavaScript（请注意，5秒规则是基于观察结果，尚未得到Google的确认）。 我认为Google必须限制执行的最长时间，因为渲染是一个非常消耗资源的过程。

不幸的是，诊断超时问题并不容易。 如果我们不能足够快地提供内容，则可能无法为内容建立索引。

对于JavaScript网站，您需要等待一段时间才能加载其他元素，甚至整个部分。 加载程序显示将出现一些新内容：

如果按时执行JavaScript，则Web呈现服务可以正确呈现页面，并且可以使用JavaScript索引内容。 但是，如果我们查看搜索结果，就会发现加载程序已建立索引。 啊!

我们如何发现这些问题？ 我们可以使用“尖叫青蛙”之类的工具来抓取网站，并将延迟设置为5秒。 在渲染模式下，您可以查看渲染版本是否一切正常。

不要依赖于“提取和渲染”工具中的检查延迟。 最多可能需要等待2分钟才能使用JavaScript，因此比Google的Indexer耐心得多。

约翰·穆勒（John Mueller）建议，我们可以检查Google是否在“移动友好”测试中按时呈现了该页面，并且该网站是否可以正常工作，因此可以进行索引。

在分析网站时，请查看网站是否实施了人为的延迟，例如加载程序，这会导致等待内容交付：

没有理由设置类似的元素; 在索引无法发现的内容方面可能会产生巨大的影响。

索引编制

如果内容未编入索引，您将一无所获。 这是最容易检查和诊断的元素，也是最重要的！

使用site：domain.com命令

检查索引最有用的方法是众所周知的查询：

网站：域“您网站上几行内容”

如果您搜索一些内容并在搜索结果中找到它，那就太好了！ 但是，如果找不到，请卷起袖子开始工作。 您需要找出为什么它没有被索引！

如果要进行复杂的索引分析，则需要检查域中可用的不同类型页面和不同部分中内容的各个部分。

延迟加载图像

Google表示加载“惰性”图像可能存在问题：

如果图像加载缓慢，请在您提供的图像上添加标记，如果关闭JavaScript，这些标记将变为可见。

使惰性内容可被Google发现的第二种选择是结构化数据：

包起来

不要将本文用作JS网站的唯一清单。 尽管这里有很多信息，但还不够。

本文旨在作为深入分析的起点。 每个网站都是不同的，并且当您考虑到独特的框架和开发人员的个人创造力时，不可能仅使用清单来完成审核。

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