結構化資料之「活動」範例(Part 1)

結構化資料之「活動」範例

圖片來源: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 空總創新基地 - 空軍總部舊址中正堂, 台灣」。使用者不但能在搜尋結果知道活動標題、短描述和網址外,還能馬上知道日期(區間)、地點。

搜尋結果-資策會數據創新應用黑客松 IDEAS Tech Hackathon

或來看一個比較跳 tone 的範例 - 搜尋「葡萄柚茶」,居然出現了菜單。

搜尋結果-葡萄柚茶

回到結構化資料之「活動」範例,剛好我和夥伴們即將舉行一場讀書會…

活動平台行動裝置網站或App設計的現狀探討與改進

活動頁面上有活動時間和地點等資訊,我也希望能在搜尋結果上出現,就必須使用結構化資料來標記。關於活動,我們可以參考

程式碼範例

我也希望自己的活動在搜尋結果上有這樣的效果,於是做個結構化資料的標記。

點此看程式碼範例

[註] 程式碼片段是有美化過的噢,刪除了一些範例中不需要用到的部份。

測試結果

Structured Data Testing Tool 測試,可以直接貼網址或程式碼,看看有沒有欄位缺少、格式有誤或相關建議。

結構化資料之「活動」範例

看來一切 OK,那就提交給搜尋引擎,等待結果摟。

搜尋結果

可以顯示活動時間與地點,由於這次是使用 Data-Vocabulary.org 的規範,並無提供經緯度(也沒有活動圖片),因此點擊地點之後會到活動頁面,而非地圖。

結果 1

地點顯示 Facebook 粉絲頁連結,但點了之後其實還是到活動頁面。

結構化資料之「活動」範例

結果 2

描述抓到一些害羞的內容…於是遮起來(羞)。

結構化資料之「活動」範例

結果 3

列表呈現。

結構化資料之「活動」範例

遇到的問題

結構化資料測試工具 - Structured Data Testing Tool 測試沒有問題,但仍無法在搜尋結果上出現其活動時間、地點?

原因

等等相關的疑難雜症都可以參考-SERP Optimization – Schema Structured DataFAQ: Rich Snippets - Google Webmaster Help。而我這次遇到的問題是網站不夠龐大,因此特別製造了 1000 筆活動假資料來測試。感謝食夢黑貘大大提點網站頁面量必須超過 300 頁才能顯示

同場加映 - 資料螢光筆(Data Highlighter)

如果覺得使用結構化資料很麻煩,那就試試看資料螢光筆。它的功能其實是有限制的,必須仰賴畫面上看得見的資訊來提供資料,像是經緯度這種會用<meta>標籤標註給搜尋引擎看但使用者看不到的,就無法使用資料螢光筆來標註了。

後記

續集-結構化資料之「活動」範例 (Part 2) - 使用 Microdata 與 JSON-LD:使用 Microdata 與 JSON-LD 來標記資訊,並記錄更多實作上的疑難雜症。

推薦閱讀


這篇文章的原始位置在這裡-結構化資料之「活動」範例(Part 1)

由於部落格搬遷至此,因此在這裡放了一份,以便閱讀;部份文章片段也做了些許修改,以期提供更好的內容。
comments powered by Disqus