麵包屑(Breadcrumb)SEO教學!教你改善導覽標記提升排名!

麵包屑(Breadcrumb)SEO教學!教你改善導覽標記提升排名!
Welly SEO 編輯部

Welly SEO 編輯部

2022-03-14更新

2021-12-20發佈

SEO優化

# SEO做法

# 技術SEO

# SEO優化

麵包屑(英文Breadcrumb)是什麼?導航列的層次該怎麼設置才好?別著急,讓我們透過這篇文章來為你介紹作為導覽標記的麵包屑功能、麵包屑對SEO的好處、麵包屑的設置重點和教學!

Breadcrumb中文:麵包屑

麵包屑英文稱為Breadcrumb,簡單來說就是網頁上方的導航條、導航列。

為什麼取名叫麵包屑?

麵包屑的取名由來

麵包屑的取名由來和格林童話《糖果屋》有關,還記得主角兩兄妹踏上未知的森林旅途時,為了避免迷路而沿途灑下麵包屑嗎?

故事中的麵包屑起到了指路、導覽的作用,因此才會被借來代稱「使用者的路徑」。

當我們瀏覽頁面時,常常也會想回到之前看過的地方再重看一次,這時除了狂按上一頁之外,麵包屑就是非常方便的設計了。

麵包屑長怎樣?麵包屑有什麼功能?

一句話來總結,麵包屑=網站導覽,不論對使用者或是對搜尋引擎爬蟲都是。

麵包屑長怎樣?其實麵包屑就是我們經常可以在網頁上方看到的「網站導覽列」,幫助使用者辨認目前處於網站中的哪個位置,也可以快速找到自己想去的地方。

麵包屑網站導覽列的範例照

舉例來說,給人看的麵包屑列表(BreadcrumbList)大多數會呈現以下3種形式:

  • 首頁>次分類>文章標題
  • 首頁》次分類》文章標題
  • 首頁/次分類/文章標題(大多程式預設是這款)

而從網頁程式來說,搜尋引擎的爬蟲看到的不是視覺化的圖表和文字,而是複雜又大量的程式原始碼

所以如果程式碼太過於複雜、沒有標準化標記,爬蟲很可能就會在茫茫程式碼大海中迷路,導致你的網站無法被搜尋引擎好好收錄。

因此程式碼設計上我們會推薦使用結構化資料(Schema.org),結構化資料類型有很多,而麵包屑列表(Breadcrumb List)就屬於其中一種。

設置麵包屑就像幫爬蟲分門別類,能讓爬蟲快速理解網頁的層級與結構,知道自己正在爬取首頁、次分類還是文章的內容,從而更靈活地呈現網站上的資訊。

比如說在搜尋引擎的標題上方呈現麵包屑,讓使用者更有意願點擊:

麵包屑在搜尋引擎上的呈現示範圖

而有設置麵包屑的網站對於搜尋引擎友善度增加,自然網站排名也會因此受益提升。

設置麵包屑對SEO有什麼好處?

簡單來說,操作麵包屑對SEO的影響主要有以下這5點:

  • 作為指路明燈,提升用戶體驗
  • 降低用戶跳出率、離開率,增加網站黏著度
  • 不會占用太多頁面空間和版位
  • 增加搜尋引擎的友善度、提升排名
  • 有機會出現複合式搜尋結果(了解更多複合式搜尋結果種類,可參考Google官方文件:探索 Search Gallery

因此設置麵包屑不僅可以幫助使用者在瀏覽爬蟲時,不容易迷失方向、能快速辨認自己所在位置,提升使用者體驗、增加對網站的黏著度。

同時也讓搜尋引擎更能夠輕鬆讀懂網站資訊,幫助你展現更多元化的特殊資訊,提升網站曝光度!

(想進一步了解SEO搜尋引擎,可以參考這篇文章:SEO是什麼?SEO優化怎做?SEO搜尋引擎最佳化完整教學

麵包屑設置重點&常見問題

好的,接下來的資訊就是SEO新手們最頭痛的部分了——該怎麼設置麵包屑才好?

根據Google開發者中心,麵包屑標記資料欄位會包含:

  • 麵包屑名稱(Name)
  • 麵包屑網址(Item)
  • 麵包屑位置(Position)-用來標記麵包屑在列表(Breadcrumb List)中的第幾層,1表示第一層,以此類推。

麵包屑標記資料欄位與設置注意事項

從前期規劃來說,一般行銷們在企劃麵包屑時,會有以下幾個原則:

  • 階層名稱(Name) 精簡、盡量選擇純文本元素
  • 階層網址(Item) 必須有效(常見最後一層沒有連結)
  • 含首頁的階層數(Position) 不宜超過5個(文章層級太深也不利於爬蟲收錄)
  • 在麵包屑中放入相關關鍵字

同時,企劃時要避免以下3個常見錯誤:

  • 「同名稱、不同網址」(舉例:同樣都叫首頁,一個連到A、一個連到B)
  • 「同網址、不同名稱」(舉例:同樣都連到這篇文章,一個名稱叫C、一個叫D)
  • 要小心階層錯誤有遺漏(例如:文章頁上一層缺少主題分類或首頁)

接下來如果你有配合的工程師,只需要把你規劃好的麵包屑交給專業的人來設置就好,這裡也提供官方的文件說明,讓你可轉給工程師參考:

標記完畢資料以後,你還可以利用Google的結構化資料測試工具,來確認你的結構化資料是否正確。

如果你需要自己來設置,底下我們再簡單示範一下麵包屑的建置方法。

麵包屑操作基本教學

Breadcrumb wordpress設置技巧範例

如果你的網頁使用Wordpress,你可以使用外掛(plugin)軟件:Yoast SEO或Breadcrumb,並安裝後回到後台工具列啟用,再按照官方說明文件來操作即可,底下我們以Yoast SEO做為示範:

  1. 到Wordpress後台的「外掛」下載Yoast SEO安裝並啟用
  2. 到Wordpress後台左側選單,點選SEO>Search Appearance>麵包屑
  3. 按照欄位說明一一填入麵包屑資訊、保存
  4. 到Wordpress建立新佈景主題,將程式碼貼上

參考說明:Yoast SEO 《How to implement Yoast SEO breadcrumbs》

(對Wordpress SEO怎麼操作不熟悉?5分鐘快速上手WordPress SEO設定:WordPress SEO必學!Yoast SEO外掛設定一把罩!

Breadcrumb HTML、JSON-LD、Microdata、RDfa

根據Google開發者中心的文件說明,麵包屑導覽標記方式有4種: HTML、JSON-LD、Microdata、RDfa,主要差異在於語法的規範不同、語法寫給誰看。

針對搜尋引擎寫的語法是JSON-LD、Microdata、RDfa這3種,而HTML則比較傾向給人看。

在實務上,我們的團隊工程師推薦JSON-LD,語法比較直覺好寫,並且有語法生成器,不懂程式的新手也能方便操作!

底下我們截圖開發者中心的程式碼範例,用HTML和JSON-LD來做簡單的說明。

假設麵包屑最終是要呈現:Books(書) › Science Fiction(科幻小說) › Award Winners(獲獎作品)

Breadcrumb HTML程式碼範例長這樣

Breadcrumb HTML程式碼範例

導入HTML語法後,以ol和li建立序列,並在其中添加a href連結和連結名稱,由於是給人看的語法,不需要寫Position,只要按照順序寫下來就好。

Breadcrumb JSON-LD程式碼範例長這樣

Breadcrumb JSON-LD程式碼範例

上面的type就是結構化標記的意思,「"@type":Breadcrumlist"」這一句話就是告訴搜尋引擎說底下的資訊為麵包屑列表,裡面又包含3個ListItem,分別是第1層級的Books、第2層級的Science Fiction、第3層級的Award Winners。

如果你對於程式有點基礎,當然也可以複製原始碼再自己修改,但這樣耗時較長。

我們推薦你使用網路上的免費語法生成器,例如Breadcrumb JSON-LD Schema Generator。

開啟 Breadcrumb JSON-LD Schema Generator

Breadcrumb JSON-LD Schema Generator

只需按照第1層級往下依序填入名稱、連結,按下Generate即可複製程式碼貼到網站後台。

JSON-LD還有一個特點是可以放在網頁的任意處,這些文字不會出現在前台網頁上,但又能夠讓搜尋引擎檢索,很適合支援視覺版面上有特殊規劃的情況。

底下也提供Breadcrumb Microdata、 RDfa程式碼範例給大家看看

Breadcrumb Microdata程式碼範例:

Breadcrumb Microdata程式碼範例

Breadcrumb RDfa程式碼範例:

Breadcrumb RDfa程式碼範例

看完以上介紹以後,你對麵包屑認識更深了嗎?麵包屑從SEO角度來看,不僅是網站排名的重要基礎,在用戶體驗上也是十分重要的必備細節。

——

如果你本身沒有程式設計的背景,建議你這方面的設置可以諮詢專業的SEO公司,例如我們Welly團隊有內建專業工程師和行銷人員,可以協助你輕鬆完成麵包屑優化喔!

最值得擁有的專業行銷團隊!現在就與Welly一起透過SEO優化提升業績吧!

熱門文章

編輯精選

最新文章

hello@welly.tw

02-77305901

台北市復興北路150號10樓-6

welly logo vertical

Copyright © 2022 偉利科技股份有限公司 All rights reserved.