创网站长资源 SEO教程 2024-04-28

JavaScript和SEO的关系

温馨提示：注册会员付费购买资源可永久免费下载更新版本

大多数网站都使用一些JavaScript来增加交互功能，改善用户体验。有些网站使用JavaScript来实现菜单功能，有些网站使用它来抓取产品或价格信息，有些网站使用它从多个来源获取内容，在某些情况下，网站会在整个网站中使用JavaScript。当今互联网的现实是:JavaScript无处不在。

正如谷歌的约翰·穆勒所说:

纯HTML网站现在是一个罕见的物种——作为SEO从业者，我们应该张开双臂，跟随潮流。向JS开发者学习，与他们分享SEO知识。JS不会消失。

我并不是说SEO从业者应该走出去学习JavaScript编程。事实正好相反。SEO从业者主要需要了解Google如何处理JavaScript，如何解决相关问题。即使在极少数情况下，SEO从业者也被允许接触代码。我的目标是通过这篇文章帮助你学习:

什么是Javascript SEO？

Google如何处理包含JavaScript的页面？

如何用JavaScript测试和解决问题

渲染选项

让你的JavaScript网站SEO友好

JavaScript是什么？

JavaScript是技术性SEO(搜索引擎优化)的一部分，目的是让JavaScript多的网站更容易抓取和索引，让网站对搜索引擎更友好。目标是使这些网站能够被搜索引擎找到并获得更高的排名。

对JavaScript SEO有害吗？JavaScript是魔鬼吗？一点也不。只是和很多SEO从业者熟悉的不太一样，也有一点学习曲线。对于一些可能有更好解决方案的事情，人们倾向于过度使用JavaScript，但是有时你必须顺其自然。你只需要知道JavaScript并不完美。它并不总是适合某项工作的工具。JavaScript不能像HTML和CSS那样一步一步地解析，但是它可能很“重”，会影响页面加载和性能。在许多情况下，您可能会牺牲性能来换取功能。

Google如何处理包含JavaScript的页面？

在搜索引擎的早期，一个下载的HTML响应就足以查看大多数页面的内容。但是随着JavaScript的兴起，现在搜索引擎需要像浏览器一样渲染很多页面，这样才能像用户一样查看内容。

谷歌用来处理渲染过程的系统叫做网络渲染服务，WRS)。Google提供了一个简单的图表来展示它是如何工作的。

假设我们从某个环节开始这个过程。

1.爬行动物

向crawler服务器发送GET请求。回复服务器文件头和内容，然后保存。

因为Google现在使用移动优先索引，所以这个请求很可能来自移动用户代理。你可以通过站长工具中的链接检查工具，了解Google是如何抓取你的网站的。当您在链接上执行此过程时，请检查“当时使用的用户代理”，它可以告诉您是否使用了桌面版本或移动优先版本进行索引。

这些请求大多来自美国加州山景城，但在抓取一些本地适配的页面时，这些请求会来自美国以外。我提到这一点是因为一些网站会屏蔽或对待来自特定国家的访问者或不同地使用特定的IP地址，这将导致谷歌爬虫无法读取您的内容。

一些网站也可能使用用户代理检测向特定爬虫显示(特定)内容。尤其是JavaScript网站，谷歌读到的可能和用户看到的不一样。这也是为什么站长工具中的URL检查工具、移动友好性测试工具、富媒体搜索结果测试工具对于解决JavaScript SEO问题非常重要的原因。他们可以显示谷歌阅读的内容，这有助于检查谷歌爬虫是否被阻止，以及是否可以阅读网页的内容。因为下载的GET请求、呈现的页面甚至测试工具之间存在一些关键差异，所以我将在呈现器部分介绍如何测试它们。

还需要注意的是，虽然Google在上图中将抓取过程的输出称为“HTML”，但实际上他们抓取并存储了页面生成所需的所有资源，包括HTML页面、Javascript文件、级联样式表、XHR请求、API端点等等。

处理

很多系统都被图中的“处理”这个词搞糊涂了。这里我介绍几个JavaScript相关的流程。

和资源链接。

谷歌不像用户那样从一个页面导航到另一个页面。“处理”工作的一部分是检查页面中其他页面的链接以及生成页面所需的文件。这些链接被提取出来放入抓取队列，然后Google会建立优先级，安排页面抓取计划。

谷歌将提取资源链接(级联样式表，JS等。)需要从标签等生成页面。但是，指向其他页面的链接必须采用特定的格式，才能被Google视为链接。内部链接和外部链接必须是具有href属性的标签。对于使用过不友好搜索的JavaScripit用户来说，有很多方法可以让链接发挥作用。

可行:

简单就好还算行吧

否:

不行，没有 href 属性不行，没有链接不行，没有链接

如果它不是一个正确的HTMl元素，就无法完成。错误的HTML元素没有链接按钮，ng-click，有很多错误的方式，比如这个可以做错。错误的方式有很多。

另外值得注意的是，使用JavaScript添加的内部链接只有在渲染后才会被抓取。这个过程比较快，所以大多数情况下不用担心。

隐藏物

Google下载的每一个文件，包括HTML页面、JavaScript文件、层叠样式表文件等。，将被主动缓存。谷歌将忽略你的缓存时间设置，并在需要时获得一份副本。我将在后面详细讨论这一点，并在渲染器部分讨论它的重要性。

重复消除

在发送呈现之前，可以从下载的HTML代码中消除重复的内容，或者不给重复的内容以优先权。对于应用程序外壳模型，HTML反馈中只会显示很少的内容或代码。事实上，一个网站的每个页面都可能显示相同的代码，这些代码可能与多个网站的代码相同。有时，这将导致网页被视为重复内容，而不是立即呈现。更糟糕的是，搜索结果中会显示错误的内容甚至错误的网站。随着时间的推移，这个问题会自行消失，但它仍然是有问题的，尤其是对于新网站。

最严格的指令

谷歌将选择页面的HTML和渲染版本中最严格的句子。如果JavaScript修改了一个语句，与HTML语句冲突，Google只会遵循最严格的一个。Index将覆盖index，HTML中的Noindex证据将完全跳过呈现。

3.渲染队列

现在每个页面都进入了渲染器。许多处理JavaScript和两级索引(首先是HTML，然后是呈现的页面)的SEO从业者最大的担忧之一就是页面可能几天甚至几周都不会呈现。谷歌对此进行调查后发现，一个页面进入渲染器的时间中位数是5秒，90%的时间是以分钟计算的。所以大多数情况下，获取页面的HTML版本和两级索引的时间间隔不是问题。

4.渲染器

用Google渲染器渲染网站，看看在用户眼里是什么样子。在渲染器中，它们将JavaScript和JavaScript生成的任何更改处理到文档对象模型(DOM)中。

为此，谷歌使用了“常青树”的无头Chrome浏览器，这意味着它应该使用最新的Chrome版本，并支持最新的功能。直到最近，谷歌还在使用Chrome 41进行渲染，很多功能都不支持。

Google提供了更多关于网页渲染服务的信息，包括拒绝权限、无状态、扁平化轻量级DOM、影子DOM等值得一读的内容。

可能是全网渲染的世界第八大奇迹。这是一项需要大量资源的严肃任务。由于渲染对象的体积，Google在渲染过程中使用了许多快捷方式来加快进程。Ahrefs是唯一可以渲染大规模网页的主流SEO工具。我们可以在一天内渲染1.5亿个网页，使我们的链接索引更加完整。它使我们能够检查JavaScript重定向并显示通过JavaScript插入的链接。在与链接相关的报告中，我们会在相应的位置添加JS标签。

缓存资源

Google严重依赖缓存资源。网页被缓存；文件被缓存；应用程序接口请求被缓存；基本上，Google在发送给渲染器之前会缓存所有内容。他们将使用缓存的资源来加速这个过程，而不是每次页面加载时都重新加载下载的页面。

这将导致一些罕见的情况:在渲染过程中使用过去版本的文件，而索引版本可能包含一些旧文件。当发生重大更改时，您可以使用版本控制或内容指纹功能来生成新文件。这样Google在渲染的时候就得下载最新版本的资源。

无固定超时

一个常见的SEO神话是渲染器在加载网页时只等待5分钟。虽然让你的网站加载更快总是好的，但是这个神话对上面提到的谷歌缓存文件的方式没有任何意义。基本上他们加载的都是提前缓存的。这个神话来自于URL Inspection Tool之类的工具，实时抓取内容，需要设置合理的限制。

渲染器没有固定的超时时间。他们的方法类似于公共渲染器。当不再有网络活动发生时，它们可以等待networkidle0出现。他们还会设置一个最大时间值，以防出现问题或有人在他们的页面上挖掘比特币。

看内容。

Googlebot不会对网页采取任何行动。他们不会点击内容或滚动屏幕，但这并不意味着他们没有解决办法。就内容而言，只要加载到DOM中，不需要一些动作，Googlebot就能看到。关于这个我会在故障排除中介绍更多，但基本上只要是DOM中存在的非隐藏内容，都可以被Googlebot看到。如果内容只是在点击后才加载到DOM中，那么它们将不会被找到。

因为谷歌有一个聪明的变通办法，他们不需要滚动屏幕来查看你的内容。在移动端，他们会加载411×731大小的网页，然后将长度修改为12140像素。这相当于一部相当长的手机，尺寸为411×12140像素。在桌面端，他们会做同样的操作，将尺寸从1024×768像素改为1024×9307像素。

另一个有趣的捷径是，谷歌在加载过程中不会渲染像素。等待页面加载需要时间和额外的资源，同时，他们不需要看到像素完全渲染后的最终形状。他们只需要知道页面的结构，所以并不真的需要渲染像素。正如谷歌的马丁·斯普利特所说:

我们不太在意谷歌搜索中的像素，因为我们不需要给任何人看。我们想要处理这些(语义)信息，所以我们需要一些中间的东西。我们并不真的需要渲染像素。

可视化信息可能更有助于解释相关原理。在Chrome Developer Tools中，如果在performance选项卡上进行测试，可以得到一个加载图表。实心部分代表渲染过程，这是Googlebot做不到的，所以他们节省资源。

灰色=下载
蓝色= HTML
黄色= JavaScript
紫色=布局
绿色=呈现

5.抓住队列

Google里有一个资源提到了爬行预算的一些内容，但是你要知道每个网站都有自己的爬行预算，每个请求都要有优先级。与此同时，谷歌需要在抓取你的网站和抓取互联网上的其他页面之间找到平衡。一般来说，抓取较新的网站和动态页面较多的网站速度较慢。有些网页比其他网页更新得更频繁，而有些资源的请求频率有时较低。

测试/故障排除

JavaScript网站的一个“陷阱”是它们只更新DOM的一部分。作为用户浏览另一个页面，可能不会更新title标签、authority标签等DOM的珍贵部分，但对于搜索引擎来说可能不是问题。记住，Google加载的每个页面都是无状态的，所以他们不会保存之前的信息，所以不会在页面之间跳转。我见过一些SEO从业者陷入困境，因为他们看到的是从一个页面跳到另一个页面的时间，比如权威标签没有更新，但谷歌可能永远看不到这样的状态。开发人员可以通过使用History API来更新状态以修复它，但这也不是问题。刷新页面，检查你看到了什么，或者更好的是，在谷歌的测试工具中测试一下，看看他们看到了什么。我们以后再谈。

查看源代码与检查

当您在浏览器窗口中右键单击鼠标时，您会看到两个选项:查看页面源代码和检查页面。检查源代码显示的内容是否与GET请求一致。这是页面的原始HTML。check函数显示已经发生的已处理文档对象模式的变化，更接近于Googlebot看到的情况。基本上就是页面的最新版本。在处理JavaScript网站时，你应该更多地使用检查函数而不是源代码函数。

谷歌缓存

使用Google Cache查看Googlebot看到的内容并不是一种可靠的方式。通常，它是原始的HTML，尽管有时它会被渲染为HTML或更早的版本。这个系统的初衷是方便用户在网站离线时查看内容。作为调试工具，并不是特别有用。

谷歌的测试工具

来自Google的测试工具，如URL检查工具、移动设备适用性测试工具和网站管理员工具中的丰富结果测试工具，对于故障排除非常有用。然而，这些工具看到的与谷歌看到的略有不同。我们已经讨论了这些工具中存在但呈现器中不存在的五种超时。此外，这些工具的不同之处在于，它们实时抓取资源，而不是像渲染器那样使用缓存版本。这些工具中的截图也会显示按像素渲染的页面，这是Google在渲染器中看不到的。

但是，在检查内容是否为DOM加载时，这些工具非常有用。这些工具中显示的HTML是呈现的DOM。您可以搜索一小段文本，查看它是否被默认加载。