麵包屑 Breadcrumbs 怎麼灑?讓訪客及Google爬蟲找對路?!

麵包屑 Breadcrumbs 是網站結構中相當重要的!它可以讓訪客瀏覽順暢,不會迷路在網頁裡面,而直接關閉瀏覽器,間接的讓跳出率或是離開率上升。對SEO優化來說也是大大加分!讓Google 爬蟲清楚快速地爬取網站裡的每一頁,也不會迷路在網頁裡面,造成有些網頁有爬取到,而有的一直沒有被Google 爬蟲爬取到!

 

本文內容

 

 

▎麵包屑Breadcrumbs 是什麼?

內容頁 - 麵包屑示意圖
內容頁 – 麵包屑示意圖

 

引用:維基(wiki):麵包屑導航

麵包屑導航通常在頁面頂部水平出現,一般會位於標題或頁頭的下方。它們提供給用戶返回之前任何一個頁面的連結(這些連結也是能到達當前頁面的路徑),在層級架構中通常是這個頁面的父級頁面。麵包屑導航提供給用戶回溯到網站首頁或入口頁面的一條路徑,通常是以大於號(>)出現,儘管一些設計是其他的符號(如»)。

它們絕大部分看起來就像這樣:首頁>分類頁>次級分類頁 或者 首頁>>分類頁>>次級分類頁。

 

麵包屑Breadcrumbs 就如同童話故事糖果屋,小孩們走在森林裡沿路丟著麵包屑,回去的時後就可以沿著麵包屑回家,避免迷路在森林裡。我們從網站建置、SEO優化來看麵包屑Breadcrumbs,也是相同的意義!讓瀏覽者知道在目前在網站中的哪裡,以及如何回去上一頁,不會迷失在您的網站裡。

⚠️不管是網站建置、SEO優化,麵包屑Breadcrumbs 一定是不可或缺的一部分!

 


 

▎麵包屑Breadcrumbs 為什麼很重要?

如同上述 麵包屑Breadcrumbs 是什麼?說明麵包屑Breadcrumbs的定義後,可能會想為什麼麵包屑Breadcrumbs 很重要?沒有麵包屑Breadcrumbs可以嗎?

 

我們用下面二個角度來說明,麵包屑Breadcrumbs的重要性。

 

• 麵包屑Breadcrumbs 對 瀏覽者幫助

迷失
Photo by trail on Unsplash

逛網頁時後對瀏覽者來說最怕的就是迷路!迷失在深不見底的網頁,逃離最快的方式就是關掉網頁。讓瀏覽者關掉網頁,這是對網站營運者來說相當的傷!好不容易網站有內容了,也攬客進來瀏覽,也有些流量了,結果卻因為動線、體驗不好,讓每ㄧ位瀏覽者迷失在網站某一頁,結果讓瀏覽者直接離開了!

麵包屑Breadcrumbs 就是在解決,防止瀏覽者迷失在網站裡面,可以讓瀏覽者清楚知道現在在哪裡,以及如何回去上一頁,對網站營運者來說,降低網頁的跳出率、離開率是有幫助的

 

 

麵包屑比網址埋設關鍵字重要

我們在 小心網址變遺址!您該知道符合SEO友善網址方法 實務經驗提到,麵包屑比網址命名重要。因為有了麵包屑後,Google 搜尋爬蟲就會很清楚的知道每一頁的層級,容易爬取網頁清楚分類索引搜尋結果優化,設置麵包屑Breadcrumbs對SEO優化是相當有益。

 

Google Webmaster Central Blog 針對麵包屑Breadcrumbs二篇文章說明重要性!

 


 

我們分別說明Wordpress或是自行開發的網站,是如何設置麵包屑Breadcrumbs。

 

如果您是用Wordpress架設網站的話,可以安裝 Yoast SEO Plugin 設定麵包屑Breadcrumbs。

並且參考 Yoast Breadcrumbs – WordPress Breadcrumbs  Yoast 官方教學文章

 

執行步驟

  1. 安裝 Yoast SEO Plugin
  2. 到 wordpress 後台,啟用 Yoast SEO 麵包屑功能
  3. 編輯 /themes/佈景名稱資料夾/single.php
  4. 將yoast 提供的麵包屑程式碼置入

 

Yoast SEO 啟用麵包屑
Yoast SEO 啟用麵包屑

 

將 Yoast Breadcrumbs 程式碼放入(如下圖)

<?php if ( function_exists('yoast_breadcrumb') ) {
	yoast_breadcrumb('<p id="breadcrumbs">','</p>');
} ?>

 

將yoast seo 麵包屑程式碼放入
將yoast seo 麵包屑程式碼放入

 

 

如果您是自行開發網站的話,則必須要先規劃麵包屑的層級,然後告訴工程師依照邏輯設置。

 

以電商網站為例:

  • 商品介紹頁:首頁>主分類名稱>次分類名稱>商品名稱
  • 次分類頁:首頁>主分類名稱>次分類名稱
  • 主分類頁:首頁>主分類名稱
  • 列表頁:首頁>列表名稱
  • 標籤頁:首頁>標籤名稱

 

另外可將 Google Developers Breadcrumb 這篇文章提供給工程師,讓工程師知道如何設置麵包屑。

建議自行開發網站,還可以設置結構化標記(Schema.org) 中的 BreadcrumbList,意思是將麵包屑也設置到結構化標記(Schema.org),讓Google爬蟲更直覺、直接的知道您的麵包屑在哪裡,這對SEO優化也是相當有幫助的。

 


 

延伸閱讀

 

 

發佈留言