輕鬆讓 Blogger 搜尋結果出現麵包屑(breadcrumbs)導航﹍使用結構化資料 JSON-LD

相信有關注 SEO 的站長都知道什麼是麵包屑(breadcrumbs)，如不清楚的話可參考「麵包屑導航之於SEO的重要性」、「面向搜索引擎优化 之 面包屑导航」。

簡單說這功能就像童話故事，小男孩為了認路而留下的麵包屑，具有協助導覽網站的效果，可讓訪客快速知道該篇文章處於網站中什麼位置，就像下圖的 Google 搜尋結果：



紅框處就是麵包屑效果，訪客可知道這篇文章的分類，前往哪個標籤可找到相關資料，避免看完文章後不知道要做什麼。

Blogger 可經由修改範本來做出麵包屑導覽效果，但不是一件輕鬆的事，而且還要處理版面美觀等問題。而使用本篇的技術後，也就是利用最新的結構化資料 JSON-LD 格式，只要複製貼上、不必懂程式碼也能無腦套用。

<< 請注意！本篇文章含會員加值文章內容，需點數兌換 >>

(圖片出處: peakpx.com)

一、有無麵包屑的差別

首先看一下沒有設置麵包屑導航時，Google 搜尋的結果。



例如上圖第一個搜尋結果，本站的這篇文章標題下方，出現的是文章網址。其實訪客不會在乎網址字串有什麼，所以搜尋結果的網址，除了網域之外幾乎等於無意義的資訊。

比較一下第二個搜尋結果，接在「梅問題」的網域之後就是麵包屑導航，相較之下 "網頁設計"、"Javascript" 這些分類會是比較有意義的資訊。




為網站加上麵包屑導航資訊後，重新來看搜尋結果，上圖紅框出現了該篇文章的標籤 "Bootstrap"、"jQuery"、"RWD"，感覺好多了！

二、修改 Blogger 版面結構的方式

修改 Blogger 範本並加入麵包屑結構，不是非常困難的事，但也沒有輕鬆到哪裡去，如果不懂程式碼、不熟悉範本的話。

這篇「Blogger 製作 Breadcrumb 文章標籤導航麵包屑」，詳細說明了製作方式：

• 修改範本，在特定位置插入麵包屑
• 調整版面 CSS 樣式
• 不同頁面的處理方式

因為說明地很詳盡，可以了解所有修改的知識與原理。

三、使用結構化資料 JSON-LD

因為本站的文章標題下方，原本就會顯示相關標籤，因此整個網頁的版面配置，沒有另外製作麵包屑功能的需求。

前陣子寫這篇「部落格使用 "結構化資料" 的最佳作法 JSON-LD」時，發現 "結構化資料" 也可以設定 "麵包屑導航"，當下認為這是個好消息，因為 JSON-LD 設定的資料不需要顯示在網頁上，但又能夠被 Google 搜尋引擎索引，對於不需顯示 "麵包屑" 的網站來說真是太棒了。

有興趣瞭解 "結構化資料" 的讀者，請詳讀該篇文章，除了說明 JSON-LD 格式的優點，也會知道為何我認為這個發明遠勝其他格式的 "結構化資料"。

不想理解程式碼，想要複製就能使用的讀者，請加入本站會員，就可看到以下我分享的 "麵包屑導航" 結構化資料程式碼。

1. 準備動作

在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。


2. 修改範本

請到後台「主題」→「編輯 HTML」，游標點進範本區塊，按 Ctrl-F 搜尋以下字串：

<b:includable id='post' var='post'>

找到後在此字串的下一行，插入以下程式碼：

請注意，以上程式碼不適用於「官方 RWD 範本」。

簡單說明一下這段程式碼做了什麼事：

• 這個頁面「Breadcrumb JSON-LD」展示了基本的 "麵包屑" 結構化資料的格式
• 以上的程式碼會自動讀取文章的標籤，並自動產生 JSON-LD 標準格式
• 最多只顯示前三個標籤資訊

3. 測試效果

儲存範本後，可利用「複合式搜尋結果測試」測試你的文章是否成功產生麵包屑。




成功的話，效果類似上圖。

四、顯示文章的標籤

這部分為補充說明，本站不在網頁上顯示「麵包屑」的效果，是因為 Blogger 官方本身就提供了顯示 "標籤" 的功能，如果另外又製作 "麵包屑" 的區塊就顯得重複了。

如果讀者的文章沒有顯示標籤，可能是沒有開啟這個功能，請按以下流程處理即可：

• 後台「版面配置」→「網誌文章」小工具 → 編輯 → 勾選「標籤」功能即可

有一些可能性會讓「標籤」無法顯示，也許用了非官方範本，或是修改範本時動到相關的程式碼。如果無法自行恢復時，可再發案給本站。

五、聯絡表單

加值文章的會員，使用上有任何問題請用下面的表單與我聯繫：

稱呼：(必填)

電子郵件：(必填)

本文標題或網址：(必填)

會員編號：(必填)

請詳細描述您的需求、問題或意見，如提供的資訊不足，可能無法回覆：(必填)

更多 SEO 相關文章：