HTML中实现面包屑导航的结构与Schema标记方法-html教程-PHP中文网

面包屑导航必须用包裹，路径项用结构，末项加aria-current="page"；schema.org标记需用https://schema.org/breadcrumblist，@context不可省略且必须为https，position从1严格递增。

html中实现面包屑导航的结构与schema标记方法

面包屑导航的HTML结构必须用`<nav></nav>`包裹并包含`aria-label`

不加语义化容器或可访问性属性，屏幕阅读器会把面包屑当成普通文本读出，用户无法识别这是导航路径。实际开发中常见错误是直接用<div>或<code><p></p>包一层<span></span>，这等于没做。

正确结构要满足三点：

<nav></nav>元素必须带aria-label="Breadcrumb"（值可为"Breadcrumb"或"您当前的位置"，但英文 Schema 更认Breadcrumb）
路径项之间用<ol></ol>有序列表，每项是<li>，末项不加链接
分隔符不能用纯文本/或>，要用<span aria-hidden="true"></span>包裹，否则会被朗读出来

示例片段：

<nav aria-label="Breadcrumb"><ol>
<li><a href="/">首页</a></li>
    <li><a href="/products">商品</a></li>
    <li><a href="/products/electronics">数码</a></li>
    <li aria-current="page">手机</li>
  </ol></nav>

Schema.org标记必须用`https://schema.org/BreadcrumbList`且`@context`不可省略

Google Structured Data Testing Tool 会直接报错如果漏掉@context，或者用了http而非https。很多开发者复制旧文档代码，里面还是http://schema.org，现在已不被支持。

关键点：

@context必须是"https://schema.org"（注意是https）
@type必须是"BreadcrumbList"（大小写敏感，不能写成breadcrumblist或Breadcrumb）
itemListElement数组里每个对象必须含@type: "ListItem"、position（从1开始）、name和item（URL）
当前页的item可以是相对路径，但必须能被解析为绝对URL（比如"./phone"在https://example.com/products/electronics/下会被补全）

内联JSON-LD示例（推荐方式）：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [{
    "@type": "ListItem",
    "position": 1,
    "name": "首页",
    "item": "https://example.com/"
  },{
    "@type": "ListItem",
    "position": 2,
    "name": "商品",
    "item": "https://example.com/products"
  },{
    "@type": "ListItem",
    "position": 3,
    "name": "数码",
    "item": "https://example.com/products/electronics"
  },{
    "@type": "ListItem",
    "position": 4,
    "name": "手机",
    "item": "https://example.com/products/electronics/phone"
  }]
}</script>

动态生成时`position`必须严格递增且从1开始

后端模板或前端React/Vue组件里拼接itemListElement时，最容易出错的是position值重复、跳号，或从0开始。Google Search Console会静默忽略整个BreadcrumbList，不会报错提示。

检查逻辑是否可靠：

不要依赖URL层级数推算position（比如/a/b/c就设为3），因为路径可能有重定向或别名
必须由真实渲染的面包屑数组索引决定：第1个元素position: 1，第2个position: 2……
当前页节点也要计入position，不能只给链接项赋值
如果页面无面包屑（如404页），整个<script type="application/ld+json"></script>块应完全不输出

CSS样式不影响Schema解析，但`aria-current="page"`影响可访问性体验

视觉上用箭头、斜杠或CSS伪元素做分隔，对搜索引擎完全无影响——它只看HTML结构和JSON-LD。但aria-current="page"这个属性，决定了屏幕阅读器能否准确告知用户“这是当前页”，而不是念成“手机链接”。

几个易忽略细节：

aria-current="page"只能加在最后一项的<li>上，不能加在<a></a>里（当前页通常无链接）
如果当前页仍有链接（比如分类页支持筛选参数），仍需保留<a></a>，但必须同时加aria-current="page"和aria-disabled="true"，否则会被当作可点击项
不要用display: none隐藏某一级（如首页），而应从HTML结构中移除对应<li>，否则position序号会断层