麵包屑這個術語源自於童話故事糖果屋,漢賽爾與葛麗特在前往森林的路上放了許多麵包屑,這樣即使迷路了也能順著麵包屑找到回家的方向。
網頁上的導覽標記 (麵包屑) 也有類似的概念。透過導覽標記 (麵包屑) 的協助,訪客可以知道目前所在的位置並順著路徑回到上一層頁面。
看完本篇文章你會了解什麼是導覽標記、使用導覽標記的好處有哪些以及如何在 WordPress 網站新增導覽標記。
什麼是導覽標記?
導覽標記是由一小段可點擊的文字所組成的路徑,通常位於網頁的上方,用於呈現特定頁面在網站階層中的位置。

舉例來說,當你在星巴克的官網瀏覽「巧克力可可碎片星冰樂」商品時,你會看到頁面的左上方顯示以下路徑:首頁»商品»飲料專區»星冰樂»摩卡可可碎片星冰樂。
藉由上面的路徑你可以知道目前所在的位置 (頁面) 是「巧克力可可碎片星冰樂」,然後可以回到「星冰樂」這個上層商品分類頁面或是直接返回「首頁」。
使用導覽標記的好處
雖然導覽標記在網頁上所占的空間不多,但是對於使用者體驗與 SEO 卻有著重要的影響。以下是使用導覽標記的好處:
提升使用者體驗
沒有人喜歡迷路,當使用者找不到他們想要查找的資料時,如果網頁又沒有明確的指引,最終的結果就是離開。
導覽標記提供另一種瀏覽網站的方法,幫助使用者以更有效率的方式探索網站。再也不用點擊「上一步」按鈕或是關閉網頁,有效降低跳出率,大幅改善使用者體驗。
改善 SEO 排名
除了透過提交 Sitemap 讓 Google 了解網站整體的架構之外,你也可以在網站上新增導覽標記,以便爬蟲透過連結清楚網站的結構。
另外,導覽標記不僅只是一串可點選的文字,新增結構化標記可以讓你的網頁在搜尋結果頁面表現得更突出!
如何在 WordPress 新增導覽標記?
了解導覽標記的好處之後,接下來就要在你的 WordPres 網站上新增它。方法有很多種,你可以選擇以下任一方式達成:
透過佈景主題
大部分的 WordPress 佈景主題都有內建導覽標記的功能,如果你對於選什麼主題沒有頭緒,推薦你使用 Astra,理由如下:
- 免費版即有導覽標記的完整功能
- 包含 JSON-LD 結構化標記,讓你的網頁在搜尋結果頁上更吸引人
在 Astra 佈景主題新增導覽標記的步驟如下:
- 前往 [外觀]→[自訂]→[Breadcrumb]
- 你可以決定導覽標記出現的位置、來源、分隔線圖示、不要出現在哪裡與排列方式
- 設計的部份你可以設定背景、文字、分隔線、連結顏色以及字型樣式與間距
Astra 佈景主題的導覽標記位置只有頁首內、頁首後與標題前。如果你想要將導覽標記新增到任一位置,可以透過 Astra 提供的短代碼達成 (付費功能)。
[astra_breadcrumb]
使用到短代碼的方式來新增導覽標記是為了要符合排版上的需求,因為佈景主題所提供的位置通常都是固定的。
透過 SEO 外掛
主流的 SEO 外掛像是 Yoast、RankMath、All in One SEO 都有內建導覽標記的功能。
不論你是使用哪一款 SEO 外掛,基本上有三種方法可以在你的 WordPress 網站上新增導覽標記,如下:
- 將 SEO 外掛提供的程式碼片段貼在佈景主題的範本檔案裡,通常是放在
header.php
- 透過短代碼的方式,手動決定導覽標記要出現在網頁的哪一個地方
- 有些 WordPress 佈景主題 (像是 Astra) 有與 SEO 外掛整合,讓你可以在佈景主題中使用 SEO 外掛所提供的導覽標記
結論
導覽標記不僅搜尋引擎喜歡,同時也包含前來你網站的訪客。除了能夠讓搜尋引擎更容易爬取網站的內容之外,也能提升使用者體驗與降低跳出率。
如果你的 WordPress 網站還沒有開始使用導覽標記,建議將導覽標記新增到你的 WordPress 網站上,雖然看似渺小但卻扮演著舉足輕重的角色!