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（搜索引擎优化）是通过优化网站内容、结构和其他元素，使网站在搜索引擎结果页（SERP）中的排名得到提升的技术和策略。

一、为什么SEO如此重要？

提高网站流量：对于大多数网站而言，搜索引擎带来的流量占了相当大的比例。通过优化网站，让它在搜索结果中排名靠前，可以有效增加网站的访问量。

提升品牌知名度：当您的网站出现在搜索结果的第一页时，不仅能够吸引更多的点击，还能提升品牌的曝光率和可信度。

获得长期效益：相比于付费广告，SEO是一种更具长期效益的投资。虽然SEO需要一定时间来见效，但一旦达到理想的排名，它所带来的流量是持续的，而无需像付费广告那样不断投入。

提高用户体验：好的SEO策略不仅仅是针对搜索引擎，还包括提升用户体验。这包括网站速度优化、移动端兼容性、内容的可读性等。这些因素不仅影响排名，也直接关系到用户的留存率和转化率。

二、网站SEO优化的核心要素

要有效进行SEO优化，您需要关注几个核心要素：

关键词研究：关键词是SEO的基础。通过分析用户搜索行为，找到相关性高、竞争度适中的关键词，是制定SEO策略的第一步。可以使用工具如Google关键词规划师、Ahrefs、SEMrush等进行关键词研究。

内容优化：高质量的内容是SEO成功的关键。确保您的内容有针对性，并围绕关键词展开，同时要避免关键词堆砌。内容应具有原创性、相关性和有价值性，这样不仅能吸引用户，还能获得搜索引擎的青睐。

网站结构和导航：一个清晰、易于导航的网站结构有助于搜索引擎更好地抓取和索引您的页面。用户也能够更轻松地找到他们需要的信息，从而提升用户体验。

外部链接建设：高质量的外部链接能够提升网站的权威性和可信度。通过与相关领域的网站建立合作关系，获取高质量的反向链接，可以有效提高网站的排名。

技术优化：这包括页面加载速度、移动端优化、HTTPS加密等。确保网站在技术上满足搜索引擎的标准，以提高其可访问性和用户体验。

三、如何进行有效的关键词研究？

进行关键词研究时，首先需要明确您的目标用户是谁，他们的搜索意图是什么。接着，利用关键词工具挖掘相关关键词，分析这些关键词的搜索量、竞争度以及用户意图。举例来说，如果您的网站是一个在线服装店，您的目标关键词可能包括“女性时尚服装”、“男士休闲装”、“儿童冬季服饰”等。在选择关键词时，您需要平衡搜索量和竞争度，避免选择过于宽泛或竞争过于激烈的关键词。

我们将继续讨论如何通过内容优化、网站结构调整、外部链接建设和技术优化来提升您的SEO效果。

四、内容优化策略

创造有价值的内容：确保您的内容能够解决用户的问题或者提供他们感兴趣的信息。比如，如果您是一个美食博客，分享详细的食谱、烹饪技巧和食材选择建议将会吸引更多读者。

更新内容：搜索引擎喜欢新鲜的内容。定期更新您的网站内容，不仅有助于SEO，还能让用户保持对您的网站的兴趣和忠诚度。

使用多媒体元素：图片、视频和图表等多媒体元素能够丰富您的内容，提高用户体验和参与度。优化这些元素的ALT标签和文件名也是提升SEO的一个重要方面。

五、优化网站结构和导航

一个良好的网站结构可以帮助搜索引擎更好地理解您的网站内容，从而提高索引效率。以下是一些优化网站结构的建议：

清晰的URL结构：确保URL简洁明了，包含关键词，并且对用户和搜索引擎友好。

内部链接优化：通过合理的内部链接结构，可以帮助分配页面权重，使重要页面获得更好的排名。

网站地图（Sitemap）：创建一个网站地图，帮助搜索引擎更快地发现和索引您的所有网页。

六、外部链接建设

外部链接，也称为反向链接，是指其他网站链接到您的网站。这些链接是搜索引擎评估网站权威性的重要指标之一。为了建立高质量的外部链接，可以采取以下策略：

内容合作和客座博客：与行业内的其他网站合作，发布内容并交换链接。

创建分享性强的内容：制作具有吸引力的内容，如信息图表、调查报告和原创研究，鼓励其他网站引用和链接。

参与行业论坛和社交媒体：积极参与行业相关的论坛讨论和社交媒体互动，分享您的内容并留下链接。

七、技术优化

页面速度优化：页面加载速度是影响用户体验和SEO排名的一个重要因素。通过优化图片大小、使用浏览器缓存和减少HTTP请求等方法来提高页面加载速度。

移动端优化：随着移动设备的使用量增加，确保您的网站在移动设备上的表现同样出色非常关键。这包括响应式设计、触摸友好的导航以及移动端特定的SEO策略。

使用HTTPS加密：为了确保用户数据的安全性，搜索引擎更偏好使用HTTPS协议的网站。

八、SEO效果的监测与调整

SEO是一个持续的过程，需要定期监测和调整策略。使用GoogleAnalytics、GoogleSearchConsole等工具，可以跟踪您的SEO表现，包括流量来源、用户行为、排名变化等。根据数据分析结果，不断优化和调整您的SEO策略，以适应搜索算法的变化和市场需求。

SEO优化是一项需要耐心和策略的长期投资。通过关键词研究、内容优化、网站结构调整、外部链接建设和技术优化，您可以大幅提升网站的搜索排名，吸引更多的流量，实现在线业务的增长。

通过掌握这些SEO优化策略，您可以在竞争激烈的在线市场中获得优势，提升网站的可见性和流量。无论您是初学者还是有经验的站长，这些技巧和建议都将帮助您更好地理解和运用SEO，助力您的网站取得成功。返回搜狐，查看更多

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