常聽到SEO教學或是在別人網站上看到上方有一段橫向的文字
到底麵包屑導航是什麼？有什麼好處呢？Chris做以下總整理！
麵包屑Breadcrumbs導讀
麵包屑導航是什麼？
常聽到SEO的術語Breadcrumbs，麵包屑一詞其實是源自於童話故事糖果屋，故事主角在前往森林的路上放置麵包屑，即使在半路上迷路了，也能順著麵包屑找到回家的方向。
在網站優化、SEO領域裡面，所指的麵包屑也具有相同的概念。當使用者在瀏覽某一網站的特定頁面時，可以點擊麵包屑上面的連結回到首頁或上一層階層的網頁頁面。
有設置麵包屑的網站的好處如下：
- 較佳的使用者體驗
- 減少網站的跳出率
- 增加網站的可讀性
- 較佳的SEO友善度
- 出現複合式搜尋結果
以下Chris就針對網站的麵包屑該如何正確設置，以及實際的SEO效果繼續做介紹！
麵包屑該如何設置？
麵包屑通常會置於網頁頁面的最上方，前台看到的是橫向排列的文字與超連結組合
基本的HTML語法，我們以本站玩構網路的關於我們來舉例說明如下：
<div class=”service-breadcrumb”>
<div class=”inner_breadcrumb”>
<ul class=”short”>
<li><a href=”https://www.iwangoweb.com/” title=”玩構網路”>玩構網路</a><span>／</span></li>
<li><a href=”https://www.iwangoweb.com/about/” title=”關於玩構”>關於我們</a></li>
</ul>
除了網站的首頁以外，其它分頁最常見的形式就是沒有子選單的二層結構
第一層就是網站的首頁，錨點文字是「玩構網路」，而第二層就是「關於我們」
麵包屑JSON語法
網頁在設置好HTML的麵包屑語法後，也不要忘記加上結構化資料標記
結構化資料標記的設置，主要是讓Google、Yahoo等搜尋引擎的機器人理解
我們的網頁階層是什麼樣的關係？網站的樹狀結構長什麼樣子？
{
"@context": "http://schema.org",
"@type": "BreadcrumbList",
"itemListElement":
[
{
"@type": "ListItem",
"position": 1,
"item":
{
"@id": "https://www.iwangoweb.com/",
"name": "玩構網路"
}
}
,
{
"@type": "ListItem",
"position": 2,
"item":
{
"@id": "https://www.iwangoweb.com/about/",
"name": "關於我們"
}
}]}
麵包屑對SEO效果為何
看完以上麵包屑的介紹、語法教學後，很多朋友心裡可能還是有一個疑問
到底做這個在網頁上不是很明顯的區塊，對我網站的SEO或網站優化有幫助嗎？
答案一定是肯定的，因為設置好麵包屑的前端語法以及結構化標記
如MICRODATA、JSON-LD等SCHEMA.ORG所規範的結構化資料語法
除了讓搜尋引擎更了解我們的網站以外，也讓網站的使用者更清楚我們的網站
以玩構網路有操作的SEO專案來說，網站全站加上麵包屑是標準的作業流程
結語
設置正確的麵包屑導航在操作SEO、網站優化中是不可或缺的一環！
簡單一個小動作可以讓使用者、搜尋引擎更為青睞，好投資、不做嗎？
台中高雄SEO網站優化公司
- 公司名稱：台中富邦當舖
- 服務項目：網頁設計、網站優化、關鍵字廣告、商家星評
- 當舖官網：https://www.iwangoweb.com/
- 聯絡地址：高雄市路竹區國昌路237巷63弄22號
- 連絡電話：0958-078032
