网站面包屑导航正确设置方法（兼顾用户体验 + SEO）

面包屑（Breadcrumb）是页面上方的路径导航，作用：告诉用户当前在网站哪个位置、方便返回上级；给搜索引擎传递页面层级关系，可获得搜索结果里的面包屑富摘要展示。

一、基础结构规范（推荐层级）

首页 > 一级分类 > 二级分类 > 当前页面

层级控制：最多 3～4 级，不要过长，超过 4 级用户和爬虫可读性变差
分隔符：用 > 通用；也可用 /、»，不要用图片做分隔符（搜索引擎识别困难）
文字规则
1. 文字简短，和导航栏、页面标题保持一致，不要随便造别名
2. 最后一项（当前页）不加链接，只做纯文本；前面所有层级都加可点击超链接
3. 首页固定文字：首页 / Home，不要写长标题

✅ 示例：首页 > 减速机 > 硬齿面减速机 > 平行轴硬齿面减速机

首页、减速机、硬齿面减速机：可点击链接
平行轴硬齿面减速机：纯文本，不可点

二、三种面包屑类型，优先选【位置型面包屑】

位置面包屑（SEO 首选）：展示网站栏目层级（推荐，适合企业站、产品站、资讯站）
路径面包屑：记录用户浏览历史，不推荐做主要面包屑；用户来回跳转时路径混乱，搜索引擎不推荐
属性面包屑：按筛选条件（规格、颜色），适合电商筛选页，不能替代位置面包屑

制造业官网、营销型建站，只用位置面包屑。

三、HTML 代码 + Schema 结构化数据（核心，获取搜索结果富文本）

1. HTML 结构示例

<nav aria-label="面包屑导航">
  <ol>
    <li><a href="/">首页</a></li>
    <li><a href="/jiansuji/">减速机</a></li>
    <li><a href="/jiansuji/yingchimian/">硬齿面减速机</a></li>
    <li>平行轴硬齿面减速机</li>
  </ol>
</nav>

标签：用 <nav aria-label="面包屑导航"> + <ol>有序列表，符合语义化
aria 标签提升无障碍访问，手机、读屏设备友好

2. BreadcrumbList 结构化数据（必须加，百度 / 谷歌识别）

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "item": {
        "@type": "WebPage",
        "@id": "shturl.cc/BXCiA9",
        "name": "首页"
      }
    },
    {
      "@type": "ListItem",
      "position": 2,
      "item": {
        "@type": "WebPage",
        "@id": "shturl.cc/BXCiA9jiansuji/",
        "name": "减速机"
      }
    },
    {
      "@type": "ListItem",
      "position": 3,
      "item": {
        "@type": "WebPage",
        "@id": "shturl.cc/BXCiA9jiansuji/yingchimian/",
        "name": "硬齿面减速机"
      }
    },
    {
      "@type": "ListItem",
      "position": 4,
      "item": {
        "@type": "WebPage",
        "@id": "shturl.cc/XwPoWdN9l8vdoa1mx8DqSPWI100EyfKfu72bqJTkCGPO",
        "name": "平行轴硬齿面减速机"
      }
    }
  ]
}
</script>

要点：

position序号从 1 依次递增
最后一项也要写，@id填当前页面 URL
放到页面 head 或者 body 底部都可以；每个内页都独立部署

四、页面布局与 UI 设置规则

位置：页面标题上方，banner 下方，全站统一位置；不要放页脚
移动端：保留面包屑，字体缩小，自动换行，不要隐藏（很多建站模板移动端直接删掉面包屑，损失 SEO）
链接样式：和正文链接区分，颜色浅一点，不要和主标题一样醒目；不做加粗、大字号
不要重复：面包屑不要和主导航完全重复，只做路径辅助

五、常见错误（一定要避开）

❌ 当前页面也加链接（会出现自链，爬虫迷惑） ❌ 层级超过 5 级，路径冗长 ❌ 用图片、Flash、JS 动态渲染面包屑，无静态文本 ❌ 用浏览历史作为面包屑，层级乱跳 ❌ 全站面包屑写死，所有页面路径一模一样 ❌ 缺少 Breadcrumb 结构化数据，无法触发搜索面包屑展示 ❌ 分类名称和面包屑文字不一致（栏目叫 “斜齿轮减速机”，面包屑写 “齿轮减速器”） ❌ 404 页面、单页、联系我们这种独立页面强行套多层面包屑