|
內容目錄
麵包屑(Breadcrumbs)的名字來自格林童話中的糖果屋,故事中主角在走過的路線上撒下麵包屑,讓自己迷路時可以沿著麵包屑找到回家的路。網頁中的麵包屑也是相同的作用,就像是網站的導覽標示,幫助使用者了解自己所在的網站位置,一般來說會顯示在網站的上方(如上圖所示),可以標示出使用者進到此網頁的路徑,防止使用者在網站中迷路,提升使用者體驗。
相信大家在瀏覽網頁的時候,如果可以清楚地知道自己所在的位置,能更容易篩選自己需要的資訊,尤其是電商網站,當使用者想要購買的東西分屬網站的不同分類,透過麵包屑的引導可以更快找到商品的位置。
舉例來說,消費者想要購買豬肉和小白菜,在網頁中經過「首頁>生鮮食品>肉品>豬肉」的路徑選購豬肉之後,可以直接透過麵包屑回到生鮮食品的頁面,透過「生鮮食品>蔬菜水果>各式蔬菜」的路徑繼續選購小白菜,不用重複點擊上一頁或是重新回到首頁,提升使用者體驗。
麵包屑除了可以指引消費者之外,也能提供 Google 爬蟲軟體路徑的引導,幫助爬蟲軟體快速了解網站的整體架構,在爬取網頁時也能清楚知道網頁的層級及分類索引,有助於提升搜尋結果的排名。此外,設定麵包屑之後,網址在搜尋結果(SERP)上也會呈現路徑索引,因此可以適時在麵包屑的名稱中加入關鍵字,增加使用者點擊的意願。
延伸閱讀:更多關於演算法概念與網站 SEO
了解麵包屑的重要性之後,接下來就要學習如何在網站中設定麵包屑,以下分別介紹較常見的 WordPress 網站,及非 WordPress 網站的設定方法:
透過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來設定麵包屑,常見的 Code 有 Microdata 和 JSON-LD,可以根據網站的需求選擇。
總結來說,設定麵包屑在網站結構中扮演很重要的角色,不只能提升網站的使用體驗,對 SEO 排名也有很大的影響,如果你的網站有無法提升排名的問題,不妨從麵包屑的設定著手,檢測網站的結構,也許就能提升排名表現。
Ranking 身為 SEO 行銷專家,擅長透過網站結構優化、關鍵字策略、內容建置與優化,快速提升網站排名,並提供 6 個月抵達 Google 第一頁的保證,承諾「珍惜客戶的每一分錢、每一秒鐘」,給你最專業的 SEO 專案服務。
此外,Ranking 也有 SEO 網站健檢工具,提供 23 項 Google SEO 檢測,為網站改善網站結構,建立健康的體質,讓網站優化工作事半功倍。
期許用深入淺出的方式帶你進入 SEO 世界,提供實用性高的優質文章,簡化 SEO 複雜流程及技術,讓每個人都能快速理解 SEO 行銷,一起登上 Ranking 火箭讓排名再創高峰!※若有行銷相關問題或者業務合作歡迎隨時與我們聯繫!