麵包屑導航seo

麵包屑是什麼?對網站優化、SEO的效果為何

常聽到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

推薦延伸閱讀

【SEO教學】網站使用者體驗提升(一)

SEO初學者看這一篇就夠,獨家公開7個優化技巧!

Google商家優化,3大重點提升本地搜尋商家排名!

加入粉絲專頁
分享我們的文章:
Share on facebook
Share on linkedin
Share on email
瞭解更多SEO、網站優化、網路行銷知識
Close