結構化資料之「活動」範例(Part 2)- 使用 Microdata 與 JSON-LD

結構化資料之「活動」範例(Part 2)- 使用 Microdata 與 JSON-LD

圖片來源:WEBAFFIX

在上一個範例-結構化資料之「活動」範例(Part 1)中使用的規範是 Data-Vocabulary.org,這次改用 Microdata 與 JSON-LD,並記錄更多實作上的疑難雜症。

範例

我們的目標是將(1)活動在搜尋結果頁搜尋結果頁上呈現 Rich Snippets 的效果,最好還可以(2)推薦活動。

結構化資料之「活動」範例(Part 2)- 使用 Microdata 與 JSON-LD

類似這樣的結果…

結構化資料之「活動」範例(Part 2)- 使用 Microdata 與 JSON-LD

還有…

結構化資料之「活動」範例(Part 2)- 使用 Microdata 與 JSON-LD

Microdata

欄位包含:活動名稱、描述、時間、地點(地點名稱、描述、地址、經緯度)、連結。

<article itemscope itemtype="http://schema.org/Event">
  <h2 itemprop="name">活動平台行動裝置網站或 App 設計的現狀探討與改進</h2>
  <div class="entry-content" itemprop="description">一些描述...</div>
  <div class="meta">
    <span class="time">July 3, 2015</span>
    <meta itemprop="startDate" content="2015-07-03T19:00">
    <span itemprop="location" itemscope itemtype="http://schema.org/Store">
      <span itemprop="name">Peekaboo Coffee 彼咖舖咖啡</span>
      <meta itemprop="description" content="Peekaboo Coffee 彼咖舖咖啡">
      <div class="placeDetail">
        <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
          <meta itemprop="streetAddress" content="忠孝東路三段251巷7弄2號">
          <meta itemprop="addressLocality" content="台北市">
          <meta itemprop="addressCountry" content="台灣">
        </div>
        <div itemprop="geo" itemscope itemtype="http://schema.org/GeoCoordinates">
          <meta itemprop="latitude" content="25.0429298">
          <meta itemprop="longitude" content="121.54177379999999">
        </div>
      </div>
    </span>
    <a href="http://sample.com/Event?id=1" itemprop="url">活動內容/筆記</a>
  </div>
</article>

JSON-LD

欄位包含:活動名稱、連結、時間、地點(地點名稱、地址)。

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type" : "Event",
  "name" : "活動平台行動裝置網站或 App 設計的現狀探討與改進",
  "url" : "http://cythilya.apphb.com//Me/Activity?id=1",
  "location": {
    "@type" : "Place",
    "name" : "Peekaboo Coffee 彼咖舖咖啡",
    "address" : "台灣 台北市 忠孝東路三段251巷7弄2號"
  },
  "startDate": "2015-07-03T19:00"
}
</script>

測試

Event 1 是 JSON-LD 的驗證結果,Event 2 是 Microdata 的驗證結果。

結構化資料之「活動」範例(Part 2)- 使用 Microdata 與 JSON-LD

看起來沒什麼問題,就提交給搜尋引擎摟!

搜尋結果

活動在搜尋結果頁上有 Rich Snippets 的效果,出現了活動時間、地點。

結構化資料之「活動」範例(Part 2)- 使用 Microdata 與 JSON-LD

推薦活動

活動列表上出現了三筆跟這個活動有關的(推薦活動)。

結構化資料之「活動」範例(Part 2)- 使用 Microdata 與 JSON-LD

(1)和(2)都達到了。

下面紀錄一些實作上的疑難雜症,如果看了覺得頭很昏就不要繼續看下去了

遇到的問題 / 解法

1. 地點顯示為 Facebook 粉絲頁網址

雖然有看到正確的顯示,但有幾個搜尋結果怪怪的 XD

這是正常顯示的情況,日期和地點都正確。

結構化資料之「活動」範例(Part 2)- 使用 Microdata 與 JSON-LD

手機網頁的搜尋結果超可愛的啦!(硬要放)

結構化資料之「活動」範例(Part 2)- 使用 Microdata 與 JSON-LD

下面這是將地點顯示為 Facebook 粉絲頁網址的例子…

結構化資料之「活動」範例(Part 2)- 使用 Microdata 與 JSON-LD

這是因為我把標記這個屬性itemprop="name"的標籤放了網址,以後還是要分開放阿,避免誤會。

<a href="https://www.facebook.com/PeekabooCoffee" target="_blank" itemprop="name">
  Peekaboo Coffee 彼咖舖咖啡
</a>

於是更正為(1)

<span itemprop="name">Peekaboo Coffee 彼咖舖咖啡</span>

或改為(2)

<a class="shopName" href="https://www.google.com.tw/maps/place/台北市忠孝東路三段251巷7弄2號" target="_blank">
  Peekaboo Coffee 彼咖舖咖啡
</a>

對照組使用(2),於是可正確呈現地區(無地點名)!

結構化資料之「活動」範例(Part 2)- 使用 Microdata 與 JSON-LD

但還有其他狀況和例外的…等等會在「3. 提供活動地址和經緯度後,點擊地點後怎麼沒有連到 Google Map?」說明各種狀況。

2. 搜尋特定關鍵字能找到活動之外,也能有 Rich Snippets 效果的呈現

不管是在上一篇文章結構化資料之「活動」範例(Part 1) 或這次實驗中,都發現多多少少有這樣的問題,並不是每個頁面被搜尋出來的時候都有 Rich Snippets 效果。

像是下圖,只有標記藍框的這一則出現…

結構化資料之「活動」範例(Part 2)- 使用 Microdata 與 JSON-LD

還有… :(

結構化資料之「活動」範例(Part 2)- 使用 Microdata 與 JSON-LD

目前我的實驗結果是這樣…無法期待位於同一個平台的同一個活動,利用(各種)不同關鍵字做搜尋的搜尋結果都出現 Rich Snippets。如果真的要檢視是否有效果,可用 site 指令。

3. 提供活動地址和經緯度後,點擊地點後怎麼沒有連到 Google Map?

修理完 FB 粉絲頁的狀況,本來預計提供活動地址和經緯度,點擊地點後可以連到 Google Map 頁面做路線規劃,但沒想到還是連到活動頁面(用起來就不人性化了,有點失落)。於是我很傻氣的為了加上地圖用了各種方法測試是否能在點擊後連到 Google Map…不然提供經緯度要做什麼哩?

關於位置顯示/地圖的測試,我大概試了幾種方式:

總結

看到這裡開始有點疑惑,能否出現或出現什麼要怎麼實作呢?總結一下好啦~

從 SEO 的角度來看單頁的設計,單頁上若有推薦相關活動或文章(新聞)的區塊,除了可以增加內部連結,讓 crawler 更好爬、爬更多之外,也是讓 Rich Snippets 揭露更多資訊的好方法。

後記

前情提要-結構化資料之「活動」範例(Part 1)

推薦閱讀


這篇文章的原始位置在這裡-結構化資料之「活動」範例(Part 2)- 使用 Microdata 與 JSON-LD

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