麵包屑是什麼？麵包屑的重要性及設置方式一覽
麵包屑導航是網站導覽工具，可幫助使用者了解當前所在位置，常見的麵包屑類型分為：位置類型、路徑類型及屬性類型，麵包屑能改善內部連結結構，提升使用者體驗與停留時間，因此在設計麵包屑時，應確保文字簡潔、層級邏輯正確、連結可被點擊，並使用適當的語法格式。本文將為您介紹什麼是麵包屑、麵包屑功能、類型、重要性、適合放麵包屑的網站、設置重點以及注意事項。若您不知道如何設置麵包屑，PRO360達人網上有大量的SEO搜尋引擎優化專家擁有豐富經驗可以協助您正確設置麵包屑。
麵包屑是什麼？
麵包屑（Breadcrumb）是一種網站導覽設計，主要幫助使用者了解當前在網站中的位置，並提供清晰的層級關係，讓使用者能夠輕鬆返回上一層或其他相關頁面。通常以階層式路徑呈現，例如：「首頁>分類>產品」，可以提升使用者體驗，讓使用者知道目前在網站的位置，同時也有助於SEO優化，使搜尋引擎爬蟲在抓取網站資料時更容易理解網站架構。
麵包屑有2種格式，一個是結構化麵包屑，以程式碼呈現，給搜尋引擎爬蟲抓取；另一個為視覺化麵包屑，設置在網頁上給讀者觀看。以下為您整理結構化麵包屑和視覺化麵包屑的差異：
| 結構化麵包屑(Schema) | 視覺化麵包屑 | |
| 呈現方式 | 以原始碼格式呈現，無法在網頁畫面看見 | 以文字或圖形方式呈現，可在網頁上看見 |
| 設置方式 | 主要以JSON-LD、Microdata、RDFa建立麵包屑 | 常使用文字和特定符號區分，例如：> 或 / |
| 使用者 | 搜尋引擎爬蟲 | 讀者 |
麵包屑的3種類型
麵包屑導航主要在顯示用戶從首頁或主要分類頁到目前所在頁面的完整位置路徑，以下為您介紹3種麵包屑類型：
位置麵包屑（Location）
最常見的類型，固定顯示頁面在網站結構中的位置，通常以層次結構方式呈現，例如：「首頁>產品>電子產品>手機」。
路徑麵包屑（Path）
此類型麵包屑動態顯示使用者到達當前頁面所經過的路徑，反映使用者的瀏覽歷程，例如：「首頁>促銷活動>熱門商品>手機」。
屬性麵包屑（Attribute）
此類型提供當前頁面的屬性或分類資訊，常用於電子商務網站，顯示商品的多重屬性，例如：「首頁>類別>品牌>價格範圍」。
為什麼麵包屑對SEO很重要？
以下為您整理4個要素：
改善內部連結結構
麵包屑提供清晰的網站層級結構，讓搜尋引擎爬蟲更容易理解各頁面之間的關聯性，進而提升網站的索引效率。
提升使用者體驗與停留時間
透過麵包屑導航，使用者能迅速了解自己在網站中的位置，並方便返回上一層或其他相關頁面，減少迷失在網頁中的可能性，進而延長在網站的停留時間。
提升結果頁出現機率
當網站實施麵包屑導航時，搜尋引擎可能在搜尋結果中顯示這些導航路徑，增加網站在搜尋結果頁的可見性。
提升網頁的排名
透過優化內部連結和提升使用者體驗，麵包屑有助於提高網站在搜尋引擎結果中的排名，進而增加流量和曝光度。
哪些網站適合放麵包屑？
- 電商網站：通常擁有多層級的產品分類，麵包屑導航可協助使用者快速瞭解當前所在位置，並方便在不同分類間切換。
- 部落格網站：此類型網站內容豐富，設置麵包屑讀者能清楚瞭解文章所屬的分類，並輕鬆返回上一層級或探索相關內容。
- 企業網站：通常包含多個部門或服務項目，麵包屑導航能協助訪客快速定位所需資訊，提升整體使用者體驗。
哪些網站不適合放麵包屑？
- 單頁網站：所有內容集中在單一頁面，無需麵包屑導航指引使用者。
- 簡單結構網站：若網站頁面層級淺，內容結構簡單，主要導航已足夠引導使用者，麵包屑導航可能顯得多餘。
- 強調視覺設計的網站：某些以視覺效果為主的網站，可能選擇不使用麵包屑導航，以保持設計的簡潔性和美觀度。
結構化麵包屑Schema設置方式
3個設置欄位
麵包屑Schema有3個必填欄位，包含階層名稱（Name）、階層網址（Item）、階層數（Position）：
- 階層名稱（Name）：為該階層網頁的名稱，例如：第一層為首頁或品牌名稱。
- 階層網址 （Item）：為該階層網頁的網址。
- 包含首頁的階層數（Position）：為該階層網頁是第幾層，例如：第一層的position為1、第二層的position為2，以此類推。
3個設置語法
JSON-LD
（JavaScript Object Notation for Linked Data）為Google推薦使用，優點是結構清楚、易於閱讀與維護，可以直接將一整段Schema程式碼嵌入在網頁的<head>中，這種設置方式讓Schema與網頁內容分離，且有專業的JSON-LD Schema線上標記工具可以使用（Schema線上標記工具推薦）。
▲JSON-LD程式碼範例
Microdata
Microdata是一種HTML規範，它允許將機器可讀的結構化數據嵌入到現有的HTML元素中，並通過使用itemscope、itemtype和itemprop等屬性欄位描述資料。Microdata的主要目的是幫助搜尋引擎更好理解網頁內容，使爬蟲更容易讀取網頁中要表達的內容。
實務上，Microdata會在原有的HTML上，依照Schema.org所規範的標籤類型，依序將相符的屬性欄位填入HTML之中，也就是說在麵包屑的HTML程式碼加入相關的標記，這種做法會使Microdata的語法和HTML混合在一起，導致程式碼不易維護，因此對於初學者來說，撰寫、修改或辨認上可能都比較複雜。
▲Microdata程式碼範例
RDFa
RDFa是一個網頁標準格式，它能幫助在網頁中加入讓機器可以理解的資料，讓網頁上的資料可以被機器讀取和處理，它的全名是「Resource Description Framework in attributes」，意思是在網頁的屬性中加入描述資料的框架。
然而在實作上RDFa與Microdata一樣，將相符的屬性欄位填入HTML之中，會導致RDFa和HTML混合在一起，導致程式碼不易維護。
▲RDFa程式碼範例
| JSON-LD | Microdata | RDFa | |
| 語法 | JavaScript物件表示法，嵌入<script>標籤中 | 嵌入HTML標籤的屬性中，例如：itemscope、itemtype、itemprop | 透過HTML標籤的屬性描述資料，例如：vocab、typeof、property |
| 易讀性 | 高 | 低 | 低 |
| 維護性 | 容易，程式碼與HTML分開 | 困難，程式碼與HTML混合 | 困難，程式碼與HTML混合 |
▲整體而言，建議您使用JSON-LD設置結構化麵包屑，後續較容易設置及維護。
3個麵包屑UI/UX設置重點
為了提升良好的使用者體驗（UX）與簡潔的使用者介面（UI），以下為您整理3個麵包屑設置重點：
方便點擊
確保麵包屑中的每個連結都易於點擊，避免過小或過於擁擠的設計，特別是在行動裝置上，應考慮觸控操作的便利性。
路徑明確
麵包屑應清晰地展示使用者當前所在的位置及其在網站中的層級結構，讓使用者能夠輕鬆理解並導航至其他相關頁面。
字體適中
選擇適當的字體大小和樣式，確保麵包屑內容清晰可讀，與整體網站設計風格一致，避免因字體過小或不清晰而影響閱讀。
設置麵包屑的注意事項
文字簡潔明確
每個層級的名稱應該簡短且清晰，避免使用過長或模糊的詞彙，讓使用者能迅速理解各層級的內容。
層階邏輯正確
確保麵包屑導航反映網站的真實結構，層級關係合乎邏輯，避免出現錯誤或混亂的層次，讓使用者能直觀地了解當前所在位置。
使用正確的語法格式
在實作麵包屑時，應遵循標準的語法格式，有助於搜尋引擎正確解析網站結構，提升SEO表現。
確認連結網址
每個麵包屑中的連結都應指向正確且有效的網址，避免出現錯誤連結，確保使用者點擊後能順利導航至預期的頁面。
讓專業搜尋引擎優化專家助您完成麵包屑SEO！
無論是電子商務網站、部落格或還是企業官網，善用麵包屑導航，不僅能讓訪客更輕鬆瀏覽，還能提升網站的可用性與搜尋引擎排名。若您不知道如何設置麵包屑，歡迎點選【免費取得SEO專家報價】，PRO360達人網上有大量的SEO搜尋引擎優化專家擁有豐富經驗，可以協助您正確設置麵包屑。
