如果您都熟悉 Hansel 和 Gretel 的故事,那麼您知道他們使用麵包屑來標記他們的路,以此找到回家的路。當然,在 WordPress 網站設計中沒有真正的麵包屑(或鳥,為此事)涉及麵包屑導航。本文談談如何在 WooCommerce 獨立站網頁設計中最大程度地利用麵包屑導航?
麵包屑是一種輔助導航的方法,其功能有點像進度條。 您通常會在主導航欄下方找到它。一些 WooCommerce 獨立站網頁設計師認為也許不是每個網站中的導航都會改善多使用者體驗。 然而,有些情況下它可能是非常有用的。
一、什麼時候應該使用麵包屑?
您可能已經在您訪問的許多網站中看到了麵包屑導航。 您可以在跨飛獨立站網站上看到它們,也可以在亞馬遜上看到。
您可以跟蹤您正在恢復的層次結構的頁面,以便準確瞭解您在站點架構中的位置。 它就像您在商場或建築物中看到的那些站點地圖,在那裡他們在地圖上標記您站在 “您在這裡” 的地方。
您顯然不會需要類似的東西在一個一層樓的建築,您可以看到一切。 當您有三個或更多級別到您的站點以層次方式排列時,您只需要導航導航。 在其最簡單的形式中,麵包屑導航連結被水平地佈置並且由“>” 符號分隔,這表示頁面相對於其前面的連結的級別。 其目的是防止您的多使用者在您的網站丟失。
例如,如果多使用者進行搜尋並降落在您不希望進入的層次結構中的頁面上,則導航痕跡導航將幫助他們找到返回首頁的路徑。 他們只需要點選他們想回到主頁的級別的連結。
二、麵包屑的型別
您將在大多數大型 WooCommerce 電子商務型別中找到三種主要型別的導航導航。它們是基於位置,屬性和基於路徑的:
1 、基於位置的導航
基於位置的麵包屑導航顯示他們在網站結構中的多使用者,通常是具有兩個以上級別的多使用者。第一級始終是主頁,並在當前頁面結束,這是不可點選的。
它不僅有助於多使用者幫助他們找到自己的方式,而且有助於為搜尋引擎技術提供有關頁面內容的資訊,使索引更容易。
2 、基於屬性的導航
此型別的導航顯示頁面上特定內容的屬性,而不是其位置。它基於連結的後設資料,其可以分支到不同的路徑,因此它向多使用者呈現了接下來去哪裡的選擇。它通常在 WooCommerce 電子商務網站中使用,因為其描述性質使得購物者更容易找到他們想要的。屬性由豎直管道分隔。
您可以結合使用基於位置的導航,具體取決於您提供的產品。基於位置的連結是可點選的,而基於屬性的連結不是,但您可以點選 “X” 刪除屬性。
例如,您可以尋找有長袖的男士休閒襯衫,您最後在一個短袖襯衫的頁面。 單擊屬性 “短袖” 的 “X”,然後選擇 “長袖” 。然而,因為有基於屬性的導航有這麼多選項,它可以使搜尋引擎索引,因為重複的內容很難。
3 、基於路徑的導航
這種型別比其他導航更像是一個歷史軌跡,所以它的服務更像後退按鈕。 它跟蹤多使用者到達特定頁面所採取的步驟。 它不推薦用於導航的目的,因為它不是真正有用的。 它甚至可能會混淆的人登陸頁面深入網站內。
三、使用麵包屑的好處
麵包屑對於一些具有正確實現的網站是有益的。 它們使得多使用者方便地去更高階別而不必經過箍。 它可以減少多使用者訪問特定網頁所需的點選次數,從而幫助多使用者避免彈跳。 它甚至不需要大量的空間,所以沒有真正的理由不使用它,在適當的時候。
四、使用麵包屑的提示
·深度,如前所述,您只應對 3 層或更多層級的網站使用麵包屑。
·首頁,您的首頁應該始終是第一級,因為這是所有主要類別以及您的關於和聯絡頁面。
·符號,建議使用“>”而不是“/”來分隔連結,因為“>” 表示方向,但不是必須的。
·位置,透過對多使用者所在的文字進行一些更改來指示,儘管通常位於鏈的末尾。 使用不可點選的文字標籤,並加粗。
結論
麵包屑導航對於具有複雜的結構和許多產品的許多大型網站比較適用,它可以為您的網站多使用者提供一個很大的幫助。事實上,它也可以幫助您的 SEO 站群也不錯。