原文：https://moz.com/blog/common-ecommerce-javascript-mistakes
尽管他们可以在 Web 开发上投入资源，但大型电子商务网站仍在努力寻找 SEO 友好的 JavaScript 使用方式。
而且，即使 98% 的网站都使用 JavaScript，谷歌在使用 JavaScript 索引页面时仍然存在问题。 虽然通常可以在您的网站上使用它，但请记住，JavaScript 需要额外的计算资源才能处理成机器人可以理解的 HTML 代码。
与此同时，新的 JavaScript 框架和技术也在不断涌现。 为了给你的 JavaScript 页面最好的索引机会，你需要学习如何优化它以提高你的网站在 SERP 中的可见性。
为什么未经优化的 JavaScript 对您的电子商务是危险的？
如果不优化 JavaScript，您可能会冒着内容不被 Google 抓取和编入索引的风险。 在电子商务行业，这意味着损失大量收入，因为无法通过搜索引擎找到产品。
您的电子商务网站很可能使用用户喜欢的动态元素，例如产品轮播或标签式产品描述。 机器人通常无法访问这种由 JavaScript 生成的内容。 Googlebot 无法点击或滚动，因此它可能无法访问所有这些动态元素。
考虑有多少电子商务网站用户通过移动设备访问该网站。 JavaScript 加载速度较慢，加载时间越长，网站的性能和用户体验就越差。 如果 Google 意识到加载 JavaScript 资源的时间太长，它可能会在将来呈现您的网站时跳过它们。
电子商务网站上的 4 大 JavaScript SEO 错误
现在，让我们看看使用 JavaScript 进行电子商务时的一些常见错误，以及避免这些错误的网站示例。
1.依赖JavaScript的页面导航
爬虫的行为方式与用户在网站上的行为不同——他们无法滚动或单击以查看您的产品。 机器人必须遵循整个网站结构中的链接才能完全理解和访问所有重要页面。 否则，仅使用基于 JavaScript 的导航可能会使机器人仅在分页的第一页上看到产品。
案例：Nike.com
Nike.com 使用无限滚动在其类别页面上加载更多产品。 正因为如此，耐克冒着其加载的内容未被编入索引的风险。
为了测试，我进入了他们的一个类别页面并向下滚动以选择滚动触发的产品。 然后，我使用“site:”命令检查该 URL 是否已在 Google 中编入索引。 正如您在下面的屏幕截图中看到的，这个 URL 在 Google 上是不可能找到的：
当然，Google 仍然可以通过站点地图找到您的产品。 但是，通过链接以外的任何其他方式查找您的内容会使 Googlebot 更难理解您的站点结构和页面之间的依赖关系。
为了使它对您来说更加明显，请考虑只有当您在 Nike.com 上滚动查找它们时才能看到的所有产品。 如果没有可供机器人访问的链接，他们将只能在给定的类别页面上看到 24 种产品。 当然，为了用户着想，耐克不可能在一个视口上提供所有产品。 但是，仍然有更好的方法来优化无限滚动，既让用户感到舒适，又让机器人可以访问。
正面案例：Douglas.de
与 Nike 不同，Douglas.de 使用对 SEO 更友好的方式在类别页面上提供其内容。
它们为机器人提供基于 链接的页面导航，以启用对下一个分页页面的抓取和索引。 正如您在下面的源代码中看到的，包含一个指向分页第二页的链接：
此外，分页导航可能比无限滚动更加用户友好。 类别页面的编号列表可能更容易跟踪和导航，尤其是在大型电子商务网站上。 试想一下，如果他们在下面的页面上使用无限滚动，Douglas.de 上的视口会持续多长时间：
- 使用 JavaScript 生成产品轮播链接
带有相关项目的产品轮播是电子商务网站的基本功能之一，从用户和企业的角度来看，它们同样重要。 使用它们可以帮助企业增加收入，因为它们提供用户可能感兴趣的相关产品。但如果这些部分过度依赖 JavaScript，它们可能会导致爬网和索引问题。
反面案例：Otto.de
我分析了 Otto.de 的一个产品页面，以确定它是否包含 JavaScript 生成的元素。 我使用了 What Would JavaScript Do (WWJD) 工具，该工具显示了启用和禁用 JavaScript 时页面的屏幕截图。
测试结果清楚地表明，Otto.de 依靠 JavaScript 在其网站上提供相关和推荐的产品轮播。 从下面的屏幕截图中可以清楚地看到，这些部分在禁用 JavaScript 的情况下是不可见的：
它如何影响网站的索引？ 当 Googlebot 缺乏资源来呈现 JavaScript 注入的链接时，产品轮播无法找到并被索引。
让我们检查一下这里是否是这种情况。 我再次使用“site:”命令并输入 Otto.de 产品轮播之一的标题：
如您所见，Google 在其索引中找不到该产品轮播。 谷歌看不到该元素的事实意味着访问其他产品将更加复杂。 此外，如果您阻止爬虫访问您的产品轮播，他们将更难理解您的页面之间的关系。
获胜者：Target.com
对于 Target.com 的产品页面，我使用了 Quick JavaScript Switcher 扩展来禁用所有 JavaScript 生成的元素。 我特别注意“更多考虑”和“类似项目”轮播以及它们在启用和禁用 JavaScript 时的外观。
如下所示，禁用 JavaScript 改变了产品轮播寻找用户的方式。 但是从机器人的角度来看有什么变化吗？
要找出答案，请通过分析缓存版本来检查页面的 HTML 版本对于机器人来说是什么样的。
为了查看上面Target.com页面的缓存版本，我输入了“cache:https://www.target.com/p/9-39-…”，这是分析页面的URL地址。 此外，我还查看了该页面的纯文本版本。
滚动时，您会看到相关产品的链接也可以在其缓存中找到。 如果您在这里看到它们，则意味着机器人也不会费力地找到它们。
但是，请记住，您在缓存中看到的确切产品的链接可能与页面实时版本上的链接不同。 轮播中的产品轮播是正常的，所以您无需担心特定链接的差异。
但是 Target.com 到底有什么不同之处呢？ 他们利用动态渲染。 它们提供初始 HTML，以及轮播中产品的链接，因为静态 HTML 机器人可以处理。
但是，您必须记住，动态渲染增加了一层额外的复杂性，对于大型网站来说可能很快就会失控。 我最近写了一篇关于动态渲染的文章，如果您正在考虑这个解决方案，那么这篇文章是必读的。
此外，爬虫可以访问产品轮播这一事实并不能保证这些产品会被编入索引。 但是，这将极大地帮助他们浏览站点结构并了解页面之间的依赖关系。
- 屏蔽 robots.txt 中的重要 JavaScript 文件
错误地阻止 robots.txt 中爬虫的 JavaScript 可能会导致严重的索引问题。 如果 Google 无法访问和处理您的重要资源，它应该如何为您的内容编制索引？
有罪：Jdl-brakes.com
如果没有适当的网站抓取，就不可能全面评估网站。 但是查看其 robots.txt 文件已经可以让您识别出任何被阻止的关键内容。
Jdl-brakes.com 的 robots.txt 文件就是这种情况。 正如您在下面看到的，它们使用 Disallow 指令阻止了 /js/ 路径。 它使所有内部托管的 JavaScript 文件（或至少重要的文件）对所有搜索引擎机器人不可见。
滥用此禁止指令可能会导致整个网站出现呈现问题。
为了检查它是否适用于这种情况，我使用了谷歌的移动友好测试。 该工具可以让您深入了解渲染的源代码和移动设备上渲染页面的屏幕截图，从而帮助您解决渲染问题。
我前往“更多信息”部分检查是否无法加载任何页面资源。 使用 Jdl-brakes.com 上的产品页面之一的示例，您可能会看到它需要一个特定的 JavaScript 文件才能完全呈现。 不幸的是，这不可能发生，因为整个 /js/ 文件夹在其 robots.txt 中被阻止了。
但是让我们看看这些渲染问题是否影响了网站的索引。 我使用“site:”命令来检查分析页面的主要内容（产品描述）是否在谷歌上被索引。 可以看到，没有找到结果：
这是一个有趣的案例，谷歌可以访问网站的主要内容但没有将其编入索引。 为什么？ 由于 Jdl-brakes.com 屏蔽了它的 JavaScript，谷歌无法正确查看页面布局。 即使爬虫可以访问主要内容，他们也无法理解该内容在页面布局中的位置。
让我们看一下移动设备友好测试中的屏幕截图选项卡。 当 Jdl-brakes.com 阻止爬虫访问 CSS 和 JavaScript 资源时，爬虫就是这样看到页面布局的。 它看起来与您在浏览器中看到的完全不同，对吧？
布局对于 Google 了解您页面的上下文至关重要。 如果您想了解更多关于网络技术和布局的交叉路口，我强烈建议您研究一个名为渲染 SEO 的技术 SEO 新领域。
获胜者：Lidl.de
Lidl.de 证明组织良好的 robots.txt 文件可以帮助您控制网站的抓取。 关键是要有意识地使用 disallow 指令。
尽管 Lidl.de 使用 Disallow 指令 /cc.js* 阻止了单个 JavaScript 文件，但它似乎不会影响网站的呈现过程。 这里需要注意的重要一点是，它们仅阻止不影响网站上其他 URL 路径的单个 JavaScript 文件。 因此，它们使用的所有其他 JavaScript 和 CSS 资源都应该可供爬虫访问。
拥有一个大型电子商务网站，您可能很容易忘记所有添加的指令。 始终包含尽可能多的要阻止抓取的 URL 路径片段。 它将帮助您避免错误地阻止一些关键页面。
- JavaScript 从网站中删除主要内容
如果您使用未经优化的 JavaScript 来提供您网站上的主要内容，例如产品描述，您就会阻止爬虫看到您页面上最重要的信息。 因此，寻找有关您产品的具体细节的潜在客户可能无法在 Google 上找到此类内容。
罪魁祸首：Walmart.com
使用 Quick JavaScript Switcher 扩展，您可以轻松禁用页面上所有 JavaScript 生成的元素。 这就是我在 Walmart.com 的一个产品页面上所做的：
正如您在上面看到的，产品描述部分在禁用 JavaScript 的情况下消失了。 我决定使用“site:”命令来检查谷歌是否可以索引这些内容。 我复制了我在启用 JavaScript 的页面上看到的产品描述片段。 然而，谷歌并没有显示我正在寻找的确切产品页面。
用户会沉迷于通过 Walmart.com 查找特定产品吗？ 他们可以，但他们也可以前往任何其他销售该商品的商店。
Walmart.com 的例子证明依赖 JavaScript 加载的主要内容使得爬虫更难找到并显示您的有价值的信息。 然而，这并不一定意味着他们应该消除网站上所有由 JavaScript 生成的元素。
为了解决这个问题，沃尔玛有两种解决方案：
实施动态渲染（预渲染），在大多数情况下，从实施的角度来看，这是最简单的。
实现服务器端渲染。 这是解决我们在 Walmart.com 上观察到的问题的解决方案，无需向 Google 和用户提供不同的内容（如动态呈现的情况）。 在大多数情况下，服务器端呈现还有助于解决低端设备上的 Web 性能问题，因为所有 JavaScript 在到达客户端设备之前都由服务器呈现。
让我们看看正确完成的 JavaScript 实现。
获胜者：IKEA.com
宜家证明您可以以机器人可访问和用户交互的方式展示您的主要内容。
当浏览 IKEA.com 的产品页面时，他们的产品描述会在可点击的面板后面显示。 当您单击它们时，它们会动态出现在视口的右侧。
尽管用户需要单击才能查看产品详细信息，但即使关闭了 JavaScript，宜家也会提供其页面的关键部分：
这种呈现关键内容的方式应该让用户和机器人都满意。 从爬虫的角度来看，提供不依赖 JavaScript 的产品描述使它们易于访问。 因此，内容可以在 Google 上找到。
总结
如果您知道如何正确使用它，JavaScript 不一定会引起问题。 作为绝对必须做的事情，您需要遵循索引的最佳实践。 它可以让您避免基本的 JavaScript SEO 错误，这些错误可能会严重阻碍您的网站在 Google 上的可见度。
照顾您的索引管道并检查是否：
您允许 Google 访问您的 JavaScript 资源，
Google 可以访问和呈现您的 JavaScript 生成的内容。 关注电子商务网站的关键元素，例如产品轮播或产品描述，
您的内容实际上已在 Google 上编入索引。
如果我的文章让您对 JS SEO 感兴趣，请在 Tomek Rudzki 的文章中找到更多关于诊断和解决 JavaScript SEO 问题的 6 个步骤的详细信息。