在使用 Google Search 的時候,一定不時會見到一些「特殊的」搜尋結果,好比像是下圖這種搜尋結果的樣式:
相較於一般的搜尋結果,這種版塊能提供更多資訊給使用者,也會更加吸睛。
實際上,會出現這種特殊版面並非巧合,而是因為這些網站有設定「結構化資料」(structured data)的緣故。
而剛開始研究 Technical SEO 的朋友,也一定會碰到「結構化資料」這玩意兒。當初我對程式還沒那麼熟悉,看到一大串程式碼就嚇傻了,想說結構化資料到底是什麼妖孽?
不過別擔心,今天白話文 SEO 會用最簡單的方式,讓你搞懂何謂結構化資料,以及結構化資料的用途。
如此一來,不論是你自己處理網站,又或者請工程師處理網站時,都會更加順利。
文章目錄
什麼是結構化資料?
在展開討論結構化資料之前,我們先來看一下幾個例子。
首先,這是常見的搜尋結果(search engine result)。
而相較於一般的搜尋結果,某些搜尋結果相當不一樣。
上述之所以能顯示出這麼特殊的版面樣式,並非巧合,而是因為這些網站有做「結構化資料」的相關設定。
工商時間
如果你想要更系統化、更輕鬆的學好 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。
或許你也會想看
- 網站連結 Sitelinks:那個又大又漂亮的搜尋版位是什麼?
- 如何確認網頁被 Google 索引(index)了?三個確認方法及強化作法,搞定索引問題!
- SEO canonical 終極教學指南:利用”rel canonical”解決重複內容、跨平台轉載困擾
初稿:2021.9.16
更新:2022.5.22