Quantcast
Channel: WFU BLOG
Viewing all articles
Browse latest Browse all 571

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

$
0
0
structured-data-json-ld-blog-post.jpg-部落格使用「結構化資料」的最佳作法 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. 補充資料




二、可以使用結構化資料的部落格平台


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 結構化資料測試工具」檢查的結果,一片紅通通慘不忍睹:

structured-data-json-ld-blog-post-1.jpg-部落格使用「結構化資料」的最佳作法 JSON-LD﹍提供「文章」型態的範例程式碼


可以點擊個別項目,來找到範本中的位置,也可按照以下要點來處理:

  • 刪除範本所有 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 比其他部落格平台強大的地方,只要範本設定好,每篇文章就不用個別手動設定。

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

structured-data-json-ld-blog-post-2.jpg-部落格使用「結構化資料」的最佳作法 JSON-LD﹍提供「文章」型態的範例程式碼

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



五、總結


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

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


更多 SEO 相關文章:

Viewing all articles
Browse latest Browse all 571

Trending Articles