面包屑導航可幫助網站訪客根據層次結構、用戶軌跡或兩者確定訪客在站點內的當前位置。在本指南中,我們將討論面包屑導航的類型以及最佳實施方法和一些常見錯誤。

      什么是面包屑導航?

      面包屑通常位于網站頂部,在頂部導航和內容標題之間。它們通常由一組鏈接組成,從網站的最高級別開始,逐級下降。

      Schema.org 將其定義為:

      “一組可以幫助用戶理解和導航網站層次結構的鏈接?!?p>

      示例 - 面包屑:

      Home > Furniture > Tables > Kitchen Table
      面包屑導航的優點:

      l附加導航元素

      l更短的點擊路徑讓訪客在網站的各個級別之間導航

      l引起對網站層次結構中較高層元素的興趣

      l可以帶來更強的用戶參與度

      技術優勢

      l添加額外的導航路徑,占用的網站空間很小

      l可用于降低網站上的抓取級別數量

      l通過面包屑列表增強SERP中的片段

      何時使用面包屑導航?

      面包屑導航可以使面包屑中具有兩個以上元素的任何網站上的用戶和網站結構受益。

      明確定義的面包屑在具有大量內容級別的大型復雜網站中有重要作用。常見的是具有大量產品、分類和分面搜索的電商網站,以及分類較多的信息網站。

      如何實現面包屑導航

      可以使用簡單的 HTML/XHTML 標記來實現面包屑。假設您想創建如下所示的面包屑導航:

      Home > Furniture > Tables > Kitchen Table
      創建它的簡單 HTML 標記可能如下所示:

      <a href="/">Home</a> ><a href="/furniture/">furniture</a> ><a href="/furniture/tables/">Tables</a> > Kitchen Table

      用簡單的字符分開

      為了分隔面包屑項,建議使用簡單的字符,例如

      l> 或 >> 或類似的變體,例如 ?? ?

      l/ 或者 //

      使用這些字符可以增加熟悉度,從而提高用戶體驗。

      最好使用單個字符。選擇這些分隔字符中的哪一個并不重要。在實施面包屑導航時要考慮用戶。

      結構化數據和面包屑

      如果您想確保搜索引擎理解您的面包屑,您應該使用schema.org 詞匯和以下結構化數據格式之一來幫助搜索引擎理解您的面包屑:

      lMicrodata

      lRDFa

      lJSON-LD

      將其應用于面包屑的優點是搜索引擎更有可能將您的面包屑添加到搜索結果中您網站的摘要中。


      示例 - 搜索結果片段中的面包屑

      面包屑導航中可用的結構化數據屬性

      面包屑的結構化數據格式屬性由schema.org BreadcrumbList定義。

      搜索引擎通常使用以下屬性在搜索片段中生成面包屑列表:

      l面包屑項

      l名稱

      l位置

      使用微數據的面包屑標記示例

      面包屑示例:

      Home > Furniture > Kitchen<ol itemscope itemtype="http://schema.org/BreadcrumbList"><li itemprop="itemListElement" itemscopeitemtype="http://schema.org/ListItem"><a itemprop="item" ><span itemprop="name">Home</span></a><span itemprop="position" content="1">></span></li><li itemprop="itemListElement" itemscopeitemtype="http://schema.org/ListItem"><a itemprop="item" ><span itemprop="name">Furniture</span></a><span itemprop="position" content="2">></span></li><li itemprop="itemListElement" itemscopeitemtype="http://schema.org/ListItem"><a itemprop="item" ><span itemprop="name">Kitchen</span></a><span itemprop="position" content="3"></span></li></ol>
      使用 RDFa 的面包屑標記示例

      面包屑示例:

      Home > Furniture > Kitchen<ol vocab="http://schema.org/" typeof="BreadcrumbList"><li property="itemListElement" typeof="ListItem"><a property="item" typeof="WebPage"><span property="name">Home</span></a><span property="position" content="1">></span></li><li property="itemListElement" typeof="ListItem"><a property="item" typeof="WebPage"><span property="name">Furniture</span></a><span property="position" content="2">></span></li><li property="itemListElement" typeof="ListItem"><a property="item" typeof="WebPage"><span property="name">Kitchen</span></a><span property="position" content="3"></span></li></ol>
      使用 JSON-LD 的面包屑標記示例

      面包屑示例:

      Home > Furniture > Kitchen<script type="application/ld+json">{"@context": "http://schema.org","@type": "BreadcrumbList","itemListElement": [{"@type": "ListItem","position": 1,"item": {"@id": "https://example.com/","name": "Home"}},{"@type": "ListItem","position": 2,"item": {"@id": "https://example.com/furniture/","name": "Furniture"}},{"@type": "ListItem","position": 3,"item": {"@id": "https://example.com/furniture/kitchen/","name": "Kitchen"}}]}</script>

      如何測試您的結構化數據實施

      無論您選擇哪種結構化數據格式來指定面包屑,您都可以使用Google 結構化數據測試工具進行驗證。

      它將驗證您的結構化數據標記并指出錯誤。無效的結構化數據標記可能會導致搜索引擎忽略您的面包屑規范。

      面包屑導航的類型

      關于面包屑的技術思考

      在研究面包屑導航的可能邏輯之前,讓我們先看一下不同站點結構和URL結構的技術差異。

      要規劃你的面包屑,你必須做出以下決定:

      l您想要一致的面包屑導航嗎?

      l您想要為每個產品使用唯一的URL還是根據分類使用多個URL?

      l用戶路徑會與面包屑軌跡同步嗎?

      一致和不一致的面包屑導航

      如果面包屑導航不“跳躍”,那么它就是一致的。這意味著,每次點擊鏈接進入更深層次的內容時,面包屑都會增強一級。

      一致的面包屑導航示例

      用戶進入網站的kitchen頁面。面包屑像這樣

      home > furniture > kitchen
      下次單擊您將進入“kitchen tables”產品頁面?,F在面包屑像這樣

      home > furniture > kitchen > kitchen table
      不一致的面包屑導航示例

      用戶進入網站的kitchen頁面。面包屑像這樣

      home > furniture > kitchen
      下次點擊將進入產品頁面“kitchen tables”。現在面包屑像這樣

      home > products > kitchen table xy
      具有多分類架構的一致面包屑導航示例

      用戶點擊了"furniture", "kitchen" 和?"tables"?分類,然后選擇了產品

      home > furniture > kitchen > tables > kitchen table xy
      用戶通過其他方式找到該產品

      home > products > kitchen table xy
      唯一的還是多個 URL?

      當產品屬于多個分類時,創建一個對搜索引擎友好的信息架構比較復雜。

      此時,該產品可以通過以下兩種方式訪問

      l一個唯一的URL

      l根據不同的分類有多個URL

      這兩種方法都可以創造積極的用戶體驗 - 取決于您想要做什么。但這兩種方法也都有缺點,如果您想提供最佳的用戶體驗并同時迎合搜索引擎,則需要以不同的方式解決這些缺點。

      示例?唯一URL

      如果您的產品具有唯一的URL,則可以避免重復內容問題。這種方法的缺點是,如果您不實現更復雜的算法來使面包屑對用戶表現一致,您的面包屑可能會跳動。

      分類?URL:

      http://example.com/furniture/kitchen/http://example.com/furniture/tables/
      產品網址:

      http://example.com/procuct/kitchen-table-xy
      示例?不同分類的多個URL

      如果某個產品有多個URL,則可能會導致重復內容問題。在這種情況下,您需要定義一個默認版本,分配 rel=canonical指向所有產品頁面上的產品默認URL的目標URL。

      分類?URL:

      http://example.com/furniture/kitchen/http://example.com/furniture/tables/
      產品 URL:

      http://example.com/furniture/kitchen/kitchen-table-xyhttp://example.com/furniture/tables/kitchen-table-xy
      用戶路徑與面包屑導航同步

      如果將用戶路徑合并到面包屑導航中,則可以實現最一致的用戶體驗。

      例如:

      用戶查看了特色商品,然后選擇了產品

      home > kitchen > featured items > kitchen table xy
      用戶使用“Best Tables Inc”的制造商過濾器,然后選擇了產品

      home > kitchen > Best Tables Inc > kitchen table xy
      用戶通過任何其他方式找到該產品

      home > products > kitchen table xy

      面包屑的概念差異

      定義面包屑邏輯有三種基本方法: 基于位置、路徑或屬性。

      基于位置的面包屑導航

      面包屑的常見用法是基于位置的面包屑?;谖恢玫拿姘硷@示站點層次結構中的當前位置,并使用戶能夠快速瀏覽站點的各個級別。

      在基于位置的面包屑中,層次結構與面包屑同步。

      例如:

      網址

      http://example.com/tables/kitchentable-oak/
      面包屑導航

      Home > tables > kitchen table oak
      優點:

      l易于實施

      l用戶可以輕松確定站點層次結構中的當前位置

      缺點:

      根據站點結構,面包屑導航可能會變得不一致

      要求:

      要求以邏輯方式組織信息結構

      基于屬性的面包屑導航

      基于屬性的面包屑允許使用當前內容的屬性來增強面包屑導航。

      基于屬性的面包屑的行為獨立于站點的層次結構,因此需要更多的技術支持才能正確實施。

      例如:

      網址

      http://example.com/tables/kitchentable-oak/
      面包屑導航

      Home > oak > large > kitchen table oak
      優點:

      可以提供比基于位置的面包屑更好的可用性

      缺點:

      l可能會導致很長的面包屑導航

      l可能會導致面包屑的順序不同

      要求:

      需要在多個分類中定義默認分類

      混合面包屑導航

      混合面包屑是基于位置的面包屑和基于屬性的面包屑的組合?;谖恢玫牟糠滞ǔH∽灾鞣诸悾趯傩缘牟糠秩∽赃x定的過濾器或內容屬性。

      例如:

      網址

      http://example.com/tables/kitchentable-oak/
      面包屑導航

      Home > furniture > kitchen > tables > oak (x) > large (x) > kitchen table oak
      優點:

      l在大型電子商務網站上提供比基于位置的面包屑更好的可用性

      l更多內部鏈接指向屬性頁面

      缺點:

      l根據站點的結構,面包屑導航可能會變得不一致

      l可能會導致更長的面包屑導航

      l可能會導致面包屑的順序不同

      基于路徑的面包屑導航

      設置面包屑的一種不太常見的方法是使其基于路徑。在簡單的基于路徑的面包屑中,面包屑導航是歷史軌跡,顯示用戶瀏覽網站的路徑。

      這種類型的面包屑的根目錄是將用戶帶入網站的著陸頁面。

      例如:

      用戶進入標題為“Best kitchen furniture”的博客文章,然后點擊進入tables分類,選擇oak,返回tables并選擇產品。

      網址

      http://example.com/tables/kitchentable-oak/
      面包屑導航

      Best kitchen furniture > tables > oak > tables > kitchen table oak
      優點:

      不需要任何特定的網站結構

      缺點:

      l不可預測的面包屑路徑
      l面包屑無法緩存

      l面包屑需要存儲在每個用戶的會話中

      l當機器人獲得會話(例如基于IP)時,搜索引擎機器人會抓取隨機路徑的不穩定且不可預測的內部鏈接

      l用戶無法確定在站點層次結構中的當前位置

      實用的解決方案

      我們建議選擇一種在工作量和估計收益方面平衡且對搜索引擎友好的面包屑實現方案。這意味著:

      技術觀點

      從技術角度我們建議:

      l面包屑應該一致

      l每個產品的唯一 URL

      l沒有與面包屑的用戶路徑同步

      該解決方案具有以下優點

      l良好的用戶體驗

      l無重復內容

      l努力與收獲之間的良好平衡

      如果您想使用多個URL,請確保

      l為每個產品定義一個默認URL

      l使用rel=canonical防止重復內容問題

      如果你想將用戶路徑與面包屑同步

      花點時間定義可能的面包屑導航,不要使用簡單的歷史記錄

      概念觀點

      從概念的角度來看,我們建議:

      l面包屑應該有一個基于位置的根

      l面包屑應該有基于屬性的中間部分

      l如果您使用路徑,請定義入口點以創建基于位置的根

      實踐面包屑的最佳方法

      面包屑可降低爬行級別數

      面包屑與最低級別的深層鏈接相結合可以非常有效地降低爬網級別數量,從而創建更密集的網站結構。

      例如:

      面包屑導航的層級架構

      您有一個根級別有 6 個級別的站點。如果您通過面包屑放置從根級別到第 6 級內容的鏈接,則可以降低第 3-6 級所有內容的爬網級別和點擊深度。

      Home

      1級

      2級

      3級

      4級

      5級

      6級

      之前的

      0

      1

      2

      3

      4

      5

      6

      之后的

      0

      1

      2

      2

      2

      2

      1


      面包屑搜索結果片段

      如上所述,如果搜索引擎可以在網站上識別面包屑,則它們可能會在搜索結果中顯示面包屑。但搜索結果片段僅提供有限的空間。因此,如果面包屑太長,搜索引擎必須在搜索結果中縮短它們。通常,根頁面下的蹤跡的第一個元素會被省略,只顯示最后兩個元素。保持最后兩項與用戶相關非常重要,可以提高搜索結果的點擊率。

      我們建議對面包屑中的最后兩個可抓取項目使用分類而不是歸因。

      搜索片段中分類面包屑的示例:

      Home > … > Kitchen > Tables
      搜索結果片段中基于屬性的面包屑示例:

      Home > … > oak > large

      分頁和面包屑導航

      分頁也應該在面包屑中顯示。如果您有分頁內容,則應在面包屑中添加分頁內容的第一個元素和當前元素。

      例如:

      Home > Furniture > Kitchen > Tables > Page 3
      鏈接“Tables”鏈接到分頁內容“Tables”的第一個元素,并允許用戶跳回到分頁的開頭。

      將分頁添加到面包屑還會創建指向分頁內容的起始文檔的相關內部鏈接。這有助于使其與搜索引擎更加相關。

      面包屑導航的常見錯誤

      使用短面包屑進行深層站點結構

      如果在具有許多合法信息級別的站點上面包屑導航太短,則面包屑將無法有效地創建更密集的站點結構。

      我們建議您以有助于降低抓取級別的方式設計面包屑。這可以幫助您優化抓取速度。

      在網站標題中使用反向面包屑導航

      在某些情況下,技術會在網站HTML標題中添加面包屑導航。這很容易失控,導致搜索引擎不支持標題長度,在搜索結果中會縮短標題。

      我們不建議在站點的HTML標題中使用面包屑導航。

      面包屑常見問題解答

      我應該在面包屑導航中鏈接主頁嗎?

      如果您的面包屑導航中顯示了主頁,我們建議您鏈接到它,以保持用戶體驗一致。

      從SEO的角度來看,為了在大型網站上保持面包屑更短,您還可以省掉主頁元素并從第一級開始。這可以讓您在搜索引擎中更多顯示最相關的面包屑。

      我應該在面包屑導航中顯示當前項嗎?

      從技術SEO的角度來看,無論是否在面包屑中顯示當前項,都沒有區別。

      如果你網站擁有大量訪客,可以進行 A/B 測試,哪種方式可以帶來更好的用戶交互。

      我應該鏈接面包屑導航中的當前項嗎?

      如果您決定在面包屑導航中顯示當前項,下一個問題通常是當前項是否應該加鏈接。

      這個問題可以從技術和可用性兩個角度來回答:

      從可用性的角度來看,用戶在單擊再次指向同一文檔的鏈接時可能會感到困惑。這基本上是網站的刷新,即使您獲得了額外的頁面印象,也可能會導致用戶跳出。

      從SEO的角度來看,鏈接不會給內部鏈接圖增加任何價值。

      此外, W3C 的《Web 內容可訪問性指南 2.0 的技術和失敗》中還提供了提供面包屑的指南(https://www.w3.org/TR/WCAG20-TECHS/G65.html),建議不要將當前位置實現為面包屑中的鏈接。

      我們建議不要在面包屑導航中的當前項上加鏈接!

      更多閱讀:
      Google SEO:15個網站架構技巧[長文警告,建議先收藏]
      網站建設:最佳網站頁腳設計指南和7個頂級案例
      網站架構:如何使用適當的 SEO 筒倉結構以更少的鏈接擊敗高權威網站
      翻譯整理作品,原作者Audisto, 封面圖來源:Big Web Media


      點贊(2) 打賞

      評論列表 共有 0 條評論

      暫無評論

      服務號

      訂閱號

      備注【拉群】

      商務洽談

      微信聯系站長

      發表
      評論
      立即
      投稿
      返回
      頂部