結構化資料之「活動」範例 (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 Data或FAQ: Rich Snippets - Google Webmaster Help。而我這次遇到的問題是網站不夠龐大，因此特別製造了1000筆活動假資料來測試。感謝食夢黑貘大大提點網站頁面量必須超過300頁才能顯示。

關於資料螢光筆(Data Highlighter)

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

推薦閱讀

工具

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

留言

張貼留言