Breadcrumb 在Google搜尋結果中加入自訂麵包屑

發表時間： 2012-03-10

網站上如果有一個導覽列(Breadcrumb，麵包屑)，可以幫助訪客在閱讀文章時，不容易迷失方向，也可以很迅速地知道自己目前所在位置，同時也可以根據導覽列查看其他文章，如果這樣的效果可以搬到Google搜尋結果中，是不是非常棒呢？現在我們可以透過一些可行的規則，在網站加入導覽列之外，同時也可以在Google搜尋結果中，擁有相同的成效。

一般大家都應該會稱網站主內容上方，header下方的那個有大於符號的叫做導覽列，但是他真正的名稱是叫做Breadcrumb(中文翻譯叫做麵包屑)。在查資料的時後，用導覽列名稱去查詢，應該查不到自己想要的，但是用Breadcrumb去查，可以翻到許多資源。那該如何做好麵包屑的優化，才會讓Google搜尋遵循你的設定，乖乖在搜尋引擎上也出現呢？

或許看完前兩段，可能還不清楚香腸到底在講些什麼東西，沒關係，接下來我們將直接使用圖片來讓大家更好了解。看到下面這一張圖，比較一下兩個搜尋結果，是不是有發現，如果沒有Breadcrumb麵包屑，那麼就只是顯示落落長的網址，如果設定了導覽列，在搜尋結果出現時，查詢的人也可以順便知道這篇文章的關聯性，更可以提升它們點擊進你網站的意願。

文章目錄

搜尋引擎上的Breadcrumb
網站上的Breadcrumb
Breadcrumb的microdata架構
- microdata搭配ul li 的breadcrumb
- 使用HTML5的breadcrumb
在WordPress上加入Breadcrumb麵包屑

搜尋引擎上的Breadcrumb

這個綠色的，就是受到Breadcrumb所影響的結果，有改過和沒改過相比，改過的感覺比較酷、比較專業之外，這些文字還是可以點擊的連結，如果訪客搜尋到的結果不喜歡，但是卻無意間看到有分類，說不定這樣還可以留住訪客，繼續讓他們造訪你的網站，這是非常划算且不吃虧的。這個功能，Google在2009年提出的，詳細可以看blog。

網站上的Breadcrumb

那我們接下來看看網站上的成果，這回香腸新板imXD5佈景，就加入了麵包屑這樣的功能在文章的前端，順便省略顯示分類，不然標題區域，有分類又有導航列感覺非常雜亂無章。下方這就是顯示效果，我是採用microdata(微資料)的方式，去定義這些標籤，讓Google搜尋引擎更好解讀這個區塊的用意本來想要使用HTML5的方式，但是怕用錯、發生慘劇，所以就使用這樣的方式了。

Breadcrumb的microdata架構

在Google Webmaster說明中提到兩中方是，一種是利用RDFa，一種利用微資料。使用前者感覺比較清晰易懂、程式碼也比較少，但是香腸採用的架構是「microdata(微資料)」。之所以會採用這個複雜、程式碼又比較多的方法因為在ITHOME上的一篇報導。裡面提到Google和Yahoo共同發表的schema.org的標記詞彙網站，初期是採用microdata，又加上microdata它本身具有RDFa和microformates，所以最後決定使用這種方式。

根據官方的教學，結構可以如下：

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/dresses" rel="nofollow"  itemprop="url">
    <span itemprop="title">洋裝</span>
  </a> ›
</div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/dresses/real" rel="nofollow"  itemprop="url">
    <span itemprop="title">正式洋裝</span>
  </a> ›
</div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/clothes/dresses/real/green" rel="nofollow"  itemprop="url">
    <span itemprop="title">綠色的正式洋裝</span>
  </a>
</div>

下方這串語法表示每一個階層連結的最外框，前面可加上 div ，或 li 去包住。

itemscope itemtype=http://data-vocabulary.org/Breadcrumb

接著是對項目的超連結 a 做定義，設定屬性為url。

itemprop="url"

最後是針對項目名稱標記，設定屬性為title。

然後項目與項目之間的間隔，可以使用 > 或 > 表示。前者是HTML Entities模式。

microdata搭配ul li 的breadcrumb

以下貼上香腸目前使用的原始碼架構，我是採用 li 標籤，並把網站分類當層階層進行設定。因為用div還要用很多的float:left屬性，把區塊拉起非常的辛苦，如果瀏覽器校正不好，還會哭哭。所以我使用ul和li去產生效果(作法同網站menu)。當香腸換上imXD5這個新佈景後，這個功能隔天就馬上在搜尋引擎上面見效了！

Breadcrumb 在Google搜尋結果中加入自訂麵包屑

使用HTML5的breadcrumb

除了使用microdata之外，其實有個HTML5架構更簡單，如下語法，資料來自於這個網站。只是我很怕HTML5的語意標籤使用錯誤，本來要使用這個方式，但後來還是換回原本的microdata的方式比較保險。再加上rel=”up”這樣的寫法在我寫佈景時沒發現，才放棄。不過在寫篇文章時，竟然被我挖到了，整個都Orz了。

<nav>
 <p>
  <a href="/" rel="nofollow"  rel="index up up up">Main</a> >
  <a href="/products/" rel="nofollow"  rel="up up">Products</a> >
  <a href="/products/dishwashers/" rel="nofollow"  rel="up">Dishwashers</a> >
  <a>Second hand</a> 
 </p>
</nav>

在WordPress上加入Breadcrumb麵包屑

因為香腸是去寫function code(只差沒有把功能做成外掛而已)，分類顯示則不使用the_category()，而是去判對這篇文章有多少tag，然後用foreach套上microdata的語法，產生出所需的分類選單，最後整個拼起來，就達到前面所看到的效果了。至於實作的程式碼，就請各位大大們自己挑戰看看了 :P

但其實我們也不用這麼複雜，可用最簡單的方式，直接在選單外面包上<div id=”breadcrumb”> ，然後使用the_catrgory()函式，去產生分類，並且使用「>」，這樣Google其實也是可以抓到的，因為蠻多網站並沒有照著microdata，效果一樣。

或者更懶的方式，直接使用mg12提供的外掛「Breadcrumb NavXT」安裝套用應該也可達到相同效果。外掛使用說明可以參考他網站上的解說蠻詳細的一個網站。