面包屑導(dǎo)航可幫助網(wǎng)站訪客根據(jù)層次結(jié)構(gòu)、用戶軌跡或兩者確定訪客在站點(diǎn)內(nèi)的當(dāng)前位置。在本指南中，我們將討論面包屑導(dǎo)航的類型以及最佳實(shí)施方法和一些常見(jiàn)錯(cuò)誤。
什么是面包屑導(dǎo)航？
面包屑通常位于網(wǎng)站頂部，在頂部導(dǎo)航和內(nèi)容標(biāo)題之間。它們通常由一組鏈接組成，從網(wǎng)站的最高級(jí)別開(kāi)始，逐級(jí)下降。“一組可以幫助用戶理解和導(dǎo)航網(wǎng)站層次結(jié)構(gòu)的鏈接。”
Home > Furniture > Tables > Kitchen Table
面包屑導(dǎo)航的優(yōu)點(diǎn)：l更短的點(diǎn)擊路徑讓訪客在網(wǎng)站的各個(gè)級(jí)別之間導(dǎo)航l引起對(duì)網(wǎng)站層次結(jié)構(gòu)中較高層元素的興趣l可以帶來(lái)更強(qiáng)的用戶參與度l添加額外的導(dǎo)航路徑，占用的網(wǎng)站空間很小l可用于降低網(wǎng)站上的抓取級(jí)別數(shù)量l通過(guò)面包屑列表增強(qiáng)SERP中的片段
何時(shí)使用面包屑導(dǎo)航？
面包屑導(dǎo)航可以使面包屑中具有兩個(gè)以上元素的任何網(wǎng)站上的用戶和網(wǎng)站結(jié)構(gòu)受益。明確定義的面包屑在具有大量?jī)?nèi)容級(jí)別的大型復(fù)雜網(wǎng)站中有重要作用。常見(jiàn)的是具有大量產(chǎn)品、分類和分面搜索的電商網(wǎng)站，以及分類較多的信息網(wǎng)站。
如何實(shí)現(xiàn)面包屑導(dǎo)航
可以使用簡(jiǎn)單的 HTML/XHTML 標(biāo)記來(lái)實(shí)現(xiàn)面包屑。假設(shè)您想創(chuàng)建如下所示的面包屑導(dǎo)航：
Home > Furniture > Tables > Kitchen Table
創(chuàng)建它的簡(jiǎn)單 HTML 標(biāo)記可能如下所示：
<a href="/">Home</a> ><a href="/furniture/">furniture</a> ><a href="/furniture/tables/">Tables</a> > Kitchen Table
用簡(jiǎn)單的字符分開(kāi)
為了分隔面包屑項(xiàng)，建議使用簡(jiǎn)單的字符，例如使用這些字符可以增加熟悉度，從而提高用戶體驗(yàn)。最好使用單個(gè)字符。選擇這些分隔字符中的哪一個(gè)并不重要。在實(shí)施面包屑導(dǎo)航時(shí)要考慮用戶。
結(jié)構(gòu)化數(shù)據(jù)和面包屑
如果您想確保搜索引擎理解您的面包屑，您應(yīng)該使用schema.org 詞匯和以下結(jié)構(gòu)化數(shù)據(jù)格式之一來(lái)幫助搜索引擎理解您的面包屑：將其應(yīng)用于面包屑的優(yōu)點(diǎn)是搜索引擎更有可能將您的面包屑添加到搜索結(jié)果中您網(wǎng)站的摘要中。
面包屑導(dǎo)航中可用的結(jié)構(gòu)化數(shù)據(jù)屬性
面包屑的結(jié)構(gòu)化數(shù)據(jù)格式屬性由schema.org BreadcrumbList定義。搜索引擎通常使用以下屬性在搜索片段中生成面包屑列表：
使用微數(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>
如何測(cè)試您的結(jié)構(gòu)化數(shù)據(jù)實(shí)施
無(wú)論您選擇哪種結(jié)構(gòu)化數(shù)據(jù)格式來(lái)指定面包屑，您都可以使用Google 結(jié)構(gòu)化數(shù)據(jù)測(cè)試工具進(jìn)行驗(yàn)證。它將驗(yàn)證您的結(jié)構(gòu)化數(shù)據(jù)標(biāo)記并指出錯(cuò)誤。無(wú)效的結(jié)構(gòu)化數(shù)據(jù)標(biāo)記可能會(huì)導(dǎo)致搜索引擎忽略您的面包屑規(guī)范。
面包屑導(dǎo)航的類型
關(guān)于面包屑的技術(shù)思考
在研究面包屑導(dǎo)航的可能邏輯之前，讓我們先看一下不同站點(diǎn)結(jié)構(gòu)和URL結(jié)構(gòu)的技術(shù)差異。l您想要為每個(gè)產(chǎn)品使用唯一的URL還是根據(jù)分類使用多個(gè)URL？
一致和不一致的面包屑導(dǎo)航
如果面包屑導(dǎo)航不“跳躍”，那么它就是一致的。這意味著，每次點(diǎn)擊鏈接進(jìn)入更深層次的內(nèi)容時(shí)，面包屑都會(huì)增強(qiáng)一級(jí)。
一致的面包屑導(dǎo)航示例
用戶進(jìn)入網(wǎng)站的kitchen頁(yè)面。面包屑像這樣
home > furniture > kitchen
下次單擊您將進(jìn)入“kitchen tables”產(chǎn)品頁(yè)面。現(xiàn)在面包屑像這樣
home > furniture > kitchen > kitchen table
不一致的面包屑導(dǎo)航示例
用戶進(jìn)入網(wǎng)站的kitchen頁(yè)面。面包屑像這樣
home > furniture > kitchen
下次點(diǎn)擊將進(jìn)入產(chǎn)品頁(yè)面“kitchen tables”?，F(xiàn)在面包屑像這樣
home > products > kitchen table xy
具有多分類架構(gòu)的一致面包屑導(dǎo)航示例
用戶點(diǎn)擊了"furniture", "kitchen" 和?"tables"?分類，然后選擇了產(chǎn)品
home > furniture > kitchen > tables > kitchen table xy
home > products > kitchen table xy
唯一的還是多個(gè) URL？
當(dāng)產(chǎn)品屬于多個(gè)分類時(shí)，創(chuàng)建一個(gè)對(duì)搜索引擎友好的信息架構(gòu)比較復(fù)雜。此時(shí)，該產(chǎn)品可以通過(guò)以下兩種方式訪問(wèn)這兩種方法都可以創(chuàng)造積極的用戶體驗(yàn) - 取決于您想要做什么。但這兩種方法也都有缺點(diǎn)，如果您想提供最佳的用戶體驗(yàn)并同時(shí)迎合搜索引擎，則需要以不同的方式解決這些缺點(diǎn)。
示例：?唯一URL
如果您的產(chǎn)品具有唯一的URL，則可以避免重復(fù)內(nèi)容問(wèn)題。這種方法的缺點(diǎn)是，如果您不實(shí)現(xiàn)更復(fù)雜的算法來(lái)使面包屑對(duì)用戶表現(xiàn)一致，您的面包屑可能會(huì)跳動(dòng)。
http://example.com/furniture/kitchen/http://example.com/furniture/tables/
http://example.com/procuct/kitchen-table-xy
示例：?不同分類的多個(gè)URL
如果某個(gè)產(chǎn)品有多個(gè)URL，則可能會(huì)導(dǎo)致重復(fù)內(nèi)容問(wèn)題。在這種情況下，您需要定義一個(gè)默認(rèn)版本，分配 rel=canonical并指向所有產(chǎn)品頁(yè)面上的產(chǎn)品默認(rèn)URL的目標(biāo)URL。
http://example.com/furniture/kitchen/http://example.com/furniture/tables/
http://example.com/furniture/kitchen/kitchen-table-xyhttp://example.com/furniture/tables/kitchen-table-xy
用戶路徑與面包屑導(dǎo)航同步
如果將用戶路徑合并到面包屑導(dǎo)航中，則可以實(shí)現(xiàn)最一致的用戶體驗(yàn)。
home > kitchen > featured items > kitchen table xy
用戶使用“Best Tables Inc”的制造商過(guò)濾器，然后選擇了產(chǎn)品
home > kitchen > Best Tables Inc > kitchen table xy
用戶通過(guò)任何其他方式找到該產(chǎn)品
home > products > kitchen table xy
面包屑的概念差異
定義面包屑邏輯有三種基本方法： 基于位置、路徑或?qū)傩浴?/span>
基于位置的面包屑導(dǎo)航
面包屑的常見(jiàn)用法是基于位置的面包屑?；谖恢玫拿姘硷@示站點(diǎn)層次結(jié)構(gòu)中的當(dāng)前位置，并使用戶能夠快速瀏覽站點(diǎn)的各個(gè)級(jí)別。在基于位置的面包屑中，層次結(jié)構(gòu)與面包屑同步。
http://example.com/tables/kitchentable-oak/
Home > tables > kitchen table oak
l用戶可以輕松確定站點(diǎn)層次結(jié)構(gòu)中的當(dāng)前位置根據(jù)站點(diǎn)結(jié)構(gòu)，面包屑導(dǎo)航可能會(huì)變得不一致
基于屬性的面包屑導(dǎo)航
基于屬性的面包屑允許使用當(dāng)前內(nèi)容的屬性來(lái)增強(qiáng)面包屑導(dǎo)航。基于屬性的面包屑的行為獨(dú)立于站點(diǎn)的層次結(jié)構(gòu)，因此需要更多的技術(shù)支持才能正確實(shí)施。
http://example.com/tables/kitchentable-oak/
Home > oak > large > kitchen table oak
l可能會(huì)導(dǎo)致很長(zhǎng)的面包屑導(dǎo)航
混合面包屑導(dǎo)航
混合面包屑是基于位置的面包屑和基于屬性的面包屑的組合?；谖恢玫牟糠滞ǔＨ∽灾鞣诸?，基于屬性的部分取自選定的過(guò)濾器或內(nèi)容屬性。
http://example.com/tables/kitchentable-oak/
Home > furniture > kitchen > tables > oak (x) > large (x) > kitchen table oak
l在大型電子商務(wù)網(wǎng)站上提供比基于位置的面包屑更好的可用性l更多內(nèi)部鏈接指向?qū)傩皂?yè)面l根據(jù)站點(diǎn)的結(jié)構(gòu)，面包屑導(dǎo)航可能會(huì)變得不一致l可能會(huì)導(dǎo)致更長(zhǎng)的面包屑導(dǎo)航
基于路徑的面包屑導(dǎo)航
設(shè)置面包屑的一種不太常見(jiàn)的方法是使其基于路徑。在簡(jiǎn)單的基于路徑的面包屑中，面包屑導(dǎo)航是歷史軌跡，顯示用戶瀏覽網(wǎng)站的路徑。這種類型的面包屑的根目錄是將用戶帶入網(wǎng)站的著陸頁(yè)面。用戶進(jìn)入標(biāo)題為“Best kitchen furniture”的博客文章，然后點(diǎn)擊進(jìn)入tables分類，選擇oak，返回tables并選擇產(chǎn)品。
http://example.com/tables/kitchentable-oak/
Best kitchen furniture > tables > oak > tables > kitchen table oak
不需要任何特定的網(wǎng)站結(jié)構(gòu)l面包屑需要存儲(chǔ)在每個(gè)用戶的會(huì)話中l當(dāng)機(jī)器人獲得會(huì)話（例如基于IP）時(shí)，搜索引擎機(jī)器人會(huì)抓取隨機(jī)路徑的不穩(wěn)定且不可預(yù)測(cè)的內(nèi)部鏈接l用戶無(wú)法確定在站點(diǎn)層次結(jié)構(gòu)中的當(dāng)前位置
實(shí)用的解決方案
我們建議選擇一種在工作量和估計(jì)收益方面平衡且對(duì)搜索引擎友好的面包屑實(shí)現(xiàn)方案。這意味著：
技術(shù)觀點(diǎn)
如果您想使用多個(gè)URL，請(qǐng)確保l為每個(gè)產(chǎn)品定義一個(gè)默認(rèn)URLl使用rel=canonical防止重復(fù)內(nèi)容問(wèn)題花點(diǎn)時(shí)間定義可能的面包屑導(dǎo)航，不要使用簡(jiǎn)單的歷史記錄
概念觀點(diǎn)
l面包屑應(yīng)該有一個(gè)基于位置的根l如果您使用路徑，請(qǐng)定義入口點(diǎn)以創(chuàng)建基于位置的根
實(shí)踐面包屑的最佳方法
面包屑可降低爬行級(jí)別數(shù)
面包屑與最低級(jí)別的深層鏈接相結(jié)合可以非常有效地降低爬網(wǎng)級(jí)別數(shù)量，從而創(chuàng)建更密集的網(wǎng)站結(jié)構(gòu)。
面包屑導(dǎo)航的層級(jí)架構(gòu)
您有一個(gè)根級(jí)別有 6 個(gè)級(jí)別的站點(diǎn)。如果您通過(guò)面包屑放置從根級(jí)別到第 6 級(jí)內(nèi)容的鏈接，則可以降低第 3-6 級(jí)所有內(nèi)容的爬網(wǎng)級(jí)別和點(diǎn)擊深度。
|
Home |
1級(jí) |
2級(jí) |
3級(jí) |
4級(jí) |
5級(jí) |
6級(jí) |
之前的 |
0 |
1 |
2 |
3 |
4 |
5 |
6 |
之后的 |
0 |
1 |
2 |
2 |
2 |
2 |
1 |
面包屑搜索結(jié)果片段
如上所述，如果搜索引擎可以在網(wǎng)站上識(shí)別面包屑，則它們可能會(huì)在搜索結(jié)果中顯示面包屑。但搜索結(jié)果片段僅提供有限的空間。因此，如果面包屑太長(zhǎng)，搜索引擎必須在搜索結(jié)果中縮短它們。通常，根頁(yè)面下的蹤跡的第一個(gè)元素會(huì)被省略，只顯示最后兩個(gè)元素。保持最后兩項(xiàng)與用戶相關(guān)非常重要，可以提高搜索結(jié)果的點(diǎn)擊率。我們建議對(duì)面包屑中的最后兩個(gè)可抓取項(xiàng)目使用分類而不是歸因。
Home > … > Kitchen > Tables
分頁(yè)和面包屑導(dǎo)航
分頁(yè)也應(yīng)該在面包屑中顯示。如果您有分頁(yè)內(nèi)容，則應(yīng)在面包屑中添加分頁(yè)內(nèi)容的第一個(gè)元素和當(dāng)前元素。
Home > Furniture > Kitchen > Tables > Page 3
鏈接“Tables”鏈接到分頁(yè)內(nèi)容“Tables”的第一個(gè)元素，并允許用戶跳回到分頁(yè)的開(kāi)頭。將分頁(yè)添加到面包屑還會(huì)創(chuàng)建指向分頁(yè)內(nèi)容的起始文檔的相關(guān)內(nèi)部鏈接。這有助于使其與搜索引擎更加相關(guān)。
面包屑導(dǎo)航的常見(jiàn)錯(cuò)誤
使用短面包屑進(jìn)行深層站點(diǎn)結(jié)構(gòu)
如果在具有許多合法信息級(jí)別的站點(diǎn)上面包屑導(dǎo)航太短，則面包屑將無(wú)法有效地創(chuàng)建更密集的站點(diǎn)結(jié)構(gòu)。我們建議您以有助于降低抓取級(jí)別的方式設(shè)計(jì)面包屑。這可以幫助您優(yōu)化抓取速度。
在網(wǎng)站標(biāo)題中使用反向面包屑導(dǎo)航
在某些情況下，技術(shù)會(huì)在網(wǎng)站HTML標(biāo)題中添加面包屑導(dǎo)航。這很容易失控，導(dǎo)致搜索引擎不支持標(biāo)題長(zhǎng)度，在搜索結(jié)果中會(huì)縮短標(biāo)題。我們不建議在站點(diǎn)的HTML標(biāo)題中使用面包屑導(dǎo)航。
面包屑常見(jiàn)問(wèn)題解答
我應(yīng)該在面包屑導(dǎo)航中鏈接主頁(yè)嗎？
如果您的面包屑導(dǎo)航中顯示了主頁(yè)，我們建議您鏈接到它，以保持用戶體驗(yàn)一致。從SEO的角度來(lái)看，為了在大型網(wǎng)站上保持面包屑更短，您還可以省掉主頁(yè)元素并從第一級(jí)開(kāi)始。這可以讓您在搜索引擎中更多顯示最相關(guān)的面包屑。
我應(yīng)該在面包屑導(dǎo)航中顯示當(dāng)前項(xiàng)嗎？
從技術(shù)SEO的角度來(lái)看，無(wú)論是否在面包屑中顯示當(dāng)前項(xiàng)，都沒(méi)有區(qū)別。如果你網(wǎng)站擁有大量訪客,可以進(jìn)行 A/B 測(cè)試，哪種方式可以帶來(lái)更好的用戶交互。
我應(yīng)該鏈接面包屑導(dǎo)航中的當(dāng)前項(xiàng)嗎？
如果您決定在面包屑導(dǎo)航中顯示當(dāng)前項(xiàng)，下一個(gè)問(wèn)題通常是當(dāng)前項(xiàng)是否應(yīng)該加鏈接。這個(gè)問(wèn)題可以從技術(shù)和可用性兩個(gè)角度來(lái)回答：從可用性的角度來(lái)看，用戶在單擊再次指向同一文檔的鏈接時(shí)可能會(huì)感到困惑。這基本上是網(wǎng)站的刷新，即使您獲得了額外的頁(yè)面印象，也可能會(huì)導(dǎo)致用戶跳出。從SEO的角度來(lái)看，鏈接不會(huì)給內(nèi)部鏈接圖增加任何價(jià)值。此外， W3C 的《Web 內(nèi)容可訪問(wèn)性指南 2.0 的技術(shù)和失敗》中還提供了提供面包屑的指南（https://www.w3.org/TR/WCAG20-TECHS/G65.html），建議不要將當(dāng)前位置實(shí)現(xiàn)為面包屑中的鏈接。我們建議不要在面包屑導(dǎo)航中的當(dāng)前項(xiàng)上加鏈接！翻譯整理作品，原作者Audisto, 封面圖來(lái)源：Big Web Media
