JavaScript SEO最佳实践和调试工具 SEO：引领企业网站流量激增的关键策略_搜索引擎_内容

JavaScript SEO最佳实践和调试工具 SEO：引领企业网站流量激增的关键策略_搜索引擎_内容， 

JavaScript SEO最佳实践和调试工具

JavaScript 是使网站页面更具交互性且不那么无聊的绝佳选择。

但如果实施不正确，这也是扼杀网站搜索引擎优化的好方法。

这是一个简单的事实：即使是世界上最好的东西也需要找到方法。

这包括：

您的网站页面

网站页面上的重要内容块

无论您的网站有多么出色，如果 Google 由于 JavaScript 问题而无法将其编入索引，您就会错过流量机会。

在这篇文章中，您将了解有关 JavaScript SEO 最佳实践以及可用于调试 JavaScript 问题的工具所需的一切。

目录

为什么 JavaScript 对 SEO 来说是危险的：现实世界的例子

示例 1：网站导航不可抓取

示例 2：延迟加载实施不当后图像搜索量减少

示例3：网站切换为React，没有考虑SEO

关于 Google 您需要了解的一些事情 – JavaScript 关系

JavaScript SEO 最佳实践

可用于调试 JavaScript 实现的工具，使其适用于 SEO

第 1 步：检查网站对 JavaScript 提供内容的依赖程度

第 2 步：检查 Googlebot 是否提供了正确的内容和标签

为什么 JavaScript 对 SEO 来说是危险的：现实世界的例子

在 React 中重新设计我们的网站后，我们的流量急剧下降。发生了什么？'。

这只是我从潜在客户那里听到或在论坛上看到的众多问题之一。您可以将“React”替换为任何其他 JS 框架，这并不重要。如果在没有任何 SEO 考虑的情况下实施，其中任何一个都会损害网站。

这里有一些示例，可以让您更好地了解 JavaScript 可能出现的问题。

示例 1：网站导航不可抓取

这里出了什么问题：

导航中的链接不是根据网络标准添加的。因此，Google 无法看到或跟踪它们。

为什么这是错误的：

这使得谷歌更难发现内部页面

网站内部权限分配不合理

没有明确表明网站内页面之间的关系

因此，具有 Googlebot 无法跟踪的链接的网站将无法利用内部链接的功能。

示例 2：延迟加载实施不当后图像搜索量减少

这里出了什么问题：

虽然延迟加载是减少页面加载时间的好方法，但如果实施不正确，也可能很危险。

在此示例中，延迟加载阻止 Google 查看页面上的图像。

为什么这是错误的：

Google 可能无法发现延迟加载下“隐藏”的内容（如果实施不正确）

如果内容未被 Google 发现，则该内容不会排名

因此，图像搜索流量可能会受到很大影响。对于任何严重依赖视觉搜索的企业来说，这一点尤其重要。

示例3：网站切换为React，没有考虑SEO

这里出了什么问题：

这是我“最喜欢”的例子，来自我之前审核过鲸鱼的网站。车主在交通堵塞后来找我。就像他们无意中试图杀死他们的网站一样：

网址无法抓取

图像无法抓取

所有网站页面的标题标签都是相同的

内部页面没有文字内容

为什么这是错误的：

如果 Google 在页面上看不到任何内容，则不会对此页面进行排名

如果多个页面对 Googlebot 来说看起来相同，它可以只选择其中一个页面，并将其余页面规范化。

在这个例子中，网站页面在谷歌看来完全一样，因此它对它们进行了重复数据删除，并将主页用作规范版本。

关于 Google 您需要了解的一些事情 – JavaScript 关系

当谈到 Google 如何处理您的内容时，您应该了解一些主要事项。

Google 不会与您的内容互动

这意味着 Googlebot 无法点击您页面上的按钮、展开/折叠内容等。

Googlebot 只能看到呈现的 HTML 中可用的内容，而无需任何额外的交互。

例如，如果您有一个可扩展的文本部分，并且其文本在源代码或呈现的 HTML 中可用，Google 将会为其建立索引。

相反，如果您有一个部分的内容最初在页面源代码或 DOM 中不可用，并且仅在用户与其交互（例如单击按钮）后才加载，则 Google 将不会看到此内容。

谷歌不滚动

Googlebot 的行为与网站上的普通用户不同，它不会滚动页面。因此，如果您的内容“隐藏”在无数卷轴后面，Google 将看不到它。

Google 看不到仅在浏览器中与服务器上呈现的内容

这就是为什么如果您希望 Google 对您的网站进行索引和排名（如果您需要流量和销售，您确实需要它），客户端渲染不是一个好主意。

好吧，JavaScript 真的那么糟糕吗？

如果 JavaScript 是使用最佳实践在网站上实现的，那么答案是否定的。这正是我下面要介绍的内容。

JavaScript SEO 最佳实践

根据网络标准添加链接

虽然“网络标准”听起来很吓人，但实际上，它只是意味着您应该使用 HREF 属性链接到内部页面：

您的相关锚文本

这样 Google 就可以轻松找到链接并跟踪它们（除非您向它们添加 nofollow 属性，但这是一个不同的故事）。

请勿使用以下技术在您的网站上添加内部链接：

window.location.href='/page-url'

#页面网址

顺便说一句，如果您想将人们带到该页面的特定部分，则仍然可以在页面上成功使用最后一个选项。但 Google 不会将添加了“#”的 URL 的所有单独变体编入索引。

根据网络标准添加图像

与内部链接一样，图像使用也应遵循网络标准，以便 Googlebot 可以轻松发现图像并为其建立索引。

为了被发现，应该从“src”HTML 标签链接图像：

许多基于 JavaScript 的延迟加载库使用“data-src”属性来存储真实图像 URL，并用快速加载的占位符图像或 gif 替换“src”标签。例如：

存储有关图像的附加信息

它有助于页面速度优化，如果实施正确，效果会很好。

如果您希望 Google 选取您的真实图像而不是占位符，则应将占位符图像交换为目标图像，以便 显示目标图像的路径。

在最近的 Google Search Central Live 活动中，我做了一个现场案例研究，了解如何使用 JavaScript 库 调试延迟加载图像的问题。

或者，您可以通过使用现在许多浏览器都支持的本机延迟加载来消除 JavaScript。

使用服务器端渲染

如果您希望 Google 阅读您的内容并对其进行排名，您应该确保该内容在服务器上可用，而不仅仅是在用户的浏览器中可用。

您也可以使用动态呈现，这意味着检测搜索引擎并向其提供静态页面 HTML 页面，同时用户在浏览器中获得 HTML + JavaScript 内容。

确保呈现的 HTML 包含您希望 Google 阅读的所有主要信息

您需要确保呈现的 HTML 显示正确的信息，例如：

复制到页面上

图片

规范标签

标题和元描述

元机器人标签

结构化数据

href 语言

任何其他重要标签

可用于调试 JavaScript 实现的工具，使其适用于 SEO

您只需要查看页面源代码并检查它是否包含正确内容的日子已经一去不复返了。

JavaScript 让它变得更加复杂：它可以添加、删除或更改不同的元素。所以现在仅仅看源代码是不够的。您需要检查渲染的 HTML。

第 1 步：检查网站对 JavaScript 提供内容的依赖程度

当我看到一个依赖 JavaScript 的网站时，我通常做的第一件事就是检查它对它的依赖程度。

最简单的方法是在浏览器中禁用 JS。我为此使用Web Developer Chrome 扩展。您只需打开设置，单击“禁用 JavaScript”并重新加载页面：

一旦你这样做了，你就会看到没有任何 JS 的页面会是什么样子。

在上面的示例中，您可以看到没有 JavaScript 就没有可用的内容。

请注意，此方法只是让您了解 JavaScript 对内容交付的影响程度。它不会告诉您 Google 是否会将其编入索引。即使您看到像上面这样的空白页面，也不意味着什么都不起作用。这只是意味着网站严重依赖 JavaScript。

这就是为什么您需要使用我将在下一步中向您展示的工具来测试呈现的 HTML。

第 2 步：检查 Googlebot 是否提供了正确的内容和标签

Google 移动友好测试工具

在检查移动渲染 HTML 时，Google 移动友好测试工具是最好、最可靠的工具之一，因为您可以直接从 Google 获取信息。

你需要做什么：

加载适合移动设备的工具

检查您的网址

查看 HTML 选项卡中的信息：

应用过滤器之前

这就是技术搜索引擎优化方面发挥作用的地方，因为您必须检查代码以确保它具有正确的信息。

注意：您也可以使用丰富结果测试工具来执行这些检查：

Google Search Console 中的 URL 检查工具

URL 检查工具还允许您访问 Googlebot 用于评估页面内容的页面的原始 HTML：

适合移动设备的测试工具与 URL 检查工具

好的，那么这些工具之间有什么区别，哪一个更受青睐呢？

简短的回答是：由于移动设备友好测试和 URL 检查工具使用相同的核心技术，因此输出没有差异。

但在其他方面还是有一些区别：

要使用网址检查工具，您需要有权访问您正在检查的网站的 Google Search Console。因此，如果您没有此类访问权限，则需要使用移动设备友好测试（或丰富结果测试）。

URL检查工具可以向您显示同一页面的2个版本：最后抓取的版本和实时版本。如果 JavaScript 刚刚破坏了某些内容，那么它会很方便，您可以将新的实现与之前的实现进行比较。移动设备友好测试和丰富结果测试仅向您提供当前实时页面版本的输出。

其他调试工具

查看渲染源 Chrome 扩展程序

我喜欢这个扩展，因为它显示了源代码和渲染的 HTML 之间的区别。它为您提供了页面上 JavaScript 变化的概览：

注意：请确保检查移动端呈现的 HTML 与桌面端呈现的 HTML。为此，您需要首先在 Chrome 检查工具中加载移动视图，然后使用 View Rendered Source 扩展：

JavaScript 渲染检查

我认为这是最人性化的 JS 调试工具，因为你甚至不需要检查代码。它会为您检查页面源代码中的主要元素，并将它们与呈现的 HTML 中的相同元素进行比较（再次确保检查移动版本）：

在此示例中，我看到 JavaScript 更改了页面上的主要元素，例如标题标签、规范、内部链接。这并不总是一件坏事，但作为 SEO，您需要调查这些更改是否会损害您正在检查的页面。

您还可以使用SEO Pro 扩展来查看标题标签和在呈现的 HTML（而不是源代码）中找到的其他重要标签：

如果你问我，我更喜欢使用我提到的工具组合来调查 JavaScript SEO 问题或确保实施最佳实践。

发布于：上海


SEO：引领企业网站流量激增的关键策略_搜索引擎_内容

在现代商业环境中，SEO（搜索引擎优化）作为一种重要的数字营销策略，越来越受到企业的重视。随着互联网的发展，企业的在线竞争愈发激烈，而SEO正是帮助企业在这场竞争中脱颖而出的有力武器。SEO究竟是什么？它又为何如此重要呢？

SEO，顾名思义，就是通过优化网站结构、内容和外部链接等方式，提高网站在搜索引擎中的排名，从而增加自然流量的过程。当消费者在搜索引擎中输入关键词时，往往只会浏览第一页甚至前几条结果，因此，能否出现在这些关键位置，直接决定了网站的访问量和潜在客户的数量。

SEO的首要步骤是关键词研究。关键词是用户在搜索引擎中输入的词语或短语，决定了用户能否找到您的网站。因此，选择合适的关键词是SEO成功的基石。通过使用诸如Google关键词规划工具等工具，企业可以找出与其业务相关的高搜索量但竞争相对较低的关键词。这些关键词应被巧妙地整合到网站的内容中，包括页面标题、元描述、头部标签以及文章正文中，以提高搜索引擎的相关性评分。

除了关键词优化外，内容质量也是影响SEO效果的关键因素之一。搜索引擎越来越重视内容的质量与相关性，而非仅仅依赖关键词密度。因此，企业需要定期更新网站内容，确保其信息的独特性和有用性。高质量的内容不仅能提升用户体验，还能增加网站的停留时间和页面浏览量，这些都将有助于提高网站的搜索引擎排名。

SEO不仅仅停留在站内优化上。外部链接（又称反向链接）是另一个重要的因素。当其他权威网站链接到您的网站时，这将被视为对您内容的认可，搜索引擎也会因此提高您网站的排名。因此，企业可以通过撰写客座文章、参加行业论坛或发布稿等方式，积极获取高质量的外部链接。

在实施SEO策略时，除了关注站内优化和外部链接外，技术性优化也是不可忽视的一环。技术性优化涉及网站的架构、加载速度、移动端适配等方面，这些因素都会直接影响搜索引擎的抓取和索引效率。

网站架构的优化至关重要。一个清晰、层次分明的网站结构不仅有助于搜索引擎更好地理解和抓取网站内容，还能提升用户的浏览体验。企业应确保网站的URL结构简洁明了，并通过内部链接将重要内容进行有效连接。创建并提交网站地图（XMLSitemap）也是帮助搜索引擎更好地抓取网站内容的有效方式。

加载速度是另一个影响SEO的技术因素。根据研究，加载时间超过3秒的网站将损失近一半的访问者。因此，企业应尽量减少不必要的重定向，优化图片大小，并使用内容分发网络（CDN）加速页面加载。快速的加载速度不仅能提高用户满意度，还能显著提升搜索引擎排名。

随着移动设备的普及，移动端适配已经成为SEO策略中的必要组成部分。谷歌等搜索引擎已经明确表示，优先考虑对移动端友好的网站。因此，企业必须确保网站在各种设备上的展示效果一致，尤其是在移动设备上的易用性。响应式设计（ResponsiveDesign）是目前最流行的移动端优化方法，它能确保网站在不同屏幕尺寸下都能提供良好的用户体验。

企业在进行SEO优化时，还应定期进行数据分析和监测。通过使用GoogleAnalytics等工具，企业可以实时跟踪网站的流量、用户行为以及关键词表现。这些数据不仅能帮助企业评估SEO策略的效果，还能发现潜在问题并及时调整策略。

SEO是一项长期的战略投资，虽然不能立竿见影地看到效果，但随着时间的推移，其带来的回报将是巨大的。通过科学的关键词研究、高质量的内容创作、有效的外部链接建设以及技术性的优化，企业可以在竞争激烈的在线市场中获得更大的曝光率和更高的用户转化率。SEO不仅是网站流量激增的关键，更是企业在数字时代持续增长的重要驱动力。返回搜狐，查看更多

责任编辑：[db:内容]?