在使用 Google Search 的時候,一定不時會見到一些「特殊的」搜尋結果,好比像是下圖這種搜尋結果的樣式:

相較於一般的搜尋結果,這種版塊能提供更多資訊給使用者,也會更加吸睛。

實際上,會出現這種特殊版面並非巧合,而是因為這些網站有設定「結構化資料」(structured data)的緣故。

而剛開始研究 Technical SEO 的朋友,也一定會碰到「結構化資料」這玩意兒。當初我對程式還沒那麼熟悉,看到一大串程式碼就嚇傻了,想說結構化資料到底是什麼妖孽?

不過別擔心,今天白話文 SEO 會用最簡單的方式,讓你搞懂何謂結構化資料,以及結構化資料的用途。

如此一來,不論是你自己處理網站,又或者請工程師處理網站時,都會更加順利。


什麼是結構化資料?

在展開討論結構化資料之前,我們先來看一下幾個例子。

首先,這是常見的搜尋結果。

而相較於一般的搜尋結果,某些搜尋結果相當不一樣。

麵包屑(breadcrumb)、評分(rating)
產品價格(price)、評分(rating)、評論(review)
FAQ

上述之所以能顯示出這麼特殊的版面樣式,並非巧合,而是因為這些網站有做「結構化資料」的相關設定。


結構化資料的定義

根據 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,並跟工程師協調。


關於結構化資料的幾個提醒

說了這麼多,不過還有幾個結構化資料(structured data)的常見迷思或問題,在這裡提供給大家參考。

1. 設定完結構化資料,未必會跑出來

當你正確設定完結構化資料後,你可能會一個問題:是不是我設定完這些東西後,結構化資料就一定會跑出來了呢?

答案是未必,就像多數 SEO 的優化項目一樣,我們只能盡可能提供對 Google 友善的訊號,然後默默等待 Google 來取用。

所以我們能做就是盡可能提供正確的結構化資料,剩下的就不是我們能控制的了。


2. 某些類型的結構化資料,未必會出現

大家最常見的麵包屑、價格、評分,都是容易出現在搜尋結果的結構化資料;但相對的,評論內容、品牌,就不見得會出現。

不過現在不會出現,不代表以後不會出現;所以在盡可能的範圍內,把結構化資料做好做滿總是比較好的。


3. Google 會越來越聰明,但現在還沒有

Google 每天都很努力在進化,現在有時候 Google 已經能自己抓到某種程度的麵包屑了,有時候也能自己分辨出產品價格跟評分,並且顯示在搜尋結果頁上。

所以你會發現,有些人搜尋結果頁上有出現特殊資訊,但透過結構化資料工具測試後,卻沒有結果;此時不要疑惑,不是對方偷偷做了什麼神秘設定,而是 Google 爸爸慧眼識結構化資料。

所以有人說,或許有一天 Google 會聰明到不需要人們再使用結構化資料。

不過目前 Google 顯然還沒這麼聰明,因此如果網站主把選擇權給不夠聰明的 Google 來決定,顯然也不夠聰明。

所以倘若行有餘力,還是建議自己調整好結構化資料比較好,This is SEO’s life.


那麼本次內容就說到這,希望各位會有收穫,謝謝。

2021.02.07
法蘭克


或許你也會想看

留下一個答复

請輸入你的評論!
請在這裡輸入你的名字