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

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

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

(圖片來源:How To Add Rich Snippets To Your WP Blog Posts The Easy Way)

「Promote Your Content with Structured Data Markup」,搜尋引擎愈來愈人性化,提供愈來愈多實用的資料給使用者做決策。因此,前端工程師的切版不再只是依照設計稿呈現美麗的畫面和特效而已,還要能利用結構化資料,讓網站內容在SERPs上顯示更多資訊。拿活動來說,如下圖紅框所示,搜尋活動「資策會數據創新應用黑客松 IDEAS Tech Hackathon」,第三則結果出現了活動時間「7月25日 - 7月26日」和活動地點「TAF空總創新基地-空軍總部舊址中正堂, 台灣」。使用者不但能在SERPs知道活動標題、短描述和網址外,還能馬上知道日期(區間)、地點。

SERPs

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

Rich Snippet

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

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

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

程式碼範例

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

點此看程式碼範例

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

測試結果

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

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

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

搜尋結果

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

結果1

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

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

結果2

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

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

結果3

列表呈現。

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

遇到的問題

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

這個問題的原因可能是

  • 結構化資料可能沒被搜尋引擎看懂?資料不夠完備,欄位有誤或缺失?格式不正確?
  • 網站不夠龐大

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

關於資料螢光筆(Data Highlighter)

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


推薦閱讀

工具


由於部落格搬家了,因此在新落格也放了一份,未來若有增刪會在這裡更新-結構化資料之「活動」範例 (Part 1)
張貼留言