撰稿人Maria Cieslak深入研究了JavaScript以及与之相关的一些混乱，并编写了一份详细的清单，您可以将其作为深入分析的起点。

在过去的20年中，Google的搜索引擎发生了很大变化。如果我们从整体上看技术和网络开发，我们可以看到变化的步伐非常壮观。

1998年的这个网站提供的信息丰富，诊断JavaScript动力网站技术审查的优先事项，但不是非常有吸引力或易于使用：

现代网站不仅看起来好多了，而且还配备了强大的功能，例如推送通知，部分离线工作和眨眼之间加载。

但是如果我们想要准确，我们应该使用术语“应用程序”而不是“网站”，因为网站是互动的，动态的并且使用JavaScript构建。

JavaScript作为游戏改变者

Google最长时间无法执行JavaScript，但到2015年该公司在处理JavaScript方面迈出了巨大的一步。

需要强调的是，搜索引擎的发展速度远远低于网络开发领域的发展速度，这可能是谷歌仍然是唯一可以执行JavaScript的搜索引擎的原因。

一开始，当万维网由仅由静态超文本标记语言（HTML）构成的网站构建时，Google有一项简单的任务来完成：

向服务器发出请求→获取静态HTML响应→为页面编制索引

我知道这是对这个过程的超简单描述，但是我想要展示处理网站与当今处理网站之间的差异。

当开发人员开始使用JavaScript（JS）在网站上添加交互性时，问题就出现了，然后当Javascript用于创建整个网站时，对JavaScript的依赖性变得更大时，问题就会加剧。

JavaScript应用程序和网站是Google的挑战，因为在向服务器发送初始请求后，Googlebot会收到一个空的或几乎为空的HTML文件。JS执行后会添加内容，图片和链接。

Google通过尝试渲染他们访问的几乎所有页面来解决这个问题。所以现在，这个过程看起来或多或少像这样：

向服务器发出请求→获取静态HTML响应→将其发送到索引器→渲染页面→ 
索引并将提取的链接发送到Googlebot→Googlebot可以抓取下一页。

由于JavaScript的执行在抓取，渲染和索引过程中增加了很多低效率和延迟，因为：

•  Googlebot的抓取速度变慢了。它没有在JS网站的源代码中看到超链接，所以它需要等待索引器呈现页面，然后将提取的URL发回。
•  执行JavaScript需要很多资源。甚至对于Google的数据中心来说，这也令人筋疲力尽。

尽管存在这些障碍，但我们需要为开发动态JS应用程序的繁荣做好准备，因为对React，Vue.js或Angular等开放源代码框架的兴趣持续高涨。越来越多的网站将使用JavaScript构建。所以作为优化，我们需要能够发现使用它的网站上的问题。

正确的做法

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

A.问题的严重程度如何？

我们需要理解并明确界定使用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和优化（优化）问题时真正的恶棍。

C.谷歌有什么限制？

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

Google的工程师Eric Bidelman证实他们知道Google与JS的限制。根据非官方声明，我们预计Chrome 41将在2018年底更新为更新版本。

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

处理资源

超时是使JS和优化难以匹配的下一件事。

JavaScript应用通常非常繁重，Google资源有限。想象一下，在JavaScript的情况下，Google需要渲染每个页面才能看到内容。下面的例子显示了多重的JS执行。

如果你有一个JS文件和一个大小相同的图像文件，你会发现解析大约需要2秒，而执行JavaScript大约需要1.5秒。

Google需要合理管理其处理资源，因为它需要处理大量的数据。万维网由10亿多个网站组成，并且每天都在增长。下面的图表显示，过去五年中，桌面版网页的中值大小几乎增加了100％。移动版网站的适当指标增加了250％！

JavaScript网站的自然结果是对这些网站的抓取，索引和最终排名的延迟。

准备和有用的资源

从事技术优化的优化们需要注意细节。在JavaScript网站的情况下，我们需要为需要解决的棘手问题做好准备，并且我们必须了解我们不能总是依靠共同的和众所周知的规则。

Google知道优化和开发者在理解搜索行为方面存在问题，他们正试图帮助我们。以下是来自Google的一些资源，您应该遵循并检查以帮助解决您可能遇到的任何JS问题：

• 网站趋势分析师约翰穆勒。
• 网站管理员趋势分析师Gary IIIyes
• 工程师Eric BideIman
• Google搜索论坛中的JavaScript网站。
• 视频：与John Mueller合作的“ 现代网站的 优化最佳实践和要求 ”。
• 视频片段：来自Google I / O 2018的“提供适合搜索的JavaScript网站”。

诊断JavaScript引发的网站问题

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

Google看到了什么？

三年前，谷歌宣布它能够呈现和理解像现代浏览器这样的网站。但是，如果我们查看关于呈现JS网站的文章和评论，您会注意到它们包含许多警示词，如“可能”，“一般”和“并非总是”。

这应该强调一个事实，即虽然Google在JS执行中越来越好，但它仍然有很大的改进空间。

源代码与DOM

源代码是Googlebot在进入页面后看到的内容。这是没有将JS集成到代码中的原始HTML。请注意一个重要的事实，即Googlebot不会呈现网页。

Googlebot是一个抓取工具，所以它的工作是浏览页面，从源代码中提取元素并将它们发送给索引器。文档对象模型（DOM）是网站的渲染版本，它意味着原始HTML被JavaScript改变了，结构化和组织化。

“检查元素”显示文档对象模型。渲染是通过Web Rendering服务完成的，该服务是Google Indexer的一部分。请牢记以下几点：

• 抓取时将原始HTML考虑在内。
• 索引时会考虑DOM。

JavaScript网站以两种方式编入索引，这使得索引的整个过程完全不同：

• 第一波：Google仅提取元数据并根据此信息为网址编制索引。
• 第二次浪潮：如果Google有足够的资源，它会呈现页面以查看内容。它可以重新编制页面并加入这两个数据源。

请记住，在第二次索引浪潮中，Google不会更新最初索引的元素（如果它们被JavaScript更改）。如果您使用JavaScript添加rel =“canonical”标记，Google不会收到它。

然而，最近John Mueller表示，如果Google在页面呈现过程中陷入困境，则可能会使用原始HTML进行索引。

即使您看到特定的网址已编入索引，但并不表示索引器已发现该内容。我知道这可能会让人困惑，所以这里有一个小小的备忘单：

1. 要查看发送到Googlebot的HTML，请转到Google Search Console并使用提取和呈现工具。在这里你可以访问原始的HTTP响应。
2. 要查看页面的渲染版本，还可以使用“提取和渲染”工具。
3. 要查看桌面设备的WRS构建的DOM ，请使用Rich Results Test。对于移动设备，请使用Moblie-Friendly测试。

谷歌正式确认，我们可以依靠这两种方法来检查谷歌“看到”网站的方式：

和

将源代码与DOM进行比较

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

在第一步中，根据可索引性对它们进行比较，并检查源代码是否包含：

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

然后看看它们是否符合网站的渲染版本。

要发现差异，您可以使用Diff Checker这样的工具，它可以比较两个文件之间的文本差异。

使用Diff Checker，从Google Search Console获取原始超文本传输协议（HTTP）响应，并将其与上面第3点提到的工具（丰富结果测试和移动友好测试）中的DOM进行比较。

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

Googlebot不会滚动

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

JavaScript允许在用户交互之后加载额外的内容，链接和图像。Googlebot不会滚动或点击，因此如果某件事需要显示某项操作，Google就不会发现该操作。

两波索引及其后果

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

Google如何看待您的网站？

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

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

谷歌正式表示Chrome 41支持获取和渲染工具，因此最好下载并安装该浏览器的完全版本。

一旦安装在个人计算机（PC）上，您可以与网站进行一点点交互，导航到其他部分并检查由JavaScript触发的控制台中的错误。Mobile-Friendly测试中的一项新功能还可以在JavaScript控制台中查看JavaScript的错误。

我想提一些常见的和微不足道的错误来避免：

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

内部链接

内部链接是使网站可抓取的唯一途径。由于JavaScript网站的源代码（一般而言）不包含链接，因此整个爬网过程被延迟。Googlebot需要等待Indexer呈现网页并将发现的链接发回。

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

分析超级菜单时要小心。有时候，它们充满了对于优化并不总是有益的奇特功能。以下是John Mueller关于如何查看导航是否适用于Google的提示：

还要注意“加载更多”分页和无限滚动。这些元素也很棘手。它们以平稳的方式加载额外的内容，但是它发生在与网站交互之后，这意味着我们不会在DOM中找到内容。

在Google I / O会议上，Tom Greenway提到了两个可接受的解决方案：您可以预先加载这些链接并通过CSS隐藏它们，或者您可以为后续页面提供标准超链接，以便按钮需要链接到单独的URL序列中的下一个内容。

下一个重要元素是嵌入内部链接的方法。Googlebot只遵循标准的超链接，这意味着您需要在代码中看到类似这样的链接：（没有间隔）

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

如果您看到OnClick链接，它们看起来像这样并且不会被发现。

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

网址 - 干净和独特

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

很多时候，JS支持的网站在URL中使用hashtag。谷歌已经明确表示，在大多数情况下，抓取工具不会发现这种类型的URL。

在分析网站时，请检查以确保结构不是通过以下网址构建的：

Google网址中的＃号后面的所有内容都将被剪切并忽略，因此内容将不会被编入索引！

超时

没有人喜欢渲染延迟，甚至谷歌。据说Google最多等待5秒钟才能获得并执行JavaScript（请注意，5秒规则基于观察结果，并未经Google确认）。我认为Google必须限制执行的最长时间，因为渲染是非常耗费资源的过程。

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

在JavaScript网站的情况下，您需要等待一段时间才能加载其他元素，甚至整个部分。装载机显示将出现新的东西：

如果JavaScript按时执行，则Web呈现服务可以正确呈现页面，并且可以使用JavaScript为内容加载索引。但是，如果我们查看搜索结果，则会看到加载器已编入索引。啊!

我们如何发现这些问题？我们可以使用Screaming Frog等工具抓取网站，延迟时间设置为5秒。在渲染模式下，您可以看到渲染版本是否一切正常。

不要依赖于检查提取和渲染工具中的延迟。它可以等待2分钟的JavaScript，所以它比Google的Indexer更耐心。

John Mueller建议我们检查一下Google是否能够在移动友好测试中及时提供网页，如果网站能够正常工作，那么索引应该没问题。

在分析网站的同时，看看网站是否实现了像加载程序那样的人为延迟，这迫使等待内容交付：

没有理由设定类似的元素; 它在索引不可发现的内容方面可能具有显着的效果。

索引

如果内容未被编入索引，您将无法获得任何内容。这是检查和诊断最简单的因素，也是最重要的！

使用site：domain.com命令

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

网站：域名“来自您网站的几行内容”

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

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

延迟加载图像

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

如果您的图片缓慢加载，请向您正在提供的图片添加标记，以便在JavaScript关闭时显示图片。

让Google可以发现懒惰内容的第二个选项是结构化数据：

包起来

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

本文旨在成为深入分析的起点。每个网站都是不同的，当你考虑独特的框架和个人开发人员的创造力时，不可能仅仅通过检查清单来结束审计。