麵包屑是什麼?使用者在瀏覽網站時的指路標!
麵包屑(Breadcrumbs)簡單來說就是網站內的路徑標示,這個可愛的名稱源自於格林童話的經典故事《糖果屋》,故事中兄妹倆沿路灑下麵包屑避免在黑森林中迷失方向。網站內的麵包屑也具備同樣的功能,藉由記得使用者在網站內瀏覽的路徑,幫助使用者了解目前所在的位置、避免在充斥各種資訊的網站內迷路(如上圖所示)。
有了麵包屑的存在,我們在瀏覽的過程中就不需要不斷按上一頁尋找走過的路徑,也能降低因為迷路而直接關閉網頁重新來過的頻率,提供使用者便利且順暢的瀏覽體驗,是 SEO 優化中提升使用者體驗不可或缺的要素。
麵包屑對 SEO 有什麼重要性?準確指引網站用戶及爬蟲軟體
一、優化使用者體驗
相信大家在瀏覽網頁的時候,如果可以清楚地知道自己所在的位置,能更容易篩選自己需要的資訊,尤其是電商網站,當使用者想要購買的東西分屬網站的不同分類,透過麵包屑的引導可以更快找到商品的位置。
舉例來說,消費者想要購買豬肉和小白菜,在網頁中經過「首頁>生鮮食品>肉品>豬肉」的路徑選購豬肉之後,可以直接透過麵包屑回到生鮮食品的頁面,透過「生鮮食品>蔬菜水果>各式蔬菜」的路徑繼續選購小白菜,不用重複點擊上一頁或是重新回到首頁,提升使用者體驗。
二、告訴爬蟲軟體網站的位置
麵包屑除了可以指引消費者之外,也能提供 Google 爬蟲軟體路徑的引導,幫助爬蟲軟體快速了解網站的整體架構,在爬取網頁時也能清楚知道網頁的層級及分類索引,有助於提升搜尋結果的排名。此外,設定麵包屑之後,網址在搜尋結果(SERP)上也會呈現路徑索引,因此可以適時在麵包屑的名稱中加入關鍵字,增加使用者點擊的意願。
延伸閱讀:更多關於演算法概念與網站 SEO
如何在網站中設定麵包屑?
了解麵包屑的重要性之後,接下來就要學習如何在網站中設定麵包屑,以下分別介紹較常見的 WordPress 網站,及非 WordPress 網站的設定方法:
一、Wordpress 網站:使用 Yoast SEO 設定麵包屑
透過Wordpress設定麵包屑需要以下5個步驟:
1. 安裝外掛程式 Yoast SEO Plugin
2. 到 WordPress 的後台,開啟 Yoast SEO 麵包屑的功能,並選擇麵包屑分層的依據(通常是設定文章分類)。
3. 到 Yoast SEO 網站中複製 Breadcrumbs Code:
<?php
if ( function_exists(‘yoast_breadcrumb’) ) { yoast_breadcrumb( ‘<p id=”breadcrumbs”>’,'</p>’ ); } ?> |
4. 進到佈景主題編輯器,將 Breadcrumbs Code 放入 single php 裡面(如下圖),並點擊更新檔案。
5. 設定完成之後別忘了到前台確認結果,也可以使用 Google 結構化資料測試工具檢測是否撰寫錯誤。
延伸閱讀:
【WordPress 必裝外掛】Yoast SEO 綠燈攻略!完整教學懶人包
【SEO HTML 概念篇】SEO 操作必學!從 0 到 1 的 HTML 基礎知識教學
二、非 WordPress 網站:自行撰寫 Breadcrumbs Code
如果是使用 WordPress 以外的平台或是自行架設的網站,可能需要諮詢架設網站的工程師,規劃麵包屑的層級及設置邏輯,並自行撰寫 Breadcrumbs Code來設定麵包屑,常見的 Code 有 Microdata 和 JSON-LD,可以根據網站的需求選擇。
總結來說,設定麵包屑在網站結構中扮演很重要的角色,不只能提升網站的使用體驗,對 SEO 排名也有很大的影響,如果你的網站有無法提升排名的問題,不妨從麵包屑的設定著手,檢測網站的結構,也許就能提升排名表現。
專業的網站健檢服務,Ranking 幫你提升 SEO 排名
Ranking 身為 SEO 行銷專家,擅長透過網站結構優化、關鍵字策略、內容建置與優化,快速提升網站排名,並提供 6 個月抵達 Google 第一頁的保證,承諾「珍惜客戶的每一分錢、每一秒鐘」,給你最專業的 SEO 專案服務。
此外,Ranking 也有 SEO 網站健檢工具,提供 23 項 Google SEO 檢測,為網站改善網站結構,建立健康的體質,讓網站優化工作事半功倍。