如何用GTM和JS自动生成结构化数据？

4月3日，谷歌开发新增文档《Generate structured data with JavaScript》，该文档提供了使用Google Tag Manager对文档进行自动添加结构化数据的方法。鉴于该文档并不是特别具体，极诣本篇为各位GTM爱好者和SEO提供一种简单的实现方式。

决定部署哪种结构化数据

闲话少说，首先我们要考虑我们需要部署哪种格式化数据。最容易的方法是去TechnicalSEO.com找到Schema Markup Generator (JSON-LD)工具。在下拉菜单中选择你想要部署的结构化数据。

在这里的例子中，我们选择Article。

右侧自动生成的JSON-LD格式的结构化数据就是我们需要的输出。我们先保存这段JSON。

在GTM中生成需要的各字段变量

我们来到GTM，新建一个Variable。就拿标题为例，照搬谷歌开发文档中的JS代码：

注意，此处我们返回的是HTML文档中<title></title>标签中的内容。而其实我们也可以使用正文中的标题。你可以用以下代码替换掉上面截屏中的代码。

<script type="text/javascript">
function() { 
  return document.querySelector('h2[class="entry-title"]').innerText; 
}
</script>

上面代码中我们寻找了第一个class为entry-title的H2标签并返回了其文本。

类似地，我们可以获得所有我们需要插入的数据：

那么我们接下来便可以直奔主题了。

新建JSON-LD标签

在第三步中，我们新建一个Custom HTML标签，见下图。

这里的内容其实就是我们在TechnicalSEO.com上打的草稿略作修改。细心的读者一定发现我们把标题、描述等值换成了我们刚刚定义的变量。

至此我们只需要添加一个触发条件并保存便可以发布。

验证效果

最后，我们可以进入Preview模式验证一下效果。我们可以在Chrome浏览器中按下F12进入DevTools，在Elements中我们可以看到在HTML的底部会有我们新添加的Custom HTML Tag标签，其中有我们插入的变量。

验证通过后我们便大功告成。别忘了发布后再去Google Search Console的Rich Result Test测试下。

[notification type=”alert-success” close=”false” ]小贴士：Rich Result Test只有Schema的一部分子集，所以会出现Unnamed。而Structured Data Testing Tool才有全部的定义，但是SDTT并不会对你的页面进行渲染。两者各有优缺点。[/notification]

写在最后

一些GTM的熟练工或许已经发现，在页面上抓取内容的方式很多，JS也有多种写法，甚至不用JS！我们可以用DOM Element加上CSS Selector来实现。

有趣吗？希望你玩得开心！