選顧客真正需要的上層頁

麵包屑路徑由較廣的頁面逐步帶到目前頁面。W3C 的模式把它描述為按層級排列的上層頁連結,讓使用者知道自己在網站哪裏。放在產品頁,它的實際用途是讓正在看某款檯燈的顧客回到全部檯燈,而非重新由首頁搜尋。寫標記前,要先決定哪個上層頁能提供這種有用的下一步。答案應由目錄架構和顧客旅程決定,不應自動沿用訪客來源。顧客可從搜尋、電郵或季節活動進入同一產品;這些入口不應令產品無端出現互相矛盾的永久位置。

有些產品確實屬於多個類別,例如檯燈既可列入「書桌照明」,也可列入「禮物」。應選一條全年仍有用的主要路徑;若網站能妥善維持不同情境,也可有明確設計的情境路徑。逐條點擊上層連結:它會到達仍可使用、產品相關的分類頁,還是只有少量內容的短期活動頁?不要只為路徑看來豐富而多加層級。小型目錄若「商店」和「產品」通往同一清單,連續列出兩層反而增加負擔。每一步都應是顧客可能真的想前往的不同位置。

讓路徑可讀、可操作

把路徑放在產品主要內容之前,讓訪客先知道位置,同時不搶產品標題的作用。連結名稱應簡短而具體;「照明」和「書桌燈」比兩個都叫「產品」的連結更有用。目前頁可用純文字或連結表示,但要讓人知道它是目前位置。W3C 模式指出,路徑應放在有名稱的導覽區;若目前頁仍是連結,應使用 aria-current=page,若不是連結則可不用。這些細節可讓輔助科技把麵包屑與主選單或頁尾連結分開,也避免最後一項看起來像另一個未解釋的目的地。

用鍵盤及窄屏手機測試可見路徑。上層連結要有清楚焦點和可用的點擊範圍;較長的繁體中文名稱不能與產品標題重疊。分隔符可作視覺提示,但樣式失效時,連結文字和排列次序仍要說明路徑。不要把整條路徑變成一個連結,也不要把中間層級藏在沒有標籤的圖示後。若手機空間不足,精心選定的「返回書桌燈」連結可能比被截斷、看不到上層名稱的路徑更實用。採用簡化版時,仍要核對完整層級在需要的地方可用,結構化資料亦不可描述根本不存在的頁面。

結構化資料須對應真實目的地

Google 的 BreadcrumbList 文件說明,麵包屑結構化資料可協助其在搜尋結果中理解頁面分類。資料由有次序的項目組成,包含名稱、位置,以及上層連結的目的地;文件並沒有承諾一定出現某種搜尋外觀或提升排名。標記應描述真實路徑,不能用來憑空製造額外分類。Google 指出,支援其麵包屑功能的 BreadcrumbList 至少要有兩個 ListItem;網站主機層和目前頁則不是必須列出的項目。可見導覽與標記路徑即使技術表示不同,也應講同一個架構故事。

瀏覽器網址不一定等於目錄層級。產品網址可以簡短而穩定,即使分類日後調整亦不變;相反,網址包含分類字眼,也不代表目的地至今仍是有用的分類頁。每個上層連結都要核對最終頁面、標題和語言。雙語網店的英文產品頁應連到相應英文上層頁;繁體中文版則連到中文上層頁,前提是這些版本真實存在。名稱應按各語言自然書寫,而非機械複製網址代碼。分類改名時,要同時更新可見路徑與結構化資料,避免訪客看到舊名稱,點入後卻到另一個地方。

以目錄改組作實例

假設一家零售商在節日活動期間,把便攜書桌燈放在「首頁 > 禮物 > 港幣五百元以下 > 檯燈」。活動結束後,「五百元以下」頁面封存,但產品仍在「照明 > 書桌燈」出售。舊麵包屑此時會把顧客帶到空白活動頁;若價格改變,更可能變得錯誤。團隊改用「首頁 > 照明 > 書桌燈 > 便攜書桌燈」作穩定路徑,而活動仍進行時,可另外保留活動列表入口。這裏的價格界線純屬虛構例子,不是任何真實商戶的優惠或售價聲明。

檢查時應對照產品頁可見路徑、BreadcrumbList 資料、英文及中文上層目的地,並模擬從外部搜尋結果直接進入產品頁。每條分類連結都應到達合適頁面,目前產品應清楚位於路徑終點。再測試同一分類的另一件產品,確認層級規則是共通設計,不是為單一商品硬寫。若上層分類已沒有產品,可改選另一真實上層、把該頁保留作有用指南,或移除該步;不能只因結構化資料範本期待多一列,就保留空白上層。

一併驗收導覽與搜尋解讀

驗收應從顧客出發:直接進入產品頁的人,能否辨識並用鍵盤到達有用的上層?該上層頁是否真的有相關商品?手機寬度下路徑還能理解嗎?之後檢查實際輸出頁,確認導覽區有清楚名稱,目前頁狀態恰當。最後按 Google 現行文件檢查結構化資料,抽查有兩個可能分類的產品,以及近期改過分類的產品。語法測試通過,只能證明標記格式可讀,不能證明選出的上層對顧客有用。內容取捨與技術驗證應同時完成。

新增或移除分類時,應記錄誰負責決定層級。商品負責人知道產品為何屬於某分類;開發人員知道路徑如何產生;編輯則可檢查兩種語言的名稱是否合理。規則應寫明主要上層、例外商品如何處理,以及何時更新連結和標記。活動結束、分類停用或產品移位後都應複查。舊分類頁若已重新導向,也要核對顧客最後到達哪裏;導到無關首頁不是有用的上層。若上層頁受限制或暫時不可用,應先修正目的地。目標是一條持久路徑,讓顧客從單件商品返回較廣的選擇,並準確描述網站現時結構。即使搜尋引擎從未顯示麵包屑外觀,路徑本身仍應有用。

若目錄較大,抽查應涵蓋最容易破壞規則的情況:同時屬於兩個分類的產品、改過名稱的分類、只有一種語言版本的產品,以及活動後移位的商品。像顧客一樣逐條打開上層連結,再把實際頁面與連結名稱對照。例外商品應記下預期的主要上層。這比只檢查首頁和一件熱門貨品更有用;一旦自動產生的麵包屑把多件商品送入空白分類,團隊也可從紀錄找出要修正的目錄規則。

進行前先確認

  • 每條上層連結是否指向相應語言、仍有用的頁面?
  • 鍵盤及輔助科技使用者能否識別路徑和目前頁?
  • 可見導覽與 BreadcrumbList 是否描述同一層級?

資料來源及延伸閱讀