面包屑导航：层级与结构化数据规则

面包屑导航是一组有序的链接路径，显示当前页面在网站信息架构（IA）中的位置——即组织内容的父级、子级和同级关系系统。它让读者无需从主导航重新开始即可向上移动，同时为爬虫和问答系统提供同一层级的显式、机器可读的描述。

上述渲染路径是刻意直白的。它标识了三个真实祖先，命名了当前页面，并且仅向上链接。它不会仅仅因为某个措辞可能吸引搜索而插入"SEO导航"或其他短语。

为什么这个元素很重要

读者从搜索结果、共享链接、电子邮件和AI答案中到达深层页面。他们通常不记得网站菜单期望他们遵循的路径。面包屑导航能一眼消除这种不确定性：“我正在阅读SEO手册中的元素页面，我可以返回到任何一个集合。“这种上下文降低了探索网站的成本，而无需读者打开菜单、编辑URL或使用返回按钮。

其心理学原理关乎定位，而非装饰。清晰的路径给读者一种稳定的位置感和明确的退出路径。这在大型网站上尤为重要——相似的页面标题可能存在于不同部分，例如名为"分析"的产品类别和同名的文档板块。在读者理解页面细节之前，祖先链接就能消除歧义。

机器也需要以同样的方式表达这种关系，而不能依赖视觉间距或箭头符号。机器可提取性意味着软件可以从HTML或结构化数据中恢复单元的含义和顺序。语义化的<nav>、有序列表、普通链接、aria-current以及匹配的BreadcrumbList数据，暴露了一个具有显式位置的实体序列。而一行样式化的<span>元素可能视觉上看起来相同，却无法提供可靠的导航地标或列表顺序。

可见路径和结构化输出必须讲述同一个故事。如果页面在视觉上位于"元素"之下，但结构化数据将其父级称为"SEO工具”，那么系统会收到两个相互矛盾的层级。这种不一致比省略结构化数据更糟糕，因为它使网站的实体关系变得不可信。

在选择此组件时，请遵循元素写作规则 。这里的优先规则适用：如果某段文字的用途是传达层级和向上导航，请使用类型化的面包屑元素。不要用自由文本、斜杠分隔的子标题或带链接的关键词来模仿它。

何时使用

当页面属于一个稳定的层级结构，且至少有一个首页之外的有意义的父级时，请使用面包屑导航。大型编辑网站、电商目录、文档库、服务区域结构、目录和多层级产品网站受益最大，因为访问者通常从顶层以下进入。

在某个板块内要保持一致性。如果只有部分产品页面出现面包屑路径，会让读者怀疑缺失的页面是否属于其他地方，并使自动化解释依赖于模板的偶然性。内容模型或路由应提供层级结构；作者不应在每个页面上独立重建它。

当没有层级需要表达时，不要使用面包屑导航。单页活动、每个页面都直接位于首页之下的浅层网站，或临时应用状态，可能从中得不到有用的路径。在每个浅层页面添加"首页 › 当前页面"可能会造成视觉噪点，而不会揭示新的上下文。

常见误用包括：

• 浏览器历史路径。 “搜索 › 产品 › 购物车"记录的是会话，而非内容层级。不同访问者会为同一页面看到不同的父级，因此这种关系不是权威的。
• 关键词路径。 “最佳CRM › 廉价CRM › 初创企业CRM"可能将目标短语展示在视野中，但它编造了可能不存在为可导航页面的祖先。面包屑标签命名的是真实节点；它们不是额外的标题标签。
• 筛选路径。 “鞋子 › 蓝色 › 9码"描述的是选中的筛选维度。除非每一步都是具有有意的父级关系的稳定、可索引的着陆页，否则它应属于筛选控件。
• 进度指示器。 “详情 › 支付 › 确认"表示交易中的步骤。这需要步骤条语义和状态，而非BreadcrumbList标记。
• 目录。 章节链接在当前文档内移动；面包屑则在网站层级的文档之间移动。
• 标签链。 标签描述多对多的主题，而面包屑需要一个有序的主路径。一个页面可以有多个标签，但不应用多个相互竞争的父级来显示在同一个路径中。

当一个页面合法地出现在多个集合中时，为面包屑选择一个主要权威层级。通过上下文链接或集合页面保留其他发现路径。多个面包屑路径会迫使读者和结构化数据消费者决定哪个父级是权威的。

放置位置

定位功能只有在页面需要解释之前到达才有效，因此请将路径放在全局站点标头之后、页面的H1或主视觉区域之前。它应是第一个页面特定的导航区域。即使路径在不同布局中换行方式不同，桌面端和移动端也应保持相同位置。

不要将面包屑放在目录、共享工具栏、分类标签、账户控件或促销徽章旁边。这些元素回答不同的问题，会使本应专注的定位线条看起来像通用工具栏。不要在路径和H1之间放置广告或内联行动号召。如果主视觉区域包含两者，将面包屑堆叠在标题上方，将促销内容放在介绍文案下方。

结构解析

1. 导航地标： 一个具有可访问名称"Breadcrumb"的<nav>，将此路径与全局和本地导航区分开来。
2. 有序列表： 顺序从最广泛的祖先到当前页面传达含义，因此即使列表标记在视觉上被移除，也需要使用<ol>。
3. 祖先项： 每个祖先项使用其权威的人类可读标签和指向真实父页面的可爬取链接。
4. 分隔符： 使用箭头或斜杠在视觉上分隔各项。它是装饰性的，对辅助技术隐藏。
5. 当前项： 最后一项命名当前页面，无链接，并使用aria-current="page"。
6. 文档关系： 路径位于H1之上。截图标注了此位置，但放置由模板控制，而非撰稿内容。

设计示例

变体改变密度和响应行为，但从不变更底层层级。

默认： 当二至五个简洁项适合时，显示完整路径。这是首选变体，因为没有隐藏任何上下文。

长路径： 仅在每一级代表一个真实可导航祖先时，才允许六或七项路径。在项目边界处换行；切勿缩小文本至难以阅读。

移动端折叠： 当真实路径无法可接受地换行时，保留首页、直接父级和当前页面。一个可获得焦点的省略号控件可以显示隐藏的中间祖先。完整路径必须保留在DOM中或通过该控件可用，且结构化数据必须保留每个真实项。

深色主视觉区域： 颜色和焦点指示器会适应背景，但标签、顺序、链接行为和可访问名称与默认相同。

参数

该元素是一个结构化列表，因为标签和URL的平行数组容易错位。项目顺序即层级结构，相同的项目同时供给可见HTML和结构化数据。

第一个标题在此元素中没有映射。面包屑是一个导航地标，而非有标题的内容板块，在项中放置标题会创建虚假的文档层级。默认情况下，最后一项在创作源中省略url；渲染器可使用页面的权威URL输出BreadcrumbList，而无需将可见的当前项变成自链接。

两项意味着一个祖先加上当前页面。五个是正常上限。七个是硬性上限，因为更深的路径变得难以浏览，通常表明存在一个IA问题，应从根源修复而非通过样式隐藏。

语法和代码示例

规范的组件名称为breadcrumbs。其项顺序必须来自网站经过审核的层级数据，即使示例中展示了内联值。

可移植Markdown指令

:::breadcrumbs{ariaLabel="Breadcrumb" schema=true collapse=mobile}
::item{label="首页" url="/"}
::item{label="SEO手册" url="/seo-playbook/"}
::item{label="元素" url="/seo-playbook/elements/"}
::item{label="面包屑导航" current=true}
:::

Hugo短代码

{{< breadcrumbs ariaLabel="Breadcrumb" schema="true" collapse="mobile" >}}
  {{< breadcrumb-item label="首页" url="/" />}}
  {{< breadcrumb-item label="SEO手册" url="/seo-playbook/" />}}
  {{< breadcrumb-item label="元素" url="/seo-playbook/elements/" />}}
  {{< breadcrumb-item label="面包屑导航" current="true" />}}
{{< /breadcrumbs >}}

这是可移植适配器约定，而非指示在此仓库中添加新的短代码。Hugo实现通常应从页面祖先和section元数据派生项目，以便编辑者无法发布与路由不一致的路径。

WordPress区块

<!-- wp:amicited/breadcrumbs {"ariaLabel":"Breadcrumb","schema":true,"collapse":"mobile"} -->
<!-- wp:amicited/breadcrumb-item {"label":"首页","url":"/"} /-->
<!-- wp:amicited/breadcrumb-item {"label":"SEO手册","url":"/seo-playbook/"} /-->
<!-- wp:amicited/breadcrumb-item {"label":"元素","url":"/seo-playbook/elements/"} /-->
<!-- wp:amicited/breadcrumb-item {"label":"面包屑导航","current":true} /-->
<!-- /wp:amicited/breadcrumbs -->

WordPress应从页面的主父级链和权威URL填充区块。手动覆盖需要编辑审核，因为更改一个标签可能导致导航、结构化数据和网站架构不一致。

示例

好的示例：真实、可导航的层级

首页 › 文档 › 审计 › 新鲜度审计

这一点很好，因为"文档”、“审计"和"新鲜度审计"是以该父子顺序存在的真实权威页面。每个祖先都预测了其目标，当前标签足够简洁，无需重复整个H1即可确认位置。

差的示例：伪装成层级的关键词

首页 › 最佳AI SEO工具 › 经济实惠的AI可见度平台 › 面包屑导航

这一点很差，因为中间两个标签不是真实的父级页面。该路径做出了其链接无法兑现的承诺，用推广性短语代替了板块名称，并为爬虫创建了虚假的实体链。请用最短的实际祖先路径替换。如果希望的概念值得拥有页面，请先创建这些页面并将其集成到IA中；不要在面包屑中预览虚构的架构。

Schema标记和无障碍

面包屑可以生成Schema.org BreadcrumbList，一个其条目为ListItem对象的有序列表。使用基于一的正整数position值，并保持name和item与可见标签和权威目标一致。从同一数据对象生成JSON-LD和HTML，以便重命名、移动或权威URL的更改能同时更新两个输出。

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {"@type":"ListItem","position":1,"name":"首页","item":"https://amicited.com/"},
    {"@type":"ListItem","position":2,"name":"SEO手册","item":"https://amicited.com/seo-playbook/"},
    {"@type":"ListItem","position":3,"name":"元素","item":"https://amicited.com/seo-playbook/elements/"},
    {"@type":"ListItem","position":4,"name":"面包屑导航","item":"https://amicited.com/seo-playbook/elements/breadcrumbs/"}
  ]
}

Schema描述的是可见层级；它不授权第二条优化路径。不要包含重定向、跟踪参数、非权威协议或主机变体、站内搜索结果、会话状态或隐藏的关键词分类。不要为两个可能的分类法发布两个BreadcrumbList对象。在内容模型中选择主路径并在各处使用。

无障碍始于<nav aria-label="Breadcrumb">和一个有序列表。可访问标签区分此导航区域，而无需可见标题。使用aria-hidden="true"隐藏装饰性分隔符，或通过CSS创建，以使屏幕阅读器不会在每个项目之间朗读"大于号”。仅用aria-current="page"标记最后一项，并且不要将其链接到自身。

每个祖先链接需要可见的焦点指示器和足够大的触摸目标。长路径必须通过键盘可操作控件换行或折叠；隐藏当前位置的水平滚动不是可接受的默认方案。截断可缩短视觉标签，仅当完整的可访问名称仍然可用且缩短后的文本仍然可区分时。切勿仅依赖颜色来区分有链接的祖先和当前项。

写作规则

面包屑标签是位置名称，因此像导航而非微型标题一样撰写。使用每个章节或页面的官方、最短且无歧义的名称。“文档"比"浏览所有产品文档"更好，因为目标页面提供了上下文，而路径必须保持可扫描性。

• 每个标签使用一到六个词，不超过60个字符。短标签使层级在换行前即可见；这并非允许缩写不熟悉的术语。
• 通常使用二至五个项（包括当前页面）。仅在每一级在结构上必要时允许六或七个。
• 按从最广泛祖先到当前页面的顺序排列项。切勿颠倒路径或在此序列中放置同级项。
• 使用句首大写，除非品牌、产品或缩写有批准的拼写方式。
• 保持标签跨页面稳定。同一个父级不能在一个路径中叫"文档"而在另一个路径中叫"资料”，除非导航系统全局更改。
• 使祖先标签与目标的可见名称匹配或紧密反映。简洁的导航标签是可接受的；不同的关键词目标则不是。
• 简洁地命名当前页面。它可以缩短长H1，但仍必须标识同一文档。
• 使用中性语气。面包屑用于定位；它们不推销、不祝贺、不警告、不指示。

切勿在面包屑标签中放置行动号召、价格、库存状态、日期、作者姓名、评分分数、表情符号、具有独立含义的图标、促销声明、跟踪代码或查询参数。切勿添加"返回”、“上一页"或"下一页"作为项，因为这些控件表达的是历史或顺序而非祖先关系。分隔符是渲染器拥有的呈现元素，不属于任何标签的一部分。

使用此元素的发布类型

postTypes frontmatter记录了支持的关联。该表格将这些关联转换为使用和放置规则；它并非声称每个实例都需要手动撰写的路径。

“通常需要"表示当网站具有指定的稳定父级时使用该元素，并在真正浅层的实现上省略它，而非编造额外层级。“总是需要"假定所声明的嵌套结构存在。模板应拥有渲染权；发布类型定义了预期的层级来源和编辑例外。

QA检查清单

• 真实层级： 每个祖先都是网站主要IA中真实、有意的父级，而非关键词、标签、筛选或先前访问。
• 正确位置： 路径出现在全局标头之后、H1之前，其间没有促销或无关工具栏。
• 单一路径： 页面暴露一个可见面包屑和一个匹配的BreadcrumbList，而非竞争性路径。
• 完整顺序： 项从最广泛祖先到当前页面排列，没有缺失的结构层级或添加的同级项。
• 权威链接： 每个祖先直接解析到其权威、可索引的URL，无跟踪参数或可避免的重定向。
• 当前状态： 最后一个可见项命名当前页面，无链接，并具有aria-current="page"。
• 简洁标签： 每个标签使用官方最短无歧义名称，遵循句首大写，并保持在编辑限制内。
• 语义HTML： 组件使用有标签的导航地标和有序列表；它并非一行通用span元素。
• 装饰性分隔符： 分隔符对辅助技术隐藏，不出现在可访问链接名称内。
• 响应行为： 当前位置在窄屏上仍然可用；换行、展开、焦点顺序和触摸目标正常工作，无隐藏水平内容。
• Schema一致性： BreadcrumbList名称、权威URL、顺序、项数和位置在实质上与完整的可见层级匹配。
• 单一数据源： HTML和JSON-LD由同一经审核的层级生成，而非作为独立副本维护。
• 可移植性一致： Markdown、Hugo和WordPress表示保留相同的项顺序、标签、目标和当前状态。
• 截图状态： 在真实资源存在之前，截图注释保持为非渲染指令；无引用不存在的截图作为图像。

常见问题

学院模板渲染存储在frontmatter中的五个经审核的问题。它们涵盖URL路径、当前项、结构化数据、不稳定的筛选页面和实际深度限制。