面包屑导航优化指南（兼顾用户体验 + SEO）

一、用户体验（UX）优化要点

1. 控制层级深度，规范目录逻辑

错误：首页 > 资讯 > 产品 > 美食 > 零食 > 饼干（层级过深）；首页 > 产品 > 美食资讯（跨分类跳转）

2. 格式与位置统一

1. 摆放位置：全站统一放在页面头部、主导航下方、正文标题上方，严禁放在页脚；
2. 分隔符号：全站统一符号「>」「/」，不用花哨特殊符号，字号小于正文标题，弱化视觉抢占；
3. 链接规则：除当前页面文字置灰不可点击，其余上级类目全部可跳转。

3. 文案精简 + 交互优化

1. 面包屑使用类目简称，不用页面超长标题，减少文字溢出；
   例：分类名「全麦吐司面包」→面包屑简写「全麦吐司」
2. 可点击文字 hover 变色，点击直接跳转页面，禁止弹窗、新标签页打开（首页除外按需设置）；
3. 筛选 / 分页页面不新增层级：列表第 N 页、属性筛选页，面包屑沿用原分类路径，不在路径追加「第 3 页」「价格 50-100」。

二、SEO 优化核心规则

1. 合理布局关键词，杜绝堆砌

1. 首页固定文字「首页」，各级分类面包屑使用分类核心关键词（和栏目页 TDK 关键词保持一致）；
   例：首页 > 烘焙原料 > 高筋面粉，天然植入类目词；
2. 同路径避免关键词重复：首页 > 面包 > 面包制品 > 手撕面包（重复面包）→优化：首页 > 面点 > 面包 > 手撕面包。

2. 标准化内链，统一 URL

1. 面包屑跳转 URL必须和对应栏目真实 URL 完全一致，不能跳转 404、301 跳转页、动态乱码链接；
2. 面包屑是全站自动内链：所有详情页通过面包屑反向链接栏目页、首页，提升栏目收录与页面权重聚合，减少页面孤岛。

3. 统一路径，一物一路径

4. 区分「路径面包屑」和「历史浏览面包屑」

• 顶部导航只用位置路径型面包屑（层级路径），对 SEO 有效；
• 历史浏览足迹（用户浏览记录）单独放侧边栏，不混入顶部面包屑，历史导航无法给 SEO 赋能。

三、SEO 关键：配置 BreadcrumbList 结构化数据（Schema）

简易示例代码

<script type="application/ld+json">
{
  "@context":"https://schema.org",
  "@type":"BreadcrumbList",
  "itemListElement":[
    {"@type":"ListItem","position":1,"name":"首页","item":"https://xxx.com/"},
    {"@type":"ListItem","position":2,"name":"烘焙原料","item":"https://xxx.com/raw/"},
    {"@type":"ListItem","position":3,"name":"高筋面粉"}
  ]
}
</script>

规则：position 从 1 开始排序，当前页面只写 name、不填 item 链接，和页面面包屑层级一一对应。

四、移动端面包屑优化

1. 屏幕过窄时类目名称精简缩写，文字一行 / 两行展示，不遮挡正文内容；
2. 禁止 JS 异步动态渲染面包屑（爬虫无法抓取链接，内链失效），优先后端服务器直出 HTML；
3. 小屏不悬浮固定面包屑，避免占用首屏空间。

五、高频踩坑避坑清单

1. ❌ 当前页面添加超链接：自链浪费权重，用户点击无意义；
2. ❌ 图片替代文字面包屑：搜索引擎无法识别图片文字，丢失关键词与内链；
3. ❌ 筛选页疯狂新增层级：颜色、规格、价格筛选不生成新路径，避免海量无效页面；
4. ❌ 全站面包屑格式不统一：部分栏目 3 层、部分栏目 5 层，爬虫识别混乱；
5. ❌ 关键词恶意堆砌：为排名强行加长类目名称，影响用户阅读。

加分优化（资讯 / 商城站）