Something you might interest about Google search and structured data

Paul Li
Paul Li
Jul 25 · 35 min read
Google Search & wonder structured data (JSON-LD)

Introduction

Search Engine Optimization」一直都是 web developers 所關注的議題,更是一門需要持續深耕,方能不斷成長卓越的大學問。如何做得好 ?讓 Parser 可以正確無誤地解析當前頁面想要表達的意涵

如何做得好 ?讓 Parser 可以正確無誤地解析當前頁面想要表達的意涵,這…沒有絕對的答案 !

也因此,坊間常常出現很多有趣的「民俗療法」,瞎忙一陣之後,不僅造成頁面結構不好 maintain 的悲慘結果外,可能過一陣子該偏方就失效了,徒勞無功,最是可惜!

與其如此瞎猜,倒不如看看人家 parser 真正需要的是什麼?雖然說 Google Search Engine 宛若一個黑盒子,沒人知道他實際的演算法是什麼?不過對於 Search Result 的呈現,卻有明確的定義讓 web developers 有個可以依循的依歸

Google Search Overview

藉由 Structured Data 的描述,可以讓 Google Parser 可以更容易知道當前頁面想要表達什麼?藉由 JSON-LD 的導入,更可以讓頁面結構與 structured data 做有效的脫鉤,有別於 Micordata 的需要添加額外的 element 與 attribute 的做法,不僅更好 maintain,更讓整體結構更加簡潔且優雅。

Microdata:

<ol itemscope itemtype="http://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope
itemtype="http://schema.org/ListItem">
<a itemprop="item" href="https://example.com/dresses">
<span itemprop="name">Dresses</span></a>
<meta itemprop="position" content="1" />
</li>
<li itemprop="itemListElement" itemscope
itemtype="http://schema.org/ListItem">
<a itemprop="item" href="https://example.com/dresses/real">
<span itemprop="name">Real Dresses</span></a>
<meta itemprop="position" content="2" />
</li>
</ol>

JSON-LD:

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"item": {
"@id": "https://example.com/dresses",
"name": "Dresses"
}
},
{
"@type": "ListItem",
"position": 2,
"item": {
"@id": "https://example.com/dresses/real",
"name": "Real Dresses"
}
}
]
}
</script>

如上面例子,同樣想表達 breadcrumb 這件事情,Microdata 和 JSON-LD 的優劣立馬分出高下,是的!靈活且不需要去調整 DOM 的結構,便是 JSON-LD 最大的優勢,因此下列文章將以 JSON-LD 為主要論述來跟大家討論。

Structured data 的設定其實一點都不難,隨便 google 一下都可以找到成千上萬的文章,所以今天想跟大家討論一些其他面向,讓大家可以更加深入了解 structured data。

Attitude about structured data

很多人對於 structured data 的設置總有些迷思︰

不是希望能夠立竿見影馬上看到成效,就是怨天尤人,怪 Google search result page 的呈現不如預期。

對這種有時間性、需要被養成的資料來說,這些都是錯誤的觀念!我們無從得知 Google Search 會在什麼樣的情況使用什麼樣的資料做 render,Developers 可以做的只有一件事,那就是儘可能地提供完善且齊全的資料給 parser,一旦人家今天動念改了呈現,便不愁沒資料可用。

此外,Structured data 注重資料的關聯性,儘量讓不同 Type 的 structured data 可以有效地被串連,建立起強大且壯碩的關聯樹,絕對有助於 Dynamic Search Building。比方說 Product 裡面會有個 brand 的屬性,對 commerce 來說即為 Store﹙店家﹚,透過 data 的設置,便可以讓該商品與店家有了關聯,讓搜尋商品時便有機會帶出店家的資訊,反之,搜尋店家時亦有機會可以帶出商品的資訊,營造出強大的關聯搜尋。

如果同一個頁面可能有很多「 替身」,可能是網址的不同或者是 AMP page,那麼 structured data 於這些頁面的設置應該要一致且相同,如此方能避免 data mining 產生混淆且造成不可挽回的錯誤。﹙canonical page 的 structured data 尤其重要﹚

「 數大絕對不是美」!儘量不要混用不同的 structured data 設置方法,比方說頁面同一 Type 同時使用 microdata 以及 JSON-LD 的設置,如此相互交錯不僅不好 debug 亦會造成日後 maintain 上的困難。

Google 為了有更豐富的呈現,常常會有 Type 支援度的新增與刪除,所以要養成常常回去閱讀文件的習慣,才能與時俱進。

最後再幫大家 recap 一下上述段落的重點︰

  • 儘可能提供完善且齊全的 structured data。
  • 關聯性,讓不同 Type 的 structured data 可以有效地被串連,建立起強大且壯碩的關聯樹。
  • 一致性,讓 data 的設置於不同頁面或者 Type 都要相同,避免 data mining 產生混淆且造成不可挽回的錯誤。
  • 同一頁面儘量不要混用不同的 structured data 的設置方法,避免增加不必要的 maintain 成本。
  • Google structured data 支援度常有異動,應養成常常閱讀文件的習慣。

有了這些正確的觀念,相信對於 structured data 的建立與了解能更加的得心應手。

Installation

JSON-LD 主要是依據 schema.org 的標準來設定,透過 Type 的設定,來清楚表達當前頁面或者 element 所具備的意涵,當今主流的 Search Engine 也都是依據這個標準下去擴展。

JSON-LD 的 installation 其實非常簡單,他可以在頁面的任何地方 render 相對應的 tag ﹙一般來說還是會放在 <head />﹚。

我們先來看一下它的結構

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "BreadcrumbList",
...
...
...
}
</script>

透過 <script /> 的包覆 ﹙Script 的 type 記得要設定為 application/ld+json﹚,內容則為 web developers 常用的 JSON format。

它非常的靈活,即使被拆解成不同區塊在頁面 render,依舊可以被有效的判讀出來,非常適合伴隨 component 出現的 structured data。

<nav>
<a href="?">home</a>
<a href="?">book</a>
<a href="?">music</a>
</nav>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "BreadcrumbList",
...
...
...
}
</script>
<div>
...
...
</div>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Product",
...
...
...
}
</script>

我個人則是比較偏好將頁面的 structured data 集中在同一個 <script /> 中,方便閱讀以及管理,只要將頁面中所有的 structured data 透過 array 包覆,便可以輕易達成該需求。

<script type="application/ld+json">
[
{
"@context": "http://schema.org",
"@type": "BreadcrumbList",
...
...
...
},
{
"@context": "http://schema.org",
"@type": "Product",
...
...
...
}
]
</script>

Validation Tool

頁面完成 JSON-LD 的設置後,在 release 前,可以先透過 Google 提供的 validation tool 先來驗證其正確性,避免來回時間的損耗。

Google 結構化資料測試工具

透過該測試工具,Developers 可以輕易地知道當前所設置的 structured data 是否正確。

Validation tool 的使用非常的簡單,如果是已經在線上的 web page,可以選擇直接 key in 網址,便可以馬上進行驗證。

如果頁面還在開發階段,或是處於非公開的網址的話,也可以切換至“程式碼片段 ”,然後將 web page 的 source code 直接貼上亦可進行驗證。

該 Tool 的運作原理會先將 source code parse 出來,然後再來驗證頁面所具備的 structured data 種類以及正確性。

如果有 Error 出現,則一定要修到好。 Warning 則視當前狀況來決定修正與否﹙比方說 Product 希望提供 GTIN 的資訊,但不是每個商品都有該訊息﹚。

Common structured data

雖然說不同的頁面屬性會帶出不同的 structured data,不過總會有重疊且共通的屬性,比方說 WebSite 以及 Organization,像這種共通屬性的 structured data 應該讓他們在每一頁都要出現,才能快速且有效的建立關聯。

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Organization",
"name": "Yahoo奇摩拍賣",
"url": "https://tw.bid.yahoo.com/",
"logo": "https://s.yimg.com/ma/auc/app/i_r_192x192.png",
"contactPoint": [
{
"@type": "ContactPoint",
"telephone": "+886-2-21927123",
"contactType": "customer service"
}
],
"sameAs": [
"https://www.facebook.com/Yauction/",
"https://aucboard.tumblr.com/"
]
}
</script>

如上所示,透過 data 的設置,我們讓 parser 可以輕易知道當前 Corporate Contact 資訊,當 user 查找 「 Yahoo奇摩拍賣」時,便有機會帶出 LOGO、客服電話、社群網站…等相關資訊。

這裡有兩個地方需要特別注意

  • logo 的圖片比例須為 1:1,且大於 112px,format 的部分則限制為 jpg / png / gif
  • 電話格式要正確,比方說加了國碼和區碼後的長相,可以使用 tel protocal 來驗證電話是否可以正常播打。

Pick suitable type for your pages

每個頁面的屬性本來就不盡相同,也因此 structured data 的設定上亦會有差異,因為這樣,所以 Google Search 才特別陳列了當前支援的 structured data type 供 developers 參考,讓 developers 有個可以依循的方向。

如果對於 Google Search Result 的呈現有興趣的話,也可點擊下方連結進行一覽。

Explore the search gallery

Google Structured data 文件中所陳列的 Type 玲瑯滿目,初次接觸可能會感到慌張,其實只要抓定方向,剩下的都僅僅是錦上添花,使其更好的精緻手工而已。有時候這些精緻手工業會讓搜尋結果 render 的更加繽紛,達到吸睛的實質效果。透過不同 Type 的相互關聯,有時候甚至會帶來意想不到的非凡效果。

為了讓大家能快速地進入這個領域,筆者將以自己所處的服務為例來跟大家介紹 Yahoo 奇摩拍賣 怎麼 implement structured data。

homepage、booth 、item ﹙ 左至右﹚

homepage

此為服務的首頁,除了門面外,更具備了串聯其他頁面的特殊任務,我們先來看一下這個頁面用了哪些 structured data?

Corporate Contact
Logo
Sitelinks Searchbox

其中 Corporate Content 以及 Logo 的設置都被收納在 Type Organization 中,這也是 common structured data 的一員,服務的每個頁面都應該具備該 data。

另外 Sitelinks Searchbox 尤其重要,依照文件描述該 structured data 僅可在 homepage 中做設置。有心想要在 Google Search Result Page 呈現 searchbox 的朋友,不妨可以試試看。

booth

此為店家商品列表頁,會以列表的方式陳列該賣家目前上架的所有商品。既然是店家的專屬頁面,將店家資訊有效的擴展當然便是首要的任務,所以筆者在這個頁面啟用了 Type Store,讓店家的相關資訊可以更清楚的攤給 vistor 看。

Store

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Store",
"name": "✿芥菜種鄉村雜貨✿",
"description": "✿芥菜種雜貨恢復供貨囉~✿全館滿額免運中!",
"logo": "https://s.yimg.com/xd/api/res/1.2/IQ2Ol0CNrZVZZK1I21DQwg--/YXBwaWQ9eXR3YXVjdGlvbnNlcnZpY2U7aD0xOTI7cT04NTtyb3RhdGU9YXV0bzt3PTE5Mg--/https://s.yimg.com/ma/541c/storelogo/Y5190288823.jpg",
"image": "https://s.yimg.com/xd/api/res/1.2/IQ2Ol0CNrZVZZK1I21DQwg--/YXBwaWQ9eXR3YXVjdGlvbnNlcnZpY2U7aD0xOTI7cT04NTtyb3RhdGU9YXV0bzt3PTE5Mg--/https://s.yimg.com/ma/541c/storelogo/Y5190288823.jpg",
"currenciesAccepted": "TWD",
"paymentAccepted": "cash,ATM,web ATM",
"openingHours": "Mo,Tu,We,Th,Fr,Sa,Su 00:00-23:59",
"address": "http://schema.org/address",
"telephone": "http://schema.org/telephone",
"url": "https://tw.bid.yahoo.com/booth/Y5190288823",
"priceRange": "$$$$",
"aggregateRating": {
"@type": "AggregateRating",
"bestRating": "10",
"worstRating": "1",
"reviewCount": 490,
"ratingValue": 10
}
}
</script>

完成主要訴求後,接下來便屬於錦上添花的部分,一方面讓資訊更加齊全、另一方面也希望呈現面可以更加的吸睛。

以 commerce site 來說,商品分類自然少不了,凡走過必留下痕跡,breadcrumb 的呈現不僅可以做有效的導引,更是有效建立 intralink 的手段之一。

Breadcrumb

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"item": {
"@id": "https://tw.bid.yahoo.com/amp/booth/Y5190288823",
"name": "全部分類"
}
},
{
"@type": "ListItem",
"position": 2,
"item": {
"@id": "https://tw.bid.yahoo.com/amp/booth/Y5190288823?cid=23000",
"name": "女裝飾品"
}
}
]
}
</script>

position 這個屬性需特別注意,它的起始值是 1,不是 0 喔!

像是這種列表類型的頁面,其實也可透過 Type ItemList 的添加,讓它在 Google Search Result Page 的呈現有機會出現 Carousel 的效果

Carousels

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "ItemList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"url": "https://tw.bid.yahoo.com/item/100586966878"
}, {
"@type": "ListItem",
"position": 2,
"url": "https://tw.bid.yahoo.com/item/100551969485"
}, {
"@type": "ListItem",
"position": 3,
"url": "https://tw.bid.yahoo.com/item/100430268264"
}, {
"@type": "ListItem",
"position": 4,
"url": "https://tw.bid.yahoo.com/item/100414959059"
}, {
"@type": "ListItem",
"position": 5,
"url": "https://tw.bid.yahoo.com/item/100400600950"
}, {
"@type": "ListItem",
"position": 6,
"url": "https://tw.bid.yahoo.com/item/100397319140"
}, {
"@type": "ListItem",
"position": 7,
"url": "https://tw.bid.yahoo.com/item/100397302812"
}, {
"@type": "ListItem",
"position": 8,
"url": "https://tw.bid.yahoo.com/item/100397301788"
}, {
"@type": "ListItem",
"position": 9,
"url": "https://tw.bid.yahoo.com/item/100394700526"
}, {
"@type": "ListItem",
"position": 10,
"url": "https://tw.bid.yahoo.com/item/100392200062"
}
]
}
</script>

position 這個屬性需特別注意,它的起始值是 1,不是 0 喔!

Structured data — ItemList
Structured data — ItemList

實際呈現的效果可以說是非常的搶眼,讓人愛不釋手。

既然是店家,難免會有舉辦活動的時候,像是這類資訊一樣可以透過 structured data 來進行設置。由於既有的 Type Store 已經有 event 這個欄位的設置,所以我們只要將相對應得 data sign 入,便可完成設定。

Event

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Store",
"name": "✿芥菜種鄉村雜貨✿",
...
...
"event": [
{
"@type": "Event",
"name": "全館2件98折",
"startDate": "2019-07-02T04:00:05Z",
"endDate": "2019-07-31T15:00:00Z",
"location": {
"@type": "Place",
"address": "http://schema.org/address",
"name": "Yahoo奇摩拍賣"
},
"image": ["https://s.yimg.com/ma/auc/item/icon/bg-coupon-group-vision-2.jpg"],
"description": "全館2件98折",
"offers": {
"@type": "Offer",
"url": "https://tw.bid.yahoo.com/coupon/group/7832",
"price": 10,
"priceCurrency": "TWD",
"availability": "https://schema.org/InStock",
"validFrom": "2019-07-02T04:00:05Z"
},
"performer": {
"@type": "PerformingGroup",
"name": "滿2000元95折滿4000元9折"
}
}
]
}
</script>
Structured data — Event
Structured data — Event

以上便是 booth 所使用到的 structured data,透過這些 data 的錯綜影響,真的讓呈現的效果變得更加實用且有趣。

item

item 即為單品頁,用來介紹商品資訊以及作為購買商品的主要入口。既然是商品,自然可以使用 Type Product 來做呈現

Product

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Product",
"name": "🔸現貨🔸 圓木護手香氛蠟燭 - Home Mali 家的味道 (麥香)《GoodGo宅物誌》",
"description": "🔸現貨🔸 圓木護手香氛蠟燭 - Home Mali 家的味道 (麥香)《GoodGo宅物誌》 | ",
"image": ["https://ct.yimg.com/xd/api/res/1.2/taIabLTap59LXUOMw3fGow--/YXBwaWQ9eXR3YXVjdGlvbnNlcnZpY2U7Zmk9ZmlsbDtoPTQwMDtxPTg1O3JvdGF0ZT1hdXRvO3c9NDAw/https://s.yimg.com/ob/image/90ab0008-274d-4dcc-b44c-ce931ea7d019.jpg", "https://ct.yimg.com/xd/api/res/1.2/cfLDi3LTcSbomghR0r40vA--/YXBwaWQ9eXR3YXVjdGlvbnNlcnZpY2U7Zmk9ZmlsbDtoPTQwMDtxPTg1O3JvdGF0ZT1hdXRvO3c9NDAw/https://s.yimg.com/ob/image/bac570f2-bfa0-472d-80e0-3b85688beb83.jpg", "https://ct.yimg.com/xd/api/res/1.2/kn7XtFehj0nlQPfqIIeR1Q--/YXBwaWQ9eXR3YXVjdGlvbnNlcnZpY2U7Zmk9ZmlsbDtoPTQwMDtxPTg1O3JvdGF0ZT1hdXRvO3c9NDAw/https://s.yimg.com/ob/image/92ff4e38-a89c-4cf6-b101-c4d25e871619.jpg", "https://ct.yimg.com/xd/api/res/1.2/Djqwi9fovcQvWhqUx4zHig--/YXBwaWQ9eXR3YXVjdGlvbnNlcnZpY2U7Zmk9ZmlsbDtoPTQwMDtxPTg1O3JvdGF0ZT1hdXRvO3c9NDAw/https://s.yimg.com/ob/image/768e8c67-a750-43d2-b0e0-4c8b09aa1974.jpg", "https://ct.yimg.com/xd/api/res/1.2/rHXVtQ.qArBScuwTYVHUbQ--/YXBwaWQ9eXR3YXVjdGlvbnNlcnZpY2U7Zmk9ZmlsbDtoPTQwMDtxPTg1O3JvdGF0ZT1hdXRvO3c9NDAw/https://s.yimg.com/ob/image/4ed40b46-489a-4c72-b851-3eb94dabe406.jpg", "https://ct.yimg.com/xd/api/res/1.2/eayyr7ec_93AF5j3z7rNCA--/YXBwaWQ9eXR3YXVjdGlvbnNlcnZpY2U7Zmk9ZmlsbDtoPTQwMDtxPTg1O3JvdGF0ZT1hdXRvO3c9NDAw/https://s.yimg.com/ob/image/1fd54c43-7b19-426d-abfa-580174922a67.jpg"],
"url": "https://tw.bid.yahoo.com/item/%F0%9F%94%B8%E7%8F%BE%E8%B2%A8%F0%9F%94%B8-%E5%9C%93%E6%9C%A8%E8%AD%B7%E6%89%8B%E9%A6%99%E6%B0%9B%E8%A0%9F%E7%87%AD-Home-Mali-%E5%AE%B6%E7%9A%84%E5%91%B3%E9%81%93-%E9%BA%A5-100582825312",
"sku": "100582825312",
"offers": {
"@type": "Offer",
"priceCurrency": "TWD",
"priceValidUntil": "2020-07-24",
"price": 380,
"itemCondition": "http://schema.org/NewCondition",
"availability": "http://schema.org/InStock",
"url": "https://tw.bid.yahoo.com/item/%F0%9F%94%B8%E7%8F%BE%E8%B2%A8%F0%9F%94%B8-%E5%9C%93%E6%9C%A8%E8%AD%B7%E6%89%8B%E9%A6%99%E6%B0%9B%E8%A0%9F%E7%87%AD-Home-Mali-%E5%AE%B6%E7%9A%84%E5%91%B3%E9%81%93-%E9%BA%A5-100582825312",
"seller": {
"@type": "Organization",
"name": "GoodGo宅物誌--泰國好設計"
}
},
"releaseDate": "2019-04-10",
"brand": {
"@type": "Store",
"name": "GoodGo宅物誌--泰國好設計",
"description": "GoodGo 宅物誌,用雜誌的概念呈現商品,與你一起看最貼近生活的設計。與多位設計師合作,一起用最簡樸的雙手製作最純粹的設計 ! 除了設計師款,我們也提供實用與趣味兼具的居家雜貨,好東西想與你一起分享。",
"logo": "https://ct.yimg.com/cy/1768/39361574426_98028a_192sq.jpg",
"image": "https://ct.yimg.com/cy/1768/39361574426_98028a_192sq.jpg",
"currenciesAccepted": "TWD",
"paymentAccepted": "cash,ATM,web ATM,credit card",
"openingHours": "Mo,Tu,We,Th,Fr,Sa,Su 00:00-23:59",
"address": "http://schema.org/address",
"telephone": "http://schema.org/telephone",
"url": "https://tw.bid.yahoo.com/booth/Y9170837100",
"priceRange": "$$$",
"aggregateRating": {
"@type": "AggregateRating",
"bestRating": "10",
"worstRating": "1",
"reviewCount": 684,
"ratingValue": 9
}
}
}
</script>

絕大部分的屬性只要參照文件設定即可,其中一個屬性 brand 在這裡便是要塑造 Seller 的品牌,所以我們可以直接使用 booth 中 Store 屬性,不僅建立起關聯,更讓資料能具備一致性。﹙既然使用了 Store 屬性,自然也可以在這裡喂入 Event ,豐富其呈現﹚

商品圖片的部分則須注意其呈現的比例,請使用 1:14:3 或是 16:9 的比例, format 的部分則限制為 jpg / png / gif

由於 Type Product — sku 的設置,如果該關聯有順利建立的話,即使是只有拍賣商品編號,我們依舊可以直接在 Google Search 透過商品編號直接找到相對應的商品。

Structured data — Product (sku)
Structured data — Product (sku)

Breadcrumb、Corporate Contact 以及 Logo 的設置則如上段文章所述,便不再一一介紹陳述。

Yahoo奇摩拍賣的商品由於可以 key in embed 的 video 網址,所以筆者有偵測如果商品具備該資料,則另外添加 Type VideoObject 。如此便有機會在 Google Video Search 中有露出的機會。

Video

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "VideoObject",
"name": "🔸現貨🔸 圓木護手香氛蠟燭 - Home Mali 家的味道 (麥香)《GoodGo宅物誌》",
"description": "🔸現貨🔸 圓木護手香氛蠟燭 - Home Mali 家的味道 (麥香)《GoodGo宅物誌》 | ",
"thumbnailUrl": ["https://ct.yimg.com/xd/api/res/1.2/taIabLTap59LXUOMw3fGow--/YXBwaWQ9eXR3YXVjdGlvbnNlcnZpY2U7Zmk9ZmlsbDtoPTQwMDtxPTg1O3JvdGF0ZT1hdXRvO3c9NDAw/https://s.yimg.com/ob/image/90ab0008-274d-4dcc-b44c-ce931ea7d019.jpg", "https://ct.yimg.com/xd/api/res/1.2/cfLDi3LTcSbomghR0r40vA--/YXBwaWQ9eXR3YXVjdGlvbnNlcnZpY2U7Zmk9ZmlsbDtoPTQwMDtxPTg1O3JvdGF0ZT1hdXRvO3c9NDAw/https://s.yimg.com/ob/image/bac570f2-bfa0-472d-80e0-3b85688beb83.jpg", "https://ct.yimg.com/xd/api/res/1.2/kn7XtFehj0nlQPfqIIeR1Q--/YXBwaWQ9eXR3YXVjdGlvbnNlcnZpY2U7Zmk9ZmlsbDtoPTQwMDtxPTg1O3JvdGF0ZT1hdXRvO3c9NDAw/https://s.yimg.com/ob/image/92ff4e38-a89c-4cf6-b101-c4d25e871619.jpg", "https://ct.yimg.com/xd/api/res/1.2/Djqwi9fovcQvWhqUx4zHig--/YXBwaWQ9eXR3YXVjdGlvbnNlcnZpY2U7Zmk9ZmlsbDtoPTQwMDtxPTg1O3JvdGF0ZT1hdXRvO3c9NDAw/https://s.yimg.com/ob/image/768e8c67-a750-43d2-b0e0-4c8b09aa1974.jpg", "https://ct.yimg.com/xd/api/res/1.2/rHXVtQ.qArBScuwTYVHUbQ--/YXBwaWQ9eXR3YXVjdGlvbnNlcnZpY2U7Zmk9ZmlsbDtoPTQwMDtxPTg1O3JvdGF0ZT1hdXRvO3c9NDAw/https://s.yimg.com/ob/image/4ed40b46-489a-4c72-b851-3eb94dabe406.jpg", "https://ct.yimg.com/xd/api/res/1.2/eayyr7ec_93AF5j3z7rNCA--/YXBwaWQ9eXR3YXVjdGlvbnNlcnZpY2U7Zmk9ZmlsbDtoPTQwMDtxPTg1O3JvdGF0ZT1hdXRvO3c9NDAw/https://s.yimg.com/ob/image/1fd54c43-7b19-426d-abfa-580174922a67.jpg"],
"uploadDate": "2019-04-10",
"embedUrl": "https://youtu.be/-E62l6P1J5w"
}
</script>
Structured data — Video
Structured data — Video

拍賣的商品頁有提供「 問與答」的功能,讓買賣家都可以在這裡提問與回覆,方便買家買到確切且自己心儀的商品,像這類資訊其實也有個 structured data 呈現非常適合這類資料,該形態即是 QAPage。

QAPage

透過 QAPage 型態的添加,便有機會在搜尋結果下方多了一個 Q&A 呈現的區塊,不僅大大增加商品的可見度也無形增加其競爭力。

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "QAPage",
"mainEntity": {
"@type": "Question",
"name": "請問咖啡色的話是深色還是淺色現貨的呢?如果是深色咖啡色 那我在下標深咖啡色小錶徑ㄧ只 因為是要送人的 所以請問訂製需要多少工作天數?",
"text": "請問咖啡色的話是深色還是淺色現貨的呢?如果是深色咖啡色 那我在下標深咖啡色小錶徑ㄧ只 因為是要送人的 所以請問訂製需要多少工作天數?",
"answerCount": 1,
"dateCreated": "2016-10-06T09:15:36.000Z",
"author": {
"@type": "Person",
"name": "Rizka"
},
"acceptedAnswer": [{
"@type": "Answer",
"text": "您好,目前小錶面現貨的款式就是賣場圖中,咖啡色對錶 (左上角有一隻小兔子的那張圖) 的小錶面的款式,是淺咖啡色錶帶的。我們一般會在下標的當天或隔天出貨,超商配送約 2 個工作天,您可以參考看看,或是有任何不清楚的地方歡迎隨時詢問我們喔 :)",
"dateCreated": "2016-10-06T09:30:55.000Z",
"url": "https://tw.bid.yahoo.com/item/100264388465?showTab=mod-qna",
"author": {
"@type": "Person",
"name": "GoodGo宅物誌--泰國好設計"
}
}]
}
}
</script>

使用 QAPage 有兩個需要特別注意的地方﹕

  • 一個頁面只有能有一個 QAPage 屬性。
  • 要在 Search result 呈現 Q&A 小卡 的先決條件就是 — 至少要有一對 Question 以及 Answer 。
Structured data — Q&A
Structured data — Q&A

以上便是筆者於 Yahoo 奇摩拍賣 的幾個主要頁面設置 structured data 的實戰分享,了解頁面屬性並適時的添加錦上添花的 data,便有機會讓 Google Search Result Page 中的呈現變得更有有趣,何樂而不為?

Review & review all the time

完成 structured data 的設置並將之 release 到 production 著實是一件令人興奮的事情,不過開心之餘切勿忘了要勤加檢查是否還有 Validation Error 存在。

我們可以透過 Google Search Console 的資料,來觀察當前 index building 是否健康;以及是否有改進的空間存在。

Google Search Console

被動的等待 search index 總會令人感到無力且曠日費時,其實,我們也可以透過 Google Search console > 網址審查 > 要求建立索引 的功能來強制要求建立 index,便可以快速的直接在線上進行 structured data 的測試。﹙筆者也常用這招來快速地進行測試﹚

Search Console — 網址審查

此外,Google structured data 支援度常有異動,今天做對了,不代表它永遠都會是對的,應養成常常閱讀文件的習慣,方能與時俱進,不畏任何的挑戰。

Reference

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade