部落格使用「結構化資料」的最佳作法 JSON-LD﹍提供「文章」型態的範例程式碼

過去曾寫過一篇「部落格如何處理結構化資料標記 + 修復錯誤訊息」，主要是因為鑽研 SEO 的站長，使用了 HTML 微資料(Microdata)語意標記後，拿「結構化資料測試工具」檢測總是會看到一堆錯誤。

該篇文章我也說了，部落格網站不理會結構化資料也沒什麼差，因為 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/>"
},
"headline": "<data:post.title/>",
"description": "<data:blog.metaDescription/>",
"datePublished": "<data:post.timestampISO8601/>",
"dateModified": "<data:post.timestampISO8601/>",
"image": {
"@type": "ImageObject",
"url": "<data:post.firstImageUrl/>"
},
"keywords": "<b:loop values='data:post.labels' var='label'><data:label.name/><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/>"
}
}
</script>
儲存後就可以了，讀者可以用測試工具來檢測個別的文章網址，都會產生對應的結構化資料。

從這裡也可看出 Blogger 比其他部落格平台強大的地方，只要範本設定好，每篇文章就不用個別手動設定。

重新檢測結構化標記，效果大致如下圖：



除了看起來乾淨清爽，沒有錯誤訊息，而且所有結構化資料都非常整齊、一目了然。

五、總結

最後總結強調一下，本篇提供的結構化資料程式碼，是供部落格最基本的「文章型態」使用。如果是特定類型的部落格，例如電影、書評、產品、美食、旅遊...等等，光是套用通用的「文章型態」，不足以完全發揮結構化資料的威力。

之後會另外寫其他型態的結構化資料，提供不同的範例作為參考。

更多 SEO 相關文章：