相信有關注 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'>找到後在此字串的下一行，插入以下程式碼：
簡單說明一下這段程式碼做了什麼事：
- 這個頁面「Breadcrumb JSON-LD」展示了基本的 "麵包屑"結構化資料的格式
- 以上的程式碼會自動讀取文章的標籤，並自動產生 JSON-LD 標準格式
- 最多只顯示前三個標籤資訊
3. 測試效果
儲存範本後，可利用「Google 結構化資料測試工具」測試你的文章是否成功產生麵包屑。
成功的話，效果類似上圖。
四、顯示文章的標籤
這部分為補充說明，本站不在網頁上顯示「麵包屑」的效果，是因為 Blogger 官方本身就提供了顯示 "標籤"的功能，如果另外又製作 "麵包屑"的區塊就顯得重複了。
如果讀者的文章沒有顯示標籤，可能是沒有開啟這個功能，請按以下流程處理即可：
- 後台「版面配置」→「網誌文章」小工具 → 編輯 → 勾選「標籤」功能即可
有一些可能性會讓「標籤」無法顯示，也許用了非官方範本，或是修改範本時動到相關的程式碼。如果無法自行恢復時，建議再找專家處理。
更多 SEO 相關文章：