百度明确偏好用>而非/作面包屑分隔符，HTML需扁平结构、flex布局，结构化数据须用JSON-LD且顺序严格对应，移动端需JS动态截断。
面包屑导航必须用 > 而不是 / 分隔
百度明确偏好 >（大于号）作为面包屑层级分隔符，/ 容易被识别为路径分隔而非语义层级。实测中，使用 / 的页面在百度搜索结果中更难触发富摘要里的“子标题”展示。
实际排版建议：
- HTML 结构保持扁平：每个层级用
<a>包裹，末尾层级用<span>或<strong>，避免全部可点击 - 分隔符统一放在
<span>内，不加空格（如<span>></span>），防止换行错位 - 不要用 CSS 的
::after伪元素生成>，百度结构化数据提取器可能无法解析
横向布局必须用 display: flex，别碰 float 或 inline-block
响应式场景下，float 易导致父容器塌陷、移动端换行错乱；inline-block 默认有空白间隙，需额外处理字体大小或注释，维护成本高。
推荐写法（兼容 IE11+）：
立即学习“前端免费学习笔记（深入）”；
.breadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.breadcrumb > * + * {
margin-left: 8px;
}
.breadcrumb > * + *::before {
content: ">";
margin-left: -8px;
margin-right: 8px;
color: #999;
}
关键点：
-
flex-wrap: wrap保证超长时自动折行，不溢出容器 - 用
::before插入分隔符比在 HTML 里硬写更利于 SEO 数据标注 - 移动端可加
@media (max-width: 768px)把margin-left改为0避免挤压
结构化数据必须用 JSON-LD，且层级顺序不能颠倒
百度只认 JSON-LD 格式的面包屑结构化数据，Microdata 或 RDFa 基本无效。且 itemListElement 数组顺序必须和 HTML 中视觉顺序严格一致——首页在前，当前页在最后。
常见错误：
- 把当前页的
position设为1（正确应为数组长度值，如共 4 级则当前页 position=4） - URL 没用绝对路径（如写
"url": "/seo/basic"而非"url": "https://example.com/seo/basic"） - 中文标题没做 HTML 实体转义，导致 JSON 解析失败
移动端折叠逻辑要靠 JS 控制，CSS 媒体查询不够用
纯 CSS 无法判断“是否超出容器宽度”，所以横向面包屑在窄屏上直接隐藏中间项或显示省略号是不可靠的。真实项目中必须用 JavaScript 动态计算并截断。
最小可行方案：
- 监听
window.resize和DOMContentLoaded - 用
element.getBoundingClientRect().width累加所有项宽度，对比容器宽度 - 当超出时，把第 2～n-1 项设为
display: none，并在第二项前插入"…"文本节点 - 注意避开 SEO 关键词密度影响——隐藏项仍保留在 DOM 中，仅视觉隐藏
这个环节最容易被忽略：很多团队以为加了 @media 就算响应式完成，结果百度移动抓取时看到的是被截断但无省略提示的残缺路径。
