部落格使用「結構化資料」的最佳作法JSON-LD﹍提供「文章 ...

在各種不同的「結構化資料」型態中，最推薦使用JSON-LD的格式，不但資料整齊且容易維護。

只要使用Blogger官方RWD範本，所有文章都能自動產生「結構化 ... 服務項目 諮詢/服務項目 客製化/套版架設網站流程 痞客邦搬家 架站作品集 導覽 如何使用本站 Blogger新手指引 本站的Hack及工具 熱門文章一覽 文章列表+讚統計 Blogger 小技巧 小工具 行動版 官方工具 留言相關 Blogger相關 Blogger筆記 Blogger範本 Blogger語法 Google Google試算表 Chrome套件 GoogleDrive Google搜尋 GoogleAdsense GoogleAnalytics AppsScript Google相關 部落格 部落格經營 搬家 SEO 社交分享按鈕 網站工具 網頁效能 部落格廣告 著作權保護 網頁設計 字型 RWD Bootstrap jQuery工具 CSS技巧 Javascript技巧 網頁開發工具 圖片展示工具 網路雲端 Facebook Line Dropbox Evernote 資訊安全 免費空間 會員中心 會員資訊 會員限定文章 會員加值文章 點數使用明細 會員公告 會員討論區 關於會員系統 關於 關於本站 贊助管道 版權聲明 隱私權政策 留言板 2018年3月15日 部落格使用「結構化資料」的最佳作法JSON-LD﹍提供「文章」型態的範例程式碼 WayneFu 電腦-部落格-SEO,電腦-Blogger-Blogger相關 0 A+ 色 a:link{text-decoration:underline;}.post{background:#fff;color:#222}[style*='990000'],[style*=cc0000],[style*='6aa84f'],[style*='3d85c6']{border-bottom:2pxdashed#ccc}[style*='990000']:before,[style*=cc0000]:before{content:"紅字";font-size:70%;font-weight:700;vertical-align:top}[style*='6aa84f']:before{content:"綠字";font-size:70%;font-weight:700;vertical-align:top}[style*='3d85c6']:before{content:"藍字";font-size:70%;font-weight:700;vertical-align:top} 過去曾寫過一篇「部落格如何處理結構化資料標記+修復錯誤訊息」，主要是因為鑽研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結構化資料 在範本中搜尋以下字串： 找到後，在下一行插入以下程式碼： { "@context":"http://schema.org", "@type":"BlogPosting", "mainEntityOfPage":{ "@type":"WebPage", "@id":"" }, "headline":"", "description":"", "datePublished":"", "dateModified":"", "image":{ "@type":"ImageObject", "url":"" }, "keywords":",", "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":"" } } 儲存後就可以了，讀者可以用測試工具來檢測個別的文章網址，都會產生對應的結構化資料。

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

重新檢測結構化標記，效果大致如下圖： 除了看起來乾淨清爽，沒有錯誤訊息，而且所有結構化資料都非常整齊、一目了然。

五、總結 最後總結強調一下，本篇提供的結構化資料程式碼，是供部落格最基本的「文章型態」使用。

如果是特定類型的部落格，例如電影、書評、產品、美食、旅遊...等等，光是套用通用的「文章型態」，不足以完全發揮結構化資料的威力。

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

更多SEO相關文章： 0 0 如這篇文章對你有幫助，歡迎「分享」到FB、「追蹤」粉絲團、「訂閱」最新文章 FB LINE 電腦-部落格-SEO 電腦-Blogger-Blogger相關 WayneFu 前端開發‧Blogger探研‧網站架設 歡迎來到我的雲端資料庫，這裡除了分享網路應用心得，也是最專業的Blogger中文部落格。

利用側邊欄「搜尋」及「文章分類」，可解決大多數的問題喔！ 下方連結還有更多的Blogger資源及服務，如需諮詢、合作，歡迎填寫聯絡表單或來信：[email protected] FB社團 粉絲團 Blogger工具 諮詢/架站/網頁設計 架站作品集 沒有留言: 張貼留言注意事項：◎勾選「通知我」可收到後續回覆的mail！◎請在相關文章留言，與文章無關的主題可至「Blogger社團」提問。

◎請避免使用Safari瀏覽器，否則無法登入Google帳號留言(只能匿名留言)！◎提問若無法提供足夠的資訊供判斷，可能會被無視。

建議先參考這篇「Blogger提問技巧及注意事項」。

◎CSS相關問題非免費諮詢，建議使用「Chrome開發人員工具」尋找答案。

◎手機版相關問題請參考「Blogger行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」；或參考「Blogger行動版範本修改技巧」，或本站Blogger行動版標籤相關文章。

◎非官方範本問題、或貴站為商業網站，請參考「Blogger免費諮詢+付費諮詢」◎若是使用官方RWD範本，請參考「Blogger推出全新自適應RWD官方範本及佈景主題」→不建議對範本進行修改！◎若留言要輸入語法，""這兩個符號請用其他符號代替，否則語法會消失！◎為了過濾垃圾留言，所有留言不會即時發佈，請稍待片刻。

◎本站「已關閉自刪留言功能」。

站內搜尋 文章分類 生活-理財 (2) 生活-數位生活-3C產品 (17) 生活-數位生活-網路電視 (2) 生活-數位生活-Android (11) 生活-數位生活-Eink產品 (5) 生活-數位生活-iPhone (5) 休閒-三國志11-五奇戰記 (5) 休閒-三國志11-公孫恭開局 (9) 休閒-三國志11-引兵誘敵開局 (14) 休閒-三國志11-水淹開局 (2) 休閒-三國志11-火攻開局 (13) 休閒-三國志11-防守反擊開局 (13) 休閒-三國志11-圍城港關坑兵開局 (6) 休閒-三國志11-運用建築設施開局 (16) 休閒-三國志11-綜合主題 (8) 休閒-小遊戲-射擊 (2) 休閒-小遊戲-益智 (2) 休閒-小遊戲-動作 (11) 休閒-小遊戲-策略 (3) 休閒-太空戰士7 (6) 電腦-部落格-站務-大事紀要 (7) 電腦-部落格-站務-公告 (27) 電腦-部落格-站務-留言板 (3) 電腦-部落格-站務-會員系統 (7) 電腦-部落格-站務-網站服務 (11) 電腦-部落格-中國大陸封鎖 (7) 電腦-部落格-社交分享按鈕 (10) 電腦-部落格-部落格相關 (10) 電腦-部落格-部落格經營 (13) 電腦-部落格-著作權保護 (19) 電腦-部落格-搬家 (12) 電腦-部落格-網站工具 (31) 電腦-部落格-網域 (15) 電腦-部落格-廣告 (10) 電腦-部落格-Godaddy (7) 電腦-部落格-SEO (52) 電腦-部落格-WordPress (10) 電腦-網頁設計-字型 (18) 電腦-網頁設計-免費圖庫 (9) 電腦-網頁設計-使用者體驗 (13) 電腦-網頁設計-表格 (8) 電腦-網頁設計-接案心得 (5) 電腦-網頁設計-圖片展示工具 (10) 電腦-網頁設計-網頁技巧 (12) 電腦-網頁設計-網頁開發工具 (13) 電腦-網頁設計-網站效能 (18) 電腦-網頁設計-Bootstrap (10) 電腦-網頁設計-CSS (50) 電腦-網頁設計-HTML (23) 電腦-網頁設計-iOS (5) 電腦-網頁設計-Javascript技巧 (30) 電腦-網頁設計-Javascript筆記 (6) 電腦-網頁設計-jQuery (34) 電腦-網頁設計-NodeJs (5) 電腦-網頁設計-RWD (17) 電腦-網頁設計-SublimeText (3) 電腦-網路雲端-免費空間 (10) 電腦-網路雲端-爬蟲 (5) 電腦-網路雲端-資訊安全 (20) 電腦-網路雲端-線上工具 (16) 電腦-網路雲端-瀏覽器 (8) 電腦-網路雲端-Dropbox (5) 電腦-網路雲端-Evernote (10) 電腦-網路雲端-Facebook (50) 電腦-網路雲端-Github (2) 電腦-網路雲端-IFTTT (4) 電腦-網路雲端-Line (12) 電腦-網路雲端-PTT (7) 電腦-網路雲端-RSS閱讀器 (12) 電腦-網路雲端-YahooPipe (4) 電腦-Blogger-工具-文章列表-TOC (13) 電腦-Blogger-工具-文章列表-TOC極速版 (6) 電腦-Blogger-工具-私密留言 (6) 電腦-Blogger-工具-官方工具 (15) 電腦-Blogger-工具-側邊欄 (16) 電腦-Blogger-工具-推文 (5) 電腦-Blogger-工具-單篇文章計數器 (5) 電腦-Blogger-工具-搜尋功能 (8) 電腦-Blogger-工具-導覽列 (13) 電腦-Blogger-工具-Blogger工具 (22) 電腦-Blogger-Hack-留言-留言相關 (29) 電腦-Blogger-Hack-留言-舊範本留言 (10) 電腦-Blogger-Hack-標籤-多層樹狀標籤 (7) 電腦-Blogger-Hack-標籤-兩層樹狀標籤 (6) 電腦-Blogger-Hack-標籤-標籤文章列表 (3) 電腦-Blogger-Hack-標籤-標籤相關 (2) 電腦-Blogger-Hack-私密文章 (4) 電腦-Blogger-Hack-讀者反應 (4) 電腦-Blogger-Hack-Blogger語法 (15) 電腦-Blogger-行動版 (24) 電腦-Blogger-Blogger小技巧 (26) 電腦-Blogger-Blogger相關 (90) 電腦-Blogger-Blogger筆記 (14) 電腦-Blogger-Blogger範本 (20) 電腦-Google-搜尋 (14) 電腦-Google-試算表 (30) 電腦-Google-網站管理員 (8) 電腦-Google-Adsense (26) 電腦-Google-Analytics (16) 電腦-Google-AppsScript (16) 電腦-Google-Authorship (5) 電腦-Google-Chrome (19) 電腦-Google-CloudPlatform (1) 電腦-Google-Drive (21) 電腦-Google-G＋ (26) 電腦-Google-Gmail (9) 電腦-Google-Google相關 (21) 電腦-Google-GooglePhoto (7) 電腦-Google-Picasa (16) 電腦-Google-Youtube (5) 電腦-Windows-Hotkeyz (7) 電腦-Windows-Win軟體 (4) 電腦-Windows-Win8Win10 (6) 電腦-Windows-XP (1) 閱讀-有錢人想的和你不一樣 (15) 閱讀-為健康把關的57堂課 (2) 精選文章 最新文章 recentposts Blogger精選 網頁設計精選 聯絡我 最新回應 請先閱讀「填寫諮詢聯繫表單SOP」瞭解重要資訊，如非需要發案給本站，提問請至「Blogger社團」，本站不會回覆任何私人諮詢問題，謝謝！ 稱呼：(必填) 電子郵件：(必填) 您的網址或提問的相關網址：(必填) 簡單自介、如何找到本站：(必填) 請詳細描述您的需求、問題或意見，如提供的資訊不足，可能無法回覆：(必填) 友格 關注1 關注2 訂閱 CC0免費圖庫搜尋引擎 TV線上看電視 RSS訂閱 FEEDLY訂閱 TOP