面包屑導(dǎo)航可幫助網(wǎng)站訪客根據(jù)層次結(jié)構(gòu)、用戶軌跡或兩者確定訪客在站點內(nèi)的當(dāng)前位置。在本指南中,我們將討論面包屑導(dǎo)航的類型以及最佳實施方法和一些常見錯誤。

      什么是面包屑導(dǎo)航?

      面包屑通常位于網(wǎng)站頂部,在頂部導(dǎo)航和內(nèi)容標(biāo)題之間。它們通常由一組鏈接組成,從網(wǎng)站的最高級別開始,逐級下降。

      Schema.org 將其定義為:

      “一組可以幫助用戶理解和導(dǎo)航網(wǎng)站層次結(jié)構(gòu)的鏈接。”

      示例 - 面包屑:

      Home > Furniture > Tables > Kitchen Table
      面包屑導(dǎo)航的優(yōu)點:

      l附加導(dǎo)航元素

      l更短的點擊路徑讓訪客在網(wǎng)站的各個級別之間導(dǎo)航

      l引起對網(wǎng)站層次結(jié)構(gòu)中較高層元素的興趣

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

      技術(shù)優(yōu)勢

      l添加額外的導(dǎo)航路徑,占用的網(wǎng)站空間很小

      l可用于降低網(wǎng)站上的抓取級別數(shù)量

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

      何時使用面包屑導(dǎo)航?

      面包屑導(dǎo)航可以使面包屑中具有兩個以上元素的任何網(wǎng)站上的用戶和網(wǎng)站結(jié)構(gòu)受益。

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

      如何實現(xiàn)面包屑導(dǎo)航

      可以使用簡單的 HTML/XHTML 標(biāo)記來實現(xiàn)面包屑。假設(shè)您想創(chuàng)建如下所示的面包屑導(dǎo)航:

      Home > Furniture > Tables > Kitchen Table
      創(chuàng)建它的簡單 HTML 標(biāo)記可能如下所示:

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

      用簡單的字符分開

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

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

      l/ 或者 //

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

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

      結(jié)構(gòu)化數(shù)據(jù)和面包屑

      如果您想確保搜索引擎理解您的面包屑,您應(yīng)該使用schema.org 詞匯和以下結(jié)構(gòu)化數(shù)據(jù)格式之一來幫助搜索引擎理解您的面包屑:

      lMicrodata

      lRDFa

      lJSON-LD

      將其應(yīng)用于面包屑的優(yōu)點是搜索引擎更有可能將您的面包屑添加到搜索結(jié)果中您網(wǎng)站的摘要中。


      示例 - 搜索結(jié)果片段中的面包屑

      面包屑導(dǎo)航中可用的結(jié)構(gòu)化數(shù)據(jù)屬性

      面包屑的結(jié)構(gòu)化數(shù)據(jù)格式屬性由schema.org BreadcrumbList定義。

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

      l面包屑項

      l名稱

      l位置

      使用微數(shù)據(jù)的面包屑標(biāo)記示例

      面包屑示例:

      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 的面包屑標(biāo)記示例

      面包屑示例:

      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 的面包屑標(biāo)記示例

      面包屑示例:

      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>

      如何測試您的結(jié)構(gòu)化數(shù)據(jù)實施

      無論您選擇哪種結(jié)構(gòu)化數(shù)據(jù)格式來指定面包屑,您都可以使用Google 結(jié)構(gòu)化數(shù)據(jù)測試工具進行驗證。

      它將驗證您的結(jié)構(gòu)化數(shù)據(jù)標(biāo)記并指出錯誤。無效的結(jié)構(gòu)化數(shù)據(jù)標(biāo)記可能會導(dǎo)致搜索引擎忽略您的面包屑規(guī)范。

      面包屑導(dǎo)航的類型

      關(guān)于面包屑的技術(shù)思考

      在研究面包屑導(dǎo)航的可能邏輯之前,讓我們先看一下不同站點結(jié)構(gòu)和URL結(jié)構(gòu)的技術(shù)差異。

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

      l您想要一致的面包屑導(dǎo)航嗎?

      l您想要為每個產(chǎn)品使用唯一的URL還是根據(jù)分類使用多個URL?

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

      一致和不一致的面包屑導(dǎo)航

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

      一致的面包屑導(dǎo)航示例

      用戶進入網(wǎng)站的kitchen頁面。面包屑像這樣

      home > furniture > kitchen
      下次單擊您將進入“kitchen tables”產(chǎn)品頁面。現(xiàn)在面包屑像這樣

      home > furniture > kitchen > kitchen table
      不一致的面包屑導(dǎo)航示例

      用戶進入網(wǎng)站的kitchen頁面。面包屑像這樣

      home > furniture > kitchen
      下次點擊將進入產(chǎn)品頁面“kitchen tables”。現(xiàn)在面包屑像這樣

      home > products > kitchen table xy
      具有多分類架構(gòu)的一致面包屑導(dǎo)航示例

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

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

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

      當(dāng)產(chǎn)品屬于多個分類時,創(chuàng)建一個對搜索引擎友好的信息架構(gòu)比較復(fù)雜。

      此時,該產(chǎn)品可以通過以下兩種方式訪問

      l一個唯一的URL

      l根據(jù)不同的分類有多個URL

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

      示例?唯一URL

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

      分類?URL:

      http://example.com/furniture/kitchen/http://example.com/furniture/tables/
      產(chǎn)品網(wǎng)址:

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

      如果某個產(chǎn)品有多個URL,則可能會導(dǎo)致重復(fù)內(nèi)容問題。在這種情況下,您需要定義一個默認(rèn)版本,分配 rel=canonical指向所有產(chǎn)品頁面上的產(chǎn)品默認(rèn)URL的目標(biāo)URL。

      分類?URL:

      http://example.com/furniture/kitchen/http://example.com/furniture/tables/
      產(chǎn)品 URL:

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

      如果將用戶路徑合并到面包屑導(dǎo)航中,則可以實現(xiàn)最一致的用戶體驗。

      例如:

      用戶查看了特色商品,然后選擇了產(chǎn)品

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

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

      home > products > kitchen table xy

      面包屑的概念差異

      定義面包屑邏輯有三種基本方法: 基于位置、路徑或?qū)傩浴?/span>

      基于位置的面包屑導(dǎo)航

      面包屑的常見用法是基于位置的面包屑。基于位置的面包屑顯示站點層次結(jié)構(gòu)中的當(dāng)前位置,并使用戶能夠快速瀏覽站點的各個級別。

      在基于位置的面包屑中,層次結(jié)構(gòu)與面包屑同步。

      例如:

      網(wǎng)址

      http://example.com/tables/kitchentable-oak/
      面包屑導(dǎo)航

      Home > tables > kitchen table oak
      優(yōu)點:

      l易于實施

      l用戶可以輕松確定站點層次結(jié)構(gòu)中的當(dāng)前位置

      缺點:

      根據(jù)站點結(jié)構(gòu),面包屑導(dǎo)航可能會變得不一致

      要求:

      要求以邏輯方式組織信息結(jié)構(gòu)

      基于屬性的面包屑導(dǎo)航

      基于屬性的面包屑允許使用當(dāng)前內(nèi)容的屬性來增強面包屑導(dǎo)航。

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

      例如:

      網(wǎng)址

      http://example.com/tables/kitchentable-oak/
      面包屑導(dǎo)航

      Home > oak > large > kitchen table oak
      優(yōu)點:

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

      缺點:

      l可能會導(dǎo)致很長的面包屑導(dǎo)航

      l可能會導(dǎo)致面包屑的順序不同

      要求:

      需要在多個分類中定義默認(rèn)分類

      混合面包屑導(dǎo)航

      混合面包屑是基于位置的面包屑和基于屬性的面包屑的組合。基于位置的部分通常取自主分類,基于屬性的部分取自選定的過濾器或內(nèi)容屬性。

      例如:

      網(wǎng)址

      http://example.com/tables/kitchentable-oak/
      面包屑導(dǎo)航

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

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

      l更多內(nèi)部鏈接指向?qū)傩皂撁?p>

      缺點:

      l根據(jù)站點的結(jié)構(gòu),面包屑導(dǎo)航可能會變得不一致

      l可能會導(dǎo)致更長的面包屑導(dǎo)航

      l可能會導(dǎo)致面包屑的順序不同

      基于路徑的面包屑導(dǎo)航

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

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

      例如:

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

      網(wǎng)址

      http://example.com/tables/kitchentable-oak/
      面包屑導(dǎo)航

      Best kitchen furniture > tables > oak > tables > kitchen table oak
      優(yōu)點:

      不需要任何特定的網(wǎng)站結(jié)構(gòu)

      缺點:

      l不可預(yù)測的面包屑路徑
      l面包屑無法緩存

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

      l當(dāng)機器人獲得會話(例如基于IP)時,搜索引擎機器人會抓取隨機路徑的不穩(wěn)定且不可預(yù)測的內(nèi)部鏈接

      l用戶無法確定在站點層次結(jié)構(gòu)中的當(dāng)前位置

      實用的解決方案

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

      技術(shù)觀點

      從技術(shù)角度我們建議:

      l面包屑應(yīng)該一致

      l每個產(chǎn)品的唯一 URL

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

      該解決方案具有以下優(yōu)點

      l良好的用戶體驗

      l無重復(fù)內(nèi)容

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

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

      l為每個產(chǎn)品定義一個默認(rèn)URL

      l使用rel=canonical防止重復(fù)內(nèi)容問題

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

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

      概念觀點

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

      l面包屑應(yīng)該有一個基于位置的根

      l面包屑應(yīng)該有基于屬性的中間部分

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

      實踐面包屑的最佳方法

      面包屑可降低爬行級別數(shù)

      面包屑與最低級別的深層鏈接相結(jié)合可以非常有效地降低爬網(wǎng)級別數(shù)量,從而創(chuàng)建更密集的網(wǎng)站結(jié)構(gòu)。

      例如:

      面包屑導(dǎo)航的層級架構(gòu)

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

      Home

      1級

      2級

      3級

      4級

      5級

      6級

      之前的

      0

      1

      2

      3

      4

      5

      6

      之后的

      0

      1

      2

      2

      2

      2

      1


      面包屑搜索結(jié)果片段

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

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

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

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

      Home > … > oak > large

      分頁和面包屑導(dǎo)航

      分頁也應(yīng)該在面包屑中顯示。如果您有分頁內(nèi)容,則應(yīng)在面包屑中添加分頁內(nèi)容的第一個元素和當(dāng)前元素。

      例如:

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

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

      面包屑導(dǎo)航的常見錯誤

      使用短面包屑進行深層站點結(jié)構(gòu)

      如果在具有許多合法信息級別的站點上面包屑導(dǎo)航太短,則面包屑將無法有效地創(chuàng)建更密集的站點結(jié)構(gòu)。

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

      在網(wǎng)站標(biāo)題中使用反向面包屑導(dǎo)航

      在某些情況下,技術(shù)會在網(wǎng)站HTML標(biāo)題中添加面包屑導(dǎo)航。這很容易失控,導(dǎo)致搜索引擎不支持標(biāo)題長度,在搜索結(jié)果中會縮短標(biāo)題。

      我們不建議在站點的HTML標(biāo)題中使用面包屑導(dǎo)航。

      面包屑常見問題解答

      我應(yīng)該在面包屑導(dǎo)航中鏈接主頁嗎?

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

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

      我應(yīng)該在面包屑導(dǎo)航中顯示當(dāng)前項嗎?

      從技術(shù)SEO的角度來看,無論是否在面包屑中顯示當(dāng)前項,都沒有區(qū)別。

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

      我應(yīng)該鏈接面包屑導(dǎo)航中的當(dāng)前項嗎?

      如果您決定在面包屑導(dǎo)航中顯示當(dāng)前項,下一個問題通常是當(dāng)前項是否應(yīng)該加鏈接。

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

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

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

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

      我們建議不要在面包屑導(dǎo)航中的當(dāng)前項上加鏈接!

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


      點贊(2) 打賞

      評論列表 共有 0 條評論

      暫無評論

      服務(wù)號

      訂閱號

      備注【拉群】

      商務(wù)洽談

      微信聯(lián)系站長

      發(fā)表
      評論
      立即
      投稿
      返回
      頂部