麵包屑導航對 SEO 和可用性的重要性

已發表: 2021-12-24

什麼是麵包屑導航,何時使用麵包屑? 麵包屑導航如何影響可用性和 SEO? 在改善您的在線形象時,此類問題可能會讓您不知所措。

作為網站所有者,您的主要任務是使您的網站盡可能舒適和實用,從而為訪問者提供積極的用戶體驗。 否則,您將失去潛在客戶,因為當今的客戶更喜歡可訪問性和可用性。 沒有人願意等待您的頁面加載,也沒有人願意在您的網站上迷路。

想像一下,您將每週進行一次雜貨店購物。 您訪問了一個巨大的在線超市,該超市提供來自不同部門的大量產品。 而且您被困在列表的第一個位置,因為您不知道如何找到牛奶或切換到整個產品目錄。 它會讓你感到沮喪,特別是如果你沒有太多時間購物。

當您的網站缺乏適當的麵包屑導航時,這就是您的客戶的感受。 在這種情況下,困惑、沮喪和煩惱只是潛在客戶的一些情緒。 因此,如果您的網站還沒有方便的導航,那麼是時候考慮添加麵包屑了。

什麼是麵包屑導航?

麵包屑導航是指尋路,代表一個麵包屑路徑,幫助網站用戶熟悉他們的位置並了解網站層次結構。 麵包屑導航由麵包屑組成——位於主網站導航(網站菜單)下方的特殊導航鏈接。

最佳麵包屑設計

存在一種誤解,認為麵包屑僅對具有復雜結構和廣泛層次結構的大型網站是必需的,例如電子商務網站。 然而,麵包屑導航適用於任何至少三層深度的網站。

麵包屑的基本類型

從根本上說,麵包屑主要分為三種類型:層次或基於位置的麵包屑、基於屬性的麵包屑和基於歷史路徑的麵包屑。 下拉麵包屑導航也屬於麵包屑,但代表一種特定的類型,非常適合大型網站。 請記住,每種麵包屑類型都有特定的元素軌跡。

層次結構或基於位置的麵包屑

層次結構麵包屑

因此,基於位置或層次結構的麵包屑向用戶顯示他們在網站上經過的整個路線,使他們能夠無縫地導航多個站點層次結構級別。 這種便利性使這種麵包屑類型成為簡化網站導航的最受歡迎的選項。

基於屬性的麵包屑

基於屬性的麵包屑

基於屬性的麵包屑也稱為動態麵包屑,因為它們展示了用戶選擇的屬性軌跡,並且可以根據點擊路徑而變化。 這種類型的麵包屑導航可以讓潛在客戶了解更多他們可能感興趣的產品,因此它是一種為客戶提供增強選擇選項的智能方式。

基於歷史的麵包屑

基於歷史的麵包屑

基於歷史的麵包屑代表用戶登陸當前頁面所經歷的一組步驟。 它們提供訪問過的網站頁面的完整路徑,並且可以在功能上替換為瀏覽器的後退按鈕。

帶有下拉菜單的麵包屑

麵包屑導航還有一個選項——帶有下拉菜單的麵包屑。 這種逐步增強的解決方案適用於具有復雜元素和大量信息的大型網站。 下拉麵包屑導航與基於位置和基於屬性的麵包屑兼容。

為什麼需要麵包屑導航?

無論是基於位置的、動態的、下拉的,還是基於歷史的麵包屑導航,在您的網站中添加麵包屑都可以為您帶來極佳的收益。 因此,請查看使用麵包屑的優勢,並了解組織良好的麵包屑跟踪如何幫助您改進您的網站。

精緻的網站可用性

首先,連貫的麵包屑導航極大地改善了您瀏覽網站的過程。 網站訪問者可以在您的網站頁面之間自由移動,沒有任何麻煩,整個用戶體驗得到改善。 接下來,麵包屑有助於可視化當前和最近的位置,因此用戶無需花費額外的時間瀏覽您的網站。

此功能在處理像亞馬遜這樣的大型市場時非常有用,因為用戶在面對各種各樣的產品類別、子類別、產品頁面等時可能會感到失望。使用經過深思熟慮的麵包屑路徑也可以使您的內容看起來井井有條並允許訪問者快速找到所需的信息或切換到必要的站點部分。

精緻的網站可用性

此外,不同類型的麵包屑將使您能夠正確利用屏幕空間。 精心設計的麵包屑作為簡單的導航元素出現,通常代表平滑的水平線,為用戶提供瀏覽網站的機會。 這麼窄的線條看起來很整齊,有助於設計師防止頁面超載。

增強的 SEO 性能

精心設計的麵包屑導航路徑還為提高網站在自然搜索結果中的性能提供了廣泛的機會。 例如,麵包屑允許您通過調整網站頁面上的鏈接汁來微調內部鏈接。 它對 SEO 非常有益,因為它可以幫助搜索引擎更好地掌握您網站內容的結構。

此外,詳細的麵包屑標記是豐富您在 Google 上的搜索片段的絕佳方式。 Google 片段或搜索片段是在搜索引擎結果頁面或 SERP 中表示的內容提取。 它們包含網站頁面(元數據)的簡要描述,幫助用戶了解特定網站頁面與其查詢的相關性。 由於 Google 更喜歡直接在搜索結果中顯示麵包屑,因此最好編寫準確的麵包屑軌跡,這將對您的代碼段產生積極影響。

搜索結果中的麵包屑

如果您想檢查搜索片段的外觀,可以在 Google 的幫助下手動檢查頁面。 還有一些自動工具可以幫助您檢查不同關鍵字的 Google 代碼段並監控特定時期的代碼段性能。 例如,看一下 SE Ranking 的 SEO 監控工具。

該工具具有一項功能,可讓您按關鍵字全面跟踪搜索片段,並在方便的選項卡中調查網站頁面的搜索外觀。 通過到達分析和流量部分並導航到片段選項卡,創建一個新項目並監控所需關鍵字的片段。

搜索片段預覽

適當的麵包屑導航也有助於降低跳出率。 如果訪問者來到您網站的特定登錄頁面,他們可以通過適當的麵包屑進入其他頁面。

此外,準確的麵包屑跟踪還可以讓初次使用的用戶在您的網站上停留更長時間。 他們可能對您網站的不同類別和子類別感興趣,這就是為什麼麵包屑非常適合降低網站的整體跳出率。 您可以在 Google Analytics 或 SE Ranking 中查看跳出率和平均會話持續時間(導航到Analytics & Traffic ,然後轉到Traffic )。

使用麵包屑的 9 個實用技巧

由於其對網站可用性和搜索結果可見性的顯著影響,使用麵包屑導航已變得司空見慣。 然而,要獲得最佳結果,您需要正確使用麵包屑標記。 有一些使用麵包屑的實用方法,您可以在下面查看。

#1 確保您的網站確實需要麵包屑

當然,大型電子商務網站並不是唯一使用麵包屑導航的地方。 然而,在某些情況下,麵包屑看起來很笨拙並且無法發揮其主要功能。 例如,如果您有一個單級網站或具有扁平層次結構的網站,則麵包屑標記是不合適的。

因此,您需要確保添加麵包屑路徑對您的網站有意義。 要檢查您的網站是否需要麵包屑,請使用一些網站爬蟲,例如 Screaming Frog,它會顯示您網站架構的所有級別。 或者,您可以手動可視化您的網站結構。

麵包屑標記

#2 不要用麵包屑代替你的主站點導航

您的主要網站導航菜單的便利性和相關性是增強用戶體驗的關鍵,而麵包屑代表了一種徹底的增強,使訪問者的網站探索過程變得更好、更舒適。 考慮使用麵包屑導航作為支持主站點菜單的絕佳方式。

不要用麵包屑代替您的主站點導航

#3 優先鏈接到您的主頁

在為您的網站創建完美的麵包屑導航時,請考慮使用指向主頁的鏈接開始麵包屑導航。 通過在麵包屑標記的開頭添加指向您的主頁的鏈接,您可以提供一個強大的錨點,強調用戶的旅程並闡明整個路線。

優先考慮麵包屑

#4 確保你的麵包屑路徑是一致的

如果麵包屑導航具有一致性,那麼它就可以很好地工作。 這就是為什麼確保您的麵包屑提供有關您網站上的用戶路徑的足夠信息至關重要的原因。 鏈接麵包屑標記的所有元素,除了路徑中的最後一項,以避免沒有任何意義的空鏈接。 此外,要添加對比度並突出顯示路徑的當前頁面,請將最後一項設為粗體或用不同的顏色強調它。

不可點擊的麵包屑

#5 使用分隔符突出顯示麵包屑

您絕對不希望您網站上的麵包屑路徑看起來凌亂。 因此,盡量分離麵包屑導航的元素,並為標記提供乾淨整潔的外觀。 隨意使用斜線、箭頭、引號等符號,或要求您的設計師以獨特的佈局樣式突出顯示麵包屑,以合適的顏色模仿線條或標籤。

使用分隔符突出顯示麵包屑

#6 選擇正確的麵包屑位置

您的網站佈局應該結構良好且有條理,以提供高水平的用戶體驗。 每個網站頁面都需要有一個連貫的標題標記,以確保正確抓取和其他頁面元素的正確位置。

例如,H1 標題上方的區域是放置麵包屑路徑的最佳位置,因為它在訪問者的視線範圍內,提供了更好的方向感。 Marks and Spencer 網站是正確放置麵包屑的一個很好的例子。

麵包屑放置

#7 確保你的麵包屑顯示當前用戶的位置

在您的網站上實施麵包屑導航之前,請確保您了解此類基本導航元素的主要目的。 麵包屑標記不應顯示會話歷史記錄,因為瀏覽器的後退按鈕完全可以處理此任務。

從本質上講,麵包屑導航旨在幫助訪問者整理整個網站層次結構,因此讓您的麵包屑導航實現這一主要功能至關重要。 您的麵包屑應該向用戶闡明您網站上的路徑,反之亦然。

顯示當前用戶位置

#8 不要在麵包屑導航中使用 IA 類別

特定的麵包屑路徑應包括與網站上所需用戶路徑相對應的有效頁面,以提供精細的網站導航。 因此,每個麵包屑元素(除了跟踪中的最後一項)都必須將用戶導航到相關頁面。 麵包屑標記旨在實現頁面之間的無縫導航。

如果您網站的某些頁面沒有相關頁面可登陸,請考慮在麵包屑導航中避免使用它們。 例如,看看維多利亞的秘密網站。 主站點菜單包含具有手袋子類別的配飾類別。

麵包屑中的類別

此子類別沒有單獨的頁面。 因此,麵包屑路徑不包括 Handbags,但包含一個類似的 Bags & Accessories 元素,該元素在網站上具有相關頁面。

子類別導航

#9 確定最佳麵包屑填充和大小

儘管您的麵包屑導航應該引人注目,但它不應代表整個網站頁面上最突出的元素。 因此,請考慮麵包屑的填充和大小,以使它們成為頁面樣式的一個很好的補充。

麵包屑標記完全是為了用戶的方便,所以盡量保持冷靜和統一,避免明亮的口音和大而非凡的字體。 例如,請注意 Tommy Hilfiger 網站,其帶有簡潔的麵包屑路徑,非常適合整個網頁佈局,並且不會分散用戶對頁面內容的注意力。

最佳麵包屑大小

概括

麵包屑導航使瀏覽網站變得更快、更舒適。 實施麵包屑可以顯著提高網站的可用性並提高您的 SEO 性能。 我們希望本指南能幫助您完美地將麵包屑標記添加到您的網站。