路徑導覽麵包屑Breadcrumb

麵包屑是什麼?提升SEO的「路徑導覽」讓使用者不再迷路!|天矽科技客製化網頁設計

麵包屑是什麼?提升SEO的「路徑導覽」讓使用者不再迷路!|天矽科技客製化網頁設計

 

麵包屑不僅能防止各位在瀏覽網頁時迷路,還能有利於搜尋引擎爬蟲檢索、提升SEO自然排名!

麵包屑是什麼?


 麵包屑(Breadcrumb)又稱麵包屑導航,也就是在網站上的路徑導覽功能(圖片上灰色那一條)。
 

麵包屑是什麼

 

 當使用者在瀏覽網站時,想要看的東西太多,到處點來點去,突然想要回到某一頁時就會迷路,最後只能點擊LOGO或某個大分類重頭開始找某個頁面,甚至是直接關閉網頁。

 而麵包屑的作用就是要讓使用者可以清楚的知道,我們目前正在哪一頁?這些商品被劃分到哪個分類中?我們還能透過麵包屑導航快速地回到上一頁或首頁。

 這麼做,不僅能夠讓使用者有邏輯的瀏覽網站降低網站跳出率,在SEO上還能達到加分的作用
 

 麵包屑一詞源自於糖果屋的童話故事,故事中繼母計畫將小孩們丟到森林,小孩計畫將麵包屑扔在地上就能沿著該路徑找到回家的路,不過因為麵包屑被森林的小鳥吃掉,小孩就迷路了,後來才會遇到糖果屋;不過加在網站上的麵包屑,並不會被吃掉,甚至還有可能被爬蟲吃到,讓爬蟲不迷路!

 

麵包屑對SEO重要嗎?


 麵包屑非常重要!

 對使用者而言,如果網站路徑沒有辦法被輕易找到,也沒有麵包屑的輔助,他可能點一點,找不到回去的路就乾脆把網站直接關掉,去看別間相同類型的網站了!這樣不僅流失了一個潛在客戶,網站跳出率還有可能因此提升。

 對爬蟲來說,也是有可能會迷路的!
 增加麵包屑讓網站更加結構化,給爬蟲一個路標,讓它在檢索收錄網站時還不至於迷路,如果爬蟲迷路了,就有可能發生某些網頁沒有被檢索到的情況。

  • 對使用者:降低跳出率
  • SEO:讓爬蟲好檢索

 

 我們可以將網站想像成一間百貨公司,當我們使用者在逛街時,如果沒有地圖導覽、指標,是不是就沒有辦法輕易找到想要去的地方?當清潔人員在清潔百貨時,如果沒有地圖導覽、指標,是不是也很有可能會不小心漏掉某一間商店沒有清潔?

 因此,麵包屑(Breadcrumb)是非常重要的喔!

 

如何使用麵包屑


 路徑導航很重要,不過仍要注意一些重點,如:

  • 每一層的文字不能太長
  • 每一層的連結都必須有效
  • 路徑不宜過長

 因為我們還要考慮到行動裝置的使用者,如果文字太長、路徑過長,會很雜亂,並且如果連結無效,麵包屑變得毫無意義。

 麵包屑的建立其實也分為兩種,一種是屬於前端給使用者看的,另一種是屬於結構化資料JSON的後台程式碼,不過在此不詳加贅述。有興趣更深入了解如何新增結構化資料的朋友,可參考Google的導覽標記說明文件

 

建立網站

 由上面的介紹我們可以知道,麵包屑的重要性,不只對使用者重要,對爬蟲的檢索也非常重要,因此在架設網站時,請務必要建立「麵包屑」這個路徑導覽路線!

 

天矽科技案例分享


 以路徑最多的醫院為例子,醫院有許多的科別、掛號系統、醫生陣容、公告或相關文章…等,並且使用者還包含了許多年長者,這時「路徑導航」就顯得非常重要。

網站麵包屑

▲羅東博愛醫院官網/ 牙科/ 關於我們


網站麵包屑

▲羅東博愛醫院官網/ 骨科/ 醫師陣容

 

 從上面兩張圖片,我們可以發現,官網所設計的麵包屑都不超過四個!

 麵包屑的路徑導航不宜過長,除了要讓畫面整潔、好看、不雜亂,也要讓使用者一眼就能看出現在的所在位置,若要往回走可以回到哪裡去。

 

如果路徑真的太長怎麼辦?

 以下圖(路徑1) 為例,骨科的相關新聞在 博愛團隊> 外科> 骨科> 新聞/影音,以路徑來說已經很長,點進去還要接在「新聞/影音」後面嗎?

網站麵包屑

▲羅東醫院官網_路徑1


網站麵包屑

▲羅東醫院官網_路徑2

 

其實是不需要接在它後面的喔!

 我們在上圖(路徑2) 的圖片中可以看到,點進文章後,路徑就已改變,路徑變成了 便民專區> 新聞/衛教> 骨骼/肌肉,路徑一樣控制在四個。

 當使用者點選「新聞/影音」中的文章時,我們就能大致上判定該使用者的意圖,他可能想要瀏覽更多相關的訊息,或是比較有時間、不是需要馬上了解醫生的專業項目並掛號的使用者,因此跳離原先的路徑、給予新的導航,不僅省去了過長的路徑,還將使用者導到一個新的環境,讓他能夠繼續在裡面瀏覽、閱讀,並增加網站停留時間!

 因此,路徑的設計對網站來說也是非常重要的喔!

 

share FB LINE
看天矽作品集 回上一頁
ID:@323foylw