過去曾寫過一篇「部落格如何處理結構化資料標記 + 修復錯誤訊息」,主要是因為鑽研 SEO 的站長,使用了 HTML 微資料(Microdata)語意標記後,拿「結構化資料測試工具」檢測總是會看到一堆錯誤。
該篇文章我也說了,部落格網站不理會結構化資料也沒什麼差,因為 Google 搜尋結果出現的字串,不會因為設定了結構化資料而有太大差別。
會寫本篇的主要原因是,前陣子接到特定類型網站的委託案件,想要優化部落格的結構化資料。而前一篇我有提到,特定類型、或商業網站有必要優化結構化資料,因此為這個案件詳細研究了「結構化資料」,也確實達到很好的搜尋效果。
那麼本篇整理一下研究的心得,並以部落格「文章」這個類型為例,說明結構化資料該怎麼做最簡單、快速、不會有錯誤訊息出現。
1. 各種結構化資料格式
開始之前需要先瞭解基本概念,結構化資料發展到現在,一共有這些格式:
以往 Blogger 範本中使用的是 Microdata 這種格式,HTML 標籤中會穿插一堆 itemprop 這樣的屬性。
由於 Microdata 的規範會不斷更改,追逐 SEO 的站長隔一陣子可能就要調整 Microdata 結構化資料的寫法,否則測試工具又要看到錯誤訊息了。
我認為這算是滿浪費時間的作法,也從來不在意這些錯誤訊息。同時範本中各處佈滿了 itemprop 屬性,日後很不方便維護,程式碼也非常雜亂,一直覺得 Microdata 是很糟糕的一項設計。
2. 最佳格式 JSON-LD
這次仔細研究「結構化資料」後,發現 JSON-LD 這種格式真是太屌了,把所有結構化資料集中在一處,不再需要遍布整個範本,日後維護不需要找半天。
因為這麼方便,WFU 就會願意使用「結構化資料」來對搜尋引擎友善,讓 Goolge 快速、正確地索引自己的網站。
3. 補充資料
1. 自架站
如果花錢自架站的話,例如 WP 平台,可以找到自動產生結構化資料的外掛來安裝,不用自己手動一篇篇處理。
2. 免費部落格
Blogger 以外的免費部落格平台,大部分應該都不能修改範本內容,那麼我相信很少站長會有毅力自己一篇篇手動貼上結構化資料內容。
少數能修改範本內容的部落格平台,我也不確定一定能自動為每篇文章產生結構化資料,那麼為了這件事,我建議最好的選擇是改用 Blogger。
3. Blogger
Blogger 身為 Goolge 的一份子,搜尋引擎需要的 SEO 功能自然不會缺席,從範本就可以很輕易地產生每篇文章的結構化資料,請見以下的詳細說明。
之前在「究竟 Blogger 會不會關閉?從 Google 商業經營的角度分析」→「四、搜尋引擎如何獲利」→「5. 非 Blogger 網站的索引」有提到這段話:
去年「Blogger 推出全新自適應 RWD 官方範本」,讀者可以檢查一下你的範本,如果是官方 RWD 範本,檢視網頁原始碼後會發現:
這有很重大的意義,因為:
所以結論就是,Blogger 官方 RWD 範本的使用者,什麼事都不必做,「結構化資料」已經自動設定好了。
根據 Google 官網說明「關於結構化資料標記協助工具」:
既然結構化資料改用 JSON-LD 格式是比較好的方案,那麼就得先刪除網頁中原本的 Microdata (微資料) 格式。
如果 Blogger 沒有使用最新的 RWD 範本,那麼請按照以下我的整理,來修正範本中的「結構化資料」。
在修改範本之前,建議先閱讀「備份範本的訣竅」系列文章。
1. 刪除 Microdata 標記
下圖是本站使用「Google 結構化資料測試工具」檢查的結果,一片紅通通慘不忍睹:
可以點擊個別項目,來找到範本中的位置,也可按照以下要點來處理:
都刪除完以後,再使用測試工具檢查,確定都沒有錯誤訊息後,再進行下一個動作。
2. 新增 JSON-LD 結構化資料
在範本中搜尋以下字串:
找到後,在下一行插入以下程式碼:
儲存後就可以了,讀者可以用測試工具來檢測個別的文章網址,都會產生對應的結構化資料。
從這裡也可看出 Blogger 比其他部落格平台強大的地方,只要範本設定好,每篇文章就不用個別手動設定。
重新檢測結構化標記,效果大致如下圖:
除了看起來乾淨清爽,沒有錯誤訊息,而且所有結構化資料都非常整齊、一目了然。
最後總結強調一下,本篇提供的結構化資料程式碼,是供部落格最基本的「文章型態」使用。如果是特定類型的部落格,例如電影、書評、產品、美食、旅遊...等等,光是套用通用的「文章型態」,不足以完全發揮結構化資料的威力。
之後會另外寫其他型態的結構化資料,提供不同的範例作為參考。
該篇文章我也說了,部落格網站不理會結構化資料也沒什麼差,因為 Google 搜尋結果出現的字串,不會因為設定了結構化資料而有太大差別。
會寫本篇的主要原因是,前陣子接到特定類型網站的委託案件,想要優化部落格的結構化資料。而前一篇我有提到,特定類型、或商業網站有必要優化結構化資料,因此為這個案件詳細研究了「結構化資料」,也確實達到很好的搜尋效果。
那麼本篇整理一下研究的心得,並以部落格「文章」這個類型為例,說明結構化資料該怎麼做最簡單、快速、不會有錯誤訊息出現。
一、結構化資料最佳格式
1. 各種結構化資料格式
開始之前需要先瞭解基本概念,結構化資料發展到現在,一共有這些格式:
- Microdata(微資料)
- RDFa
- JSON-LD
以往 Blogger 範本中使用的是 Microdata 這種格式,HTML 標籤中會穿插一堆 itemprop 這樣的屬性。
由於 Microdata 的規範會不斷更改,追逐 SEO 的站長隔一陣子可能就要調整 Microdata 結構化資料的寫法,否則測試工具又要看到錯誤訊息了。
我認為這算是滿浪費時間的作法,也從來不在意這些錯誤訊息。同時範本中各處佈滿了 itemprop 屬性,日後很不方便維護,程式碼也非常雜亂,一直覺得 Microdata 是很糟糕的一項設計。
2. 最佳格式 JSON-LD
這次仔細研究「結構化資料」後,發現 JSON-LD 這種格式真是太屌了,把所有結構化資料集中在一處,不再需要遍布整個範本,日後維護不需要找半天。
因為這麼方便,WFU 就會願意使用「結構化資料」來對搜尋引擎友善,讓 Goolge 快速、正確地索引自己的網站。
3. 補充資料
- 深入瞭解結構化資料:「用語意標籤與結構化資料,讓搜尋引擎更了解網頁的內容」
- 測試工具:「Google 結構化資料測試工具」
- 協助工具:「Google 結構化資料協助標記工具」
二、可以使用結構化資料的部落格平台
1. 自架站
如果花錢自架站的話,例如 WP 平台,可以找到自動產生結構化資料的外掛來安裝,不用自己手動一篇篇處理。
2. 免費部落格
Blogger 以外的免費部落格平台,大部分應該都不能修改範本內容,那麼我相信很少站長會有毅力自己一篇篇手動貼上結構化資料內容。
少數能修改範本內容的部落格平台,我也不確定一定能自動為每篇文章產生結構化資料,那麼為了這件事,我建議最好的選擇是改用 Blogger。
3. Blogger
Blogger 身為 Goolge 的一份子,搜尋引擎需要的 SEO 功能自然不會缺席,從範本就可以很輕易地產生每篇文章的結構化資料,請見以下的詳細說明。
三、最佳方案:Blogger 官方 RWD 範本
之前在「究竟 Blogger 會不會關閉?從 Google 商業經營的角度分析」→「四、搜尋引擎如何獲利」→「5. 非 Blogger 網站的索引」有提到這段話:
Blogger 網站的 HTML 架構絕對會依照,方便索引機器人作業的方式來建構,也會根據最新規範來更新,也就是利於 SEO。
只要 Google 將免費的 Blogger 做得越便利,越多使用者願意把 Blogger 當作內容提供的平台,代表索引機器人的工作越輕鬆,搜尋引擎的成本會越少,Google 索引的速度會越快...
去年「Blogger 推出全新自適應 RWD 官方範本」,讀者可以檢查一下你的範本,如果是官方 RWD 範本,檢視網頁原始碼後會發現:
- 舊有的 Microdata 標記已經全部消失
- 使用 JSON-LD 格式的結構化資料
- 使用測試工具不會看到錯誤
這有很重大的意義,因為:
- 不再因為 Microdata 規格更新,而需要手動修改範本內容
- 這些 JSON-LD 格式的結構化資料,在範本中我們甚至無法修改,是 Blogger 官方自動幫我們產生的
- 因為是官方控制的結構化資料,代表將來 JSON-LD 就算規格更新了,官方也會自動調整內容,我們不必操心。
- 代表 Blogger 的使用者,只要套用官方 RWD 範本,基本上可以不必擔心許多 SEO 細節。
所以結論就是,Blogger 官方 RWD 範本的使用者,什麼事都不必做,「結構化資料」已經自動設定好了。
四、Blogger 一般範本
根據 Google 官網說明「關於結構化資料標記協助工具」:
微資料與 JSON-LD 是兩種不同的標記資料方法 (兩者皆使用 schema.org 詞彙)。建議您擇一使用微資料或 JSON-LD, 避免在單一網頁或電子郵件同時使用這兩種方法。
既然結構化資料改用 JSON-LD 格式是比較好的方案,那麼就得先刪除網頁中原本的 Microdata (微資料) 格式。
如果 Blogger 沒有使用最新的 RWD 範本,那麼請按照以下我的整理,來修正範本中的「結構化資料」。
在修改範本之前,建議先閱讀「備份範本的訣竅」系列文章。
1. 刪除 Microdata 標記
下圖是本站使用「Google 結構化資料測試工具」檢查的結果,一片紅通通慘不忍睹:
可以點擊個別項目,來找到範本中的位置,也可按照以下要點來處理:
- 刪除範本所有 itemprop 的相關內容,例如刪除 itemprop='image_url' 這樣的字串
- 刪除所有 itemscope 的相關內容,作法同上
- 刪除所有 itemtype 的相關內容,作法同上
都刪除完以後,再使用測試工具檢查,確定都沒有錯誤訊息後,再進行下一個動作。
2. 新增 JSON-LD 結構化資料
在範本中搜尋以下字串:
<b:includable id='post' var='post'>
找到後,在下一行插入以下程式碼:
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "BlogPosting",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "<data:post.canonicalUrl></data:post>"
},
"headline": "<data:post.title></data:post>",
"description": "<data:blog.metaDescription></data:blog>",
"datePublished": "<data:post.timestampISO8601></data:post>",
"dateModified": "<data:post.timestampISO8601></data:post>",
"image": {
"@type": "ImageObject",
"url": "<data:post.firstImageUrl></data:post>"
},
"keywords": "<b:loop values='data:post.labels' var='label'><data:label.name></data:label><b:if cond='!data:label.isLast'>,</b:if></b:loop>",
"publisher": {
"@type": "Organization",
"name": "Blogger",
"logo": {
"@type": "ImageObject",
"url": "https://lh3.googleusercontent.com/ULB6iBuCeTVvSjjjU1A-O8e9ZpVba6uvyhtiWRti_rBAs9yMYOFBujxriJRZ-A=h60",
"width": 206,
"height": 60
}
},
"author": {
"@type": "Person",
"name": "<data:post.author></data:post>"
}
}
</script>
儲存後就可以了,讀者可以用測試工具來檢測個別的文章網址,都會產生對應的結構化資料。
從這裡也可看出 Blogger 比其他部落格平台強大的地方,只要範本設定好,每篇文章就不用個別手動設定。
重新檢測結構化標記,效果大致如下圖:
除了看起來乾淨清爽,沒有錯誤訊息,而且所有結構化資料都非常整齊、一目了然。
五、總結
最後總結強調一下,本篇提供的結構化資料程式碼,是供部落格最基本的「文章型態」使用。如果是特定類型的部落格,例如電影、書評、產品、美食、旅遊...等等,光是套用通用的「文章型態」,不足以完全發揮結構化資料的威力。
之後會另外寫其他型態的結構化資料,提供不同的範例作為參考。
更多 SEO 相關文章: