巧用GTM实现结构化数据SEO

在2014年,极诣介绍了如何使用Schema.org实现结构化数据从而让搜索引擎更好地了解你的网页内容。当时我们的教程中用Microdata标记对网页中的内容进行了标注。在过去的一周里作者Chris Goddard在Moz Blog发布了另一篇使用JSON-LD标签来实现同样效果的文章。实现方法是通过GTM的Custom HTML Tag。好在极诣的忠实读者们应该有相当一部分对GTM有一定的了解,另一方面极诣也时常发布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抓取网页的任意元素和内容

极诣在几个月前曾经教大家如何使用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工具,传送门在此