結構化資料之「活動」範例(Part 1)
18 Jun 2015圖片來源:How To Add Rich Snippets To Your WP Blog Posts The Easy Way
「Promote Your Content with Structured Data Markup」,搜尋引擎愈來愈人性化,提供愈來愈多實用的資料給使用者做決策。因此,前端工程師的切版不再只是依照設計稿呈現美麗的畫面和特效而已,還要能利用結構化資料,讓網站內容在搜尋結果上顯示更多資訊。拿活動來說,如下圖紅框所示,搜尋活動「資策會數據創新應用黑客松 IDEAS Tech Hackathon」,第三則結果出現了活動時間「7 月 25 日 - 7 月 26 日」和活動地點「TAF 空總創新基地 - 空軍總部舊址中正堂, 台灣」。使用者不但能在搜尋結果知道活動標題、短描述和網址外,還能馬上知道日期(區間)、地點。
或來看一個比較跳 tone 的範例 - 搜尋「葡萄柚茶」,居然出現了菜單。
回到結構化資料之「活動」範例,剛好我和夥伴們即將舉行一場讀書會…
活動頁面上有活動時間和地點等資訊,我也希望能在搜尋結果上出現,就必須使用結構化資料來標記。關於活動,我們可以參考
- Enabling Rich Snippets for Events:Google 的官方文件上有範例、欄位說明
- Event - schema.org:對於每一個必要/非必要欄位都有清楚定義和範例
- 當然也可以打開原始碼檢視,看看目前當紅的活動網站是怎麼做的
程式碼範例
我也希望自己的活動在搜尋結果上有這樣的效果,於是做個結構化資料的標記。
[註] 程式碼片段是有美化過的噢,刪除了一些範例中不需要用到的部份。
測試結果
到 Structured Data Testing Tool 測試,可以直接貼網址或程式碼,看看有沒有欄位缺少、格式有誤或相關建議。
看來一切 OK,那就提交給搜尋引擎,等待結果摟。
搜尋結果
可以顯示活動時間與地點,由於這次是使用 Data-Vocabulary.org 的規範,並無提供經緯度(也沒有活動圖片),因此點擊地點之後會到活動頁面,而非地圖。
結果 1
地點顯示 Facebook 粉絲頁連結,但點了之後其實還是到活動頁面。
結果 2
描述抓到一些害羞的內容…於是遮起來(羞)。
結果 3
列表呈現。
遇到的問題
結構化資料測試工具 - Structured Data Testing Tool 測試沒有問題,但仍無法在搜尋結果上出現其活動時間、地點?
原因
- 結構化資料可能沒被搜尋引擎看懂?資料不夠完備,欄位有誤或缺失?格式不正確?
- 網站不夠龐大
等等相關的疑難雜症都可以參考-SERP Optimization – Schema Structured Data或 FAQ: Rich Snippets - Google Webmaster Help。而我這次遇到的問題是網站不夠龐大,因此特別製造了 1000 筆活動假資料來測試。感謝食夢黑貘大大提點網站頁面量必須超過 300 頁才能顯示。
同場加映 - 資料螢光筆(Data Highlighter)
如果覺得使用結構化資料很麻煩,那就試試看資料螢光筆。它的功能其實是有限制的,必須仰賴畫面上看得見的資訊來提供資料,像是經緯度這種會用<meta>
標籤標註給搜尋引擎看但使用者看不到的,就無法使用資料螢光筆來標註了。
後記
續集-結構化資料之「活動」範例 (Part 2) - 使用 Microdata 與 JSON-LD:使用 Microdata 與 JSON-LD 來標記資訊,並記錄更多實作上的疑難雜症。
推薦閱讀
- 初探 JSON-LD & microdata:前輩 Paul Li 的文章,介紹 JSON-LD 與 Microdata。
- FAQ: Rich Snippets - Google Webmaster Help:結構化資料的疑難雜症的解答。
這篇文章的原始位置在這裡-結構化資料之「活動」範例(Part 1)
由於部落格搬遷至此,因此在這裡放了一份,以便閱讀;部份文章片段也做了些許修改,以期提供更好的內容。