巧用GTM實現結構化數據SEO

Photo of author
Written By CMO

在2014年,HubSpot One介紹瞭如何使用Schema.org實現結構化數據從而讓搜索引擎更好地了解你的網頁內容。當時我們的教程中用Microdata標記對網頁中的內容進行了標註。在過去的一周裡作者Chris Goddard在Moz Blog發布了另一篇使用JSON-LD標籤來實現同樣效果的文章。實現方法是通過GTM的Custom HTML Tag。好在HubSpot One的忠實讀者們應該有相當一部分對GTM有一定的了解,另一方面HubSpot One也時常發布GTM相關的教程,希望這篇博文對你來說不會造成太大的閱讀困難。

SEO和結構化數據
SEO和結構化數據

GTM實現動態結構化數據SEO的技術前提

我們知道GTM對網頁內容的改變是通過JavaScript來實現的。如果我們想通過前端實現JSON-LD標籤的動態插入,那麼其先決條件便是搜索引擎必須去跑你頁面中的JavaScript腳本。 2015年8月,美庫爾RKG的SEO團隊成功驗證了並在SearchEngineLand發表了他們的實驗結果,谷歌會去嘗試運行JavaScript腳本並根據運行後的結果記錄DOM元素的內容。這篇文章是2015年SearchEngineLand上最受歡迎的閱讀量最多的文章之一。

JavaScript和DOM元素如何協同工作
JavaScript和DOM元素如何協同工作

在這篇文章中,Adam Audette引用了Google Webmaster Tools官方部落格的內容,旁證了谷歌對JavaScript在抓取頁面中的作用。 document.write會在抓取之前被運行。

用GTM抓取網頁的任意元素和內容

HubSpot One在幾個月前曾經教大家如何使用GTM來抓取任意網頁中的某一段內容。這可以是HTML標籤中的文本,也可以是標籤某一屬性的值。當時使用的方法是通過HTML標籤的id屬性來定位。

新建一個DOM Element變量自動抓取ID為特定值的元素的文本內容
新建一個DOM Element變量自動抓取ID為特定值的元素的文本內容

機智的你可能會發現GTM還有另一種定位方法就是用CSS選擇器。之所以沒有推薦是因為國情原因一部分瀏覽器還停留在IE7,並不支持這種做法。 (IE8支持CSS選擇器v2.1)。通過Moz的文章我們看到了另一種querySelector的方法,同樣無法支持IE7。隨著時間的推移這部分問題將不再成為問題。

通過CSS選擇器獲取頁面title元素的內容
通過CSS選擇器獲取頁面title元素的內容
另一個例子,獲取特定meta標籤中,屬性為content的值
另一個例子,獲取特定meta標籤中,屬性為content的值

在上面這個例子中你可以返回代碼<meta property =” article:published_timecontent =” 2016-02-24T20:05:36+08:00 “/>中的值,這裡是2016-02-24T20:05:36+08:00。

通過queryselector為無法通過CSS選擇器賦值的變量賦值
通過queryselector為無法通過CSS選擇器賦值的變量賦值

另外GTM也提供了許多內建的變量,包括頁面路徑、來源引用、域名、URL等。

動態插入結構化數據屬性的方法

就像前面所描述的那樣,當滿足一定的條件時,我們只要觸發一個Custom HTML Tag就可以。在<script type=”application/ld+json”>…</script>標籤內我們可以插入一個JSON對象:

想當然的插入variable,可行嗎?
想當然的插入variable,可行嗎?

但是問題來了,對於不同頁面對象的各個屬性的值是不同的。如果我們存粹地調用variable的值會造成錯誤:

直接插入variable造成解析錯誤
直接插入variable造成解析錯誤

因此我們需要用另一種解決方法,就是先建立一個JavaScript對象,再通過stringify轉換成JSON對象。

建立一個js對象,字符串化後插入到<head></head>中
建立一個js對象,字符串化後插入到<head>中

這樣就不會出現以上的error實現了自動插入。

我們剩下要做的那就只是去過濾哪些頁面我們需要進行這段結構化數據的插入便可。關於Trigger的用法,我們曾經講過多次,限於篇幅,不再贅述。

Closing Word

結構化數據是非常有效的SEO手段,國內的幾家搜索引擎也逐漸開始解析網頁內的結構化標籤了。要大面積部署結構化數據離不開程序員的努力,但是作為行銷人員一樣可以通過GTM來實現動態插入結構化數據。沒錯,SEO是數字行銷陣營的基層工作者。

我們講瞭如何獲取結構化數據,抓取已經存在於頁面內的內容,然後演示瞭如何將這些數據用Json-LD的格式呈現在源代碼中,希望能對你有所幫助。最後分享一個JSON-LD Schema工具,傳送門在此。