iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 25
2
Modern Web

Google Tag Manager Micro Challenge系列 第 25

GTM 25 - 透過 Tag Manager 來建立結構化資料(Structured Data) - 文章資訊(JSON-LD)

GTM 社團


如果網站中有文章 (Article) 的資訊,可以試著用 JSON-LD 去描述,這樣在 Google 的搜尋結果頁(SERP)有機會可以看到比較不一樣的資訊呈現,如下圖所示:

https://ithelp.ithome.com.tw/upload/images/20171212/20107582j97xrYmvHa.png
[來源:Google Developers]

而文章的 JSON-LD 的格式,如下圖所示:

https://ithelp.ithome.com.tw/upload/images/20171212/20107582SdiBnZQ5QN.png
[詳細資訊,請參考:Google Developers]

格式確定好之後,即可透過 Google Tag Manager 的 Custom HTML Tag 加到網站中,但上述的一些資料都是變動的,無法像之前網站資訊的 JSON-LD 寫固定的資訊。因此,有些資訊如果在頁面上可以取得的話,就可以透過 Custom Javascript Variable 的方式取得,如下圖所示:

https://ithelp.ithome.com.tw/upload/images/20171212/20107582XyT6yASwfC.png

透過 querySelector 的方式取得 meta 的資訊,再存到變數中,這樣 Article 的 JSON-LD,就可以直接引用這個變數,每次載入不同的文章頁時,塞入對應的資料到 JSON-LD 中,如下圖所示,變數的部份用兩個大括號括起來,ex:{{JS - Article Title}}。

https://ithelp.ithome.com.tw/upload/images/20171212/20107582HTjFD62twt.png

Trigger 就放載入文章頁的時候,接著再發佈(Publish)出去就可以上【Google 結構資料測試工具】上去驗證一下哦!

貼心提醒,不是在文章加上 Article 的 JSON-LD 就表示在搜尋結果頁就一定看到不一樣的資訊呈現,主要還是看 Google 的演算法如何去判斷,但這是 Google 提供的規範,有遵守的話相信對 SEO 應該會有一定程度的幫助的!

過一段時間也可以上 Search Console,看看自己的結構化資料是否有顯著的成長!

https://ithelp.ithome.com.tw/upload/images/20171212/20107582h6unCPIh23.png

完整的原文在這:https://moz.com/blog/using-google-tag-manager-to-dynamically-generate-schema-org-json-ld-tags

主要的概念就是:

  1. 把文章頁面所需要的變數用 GTM 的 Variable (變數)設定好,ex:文章標題、描述、發佈時間、作者 (這部份需要會一點 JS、HTML 和 CSS 的概念)
  2. 用 GTM 的 Custom HTML Tag 把 JSON-LD 的格式套用進去,並把變數放到對應的位置上(變數是雙大括號包起來的,ex:{{文章標題}})
  3. 在 JSON-LD 的 Tag 中加上 Trigger,如果網址符合特定格式,ex:https://www.example.com/article/[文章 ID],Trigger 就可以設定為 Page Path start with /article/
  4. 最後再進發佈和測試即完成

歡迎來職涯社群的 GTM 社團一起討論哦!
原文章


上一篇
GTM 24 - 透過 Tag Manager 來建立結構化資料(Structured Data) - 網站資訊(JSON-LD)
下一篇
GTM 26 - 番外篇 - 如何實作 Openseach 於網站中,在 Chrome 輸入網址後按 Tab 就可以直接搜尋網站內容
系列文
Google Tag Manager Micro Challenge30

1 則留言

0
dancegame
iT邦新手 5 級 ‧ 2018-01-12 13:19:38

結構化資料真的很重要,每年分數比重應該是越來越高吧...

我要留言

立即登入留言