站点运营

站点运营:面包屑導航自查,別让訪客迷路在站点层級里

面包屑導航常被当成頁面顶部的装饰條,實际它同时承担位置說明、内鏈和结构化資料三重角色。本文從层級设計、可点性、文本可讀性、與 URL 的對應關系、移動端展示和 BreadcrumbList 标注几個方面,给出一份可以直接照着做的自查方法。

站点运营

站点运营:面包屑導航自查,別让訪客迷路在站点层級里

很多站点在模板里塞了一條“首頁 > 栏目 > 文章”的横條,然後几年不再看它。它不报错、不影响打開速度,看起来可有可無。但面包屑同时承担三件事:告诉訪客自己在哪一层、给站内提供一组固定内鏈、给搜尋引擎提供一份現成的层級說明。這三件事只要有一样错了,頁面结构就會變得含糊。

先把面包屑的职责说清楚

面包屑不是導航菜單的缩小版,也不是堆關鍵詞的地方。它只需要回答一個問题:目前頁面在站点的哪個位置。所以判断一條面包屑是否合格,标准不是“看起来好看”,而是它描述的层級是否和實际栏目结构、URL 路径、頁面内容三者一致。

层級要和栏目结构對齐

如果 URL 是 /tools/compress/image/,面包屑却寫成“首頁 > 图片工具 > 文章标题”,中間少了一层,訪客点進去會發現栏目頁里根本没有對應内容。自查时把最近發布的一批頁面拉出来,逐條對照 URL 路径、栏目頁實际位置和面包屑文本,不一致的地方優先修。

每一項是否真的能点

  • 除最後一項外,其余层級都應是可点击連結,且指向真實可訪問的頁面。
  • 最後一項是目前頁面自身,通常不设連結;如果设了,点击後應停留在原頁面而不是跳走。
  • “首頁”不要重复出現两次,也不要省略,否則层級起点就断了。

文字要让人和机器都看得懂

常见問题是直接輸出栏目 ID、拼音缩寫或者英文別名,例如“首頁 > news2 > 文章标题”。這類文本對訪客没有信息量,也浪費了锚文本。建议统一使用與栏目頁标题一致的名稱,長度控制在十几個字以内,過長可以适度缩寫,但不要缩到看不懂。

面包屑里的每一個連結都是一次站内指向。文字模糊、指向错誤的連結,比不放面包屑更容易造成混淆。

移動端不要直接隐藏

窄屏下把面包屑整條隐藏很省事,但也让移動訪客失去位置感。更稳妥的做法是保留第一层和最後一层,中間用省略号折叠,或者允许横向滚動。改動後记得在真机上点一遍,確認折叠後的連結仍然可点。

结构化資料要和可见文本一致

如果頁面标注了 BreadcrumbList,里面的 name 和 item 應與頁面上能看到的层級一致。不要出現頁面上顯示三級、資料里寫五級的情况。顺带检查 item 的 URL 是否為绝對地址、是否可直接訪問。标注本身不保證任何展示效果,但資料與頁面打架时,這份資料就没有意义了。

一份可以照着做的自查清單

  1. 抽取 20 個不同類型的頁面(首頁、栏目頁、詳情頁、标簽頁),導出它們的面包屑 HTML。
  2. 检查层級數量:一般 2 到 4 层比較常见,超過 5 层說明栏目结构可能需要压缩。
  3. 逐個点击面包屑連結,確認没有 404、没有多余跳轉、没有跳到不相關頁面。
  4. 核對文本與目标栏目頁标题是否一致。
  5. 在手机、平板、桌面三種宽度下截图對比,確認折叠逻辑正常。
  6. 把頁面上的面包屑和结构化資料字段做一次人工比對。
  7. 记錄本次發現的問题和修改時間,下次复查直接看這份记錄。

几個容易忽略的小地方

  • 标簽頁、搜尋结果頁這類聚合頁面是否适合出現面包屑,需要單獨判断,它們往往不在主栏目树里。
  • 频道改版後舊面包屑可能指向已经下线的栏目,改版时把模板一起過一遍。
  • 面包屑不要放進頁面的主标题区域,避免和 H1 抢层級;它更适合放在導航下方、正文之上。

面包屑是一次性投入、長期受益的小组件。模板改一次,全站頁面跟着更新;但如果一直没人核對,它也會安静地指错几年。把它列進你的站点结构检查項,和站点地图、内鏈、URL 命名放在一起看,通常能顺带發現其他层級的毛病。