4/30/2018

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

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

A+
blogger-breadcrumb-json-ld-structured-data.jpg-輕鬆讓 Blogger 搜尋結果出現麵包屑(breadcrumbs)導航﹍使用結構化資料 JSON-LD相信有關注 SEO 的站長都知道什麼是麵包屑(breadcrumbs),如不清楚的話可參考「麵包屑導航之於SEO的重要性」、「面向搜索引擎优化 之 面包屑导航」。

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

blogger-breadcrumb-json-ld-structured-data-1.jpg-輕鬆讓 Blogger 搜尋結果出現麵包屑(breadcrumbs)導航﹍使用結構化資料 JSON-LD

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

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

(圖片出處: peakpx.com)


一、有無麵包屑的差別


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

blogger-breadcrumb-json-ld-structured-data-2.png-輕鬆讓 Blogger 搜尋結果出現麵包屑(breadcrumbs)導航﹍使用結構化資料 JSON-LD

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

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


blogger-breadcrumb-json-ld-structured-data-1.jpg-輕鬆讓 Blogger 搜尋結果出現麵包屑(breadcrumbs)導航﹍使用結構化資料 JSON-LD

為網站加上麵包屑導航資訊後,重新來看搜尋結果,上圖紅框出現了該篇文章的標籤 "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-breadcrumb-json-ld-structured-data-3.jpg-輕鬆讓 Blogger 搜尋結果出現麵包屑(breadcrumbs)導航﹍使用結構化資料 JSON-LD

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



四、顯示文章的標籤


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

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

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

有一些可能性會讓「標籤」無法顯示,也許用了非官方範本,或是修改範本時動到相關的程式碼。如果無法自行恢復時,建議再找專家處理。


更多 SEO 相關文章:
如這篇文章對你有幫助,歡迎「分享」或給我個讚:

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」。
◎ 非官方範本問題、或貴站為商業網站,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP