91A网络 聊聊项目

面包屑导航:层级与结构化数据

网站建设博客 · · 约 4 分钟

面包屑做两件事:告诉用户「我在哪」,告诉搜索引擎「这一页属于谁」。配上 BreadcrumbList 结构化数据后,搜索结果里的 URL 会显示成层级路径,比一串参数好看得多,点击率也更高。

三层就够

首页 › 栏目 › 当前页。四层以上说明结构太深,该先改结构,而不是靠面包屑补救。

当前页不加链接,用普通文本或 aria-current="page" 标出。

文案要与导航一致

面包屑里的栏目名,必须和主导航里的一模一样。两套叫法会让用户以为进了另一个栏目,也会让结构化数据的层级自相矛盾。

结构化数据写法

{"@type": "BreadcrumbList", "itemListElement": [
  {"@type": "ListItem", "position": 1, "name": "首页", "item": "https://example.com/"},
  {"@type": "ListItem", "position": 2, "name": "服务", "item": "https://example.com/services/"},
  {"@type": "ListItem", "position": 3, "name": "网站建设"}
]}

最后一项不给 item,因为它就是当前页。

三个常见错误

  • 层级与真实 URL 不一致(URL 是 /a/b/c/,面包屑只有两层)
  • 每个页面都从「首页 › 产品」开始,即使这一页不属于产品
  • 把面包屑做成图片,机器读不到

位置与样式

放在页面顶部、标题之上,字号比正文小一档,颜色弱化。手机上可以只保留上一级,用「返回」替代完整路径。

页面结构本身怎么定见导航三层以内。

结构化数据怎么验证

三种验证方式,从粗到细:

  1. 构建时解析:每次生成后把 JSON-LD 当 JSON 解析一遍,语法错误当场暴露
  2. 富媒体测试工具:贴单个 URL,看是否有错误与警告
  3. 搜索结果实看:上线两到四周后,搜自己的品牌词,看路径是否替换成层级显示

第一种最便宜,也最容易被忽略——一段少个逗号的 JSON-LD 会整块失效,而页面看起来毫无异常。

常见问题

面包屑会不会和导航重复?
功能不同。导航是「可以去哪」,面包屑是「现在在哪」。两者同时存在是标准做法,不算冗余。
首页需要面包屑吗?
不需要。首页是层级起点,加面包屑只会出现「首页 › 首页」。
面包屑要不要包含首页?
要。首页是层级起点,缺了它路径不完整。

说说你的目标,我们给一份可执行的清单

先做一次诊断,再决定做哪几项。不签长约也能拿到结论。