在使用 Google Search 的時候，一定不時會見到一些「特殊的」搜尋結果，好比像是下圖這種搜尋結果的樣式：
相較於一般的搜尋結果，這種版塊能提供更多資訊給使用者，也會更加吸睛。
實際上，會出現這種特殊版面並非巧合，而是因為這些網站有設定「結構化資料」（structured data）的緣故。
而剛開始研究 Technical SEO 的朋友，也一定會碰到「結構化資料」這玩意兒。當初我對程式還沒那麼熟悉，看到一大串程式碼就嚇傻了，想說結構化資料到底是什麼妖孽？
不過別擔心，今天白話文 SEO 會用最簡單的方式，讓你搞懂何謂結構化資料，以及結構化資料的用途。
如此一來，不論是你自己處理網站，又或者請工程師處理網站時，都會更加順利。
文章目錄
什麼是結構化資料？
在展開討論結構化資料之前，我們先來看一下幾個例子。
首先，這是常見的搜尋結果（search engine result）。
而相較於一般的搜尋結果，某些搜尋結果相當不一樣。
上述之所以能顯示出這麼特殊的版面樣式，並非巧合，而是因為這些網站有做「結構化資料」的相關設定。
工商時間
如果你想更系統化、更輕鬆的學好 SEO，推薦你參考我的 SEO 線上課程《SEO 白話文：不懂程式也能學會的 SEO 秘密》，這是目前台灣最多五星評價的線上 SEO 課程，幫助你學好 SEO 基礎跟優化方向。
結構化資料的定義
根據 Google 官方說法：「結構化資料是一種標準化格式，作用是提供網頁相關資訊並將網頁內容分類。例如在食譜網頁上，結構化資料就能分類材料、烹飪時間和溫度、熱量等內容。」
我的白話文解釋：「結構化資料，就是透過標準的格式，幫助 Google 更容易了解網頁上的特定資訊。」
實際上，Google 儘管很聰明，但並沒有我們想像的那麼聰明，儘管一個頁面上有很明顯的價格、庫存數量、評論、評分等資訊，但 Google 未必能認得網頁上的這些元素的意義就是價格、庫存數量、評論、評分。
因此，我們透過特定的程式碼格式，幫助 Google 「認得」特定的資料訊息，這段特定的程式碼，就是結構化資料。
好比說，我希望 Google 知道我這一個產品頁的價格是 309 元，那我就可以在網頁貼上一段「產品價格＝309 元」的結構化資料。
透過這一段程式碼，Google 就能「讀懂」這一頁，知道這一頁產品價格是 309 元，並且有機會顯示在搜尋結果上。
為什麼要做結構化資料？
從前面的內容你就能發現，透過結構化資料我們能幫助 Google 更加理解網站內容，進而讓網頁能在搜尋結果頁多呈現一些資訊給使用者。
同時，因為這種版位格式跟其他搜尋結果較不相同，所以有做結構化資料的網頁會更加吸引眼球。（跟 sitelink 的狀況有點像）
所以說結構化資料很大的目的在於提升網頁的點擊率（CTR），進而幫網站帶入更多流量。
怎麼做結構化資料？
結構化資料的格式
如同前面提到的，結構化資料就是一段標準的程式碼，透過這段程式碼可以讓機器人（搜尋引擎）搞懂網站內容。
而根據不同的屬性，如產品價格、FAQ、麵包屑等，會有不同的程式來做撰寫。
至於結構化資料的格式分為「JSON-LD」、「Micro data」、「RDFa」；Google 官方建議採用「JSON-LD」的格式，所以以下我都會用「JSON-LD」作為說明。
結構化資料的程式碼長怎樣？
我們以 Google 說明中心對於結構化資料的解釋，如果一個搜尋結果長的像下圖這個模樣。
其背後的結構化資料，也就是其中的程式碼，會長如以下說明。
<script type=”application/ld+json”>
{
“@context”: “https://schema.org/”,
“@type”: “Product”,
“name”: “Executive Anvil”,
“image”: [
“https://example.com/photos/1×1/photo.jpg”,
“https://example.com/photos/4×3/photo.jpg”,
“https://example.com/photos/16×9/photo.jpg”
],
“description”: “Sleeker than ACME’s Classic Anvil, the Executive Anvil is perfect for the business traveler looking for something to drop from a height.”,
“sku”: “0446310786”,
“mpn”: “925872”,
“brand”: {
“@type”: “Brand”,
“name”: “ACME”
},
“review”: {
“@type”: “Review”,
“reviewRating”: {
“@type”: “Rating”,
“ratingValue”: “4”,
“bestRating”: “5”
},
“author”: {
“@type”: “Person”,
“name”: “Fred Benson”
}
},
“aggregateRating”: {
“@type”: “AggregateRating”,
“ratingValue”: “4.4”,
“reviewCount”: “89”
},
“offers”: {
“@type”: “Offer”,
“url”: “https://example.com/anvil”,
“priceCurrency”: “USD”,
“price”: “119.99”,
“priceValidUntil”: “2020-11-20”,
“itemCondition”: “https://schema.org/UsedCondition”,
“availability”: “https://schema.org/InStock”
}
}
</script>
覺得很複雜嗎？先別怕，我們後面來講解。
拆解結構化資料的細節
上述細項看起來很複雜沒錯，但如果耐心觀察，你會發現沒那麼恐怖跟糾結。
我先從上面拆出「product」的相關內容：
“@type”: “Product”,
“name”: “Executive Anvil”,
“image”: [
“https://example.com/photos/1×1/photo.jpg”,
“https://example.com/photos/4×3/photo.jpg”,
“https://example.com/photos/16×9/photo.jpg”
],
“description”: “Sleeker than ACME’s Classic Anvil, the Executive Anvil is perfect for the business traveler looking for something to drop from a height.”,
“sku”: “0446310786”,
“mpn”: “925872”,
“brand”: {
“@type”: “Brand”,
“name”: “ACME”
}
接著，我們把項目裡面的內容清理乾淨（把裡面的代稱清除掉），就可以看到：
“@type”: “Product”,
“name”: “產品名稱”,
“image”: [
“圖片網址”,
],
“description”: “產品描述”,
“sku”: “庫存數量”,
“brand”: {
“@type”: “Brand”,
“name”: “品牌名稱”
}
也就是說，這串程式碼的結構大致上會是個 “@type” : “XX”，配上該屬性的細項說明，像是 name、image、url…..etc，是不是就沒那麼恐怖了？
結構化資料不過就是個填字遊戲！
最後，我們如果透過結構化資料檢測的結果來觀測，就會更好理解了。
透過上圖，我們可以明確看到，@type : Product 下面有 name、image、description、sku、brand、offers 等細項。
然後在 brand 跟 offers 等細項，又有小細項，透過下一層的 @type 繼續標註，所以出現了像是 offers 下面的 url、price 等說明。
只要把這些「洞」一個一個填完，結構化資料就完成了，是不是覺得輕鬆多了？
要去哪裡找結構化資料的樣本？
我個人認為，結構化資料這東西有一點像是「照樣照句」的遊戲。
當初有設定結構化資料的起因，就是希望所有人都能遵守一套規則十分接近的原則，因此它是一個有接近正確答案的課題。
通常你可以在「Schema.org」找到標準答案跟範例。
又或者，你可以在 Google 關於結構化資料的說明中心，尋找範本來做改寫。
實務上的結構化資料
實務上資料庫是動態的，所以不太會用這麼「人工」的做法來撰寫結構化資料，工程師會用別的方法來更有效率的產出結構化資料。
同時，市場上也有更多現成的外掛來幫助我們撰寫結構化資料，像是 yoast SEO 等外掛就有現成的資料可以使用。
不過，了解結構化資料的程式碼原理，能幫助我們更有安全感跟理論基礎，來判斷自己的結構化資料有無問題。
檢測結構化資料是否正確
完成結構化資料後，最重要的就是要檢測是否寫的正確。
畢竟花了這麼多力氣調整結構化資料，如果因為一個逗號、一個括號沒寫對，導致 Google 認為結構化資料有誤，那就太可惜了。
因此我們會透過「結構化資料測試工具（複合式搜尋結果測試）」來檢驗結構化資料是否正確。
結構化資料測試工具介紹
這個結構化資料測試工具是 Google 官方的，你可以透過這個工具測試結構化資料是否正確。
你有兩種測試方式，一種是利用網址做測試，另一種利用程式碼片段做測試。
- 網址測試：網址測試顧名思義，就是把完整的網址丟到測試中，來檢驗上線網頁的結構化資料是否有問題。（注意，該網址必須要是公開的才可以。）
同時，當我們發現有一個網頁的搜尋版位很特別，你也可以丟到結構化資料檢測器來看看對手用了甚麼花招。（所以我常說，SEO 是個蠻透明的技術）
- 程式碼檢測：如果你今天網址還沒正式上線，只想測試其中一段程式碼，那你就能把這段程式碼剪出來，丟到這上面來檢驗。
好比說，我們拿前面那段程式碼來示範，就會得到以下結果。
如果拿來檢測前面的 IKEA 網頁，我們就可以得到這樣的檢測頁面，可以發現只有「警告」，而沒有「錯誤」，那就代表這個結構化資料及格了。
當然，你要全部弄到零警告會比較麻煩，而且有時候你的確就沒有那個屬性可以填，像是很多網站就沒有 rating、review 啊等等。
所以我建議拿「不要有錯誤」當標準，其他都是加分。
備註：老實說，我還是比較喜歡舊版的結構化資料檢測，比較好用，但這個快要停用了，sad。
透過 Google Search Console 檢測
另一方面，你也能透過 Google Search Console 來檢測你的網站結構化資料是否有設定錯誤。
像是這個 Google Search Console 有大量的產品頁結構化資料，因此透過 Console 就能迅速的找到 bug，並跟工程師協調。
哪些資料性質有結構化資料？
結構化資料類別非常多，可以多觀察搜尋結果頁上面有哪些結構化資料呈現，接著搜尋看看「OO 結構化資料」，或「OO structured data」。
舉例來說，像是「review structured data」、「食譜 結構化資料」，如果這個類別有結構化資料，你就有機會找到。
那麼以下我舉例一些常見的結構化資料類別。
- Article
- Book
- 導覽標記
- Course
- Event
- 常見問題（FAQ）
- How-to
- Product
- Review
- Rating
- 網站內搜尋框
上述這些結構化資料的說明，你可以在 Google 的說明，找到更完整的解答跟教學。
關於結構化資料的幾個提醒
說了這麼多，不過還有幾個結構化資料（structured data）的常見迷思或問題，在這裡提供給大家參考。
1. 設定完結構化資料，未必會跑出來
當你正確設定完結構化資料後，你可能會一個問題：是不是我設定完這些東西後，結構化資料就一定會跑出來了呢？
答案是未必，就像多數 SEO 的優化項目一樣，我們只能盡可能提供對 Google 友善的訊號，然後默默等待 Google 來取用。
所以我們能做就是盡可能提供正確的結構化資料，剩下的就不是我們能控制的了。
2. 某些類型的結構化資料，未必會出現
大家最常見的麵包屑、價格、評分，都是容易出現在搜尋結果的結構化資料；但相對的，評論內容、品牌，就不見得會出現。
不過現在不會出現，不代表以後不會出現；所以在盡可能的範圍內，把結構化資料做好做滿總是比較好的。
3. Google 會越來越聰明，但現在還沒有
Google 每天都很努力在進化，現在有時候 Google 已經能自己抓到某種程度的麵包屑了，有時候也能自己分辨出產品價格跟評分，並且顯示在搜尋結果頁上。
所以你會發現，有些人搜尋結果頁上有出現特殊資訊，但透過結構化資料工具測試後，卻沒有結果；此時不要疑惑，不是對方偷偷做了什麼神秘設定，而是 Google 爸爸慧眼識結構化資料。
所以有人說，或許有一天 Google 會聰明到不需要人們再使用結構化資料。
不過目前 Google 顯然還沒這麼聰明，因此如果網站主把選擇權給不夠聰明的 Google 來決定，顯然也不夠聰明。
所以倘若行有餘力，還是建議自己調整好結構化資料比較好，This is SEO’s life.
那麼本次內容就說到這，希望各位會有收穫，謝謝。
法蘭克
工商時間
如果你想更系統化、更輕鬆的學好 SEO，推薦你參考我的 SEO 線上課程《SEO 白話文：不懂程式也能學會的 SEO 秘密》，這是目前台灣最多五星評價的線上 SEO 課程，幫助你學好 SEO 基礎跟優化方向。
或許你也會想看
- 網站連結 Sitelinks：那個又大又漂亮的搜尋版位是什麼？
- 如何確認網頁被 Google 索引（index）了？三個確認方法及強化作法，搞定索引問題！
- SEO canonical 終極教學指南：利用”rel canonical”解決重複內容、跨平台轉載困擾
初稿：2021.9.16
更新：2022.5.22
