JavaScript看似无限的可能性，使得基于HTML和CSS的普通网站正在成为过去。但是，尽管JavaScript为用户提供了出色的动态体验，但它也为开发人员创建了一个雷区。正因为如此，JavaScript搜索引擎优化已成为不可忽视的事情。

javascript如何工作？

除HTML和CSS外，JavaScript是三种核心Web开发技术之一，HTML用于创建静态页面（意味着代码按原样显示在浏览器中，并且不能根据用户的操作进行更改），而JavaScript使网页变为动态页面。程序员可以在用户单击按钮或从下拉框中选择一个值时使用JavaScript来更改HTML标记的值和属性。JavaScript与HTML代码一起放置在页面上，并且与代码结合使用。

客户端和服务器端呈现

在讨论JavaScript时，我们需要提到两个概念，并且理解它们之间的差异：服务器端渲染和客户端渲染。

传统上，与静态HTML页面一样，代码在服务器上呈现（服务器端呈现）。在访问某个页面时，Googlebot会获取完整的准备好的内容，因此无需执行任何操作，只需下载CSS文件并在浏览器中显示信息即可。

另一方面，JavaScript通常运行在客户端机器上（客户端呈现），这意味着Googlebot最初获取的页面没有任何内容，然后JavaScript创建用于加载呈现的DOM（文档对象模型）内容。每当页面加载时都会发生这种情况。

很明显，如果Googlebot无法正确执行并呈现您的JavaScript，则无法看到您希望看到的页面和内容。而这正是JavaScript搜索引擎优化所带来的大部分问题。

如何避免这些问题？如何检查网站是否正确呈现？

让Googlebot正确呈现您的网站需要您专注于正确呈现网站上的链接和内容。如果您不提供链接，Googlebot将难以在您的网站上找到它的方式，如果您没有在网站上正确呈现内容，Googlebot将无法看到它。

这里有一些选项可以帮助你

1.网站：命令

首先，site：命令将显示Google目前为您的网站编制了多少页面，如果网站的很多页面还没有进入索引，那可能是内部链接出现问题的迹象。

其次，您可能需要检查JavaScript加载的内容本身是否已被Google索引。

要做到这一点，您需要找到一行文本，这些文本不会在您的初始HTML代码中显示，并且只在JavaScript执行后加载。之后，使用site：yourdomain.com命令在Google索引中搜索这一行文本。

请注意，这不适用于cache：命令，因为缓存版本的页面只包含原始的，尚未渲染的代码。

2.Chrome 41

2017 年8月，Google更新了其搜索指南，并宣布他们正在使用Chrome 41进行呈现。这是对SEO的改变，因为你现在可以检查Google究竟如何呈现页面，而不是猜测。

现在，您可以下载Chrome 41并查看Googlebot如何呈现和看到网站或网页。

3.Chrome DevTools

JavaScript代码的某些部分可能会被编程为执行特定用户的操作 – 点击，滚动等。但是，Googlebot不是用户，它不会点击或向下滚动，因此它不会看到您正在加载这些操作的内容。

检查所有基于JavaScript的元素是否在没有任何用户操作的情况下加载的最快最容易的方法是使用Chrome开发工具：

在Chrome中打开您的网站

在DevTools中打开元素选项卡

通过查看浏览器构建的实际页面的DOM来查看页面的呈现方式 – 确保所有关键的导航和内容元素都已经存在。

我建议您在Chrome 41中检查它，这会让您确信Googlebot在技术上可以看到该元素。

当然，您也可以在当前的Chrome版本中进行检查并进行一些比较。

4.Google Search Console的抓取和呈现

Google Search Console中的抓取和呈现功能，可以让我们了解Google如何渲染我们的网站。

首先，您必须复制并粘贴您的网址。然后点击“提取并渲染”，然后等待一会儿。这将允许您查看Googlebot是否可以呈现您的网页并查看任何相关文章，副本或链接。

在这里，您还可以使用Google的移动友好测试，它会显示JavaScript错误和呈现的页面代码。

5.服务器日志分析

为了验证Googlebot如何抓取您的网站，您可以采取的最后一件事是服务器日志分析。通过仔细查看服务器日志，您可以检查Googlebot是否访问过特定的网址，以及Googlebot是否检索过哪些网址。

在服务器日志上，您可以分析许多元素。例如，您可以检查Googlebot是否访问您的旧文章，如果没有，则可能是链接有问题，这也可能是由JS的问题引起的。

您还可以检查Googlebot是否能看到您网站的每个部分 – 如果没有，这也可能是由渲染问题引起的。

服务器日志不会告诉你Googlebot如何看到这些页面，您只能检查是否访问过这些页面以及发送了哪些响应代码。需要额外的分析来确定是否有任何问题是由JavaScript引起的。

此外，通过查看服务器日志，您可以检查Googlebot是否请求了关键的JavaScript文件，或完全忽略它们。

javascript呈现时可能出现的问题

即使您的网页在Search Console中的抓取和呈现中正确呈现，这并不意味着您可以放松身心。您还需要注意其他问题。

让我们从你将要面对的最大问题之一开始……

1.超时

尽管没有指定确切的超时时间，但据说Google不能等待超过5秒的脚本。我们的实验证实了这一规则，如果脚本加载时间超过5秒，Google通常不会对其生成的内容编制索引。

抓取和呈现会显示Google是否可以呈现网页，但不会包含超时。请务必记住，Fetch和Render比标准的Googlebot更加宽容，因此您需要采取额外的步骤以确保您提供的脚本能够在5秒内加载。

2.浏览器限制

正如我前面提到的那样，Google使用一种过时的浏览器版本来呈现网站：三年前的Chrome 41.由于JavaScript技术已经发展并且持续快速发展，因此Google的一些最新功能Chrome 41可能不支持最新版本的Chrome。

因此，最佳解决方案是下载Chrome 41浏览器（Google用于Web渲染的确切版本）并熟悉它。检查控制台日志以查看发生错误的位置，并让开发人员修复它们。

3.要求用户交互加载的内容

Googlebot不会像用户那样行事，Googlebot不会点击按钮，也不会展开“更多阅读”，不会进入制表符，也不会填充任何表格……只能阅读并遵循。

这意味着您要呈现的整个内容应该立即加载到DOM，而不是在执行操作之后加载。

这对于“阅读更多”内容和菜单尤其重要，例如在汉堡菜单中。

我们能做些什么来帮助Googlebot更好地呈现网站？

Googlebot呈现的网站不是单向街道。开发人员可以做很多事情来促进这一过程，帮助您聚焦Googelbot呈现的内容并为开发人员提供良好的睡眠。

1.避免使用OnClick链接

搜索引擎不会将onclick =“window.location =”视为普通链接，这意味着在大多数情况下，它们不会遵循这种类型的导航。而搜索引擎绝对不会将它们视为内部链接信号。

点击之前链接在DOM中是至关重要的。您可以通过在Chrome 41中打开开发人员工具来检查这一点，并检查重要链接是否已经加载 – 没有任何额外的用户操作。

2.避免＃在URL中

该＃片段标识符不支持和Googlebot忽略。因此，不要使用example.com/#url URL结构，请尝试使用干净的URL格式 – example.com/url。

独特的内容，唯一的网址

您的每一部分内容都必须位于“某处”，以供搜索引擎对其进行索引。这就是为什么要记住，如果您在不更改网址的情况下动态更改内容，则会阻止搜索引擎访问它。

3.避免JS错误

HTML非常宽容，但JavaScript绝对不是。

如果您的网站在JS脚本中包含错误，它们将不会被执行，这可能会导致您的网站内容根本无法显示。脚本中的一个错误可能会导致多米诺效应，导致很多其他错误。

要检查代码并使JavaScript免于出错，您可以再次使用Chrome开发工具并查看“控制台”选项卡，以查看发生了哪些错误以及JavaScript代码的哪一行。

4.不要在robots.txt中阻止JS

阻止JS文件是一个非常古老的做法，但它仍然经常发生。它甚至有时候会在某些CMS中作为默认值出现。尽管目标是优化抓取预算，但阻止JS文件（和CSS样式表）被认为是一种非常糟糕的做法。但是不要把它从我这里拿出来，这是谷歌对这个话题所说的话：

“我们建议确保Googlebot可以访问任何有意义地促进您网站的可见内容或其布局的嵌入式资源……”

所以不要做这样的事情：

预渲染

当您发现Google在呈现JavaScript网站时遇到问题时，可以使用预渲染。

预渲染为您的网站提供现成的HTML快照。这意味着Googlebot不会收到JavaScript，而是纯粹的HTML。与此同时，访问该网站的用户将获得相同的JavaScript页面版本。

最流行的解决方案是使用外部服务进行预渲染，如Prerender.io，它与所有最重要的JS框架兼容。

使用此解决方案非常简单 – 您只需将中间件或片段添加到Web服务器即可。

概要

JavaScript的主题是SEO世界中最有活力的话题，绝对值得你关注，特别是它发展得如此之快。本文中描述的问题只是您可以调查的一小部分，以确保Googlebot正确呈现您的网站。