麵包屑是網站上最小、最不起眼的元件之一,常常被設計師當成裝飾隨手放上去。但我做 SEO 二十多年,愈來愈把麵包屑當成檢查網站結構的照妖鏡:它同時反映了使用者的位置感、爬蟲對階層的理解,以及你的結構到底有沒有內在一致。麵包屑做對了,它幫你在搜尋結果裡秀出清楚的層級路徑;做錯了,它會把你結構上的矛盾攤在搜尋引擎面前。這篇我把麵包屑該有的樣子,連同結構化資料的實作,一次講清楚。

1. 使用者迷路的網站,爬蟲通常也迷路

麵包屑的第一個作用是回答使用者一個問題:我現在在網站的哪裡?一條「首頁 > 分類 > 這一頁」的路徑,讓人隨時知道自己的位置,也能一鍵往上跳回分類。這種位置感對搜尋引擎同樣重要,因為麵包屑等於用文字把頁面的階層歸屬寫出來給爬蟲看。

1.1 麵包屑是頁面位置的文字說明

爬蟲不像人有視覺直覺,它需要明確的線索來判斷頁面的層級。麵包屑把「這頁屬於哪個分類、分類又屬於哪一層」用可讀文字寫出來,是爬蟲理解階層最直接的來源之一。我的做法是把麵包屑當成頁面的座標,每一頁都應該能標出自己的座標。

1.2 頂部提供清晰路徑,不要藏起來

麵包屑應該放在頁面頂部、內容開始之前的顯眼位置,格式就是「首頁 > 分類 > 頁面」。我在實務上看過把麵包屑做得又小又淡、幾乎看不見的網站,這等於白做了。它要讓使用者一眼看到、一點就能往上,對爬蟲也要是初始 HTML 裡就存在的可讀文字。

1.3 麵包屑能提升搜尋結果的點擊率

當麵包屑搭配結構化資料,搜尋結果的網址列有機會顯示成清楚的層級路徑,而不是一長串網址。這種呈現讓使用者在點進來之前,就理解這頁在網站裡的位置與脈絡,對點擊率是有幫助的。這也是麵包屑值得認真做的實際誘因之一。

2. 三次點擊到得了,是檢驗結構最簡單的尺

業界有個好用的經驗法則:所有主要頁面,應該能從首頁在三次點擊內抵達。這條規則不是為了湊數字,而是一把量尺,用來檢查你的結構有沒有把重要內容埋太深、有沒有製造出點不到的死角。

2.1 三次點擊背後是抓取效率

三次點擊可達,對應的是爬蟲能不能有效率地走遍全站。頁面離首頁越遠,爬蟲抵達它、更新它的頻率就越低。我的做法是拿幾個最重要的頁面,從首頁實際點點看,如果要點四五次才到,代表結構需要調整,而麵包屑正好會把這個過深的路徑顯示出來。

2.2 麵包屑本身就是縮短點擊的捷徑

麵包屑不只是顯示位置,它每一層都是可點的連結,等於在每個深層頁面上,都替使用者與爬蟲開了一條往上跳的捷徑。我在實務上看過靠著把麵包屑補齊,讓原本很深的頁面實際點擊距離縮短的例子。它是少數同時對使用者體驗與抓取效率都有幫助的元件。

2.3 用點擊深度盤點問題頁

從首頁的點擊次數 使用者體驗 爬蟲抓取 建議
1 至 2 次 容易到達 抓取頻繁 保留給核心頁面
3 次 可接受 抓取穩定 多數內頁的合理範圍
4 次以上 容易流失 抓取稀疏 用麵包屑與內部連結拉近

3. 麵包屑和實際階層對不上,等於自己揭穿結構問題

麵包屑最忌諱的,是它顯示的路徑跟頁面實際的階層、跟網址講的不是同一回事。這種不一致不只讓使用者困惑,更直接把你結構上的矛盾送到搜尋引擎面前,讓它對頁面歸屬產生錯判。

3.1 麵包屑、網址、導覽要三者一致

麵包屑寫的路徑、網址的路徑階層、主導覽對頁面的歸類,這三者應該完全對得上。我在實務上看過麵包屑寫著某個分類、網址卻掛在另一個分類底下的網站,搜尋引擎收到互相矛盾的訊號,只能自己猜。把三者對齊,是麵包屑發揮作用的前提。

3.2 動態產生的麵包屑,小心產生錯路徑

很多網站的麵包屑是程式依分類自動產生的,這本身是好事,但如果一篇文章掛了多個分類、或分類歸屬本身就模糊,自動產生的麵包屑就可能每次拼出不同或錯誤的路徑。我的做法是替每篇內容確定唯一的主分類,讓麵包屑有一個穩定、正確的依據。

3.3 麵包屑不一致,往往是階層本身有病

當你發現麵包屑老是對不上,問題通常不在麵包屑的程式,而在底層的階層與分類本身就亂。麵包屑只是把這個病顯示出來。所以修麵包屑之前,先回頭確認分類節點是否唯一、每頁歸屬是否清楚,把根源理順,麵包屑自然就正確了。

4. 只有畫面上的麵包屑還不夠,搜尋引擎要看得懂的標記

畫面上顯示麵包屑,是給人看的;要讓搜尋引擎確實理解這段層級關係,還需要加上 BreadcrumbList 的結構化資料。用 JSON-LD 把麵包屑的每一層與對應網址標記出來,搜尋引擎才能穩定地解析,並在搜尋結果呈現層級路徑。

4.1 用 BreadcrumbList 標記層級

BreadcrumbList 的做法,是把麵包屑的每一層列成一個項目,標上它的順序、名稱與網址。以一篇位於「首頁 > SEO 教學 > 網站結構檢查」的文章為例,結構化資料可以這樣寫:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "首頁",
      "item": "https://example.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "SEO 教學",
      "item": "https://example.com/blog/"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "網站結構檢查",
      "item": "https://example.com/blog/seo-structure-check/"
    }
  ]
}
</script>

4.2 標記內容要跟畫面上的麵包屑一致

結構化資料裡寫的層級、名稱、網址,必須跟畫面上顯示的麵包屑完全對得上。我在實務上看過畫面顯示三層、JSON-LD 卻只標了兩層,或名稱、網址對不上的情況,這種不一致會讓驗證工具報錯,搜尋引擎也可能因此不採用。標記的角色是如實描述畫面,不是另寫一套。

4.3 用驗證工具確認標記正確

加上標記之後,一定要驗證。我的做法是用 Google 的複合式搜尋結果測試或 Schema 驗證工具跑一次,確認沒有語法錯誤、position 順序正確、每個 item 的網址都能正常存取。標記寫錯不會有幫助,還可能被判定無效,驗證這一步不能省。

5. 麵包屑要跟著結構一起維護,不是上線就定案

網站改版、新增分類、調整階層時,麵包屑與它的結構化資料都要跟著更新,否則很快就會跟實際結構脫節。麵包屑的正確性,是需要持續照顧的。

5.1 改版與新分類後,重驗麵包屑

只要動過分類或階層,我就會重新抽查幾個代表頁面的麵包屑,確認路徑還對、結構化資料還一致。改版最容易讓舊的麵包屑邏輯失準,這個檢查花不了多少時間,卻能避免結構訊號在不知不覺中變得矛盾。

5.2 抽樣不同模板逐一檢查

網站通常有多種頁面模板,首頁、分類頁、文章頁、產品頁的麵包屑邏輯可能各自不同。我的做法是每種模板都抽一頁出來,確認它的麵包屑顯示與標記都正確,而不是只看一種頁面就當全站沒問題。不同模板往往藏著不同的坑。

5.3 把麵包屑納入結構檢查的固定項目

我會把麵包屑放進網站結構的定期檢查清單,跟點擊深度、孤立頁、canonical 一起盤點。因為麵包屑會忠實反映階層的狀態,定期看它,等於定期替整個網站結構做一次體檢。它小,但它能看出的問題不小。

6. 常見問題

6.1 麵包屑對 SEO 真的有幫助嗎?

有,幫助來自兩個層面。它用可讀文字把頁面的階層歸屬寫給爬蟲看,幫助搜尋引擎理解結構;搭配結構化資料後,搜尋結果還可能顯示清楚的層級路徑,對點擊率有正面作用。它同時照顧使用者位置感與爬蟲的階層判斷。

6.2 三次點擊法則是硬性規定嗎?

它是經驗法則而非硬規定。核心邏輯是頁面離首頁越遠、爬蟲抓取越稀疏、使用者越容易流失。重點不在死守三這個數字,而在用它當量尺,找出被埋太深的重要頁面,再用麵包屑與內部連結把它們拉近。

6.3 麵包屑一定要加 BreadcrumbList 標記嗎?

畫面上的麵包屑是給人看的,加上 BreadcrumbList 才能讓搜尋引擎穩定解析這段層級關係,並有機會在結果呈現路徑。若希望麵包屑發揮完整的 SEO 價值,建議兩者都做,並確保標記內容與畫面顯示一致。

6.4 麵包屑顯示的路徑和網址不一樣,要緊嗎?

要緊。麵包屑、網址、導覽三者應該講同一個階層故事,對不上時搜尋引擎會收到矛盾訊號,對頁面歸屬產生錯判。這種不一致通常反映底層分類本身有問題,建議先理順分類歸屬,麵包屑自然會正確。

6.5 一篇文章屬於多個分類,麵包屑該怎麼顯示?

建議替每篇內容指定唯一的主分類,讓麵包屑有一個穩定正確的依據。掛多個分類時,自動產生的麵包屑容易每次拼出不同路徑,造成不一致。跨主題的關聯改用內文的內部連結表達,而不是靠多重分類。

6.6 加了麵包屑標記後要做什麼確認?

用 Google 的複合式搜尋結果測試或 Schema 驗證工具跑一次,確認沒有語法錯誤、position 順序正確、每個項目的網址都能正常存取,並且標記內容跟畫面上的麵包屑一致。標記寫錯不但沒幫助,還可能被判定無效。

延伸閱讀