為什麼應該新增麵包屑選單?
麵包屑是一種導航元件。這個名字來源於格林兄弟的一個古老故事,孩子們在森林裡留下面包屑來找到回家的路。麵包屑在網頁上起著類似的作用:它們幫助訪問者瞭解他們所在的位置,並在需要時讓他們返回網站的先前部分。
麵包屑有哪些不同型別?
麵包屑分為三類,每類都有其獨特的功能。
在實施麵包屑之前,確定哪些麵包屑最適合網站。
基於層次結構的麵包屑 這是最常見的麵包屑型別,它告訴訪問者他們在網站架構中的位置以及如何返回主頁。
例如:主頁 > 資源 > SEO 指南
基於屬性的麵包屑 這通常在線上商店中看到,用於顯示消費者選擇的屬性。
例如:主頁 > 鞋子 > 登山鞋 > 女款
基於歷史的麵包屑 等同於瀏覽歷史記錄,告訴訪問者已檢視的其他網頁。
例如,當搜尋 SEO 資訊並檢視三篇不同的文章時,您的麵包屑可能如下所示:主頁 > SEO 文章 > SEO 文章 1 > SEO 文章 2 > 當前頁面。
使用麵包屑的優勢有哪些?
在您的網站上採用這些方便的小提示有很多好處。讓我們快速瀏覽一下這些好處。
谷歌喜歡它們。 您的客戶喜歡麵包屑,但谷歌也喜歡它們。它們為谷歌提供了另一種確定網站內容及其組織方式的方法。谷歌使用它們來抓取您的內容。但是,如前所述,谷歌可能會將其包含在搜尋結果中,從而使結果對使用者更具吸引力。需要結構化資料才能提高它們出現在谷歌搜尋結果中的可能性。谷歌搜尋使用文件正文中的適當 HTML 程式碼來對其搜尋結果中從網站獲得的資料進行分類。
它們改善了使用者體驗。 人們不喜歡迷路。當面對新的環境時,人們經常尋找可識別的事物或地點;這同樣適用於網站。您必須在最大限度地減少摩擦的同時讓客戶滿意。麵包屑可以提高使用者滿意度,因為它們是一種標準的介面功能,可以立即告知訪問者如何退出。您不需要使用後退按鈕。
它們降低了跳出率。 首頁很少被訪問——它以搜尋引擎最佳化為中心。這意味著網站的任何部分都可能作為入口點。如果他們選擇的網站無法滿足他們的需求,您必須想出一個方法將他們引導到網站的其他部分。麵包屑透過為使用者提供另一種瀏覽網站的方式來幫助降低跳出率。難道將人們帶回主頁比將他們導回谷歌更好嗎?
如何正確地將麵包屑新增到您的網站?
新增麵包屑時,有一些事項需要考慮。讓我們快速瀏覽一下它們。
在麵包屑中,不要連結到當前頁面。擁有一個連結到自身的頁面可能對 SEO 更好。當前站點可以繼續包含在麵包屑路徑中;不要連結它。出於同樣的原因,不建議將麵包屑新增到站點,因為路徑將僅由一個指向自身的元件組成。
將麵包屑放置在每個頁面的頂部,靠近主選單。這是標準做法,人們本能地期望在那裡找到麵包屑。然而,某些網站將其麵包屑放在頁面的底部——蘋果在其官方網站上就是這樣做的。
啟用麵包屑時,請驗證網站內容是否包含規範標記。模式標記中使用的元素的概念語言已整合到 HTML 程式碼中。它幫助谷歌理解您提供的內容,並且特別地告知其搜尋引擎理解網站頂部的超連結集合代表麵包屑。
麵包屑導航實踐
僅當對您的網站有意義時才使用麵包屑 只有當您的網站結構包含許多更深的級別時,才使用麵包屑。如果您使用單層網頁設計,並且任何內容都只需單擊一次即可訪問網站,那麼麵包屑將不會對您的使用者有益。例如,麵包屑在 Wait But Why 上沒有任何用處。網站內部沒有更深的層次結構;所有內容都只需單擊一次即可透過網站訪問。
使用麵包屑來支援主要導航 麵包屑提供額外的導航選項。因此,它們不應替代您的主要導航選單。
將麵包屑視為人們瀏覽您的線上資源的另一種方式。
戴爾使用麵包屑來補充其主要導航。
在各個級別之間使用分隔符 特殊字元用於分隔麵包屑路徑中的文字連結。最常用的分隔符是大於符號 (>)。但是,也可以使用直線(|)或正斜槓(/)。例如,沃爾瑪在其麵包屑路徑中使用正斜槓(/)來分隔產品。
不要在麵包屑路徑中連結到當前頁面 麵包屑路徑以個人的當前位置結束。提供指向當前網站的連結毫無意義,因為個人當前就在該頁面上。使用者不太可能與之互動。它也沒有任何作用。例如,我們可以看到麵包屑路徑中的最後一個專案缺少連結。這是因為個人之前就在最後一個專案指示的位置。
保持設計的簡潔性。 麵包屑佈局應儘可能簡潔明瞭。確保它有用,而不影響頁面的內容。例如,Slack 將麵包屑構建到其網站上
Slack 的麵包屑顯示在頁面右上角,字型小但清晰易讀,與網站的其餘部分相匹配。
組之間的分隔符也很簡單。
這些麵包屑很容易找到和理解。但是,它們並沒有吸引任何嚴格必要的額外注意力。
結論
麵包屑是最重要的導航元件之一,由於大量的擴充套件和附加元件,它們易於安裝。當網站包含超過 20 個部分和多個層次結構時,沒有理由不包含麵包屑。這條導航路徑將使您的網頁和搜尋引擎結果頁面上的使用者受益。
資料結構
網路
關係型資料庫管理系統 (RDBMS)
作業系統
Java
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP