麵包屑導覽對SEO重要嗎？（3大重點優化排名！）

進行On-Page SEO時，通常都會聽到要為網站安裝「麵包屑」。一般都通過各種的方式，如：使用外掛程式或結構化資料代碼，為網站設置麵包屑導覽（Breadcrumb Navigation）。麵包屑導覽為用戶提供清晰的路線圖，在SEO發揮著一定的作用。

Raymond – SEO Specialist將透過本文將深入探討麵包屑導航的重要性，從定義和結構出發，解釋為什麼能提高用戶體驗和對SEO的好處，以及教大家如何為網站安裝並設置麵包屑導航。

麵包屑導覽是什麼？

麵包屑導覽（英文：Breadcrumb、Breadcrumb Navigation或Breadcrumb Trail），又稱為導覽標記、麵包屑導航、路徑導覽、頁面路徑或簡稱為麵包屑，是一種在網站上常見的導航元素。它通常以橫幅形式出現在網頁的頂部，顯示用戶目前所處頁面的層次結構。

簡而言之，麵包屑導覽就是網頁位於上方的導航欄。

為什麼要叫麵包屑呢？

麵包屑的名字聽起來很可口？但這跟SEO有什麼關係呢？

其實麵包屑導覽是取名自格林童話中的《糖果屋》，故書中的主角漢賽爾（Hansel）和格萊特（Gretel）兩兄妹為了避免迷路，沿途灑下麵包屑做記號。

麵包屑導覽的作用

麵包屑導覽也是差不多是做記號的原理，為了避免網站用戶在網站中迷失，所以設置了麵包屑導覽，為用戶提供良好的導覽的作用，幫助用戶快速理解網站結構，並更容易找到他們感興趣的內容，條理分明的網站架構對用戶體驗有所提升。

麵包屑導覽的結構

麵包屑導航通常由多個層級連結組成，每個連結表示一個頁面的層次結構。這些連結通常是可點擊的，允許用戶直接跳轉到較高級別的頁面。一個典型的麵包屑結構通常包括主頁連結，然後是各級子頁面的連結。

麵包屑導覽的例子

理論講了不少，現在讓我們看一個實際示例來理解麵包屑導覽的運作。一般而言，顯示的麵包屑可以有幾種形式：

首頁 > 分類 > 次分類 > 文章標題
首頁 > 分類 > 文章標題
首頁 > 文章標題

假設有一個電子產品網站，網站有「電視」分類、「4K電視」及「55英寸4K電視」。

在這個情況下，麵包屑導覽可能如下所示：

首頁 > 電視 > 4K電視 > 55英寸4K電視

這些麵包屑提供了清晰的路徑，讓用戶知道如何到達當前頁面，並可以隨時返回先前的頁面。

麵包屑導覽對SEO的3大好處

麵包屑導航對有什麼好處？從SEO角度，主要包括：網站架構分明、提高網站檢索效率、提升用戶體驗、有機會出現複合式搜尋結果。

提高網站檢索效率

麵包屑導航可以建立一定架構的內部連結，有助爬蟲更有效地理解頁面之間的關係，從而更快地索引網站內容，降低新頁面被遺漏成孤島頁面（Orphan Page）的機會，增強網站檢索效率。

提高用戶體驗

麵包屑導覽有助於使用者瞭解網站的組織結構，從而更容易找到他們需要的資訊。對於大型網站或電子商務平台，良好的網站架構與麵包屑導航結合使用，

有助於使用者快速找到所需的資訊，從而提高了滿意度並減少跳出率，提升用戶體驗。

有機會出現在搜尋結果中

設置麵包屑導航有機會在搜尋引擎結果頁面（SERP）中顯示複合式搜尋結果，網站看起來更條理分明，有機會吸引用戶點閱，從而增加自然點閱率（CTR）。

麵包屑導覽基本架構及注意事項

講了那麼久，那麼如何有效地設計麵包屑導覽？Raymond認為完整的麵包屑導覽主要由HTML+結構化資料（Schema）兩部份組成。

根據Google搜尋中心的資料，麵包屑設置要點有以下3項：

麵包屑名稱（Name）：儘可能精簡，使用純文本元素，避免冗長的字詞。這有助於提高用戶的理解和搜尋引擎的爬行效率。
麵包屑網址（Item）：確保每個階層的麵包屑網址是有效的，並特別留意最後一層是否需要連結。有時最後一層可能只是純文本元素，而不是連結。
麵包屑位置（Position）：麵包屑中包含的階層；建議限制麵包屑中包含的階層數不宜超過5個。太深的麵包屑可能對搜尋引擎爬蟲不友好。

設置麵包屑的步驟：

構想麵包屑階層結構。
使用HTML元素（例如ul、ol和li）設置麵包屑。
添加Schema結構化資料，使用”BreadcrumbList”
驗證您的結構化資料是否正確，可使用Google的結構化資料測試工具進行檢查。

最後，可以參考Google的官方文件以確保麵包屑正確設置。

麵包屑導覽設定教學：如何為網站安裝麵包屑導覽？

先前討論了麵包屑導覽對SEO好處及重要性，那麼要如何為網站安裝麵包屑導覽呢？安裝麵包屑導覽主要有兩種方式：使用CMS插件或使用結構化資料來設置。

使用Wordpress插件或外掛程式

如果網站使用的CMS是Wordpress，那麼可用麵包屑導覽插件：如：Breadcrumb；或其他SEO插件，如Yoast或Rank Math（推薦）都自帶有麵包屑導覽的功能，完成安裝後啟用插件，再按照相關說明在網站原始碼（通常是主題的single.php等）插入相關PHP代碼。

當然，如果網站使用Elementor等Wordpress網站設計插件，那麼也可以使用Blog範本的方式加入麵包屑導覽。如果使用其他CMS或純HTML網站，那麼就可能需要通過其他方式新增麵包屑導覽。

加入的步驟可能需要一定的技術背景，如果不熟識原始碼，記得嘗試過程中要先進行備份，也可尋求Wordpress或Web Developer的幫助安裝。

使用HTML+結構化資料（Schema）

我們可以結合HTML和結構化資料（Schema）來設置Breadcrumb。

HTML的部份

在HTML中，我們使用ul和ol、li標籤來建立Breadcrumb。同時，配合Schema標記，我們可以為搜尋引擎提供更多資訊，如“BreadcrumbList”，接下來我們將深入探討語法的部份。

結構化資料（Schema）的部份

按照Google 搜尋中心中有關導覽的說明，目前麵包屑導覽標記方式有4種： HTML、JSON-LD、Microdata、RDfa。

HTML主要是給用戶看的，而JSON-LD、Microdata、RDfa這3種則是為了方便搜尋引擎的。

Raymond推薦使用HTML + JSON-LD格式，是主流的結構化資料格式，可以配合語法產生器，即使不會寫程式也能夠操作。

要生產這一套語法，可以使用免費語法生成器，例如：Schema Markup Generator (JSON-LD)

進入語法生成器網頁後，只需選擇生產類型為Breadcrumb，然後按照層級依序輸入名稱及連結，需要可按下「ADD URL」新增更多層級，再點選右邊的複製按鈕，即可複製程式碼並加入到網站中。

基本上語法可以貼在網頁的任意處（HTML部份），這些程式碼並不會出現在網頁上，所以用戶是看不到的，只能在原始碼中見到，而搜尋引擎仍能夠進行檢索。

JSON-LD版本例子

[code]

{“@context”: “http://schema.org”,”@type”: “BreadcrumbList”,”itemListElement”: [{“@type”: “ListItem”,”position”: 1,”name”: “首頁”,”item”: “https://www.example.com”},{“@type”: “ListItem”,”position”: 2,”name”: “分類1″,”item”: “https://www.example.com/category1”},{“@type”: “ListItem”,”position”: 3,”name”: “子分類1″,”item”: “https://www.example.com/category1/subcategory1”},{“@type”: “ListItem”,”position”: 4,”name”: “當前頁面”,”item”: “https://www.example.com/category1/subcategory1/currentpage”}]}

</script>
[/code]
Microdata版本例子

[code]

[/code]

RDFa 版本例子

[code]

[/code]