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

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

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


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

搜尋引擎上的Breadcrumb

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

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

網站上的Breadcrumb

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

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

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

然後項目與項目之間的間隔,可以使用 &gt; > 表示。前者是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」安裝套用應該也可達到相同效果。外掛使用說明可以參考他網站上的解說蠻詳細的一個網站。