麵包屑為什麼要叫麵包屑?其SEO效果?

什麼是麵包屑?

麵包屑是為了讓進入網站的使用者能馬上了解自己目前位置的網站內部階層式超連結。

麵包屑位置

上圖紅框即為麵包屑。只要確認這個地方,就能明確知道目前自己在網站內的哪一個階層裡。這不僅能提高網站的易用性(usability),對SEO優化也有重大的影響。

為什麼叫「麵包屑」呢?

「麵包屑」又稱作「麵包屑導航」、「導覽路徑」。它的英文名字「breadcrumbs(list)」,其實也是麵包屑的意思。應該很多人都很好奇,為什麼那些連結要叫作「麵包屑」呢?

這就要講到格林童話故事的「糖果屋(漢賽爾與葛麗特)」了。相信大家應該都有聽過,2兄妹為了不在森林裡迷路,將隨身帶著的麵包撕碎,沿路丟在地上做記號…,沒錯!這就是「麵包屑」的由來!雖然故事中,森林的動物們把沿途的麵包屑吃掉,結果還是讓2兄妹在森林裡迷了路,走到了糖果屋,但是在現實世界中,麵包屑是能確實幫助使用者,發揮該有的作用。

所以,為了不讓網站的使用者在站內迷路,放置階層式的連結,使用者就能在迷路時順著「麵包屑」返回到上一層分類或首頁中。

麵包屑不只是能提高網站的易用性,對SEO也有一定的成效。因為麵包屑是由網站內各個階層頁面的文本鏈接(錨文本)所組成,這對於網站內部連結的效果貢獻是可以期待的。
※對錨文本有興趣的朋友,可參考「錨文本是什麼?快來深度了解錨文本!

搜尋引擎為了能有效的收錄各網站內的資訊頁面,會派出爬蟲機器人到網站內,藉由內部連結來進行爬取、收集。因此,若有清楚的麵包屑導覽,對爬蟲機器人來說,就可以非常輕易的抓取網站內部的頁面資料,提升機器人對網頁的可讀性(Crawlability)。

網頁的可讀性

另外,麵包屑在設定上,也可在網站的每個頁面中,利用想優化的關鍵字來增加頁面的主題性。一般的SEO優化通常都是將關鍵字寫入<title>、<meta>、<h1>等重要的標籤內容中,來提升與關鍵字的關聯度。藉由將關鍵字寫入網站的內部連結,其實也有相同效果。使用含有關鍵字的文本鏈接(錨文本)來做麵包屑的設定,其相對應的頁面就會與關鍵字有連接、相關性。

關鍵字的相關性

該如何設置麵包屑呢?

麵包屑通常被放在網頁上半部,能一眼看到的地方居多。從首頁開始依「大分類 > 中分類 > 小分類」這樣階層式的順序記載下來最為重要。而且不能只光是使用文字,還要加上連結做成文本鏈接(錨文本)來設置才是重點。少了這一步驟,SEO的成效會有很大的差異哦!

另外,像是EC網站,也會有設置多個麵包屑的情況。

例:
首頁 > A分類 > a分類 > 商品C
首頁 > B分類 > b分類 > 商品C
※注意:拜訪頁面(瀏覽)不用設置連結
上面例子的情況下「商品C」不用加連結

▼Google Developers裡的範例:

多個麵包屑範例

▼曾任Google搜尋優化專家的Matt Cutts也發表過對於一個頁面裡擁有數個麵包屑的看法:

因此,當同時含有數個不同分類時,使用上面的寫法基本上是沒有太大的問題。但是,由於Google爬蟲是由上而下抓取資訊,所以將覺得重要的麵包屑設置在第一個,讓爬蟲優先讀取會比較好。

結構化資料的活用

近年開始,Google利用結構化標記,可在搜尋結果上額外顯示網站進一步的頁面內容資訊,也就是所謂的「複合式搜尋結果(rich snippets)」,以前稱之為「複合式資訊卡」或「複合式摘要」。

藉由結構化資料的設置,可將網頁內容以最簡單易懂的方式,讓爬蟲機器人了解,進而在搜尋結果中利用視覺效果或互動式功能來強化顯示相對應的結果。因此只要在麵包屑上設置結構化標記(導覽標記),就有機會能將麵包屑顯示在搜尋結果中。

麵包屑的結構化

而要將麵包屑設置結構化資料,需要使用schema.org語意標記,藉由下列3種格式語法寫入:
① microdata
② RDFa(RDFa Lite)
③ JSON-LD

最常看到使用的是①和③,而Google目前主推建議使用③(以前建議①)。因為3種寫法各有其優缺點,選擇一種能和自身網站技術相配的方法即可。
※可參考Googled的範例教學:導覽標記

結 論

麵包屑雖然在頁面上總是一行小小的字不顯眼,但它其實有著很重要的作用,不但能加強網站內部的連結強度,更能提高網站的易用性,請確實的將麵包屑設置在網站內容上吧!