一、面包屑導航是什么意思

面包屑導航（英文：Breadcrumb Navigation）是用戶一個在程序或文件中確定和轉移他們位置的一種方法，是用戶界面中的一種輔助導航。它指明了網頁在網站層次結構中的位置，用戶可以從面包屑導航中的最低層級開始，一次一個層級地導航到網站層次結構中的最高層級，有助于用戶有效地了解和探索網站。

二、面包屑導航的類型

1、位置型（location）

位置型面包屑是固定的，顯示了頁面在網站結構中的位置，通常在頁面頂部水平出現，位于標題或頁眉的下方。它提供給用戶返回之前任何一個頁面的鏈接（這些鏈接也是能到達當前頁面的路徑），在層級架構中通常是這個頁面的父級頁面。

位置型面包導航示例

*位置型面包導航示例

2、屬性型（attribute）

屬性型面包屑給出當前頁面的分類信息。例如，在電商網站上搜索產品時，根據商品屬性做面包屑導航。這種面包屑導航可以幫助用戶了解產品之間的聯系，同時提供了不同的訪問方式。

屬性型面包屑示例

*屬性型面包屑示例

3、路徑型（path）

也叫歷史型面包導航，路徑型面包屑是一個動態顯示用戶到達頁面的完整軌跡。有時候它們會有幫助，但是多數情況下它們會讓用戶感到困惑。用戶通常會在各個頁面之間跳來跳去，這時候記錄下來的路徑就會非常復雜，還不如瀏覽器的"返回"按鈕更加實用。

路徑型面包屑示例

*路徑型面包屑示例

三、面包屑導航的設計原則

面包屑導航中最簡潔明了的分隔符便是大于號">"，通常大于號用于基于位置的面包屑導航，以"父類>子類"的形式表示導航項目之間的層級關系。除了大于號以外還可以用向右箭頭"→"，雙大于號">>"和斜線"/"。到底使用哪個取決于導航的類別和視覺效果。

1、PC 端面包屑導航設計指南

• 面包屑不應取代全局導航欄或部分本地導航。面包屑可以作為導航的有效補充，但是不能取代主要導航。可以采用下拉式菜單。更好的設計是為本地導航提供單獨的 Ul，以使用戶能夠訪問站點當前部分的橫向層級頁面。
• 面包屑應該顯示站點層次結構中的當前位置，而不是瀏覽歷史記錄。面包屑并不用于顯示用戶在網站的頁面瀏覽歷史記錄（例如瀏覽器的本機后退按鈕）；它們旨在顯示站點的層次結構。
• 對于多層次站點，面包屑應顯示站點多層次結構中的單一路徑。面包屑與多層次站點（其中一個頁面有享個父級） 之間存在固有的緊張關系。在這種情況下，我們不建議兩個或更多反映多層次結構中不同路徑的面包屑路徑，因為它們會混淆用戶并在頁面頂部占用大量空間。如果一個頁面有多個不同的父級，請在站點層次結構中標識到它的規范路徑，并在面包屑路徑中顯示該路徑。
• 包括當首頁面作為面包屑路徑中的最后一頂。
• 在面包屑路徑中，當前頁面對應的面包屑不應該是鏈接。最后一個面包屑（表示當前頁面） 不應該是鏈接。為避免混淆用戶，請在視覺上區分當前頁面和前面鍵接的面包屑，最好使用下劃線或藍色文本。
• 面包屑應送只包含網站頁面，而不是 IA 中的邏輯類別。面包屑路徑中的每個節點都應該是一個指向主頁的鏈接。如果全局導航中的某些子類別標簽沒有專門的單獨頁面，請不要在面包屑路徑中包含這些子類別。"點擊即走"能力是用戶理解面包屑的關鍵部分，因此所有項目(當前頁面除外)都應該代表用戶可以去的地方。
• 對于具有僅 1 - 2 層深的扁平結構站點或結構呈線性的站點，面包屑導航是非必需的。
• 面包屑路徑應該以指向主頁的鏈接開頭。

2、在移動端面包屑設計指南

需要提出的是，在移動設備上，使用面包屑的成本很快就會超過收益。

• 不要使用包含多行的面包屑。在移動網站上，面包屑可以快速換成多行，并在已經擁擠的移動顯示器上占用寶貴的空間。多行面包屑路徑不能很好地說明鏈的結構。
• 不要使用太小或太擁擠的面包屑。一些網站試圖通過使鏈接更小或更靠近來減少面包屑占用的屏幕空間。不幸的是，此解決方案不適用手觸摸屏：點擊目標至少需要 1cm x 1cm。
• 考慮縮短面包屑路徑以僅包含最后一個級別。在某些頁面上，指向一個級別的單個面包屑可能是支持主要用戶目標所必需的。此解決方案避免了占用寶貴的移動空間的冗長、擁擠的面包屑路徑。

四、面包屑導航出現位置

通常在頁面主要內容區域的上方，緊靠在主標題（H1）之下。水平排列，鏈接之間用符號分隔（常見的有 >、/、» 等）。

一個簡單的例子：想象你在一個電商網站瀏覽一款具體的手機（如 iPhone 15）。面包屑導航可能看起來像這樣：首頁 > 電子產品 > 手機 > 智能手機 > Apple iPhone

“首頁”: 可點擊，帶你回到網站主頁。“電子產品”: 可點擊，帶你到電子產品大類頁面。“手機”: 可點擊，帶你到手機分類頁面。“智能手機”: 可點擊，帶你到智能手機子分類頁面。“Apple iPhone”: 通常是當前頁面名稱，不可點擊或僅作文本顯示（表示你就在這里）。

五、面包屑導航的作用

在網站應用中，面包屑導航的作用就是幫助訪問者確定自己處在網站中的什么位置以及如何返回到原來的位置。對于用戶而言，這個導航輔助工具可以更輕松地在網站上查找內容，幫助用戶定位在你網站上的位置，并在需要時幫助用戶回到之前頁面。對于搜索引擎來講，面包屑導航會讓蜘蛛了解你的網站結構，方便搜索蜘蛛爬取索引。

1、利于用戶確認當前位置

讓用戶了解目前所處位置，以及當前頁面在整個網站中的位置，體現了網站的架構層級，能夠幫助用戶快速學習和了解網站內容和組織方式。

2、方便用戶操作

為用戶提供返回各個層級的快速入口，提供一個瀏覽網站的次要方法，尤其是比較大型的網站，設計一個面包屑導航后，訪客就能更容易的定位到所在的欄目中，方便用戶操作。

3、增強了用戶體驗

面包屑導航目前在網站的應用十分廣泛，可以提升網站的用戶體驗，因為它是一個眾所周知的界面元素，用戶瀏覽操作網頁的時候已經形成習慣。

4、降低了跳出率

用戶進入到網站的渠道是多樣化的，這意味著您網站的每個部分都可以成為網站的入口，如果所選頁面內容不符合用戶的期望值，通過面包屑導航可以引導用戶訪問其他鏈接，從而降低網站的跳出率。

5、增加網站內鏈

在網頁中使用面包屑導航，可以增加網站的內鏈，有助于內鏈的建設，如果網站層級關鍵詞使用恰當，可以起到提升關鍵詞權重的作用。

6、利于搜索蜘蛛抓取

百度搜索、谷歌搜索已經將面包屑導航整合到搜索結果里面，面包屑導航可以讓搜索蜘蛛順著面包屑導航進行頁面抓取，利于提高搜索蜘蛛爬行效率，同時面包屑導航每個層級的名稱，盡量使用關鍵字，可以達到 SEO 優化的效果。

六、面包屑導航的注意事項

• 面包屑是一種輔助導航，在頁面中不應該起支配作用。面包屑和主導航相比至少要比較小、或不太突出。
• 面包屑導航，所謂導航就是可以讓用戶點擊的鏈接，不要做僅是網站設計擺設，一定要在非當前頁面的指引中加入鏈接。
• 不要給當前頁面的導航文字添加鏈接，因為用戶已經處于這個頁面了，再添加指向當前頁面的鏈接是沒有任何意義的。
• 面包屑導航使用文字鏈接，不要使用圖片或 JS，搜索引擎對文字的識別度是最好的，不易識別出圖片或 JS。
• 面包屑導航應盡可能包括關鍵字，例如，在主頁 > 部分頁面，可以將文中的"主頁"替換為核心關鍵字，提升相關關鍵詞的鏈接權重。
• 在"主頁 > 列頁 > 文本的正文"，可以改成文章的標題，正文的標題往往會包含長尾關鍵詞，這樣將有利于長尾關鍵詞的搜索排名。
• 面包屑導航的最后層級不要加鏈接，即當前頁面標識層級不能加鏈接，不利于搜索引擎對層級關系的識別。
• 面包屑導航在移動端的體驗并不好，尤其是在層級比較復雜的網站中。因手機屏幕比較窄小，在移動端上設計面包屑導航會遇到很多問題，因此，在移動端需要盡可能地簡化網站內容與結構。

芯思考 SEO：面包屑導航的目的是讓用戶可以更方便地訪問網站，提升用戶體驗，但面包屑導航屬于輔助導航，在實際設計時不宜太突出，更不能用面包屑導航來代替主導航的作用。