面向 SEO 的网站导航最佳实践：终极指南

网站导航最佳实践有哪些网站架构与迁移

网站导航影响两方面：一是用户体验，帮助用户找到所需内容会带来更多转化；二是搜索引擎，良好的导航能帮助它们理解你如何组织内容，并确保 PageRank 流向最有价值的页面。

出色的网站导航是一个必须做好的关键要素，主要有两个原因。

其一，它影响你的用户体验——帮助用户找到他们想要的内容会带来更多转化。

其二，它有助于搜索引擎。良好的导航能帮助它们更好地理解你如何组织内容，并确保 PageRank 流向最有价值的页面。

但是，你该如何改进网站导航，既帮助用户找到他们想要的内容，又能为你的 SEO 带来好处呢？

本文就将详细解答这个问题。

网站导航是一套工具和功能系统，旨在帮助用户无缝地查找信息并在网站中浏览。它包括菜单、链接和搜索栏，通过让用户轻松访问各个版块和内容，对提升用户体验至关重要。

有一些标准组件可以打造对用户友好的网站导航，其中包括：

面包屑导航
侧边栏
大型菜单（Mega menu）
下拉菜单
标签页
手风琴

我将在下文中逐一解释它们，还有你该如何使用它们。

人们如何浏览网站

在我们深入探讨导航组件以及它们如何帮助用户浏览网站之前，先理解用户实际上是如何浏览网站的，这一点很重要。

主要有三种方式，先从前进导航说起。

前进导航

这类导航帮助用户在网站层级结构中向更深层探索，通常是为了在同一主题领域内找到更具体的内容。

下面以 Stripe 的文档区域为例，展示典型的前进导航。

用户可能先从主文档页面开始。然后向下滚动，选择支付（payments）文档链接。

在下一个页面，他们选择查看所有“After the payment”（支付之后）文档。

接着他们导航到“Receive payouts”（接收款项）。

最后，到“Instant Payouts”（即时付款）。

在这个场景中，用户在网站层级结构中向更深层导航，从文档这样宽泛的主题，走向支付和款项这样更具体的子主题。

这就是前进导航。

横向导航

接着是横向导航。它帮助用户浏览与当前所看内容相关、但并非其子主题的内容。

例如，如果你在 Stripe 的“Instant Payouts”页面上，侧边栏会把你链接到其他与款项相关的内容，比如“Alternative currencies”（其他货币）。

后退导航

还有后退导航。这类网站导航帮助用户返回到之前的页面或某个流程中的上一步。

实现这一点最常见的方式是使用面包屑导航，你可以在 Stripe 文档中看到它。

在构建网站时，你会从导航组件和菜单设计的角度来考虑它。以下是一些值得考虑的网站菜单类型：

导航菜单

先从一个简单的导航组件——菜单说起。

你会在多个区域看到网站导航菜单，通常水平地位于页眉中（有时称为网站菜单栏）。

垂直地位于页脚中：

位于侧边栏中：

有时它们的外观会变化。但概念是一样的——一份链接列表，垂直或水平排列，通常按主题组织。

下拉菜单

网站下拉菜单的关键要素在于它是隐藏的，当用户悬停或点击另一个元素（比如页眉中的导航栏）时才显示出来。

下拉导航通常很直接，就是一份垂直的链接列表，比如 FreeAgent 上的这个例子。

大型菜单（Mega menu）

还有一种视觉上更复杂的下拉菜单类型——大型菜单。两种菜单的显示方式相同（通过悬停或点击）——主要区别在于所包含的内容/链接数量，比如 ASOS 的这个例子。

网站大型菜单比简单的下拉菜单更好，正如 Nielsen Norman Group 所证实的那样。

大型菜单为何更好，可以归纳为几个关键原因：

你可以在网站大型菜单中放入更多链接。
你可以更轻松地对相关链接进行分组。
你可以加入图片和插图。

汉堡菜单

网站汉堡菜单（或称移动端菜单）与下拉菜单类似，但网站会把它隐藏在一个看起来像汉堡的图标后面（因此得名）。

这类导航常见于移动设备，比如我网站上的这个例子。

但它们也越来越常见于桌面网站，比如亚马逊的这个例子。

像这样的隐藏菜单不应作为你期望用户使用的主要导航方式。隐藏导航不易被发现，所以如果它很重要，就让它默认可见。

标签页导航

当用户选择查看某一部分信息时，标签页导航会替换内容。

这是我在自己的 SEOToolbelt 资源上实现它的方式。

你也可以在 Ahrefs 博客首页看到标签页的应用。

有时，网站会在大型菜单中设置标签页导航，内容在悬停时显示——比如 Virgin Experience Days 的这个例子。

手风琴导航

手风琴与标签页类似，但有两个主要区别：

可以选择不显示任何内容。
可以选择同时展开多个手风琴项。

我制作了一个手风琴示例，其中一次只能展开一个。

如果允许同时展开多个手风琴项，就是这样的效果。

标签页和手风琴可能会给JavaScript SEO 带来挑战。如果你希望这些内容被收录排名，HTML 源码中就应包含这些内容，而不是设置为在点击时通过 JavaScript 注入。

分面导航

分面导航（也称筛选导航）允许用户选择不同的筛选条件，以查看页面上的部分信息。同样地，我在自己的博客上使用出色的 Isotope JS 包实现了它。

就像 John Lewis 的这个例子一样，你也常在电商网站上看到筛选导航。

锚点链接导航

锚点链接是一种帮助用户跳转到长页面（比如一篇文章）某个特定位置的导航。

Ahrefs 博客就使用了它，比如在这篇链接建设文章中。

层级导航

层级式网站导航帮助用户在网站层级结构中前后移动。你常会在实践中通过面包屑看到它，即向用户显示当前页面的父页面。下面是名为 Projectorpoint 的电商网站上的一个例子。

你有时也会看到以侧边栏链接形式呈现的层级导航。例如在丝芙兰（Sephora）上，整个层级式网站导航就体现在这些链接中（连同当前页面的同级页面）。

分页导航

网站使用分页来展示页面内容的一部分，常用于列出指向其他页面链接的页面，比如 Ahrefs 博客的归档页面。

甚至 Google 搜索结果也是如此。

如今，你不只有我上面展示的数字分页，还有“加载更多”按钮，就像下面这个。

大多数研究表明，用户更喜欢“加载更多”按钮，比如 Smashing Magazine 的这项研究。

现在你已经了解了人们如何浏览网站，以及帮助用户浏览的常见组件，下面是 12 条既受用户喜爱、也受搜索引擎青睐的网站导航最佳实践。

1. 研究你想创建的页面

出色的导航始于有出色的页面可供导航。因此，你会想先做一次网站导航分析。然后，把你网站上的页面规划成一份站点地图（不是 HTML 或 XML 站点地图，而只是在电子表格中列出你想放在网站上的页面清单）。

理想情况下，只有当用户会对某个页面的内容感兴趣时，你才把它加入站点地图（否则你只是在浪费时间创建它）。

但你要如何判断用户是否会感兴趣呢？

弄清这一点最好的方法之一就是关键词研究。但这是个庞大的话题。所以如果你不知道怎么做，请前往这份关键词研究指南。你要遵循的流程大致如下。你可以：

使用关键词研究工具（比如 Keywords Explorer）来找出用户在搜索什么，或使用 Site Explorer 查看竞争对手的网站。
把语义相关的关键词归为一组（Ahrefs 的 Parent Topic 功能在这里很有帮助）。
列出所有父主题和次要关键词。下面是我为一位礼品类客户所做的示例。

2. 创建层级式网站导航

现在你有了页面清单，就应对这些页面进行分组，以创建网站层级结构／信息架构。

先，你应把它们归入几个宽泛的页面类型，比如顶级产品类别、文章、公司信息，或任何适合你网站的类型。这能展示你将拥有哪些类型的内容。

然后你会想在每个页面类型内部创建页面层级。层级越深入就越具体。所以对于一家服装电商网站，可能看起来像这样：

首页 > 男装 > 鞋类 > 靴子 > 黑色靴子

首页 > 博客 > 趋势 > 2022 冬季服装趋势

我使用一款名为 MindNode 的 Mac 应用，它可以轻松创建展示信息架构的组织结构图。下面是一个服装品牌类别结构的简单示例。

卡片分类法是理解不同人如何组织内容的一种有价值的技术。有时它并不那么清晰明确，组织一个网站的方式可能有很多种。

观察竞争网站的举措也有帮助。通过研究面包屑和其他导航元素，你可以了解即便是大型复杂的网站是如何决定组织信息的。

理解网站结构的一种方法是研究 URL 结构。多亏了 Ahrefs Site Audit 中的 Structure explorer 报告，这变得很容易。

Structure Explorer 工具，来自 Ahrefs Site Audit

这份报告有一个很棒的功能，你可以按结构查看各类数据。例如，在审计任何网站时，你可以按目录查看 Ahrefs 的估计自然流量。

3. 围绕该层级结构构建导航元素

既然你已经搭建好层级结构，就可以为面包屑如何运作制定清晰的方案。你也可以开始使用不同的导航组件来辅助前进导航和横向导航。

例如，如果当前页面有子页面，你可以使用不同的导航组件来确保它们被链接起来。

Google 的 SEO 文档就是围绕该层级结构来构建其侧边栏的。

然后在主题概览页面（比如它的“抓取”页面）上，它创建了一个链接到该页面所有子页面的表格。

需求较为简单的网站通常会实现一个小型的网站导航栏，包含主要内容和对子页面的链接。对于电商网站导航，你常会看到它以一组水平链接列表的形式呈现，就像这个例子：

你可以通过查询页面之间的父子关系来完全自动化这些链接，我最近在关于优化电商类别页面的指南中写到过这一点。

4. 不要忘记前进导航

在规划网站导航时，很容易出人意料地忽略前进导航。

常见的罪魁祸首是电商类别页面。用户可以使用基于 JavaScript 的筛选导航向前浏览，因此指向当前类别子类别的链接有时会被省略。

2021 年年中，我与珠宝品牌 Abbott Lyon 合作。我发现它需要在类别页面上设置更长尾的类别和用于前进导航的组件。

它在 2021 年 12 月修复了这个问题，并在 2022 年 3 月开始看到回报。自修复以来，它一直在持续增长，为 2022 年 12 月的旺季打下了良好基础。

但它在具体上是如何改善导航 SEO 的？其实很简单，就是在每个类别中加入一块指向子类别的链接。

这很好地展示了导航组件对 SEO 的影响。

5. 全站链接到重要页面

汉堡菜单和大型菜单帮助用户快速、轻松地找到网站的重要页面。我曾看到过建议用大型菜单让你网站的所有页面都只需一次点击——不要这么做。

大型菜单让你可以选择链接到更多页面。但你仍应只纳入对你最重要的页面，原因有两个：

你不想让界面变得杂乱，让用户更难找到重要信息。
你想把 PageRank 集中到那些如果你排名靠前、会给业务带来最大商业利益的页面上。

参考我在第 1 条建议中提到的站点地图，并利用搜索需求数据来决定纳入哪些内容。然后，用你设定好的层级结构来确定如何组织它。

我采取以数据为导向的方法。所以我通常会得到一张包含多个表格的表单；每个表格看起来像这样。

我使用了 Ahrefs Keywords Explorer 中的潜在流量指标、GA 会话数和收入数据。然后，我根据这三项指标创建了一个 0–100 的优先级评分。这让确定纳入哪些页面变得更容易。

6. 用面包屑展示你的网站层级结构

面包屑帮助用户了解自己在网站中的位置。如果你的网站还没有，我建议你加上。

除了帮助用户外，它们也对你的导航有益，因为能帮助 Google 理解你的层级结构并分配 PageRank，正如 Gary Illyes 所确认的。

如果你添加面包屑结构化数据，也会提高面包屑出现在搜索结果中的可能性，就像 Google 文档中的这个例子：

面包屑放置的惯例是位于页面上方、页眉之下。下面是 Search Engine Roundtable 上的一个例子。

你不一定非要把它们放在很靠上的位置。这需要你通过测试来看看它如何影响用户达成你为网站设定的主要目标。放置位置不会影响你的 SEO。

7. 在网站各处突出展示热门页面

只要合理，就在网站各处添加指向你最热门页面的链接。

丝芙兰（Sephora）在顶级类别（比如其彩妆页面）上做得很好。该类别有一个链接格，指向各种与彩妆相关的类别。

这些都不是彩妆类别的直接子页面；在到达这些页面之前，彩妆之下还有另一个类别。

尽管如此，丝芙兰还是添加了这些链接，因为它们很受用户欢迎。

这能让网站结构保持扁平而非纵深。如果内链纯以层级为依据，用户就得多次点击才能到达网站深处页面，即便这些页面很热门。

8. 不要在移动端隐藏重要的导航设计功能

由于空间减少，移动端导航可能更具挑战性。但解决方案并不是在移动端隐藏必要的导航元素。

以 Stripe 上的大型菜单为例看看。

桌面端有很多链接；理想情况下，我们也希望在移动端让用户轻松找到这些链接。

Stripe 的解决方案是使用滑块，充分利用垂直空间以及用户在移动端倾向于滚动的习惯。

这是保持移动端与桌面端用户体验一致性的绝佳范例。如果你想找一款 JS 库来简化类似菜单的创建，我推荐 mmenu。

就导航 SEO 而言，在移动设备上使用标签页、手风琴和滑块，而不是移除内容，也意味着你更不容易受到 Google 移动端索引的负面影响。

不过，如果你的网站是响应式的，就不太会因在移动端隐藏内容而遇到问题（除非你使用 JS 在加载时从 HTML 中移除内容）。

9. 保持网站导航中的锚文本具有描述性

过短的锚文本会让用户搞不清点击链接后会进入哪个页面。

这也可能给 SEO 带来问题，因为锚文本是搜索引擎判断页面相关性的一种方式，正如 John Mueller 所确认的。

例如，假设你有一个销售游戏设备的网站。在某个菜单中，你可能有这样一份链接列表。

不要只写“笔记本电脑”，而是更具体地说明你销售的配件、笔记本电脑和台式机的类型。在这个例子中，可能只需在每个链接前加上“游戏”二字即可。

这会减少用户的不确定感，并帮助搜索引擎判断你瞄准的是这两个主题中的哪一个。

让锚文本保持描述性，但不要过头。例如，你不需要像这样在面包屑中重复词语多次：

由于面包屑是层级式的，你可以将它们缩短；它们对用户来说仍然合理，而你可以把更具描述性的锚文本放在网站其他地方，比如网站导航栏或层级链接中。

10. 按受欢迎程度排列导航

在创建网站菜单时，根据用户点击某个链接的可能性来排列导航项。如果你在做新网站并做彻底的关键词研究，就可以通过查看搜索量来了解不同主题的相对受欢迎程度。

Keywords Explorer 显示游戏笔记本电脑比其他页面受欢迎得多。所以除非有业务上的理由不这么做，我应该更突出地推广它们。

如果你的网站有相当可观的流量，你可以使用 Google Analytics 的事件跟踪来看看用户最常点击哪些链接。

使用 Google Tag Manager 做到这一点很简单；你需要设置一个 GA 事件标签，配上合适的类别和操作标签，然后像这样把“Label”设为 Click Text。

“Click Text”会使用被点击链接的锚文本作为标签，便于识别该链接。

接下来，为该标签添加一个触发器。当用户点击你想跟踪的链接时，它就会触发事件。要做到这一点，把触发器类型设为“Click - Just Links”。然后设置为仅在某些链接点击时触发。最后，基于“Click Element”匹配某个 CSS 选择器来触发该标签。

在上面的例子中，我在跟踪一个网站下拉菜单中的子菜单。

如果你已迁移到 GA4，流程相当类似。你可以复用同一个触发器，并配置事件参数以发送点击文本和 URL。它应该长这样：

下面是你设置好之后在 GA 中会看到的报告示例：

现在你可以轻松决定如何排列菜单中不同项的顺序。

你可能会想：“这会影响 SEO 吗？”

有可能会。Google 曾为一种叫做“合理冲浪者模型（Reasonable Surfer Model）”的东西申请了专利。它取代了旧“PageRank”算法中依赖“随机冲浪者模型（Random Surfer Model）”的部分。

这两个模型的主要区别在于它们如何衡量所传递的 PageRank 数量。合理冲浪者模型根据用户点击某个链接的可能性来权衡传递的 PageRank 数量。另一个模型则在所有链接之间平均分配 PageRank。

简而言之，如果你重新组织某个组件内的链接，或把不同的导航组件移到页面上更靠上的位置，那些展示得更突出的链接可能会有更多 PageRank 流经，因此目标页面最终可能会排名更好。

11. 不要让用户思考（最好的网站菜单设计不会这样！）

最好的网站导航是遵循网页设计惯例的导航。这适用于网页设计的方方面面。这意味着要遵循诸如以下的标准网页实践：

把主要页眉导航放在页面顶部，而不是侧面。
使用面包屑帮助用户理解结构。
给 Logo 加上返回首页的链接。
让页眉／页脚在各页面之间保持一致。
以标准化的方式设置链接和其他元素的样式。

如果你想进一步探讨这个话题，我推荐 Steve Krug 的书《Don't Make Me Think》。

12. 测试、测试、再测试

为了让网站导航更有效，可以使用像 Optimizely 或 VWO 这样的 A/B 拆分测试工具来创建导航的多个版本，并找出可改进之处。测试链接标签、位置、颜色和样式等要素，以及不同种类的网站导航，比如下拉菜单、标签页和大型菜单。

通过做出小的改动并衡量其表现，你可以改善对用户友好的网站导航，帮助访客轻松找到他们正在寻找的内容。

如果你不确定要测试什么，可以考虑使用像 Hotjar 这样的行为分析工具，通过热图、问卷和录屏来收集洞察。

改变网站的导航可能颇具挑战。这是因为拥有不同专业领域的多方利益相关者各有诉求。商品运营、用户体验、客户服务和 SEO 团队都需要被满足。

改变导航时出现困难，通常有两个原因：

可用性不是做出这项改动的主要原因。
缺乏数据表明这项改动是值得的。

对于第 1 个原因，如果改动不能改善可用性，用户体验团队很可能会拒绝它。例如，SEO 团队常常专注于 PageRank 和搜索引擎想要什么。要说服一位用户体验专家，不要谈这些。相反，要讨论这项改动会对用户产生的间接影响——毕竟这才是更重要的因素。

对于第 2 个原因，任何团队都可能拒绝这项改动。先做一次网站导航分析，并收集能说明你认为这项改动会带来积极效果的洞察。这可以是：

搜索需求数据。
来自 Google Analytics 或类似工具的行为分析数据。
客户服务反馈。
销售和收入数据。

理想的情况是各团队通力合作，运用他们日常使用的不同数据，基于各自的专业共同形成理想的导航方案。

最后总结

网站导航是一个宽泛的话题。每个组件都有很多细微之处，而且通常关于采用哪些组件、它们如何运作的决定，都会汇聚来自不同专业背景人士的意见。

尽管如此，实施出色网站导航的回报值得你投入时间。希望本文能为你网站导航的运作方式带来启发。

关于网站导航还有更多问题？在 Twitter 上找我。