如何分6步诊断和解决JavaScript SEO问题

对于公司来说，使用React、Angular或Vue等现代JavaScript框架和库构建网站相当常见。很明显，现在的网络已经摆脱了单纯的HTML，进入了JS时代。

虽然企业愿意利用最新技术没有什么不寻常的，但我们需要解决这一趋势的严峻现实：大多数向JavaScript框架的迁移都不是在考虑用户或自然流量的情况下进行的。

让我们称之为JavaScript悖论：

1. 在听到关于JavaScript框架能够创造出令人惊叹的ux的传言后，大品牌纷纷加入了JavaScript的宣传行列。
2. 现实表明，JavaScript框架真的很复杂。
3. 大品牌完全阻止了向JavaScript的迁移。他们失去了自然流量，通常不得不走捷径，而不是为用户创造这种令人惊叹的UX之旅（本文中我将提及一些示例）。

由于没有回头路，搜索引擎优化需要学习如何处理JavaScript网站。

但这说起来容易做起来难，因为让JavaScript网站在搜索引擎中取得成功对开发人员和搜索引擎优化来说都是一个真正的挑战。

本文旨在跟进JavaScript SEO终极指南，旨在尽可能简单地遵循。因此，喝杯咖啡，让我们来点乐子——这里有六个步骤可以帮助您诊断和解决JavaScript SEO问题。

第1步：使用URL检查工具查看谷歌是否可以呈现您的内容

URL检查工具（以前称为Google Fetch and Render）是一个很好的免费工具，允许您检查Google是否可以正确呈现您的页面。

URL检查工具要求您将网站连接到谷歌搜索控制台。如果您还没有帐户，请查看谷歌的帮助页面。

打开谷歌搜索控制台，然后单击URL检查按钮。

在URL表单字段中，键入要审计的页面的完整URL。

然后单击测试实时URL。

测试完成后，单击“查看测试页面”。

最后，单击“屏幕截图”选项卡以查看渲染页面。

向下滚动屏幕截图，以确保您的网页呈现正确。问自己以下问题：

• 主要内容可见吗？
• 谷歌能看到用户生成的评论吗？
• 谷歌可以访问类似文章和产品等区域吗？
• 谷歌能看到你页面的其他关键元素吗？

为什么屏幕截图看起来与我在浏览器中看到的不一样？以下是一些可能的原因：

• 谷歌在渲染时遇到了超时。
• 渲染时发生一些错误。您可能使用了谷歌网页渲染服务不支持的一些功能（谷歌使用四年前的Chrome 41进行网页渲染，这不支持许多现代功能）。
• 您屏蔽了Googlebot的关键JavaScript文件。

第2步：确保您没有错误地阻止JavaScript文件

如果谷歌无法正确呈现您的页面，您应该确保您没有在robots.txt中阻止Googlebot的重要JavaScript文件

TL;DR（Too long; Didn't read太长了读不下去）：什么是robots.txt？

这是一个纯文本文件，指示Googlebot或任何其他搜索引擎bot是否被允许请求页面/资源

幸运的是，URL检查工具指出了被robots.txt阻止的渲染页面的所有资源。

但是，从渲染的角度来看，如何判断被阻止的资源是否重要？

你有两个选择：一个基本的选择的和一个进阶的选择。

基本的

在大多数情况下，简单地向您的开发人员询问这个问题可能是一个好主意。他们创建了你的网站，所以他们应该很了解它。

显然，如果脚本的名称称为content.js或productListing.js，那么它可能是相关的，不应被阻止。

不幸的是，到目前为止，URL检查不会通知您被阻止的JS文件的严重性。以前的Google Fetch和Render有这样的选项：

进阶的

现在，我们可以为此使用Chrome开发人员工具。

出于教育目的，我们将检查以下URL：http://botbenchmarking.com/youshallnotpass.html

打开最新版本的Chrome页面，然后转到Chrome开发人员工具。然后移动到“Network”选项卡并刷新页面。

最后，选择所需的资源（在我们的案例中是YouShallNotPass.js），右键单击，然后选择“阻止请求URL”。

刷新页面，看看是否有任何重要内容消失。如果是这样，那么您应该考虑从robots.txt文件中删除相应的规则。

第3步：使用URL检查工具修复JavaScript错误

如果您看到Google Fetch和Render没有正确渲染页面，这可能是由于渲染时发生的JavaScript错误。

要诊断它，请在URL检查工具中单击“更多信息”选项卡。

然后，向您的开发人员展示这些错误，让他们修复它。

JavaScript代码中的一个错误就可以停止谷歌的渲染，这反过来又会使您的网站无法索引。

您的网站在最近的浏览器中可能运行良好，但如果它在旧浏览器中崩溃（谷歌网页渲染服务基于Chrome 41），您的谷歌排名可能会下降。

需要一些例子吗？

• 官方Angular文档中的一个错误导致谷歌无法呈现我们的测试Angular网站。
• 从前，谷歌删除了Angular.io的一些页面，Angular.io是Angular 2+的官方网站。

附加说明：如果您出于某种原因不想使用URL检查工具来调试JavaScript错误，您可以改用Chrome 41。

就我个人而言，我更喜欢将Chrome 41用于调试目的，因为它更通用，也更灵活。然而，URL检查工具在模拟谷歌网页渲染服务时更准确，这就是为什么我建议JavaScript SEO的新手使用URL检查工具。

第4步：检查您的内容是否已在谷歌中索引

仅仅看看谷歌是否可以正确渲染您的网站是不够的。您必须确保谷歌已正确索引您的内容。最好的选择是使用site：命令。

这是一个非常简单和强大的工具。其语法非常简单：site：[URL of a website]“[fragment to be searched]”。注意不要在site:和URL之间加空格。

让我们假设您想检查谷歌是否索引了Angular.io主页上的以下文本“跨平台开发”。

在谷歌中键入以下命令：site:angular.io“跨平台开发”

如您所见，谷歌对该内容进行了索引，这正是您想要的，但情况并不总是如此。

要点：

• 尽可能使用site：command。
• 检查不同的页面模板，以确保您的整个网站运行良好。不要停留在一页上！

如果没事，那就进行下一步。如果不是这样，发生这种情况的原因可能有几个：

• 谷歌仍然没有渲染您的内容。它应该发生在谷歌访问URL后的几天/几周内。如果您网站的特点要求您的内容尽快进行索引，请实现SSR。

• 谷歌在渲染页面时遇到超时。你的脚本快吗？当服务器负载高时，它们是否保持响应？
• 谷歌仍在请求旧的JS文件。谷歌试图缓存很多东西来节省他们的计算能力。因此，CSS和JS文件可能会被过度缓存。如果您可以看到您修复了所有JavaScript错误，而谷歌仍然无法正确呈现您的网站，这可能是因为谷歌使用旧的缓存JS和CSS文件。要解决这个问题，您可以在文件名中嵌入版本号，例如，将其命名为 bundle3424323.js。您可以在HTTP缓存上的谷歌指南中阅读更多内容。
• 在索引时，如果谷歌认为某些资源没有对基本页面内容做出贡献，它可能不会获取这些资源。

第5步：确保谷歌可以发现您的内部链接

您应该遵循以下几个简单的规则：

1. 谷歌需要适当的<a href>链接来发现您网站上的URL。
2. 如果您的链接仅在有人单击按钮时添加到DOM中，谷歌将看不到它。

很简单，许多大公司都会犯这些错误。

正确的链接结构

Googlebot为了爬行网站，需要具有传统的“href”链接。如果不提供它，Googlebot将无法访问您的许多网页！

我认为Tom Greenway（谷歌代表）在谷歌I/O会议上很好地解释了这一点：

请注意：如果您有适当的<a href>链接，以及一些额外的参数，如onClick、data-url、ng-href，这对谷歌来说仍然没问题。

开发人员犯的一个常见错误：Googlebot无法访问分页的第二个和后续页面

不让谷歌机器人从分页的第二页及以后发现页面是开发人员经常犯的错误。

当您打开Gearbest、Aliexpress和宜家的移动端版本时，您很快就会注意到，事实上，他们不让Googlebot看到分页链接，这真的很奇怪。当谷歌为这些网站启用移动优先索引时，这些网站将受到影响。

你如何自己检查它？

如果您尚未下载Chrome 41，请从Ele.ph/chrome41获取。

然后导航到任何页面。为了本教程，我使用的是AliExpress.com的移动版。出于教育目的，如果你遵循同样地例子，那就太好了。

打开Aliexpress手机类别的手机版。

然后，右键单击“查看更多”，然后选择检查按钮以查看其实现方式。

如您所见，没有指向分页第二页的<a href>，也没有指向分页的<link rel>链接。

（全球速卖通）Aliexpress.com上的手机类别中有2,000多种产品。由于移动谷歌机器人只能访问其中的20个，这只有1%！

这意味着该类别99%的产品对移动谷歌机器人来说是看不见的！太疯狂了！

这些错误是由延迟加载的错误实现引起的。还有许多其他网站也会犯类似的错误。

仅使用link rel=“next”对谷歌来说信号太弱

注：通常使用“link rel=”next'来指示分页系列。然而，凯尔·布兰切特的发现似乎表明，“link rel=“next”本身对谷歌来说是太弱的信号，应该通过传统的<a href>链接来加强。

John Mueller对此进行了更深入的讨论：

“我们可以通过rel，rel=“previous”来理解哪些页面属于同一页面，但如果页面上根本没有链接，那么我们真的很难从一个页面爬到另一个页面。（...）因此，在页面标题中使用rel=“next”rel=“previous”是一个好主意，可以告诉我们这些页面是如何连接的，但您确实需要页面上正常的HTML链接。

别误会我——使用<link rel=“next”>没有错。相反，它们是有益的，但将这些标签与传统的<a href>链接相结合是件好事。

检查谷歌是否可以看到菜单链接

审计JavaScript网站的另一个重要步骤是确保谷歌可以看到您的菜单链接。要检查这一点，请使用Chrome 41。

在本教程中，我们将使用Target.com的案例：

首先，打开任何浏览器，然后从菜单中选择一些链接：

• https://www.target.com/c/clothing/-/N-5xtd3 -> 服装
• https://www.target.com/c/shoes/-/N-55b0t ->鞋子
• https://www.target.com/c/furniture/-/N-5xtnr -> 家具

接下来，打开Chrome 41。在Chrome开发人员工具中（按Ctrl + Shift + J），导航到元素标签。

结果？幸运的是，谷歌可以获取Target.com的菜单链接。

现在，检查谷歌是否可以在您的网站上获取菜单链接，看看您是否也在目标位置。

第6步：检查谷歌是否能发现标签下隐藏的内容

我经常注意到，在许多电子商务商店中，谷歌无法发现和索引隐藏在标签下的内容（产品描述、意见、相关产品等）。我知道这很奇怪，但它太常见了。

确保谷歌可以看到隐藏在选项卡下的内容是每次搜索引擎优化审计的重要组成部分。

打开Chrome 41，导航到Boohoo.com上的任何产品；例如，健身背心。

点击Details & Care查看产品描述：

“细节和护理

94%棉6%氨纶。合身健身背心。模特身高6英尺1英寸，穿着英国M码。”

现在，是时候检查它是否在DOM中了。为此，请转到Chrome开发人员工具（Ctrl + Shift + J），然后单击“网络”选项卡。

确保已启用禁用缓存选项。

单击F5刷新页面。刷新后，导航到“Elements”选项卡并搜索产品描述：

如您所见，在boohoo.com的例子中，谷歌可以看到产品描述。

完美！现在花点时间检查一下你的网站是否正常。

总结

显然，JavaScript SEO是一个相当复杂的主题，但我希望本教程对您有帮助。

如果您仍在为谷歌排名而苦苦挣扎，您可能需要考虑实现动态渲染或混合渲染。