站点运营

站点运营:面包屑導航自查,別让位置线索只寫在 URL 里

面包屑導航不只是頁面顶部那條小字,它同时承担位置說明、内鏈分發和資料統計三重作用。本文從层級對齐、連結處理、移動端顯示到结构化資料,给出一份可逐項执行的自查清單,帮你把這條容易被忽略的導航带理顺。

站点运营

站点运营:面包屑導航自查,別让位置线索只寫在 URL 里

很多站点把面包屑当成装饰:模板里寫死一行小字,位置固定在标题上方,之後再也没人看過。但這條带子同时在做三件事——告诉訪客自己在哪、给栏目頁和上級頁面分發内鏈、為後台統計提供路径线索。它出問题的时候,往往不會报错,只是慢慢失去作用。

先確認层級和 URL 说的是同一件事

面包屑的第一层含义是位置,而位置最终要落在 URL 路径和目錄结构上。如果頁面地址是 /news/industry/2024/xxx,面包屑却寫成「首頁 > 资讯 > 行业观察」,中間少了一层年份归档,就會出現两個说法。這不一定是错,但需要你自己明确規則:以 URL 為准,還是以栏目為准。

更常见的情况是反過来:URL 是扁平的一层,面包屑却硬凑出三級。訪客点進去發現上級頁面和目前頁面几乎没有關系,這種断鏈感比没有面包屑更糟。

連結處理:除了目前頁,其他各級都该能点

  • 首頁节点尽量连到站点根地址,而不是某個带參數的活動頁。
  • 中間层級指向對應栏目頁或列表頁,不要指向标簽聚合頁来凑數。
  • 最後一級是目前頁面,通常不加連結,或者用纯文本加 aria-current="page"。
  • 如果最末一級也加了連結,检查它是不是又指回自己,形成一次没必要的自循环跳轉。

移動端和長标题是重灾区

桌面端一行能放下的层級,在窄屏上经常挤压變形:要么把标题挤出屏幕引發横向滚動,要么用省略号把中間层全部吃掉,只剩首頁和目前頁。可以尝试的做法是只保留「上一級 + 目前頁」,中間层級折叠進一個可展開的菜單;或者让容器允许換行,而不是强行 nowrap。

另外注意标题里的特殊字符和過長栏目名,在面包屑里是否需要改寫。位置說明讀得通,比照搬标题原文更重要。

结构化資料要和眼睛看到的一致

如果站点輸出了 BreadcrumbList 结构化資料,逐項核對名稱、顺序、連結是否與頁面上可见的面包屑一致。常见偏差包括:資料里寫的是舊栏目名,頁面上已经改了;資料里有四級,頁面上只顯示三級;連結指向带跟踪參數的不同地址。這類不一致不會立刻出問题,但會让你很难判断到底哪份資料可信。

自查时別只看首頁和几篇新文章。挑一批半年以上的舊内容、跨栏目内容、专题頁和活動頁,這些地方的层級最容易和歷史遗留结构打架。

一份可执行的自查步骤

  1. 随机抽取 20 個不同栏目、不同时期的頁面,把面包屑截图或複製下来。
  2. 逐條對照 URL 路径和站点主導航,标出层級不一致的頁面。
  3. 检查中間层連結是否可点、是否返回 200、是否落到正确栏目。
  4. 用手机實际打開,確認不横向溢出、不遮挡正文。
  5. 检查结构化資料,與可见文本做一次逐字段比對。
  6. 把發現的問题按模板、频道、單頁三類归档,優先修模板級問题。

面包屑的改動成本很低,通常改一次模板就能覆盖全站。但正因為改動便宜,很多团队從不回头看它,于是同一條带子在首頁正常、在舊栏目里错位、在专题頁里干脆消失。定期抽检,把這條位置线索补齐,對訪客和站内連結分發都有實际好處。