回到主页

使用Google跟踪代码管理器动态生成架构/ JSON-LD标签

今年早些时候在波特兰的SearchFest最大的收获之一是语义搜索和结构化数据的重要性迅速上升 - 特别是Schema.org。虽然实现Schema过去需要对站点的标记进行大量更改,但JSON-LD格式创建了一个很好的替代方法,可以使用最少的代码向页面添加微数据。

从他的SearchFest演讲“ 理解和促进语义搜索 ”中查看Mike Arnesen的演出,以获得有关使用结构化数据的精彩概述。

更令人兴奋的是,您可以使用Google跟踪代码管理器将JSON-LD插入到页面中,允许您将网站标记添加到您的网站,而无需直接触摸网站的代码(换句话说,没有来回与IT部门)。

麻烦的是,虽然看起来Tag Manager会让您在页面上插入JSON-LD片段没有问题,但似乎无法使用其他跟踪代码管理器功能来动态生成该代码段。Tag Manager允许您使用CSS选择器或一些基本JavaScript从页面中提取内容来创建变量。然后可以在您的标签中动态使用这些变量(查看Mike关于语义分析的帖子,以获得一个很好的例子)。

因此,如果我们想抓取该页面URL并将其动态传递给JSON-LD片段,我们可能会尝试这样的事情:

但这不起作用。游民。

这意味着如果您想使用GTM将BlogPosting Schema类型添加到每个博客帖子中,则必须为每个帖子创建不同的标记和触发器(基于URL)。不完全可扩展。

但是,通过一些实验,我发现了一些JavaScript魔法,可以从页面上的现有内容中提取数据并动态创建有效的JSON-LD片段。

动态生成JSON-LD

我们的第一个例子不起作用的原因是Tag Manager用一小段调用函数的JavaScript替换每个变量 - 返回调用的任何变量的值。

我们可以在Google结构化数据测试工具中看到此错误:

该错误是Tag Manager将JavaScript插入应该是JSON标记的结果 - 这是无效的,因此标记失败。

但是,我们可以使用跟踪代码管理器插入JavaScript代码,并让该JavaScript代码插入我们的JSON-LD代码。

如果您对JavaScript不是非常熟悉,这可能看起来非常复杂,但实际上它的工作方式与您可能已经使用的许多其他标记完全相同(例如Google Analytics或Tag Manager本身)。

这里,我们的Schema数据包含在JavaScript“data”对象中,我们可以使用Tag Manager中的变量动态填充它。然后,代码段在页面上使用正确的类型(application / ld + json)创建脚本标记,并使用我们的数据填充标记,我们使用JSON.stringify函数将其转换为JSON。

此示例的目的仅仅是演示脚本的工作原理(动态交换组织架构类型的URL实际上没有多大意义)。那么让我们看看它如何在现实世界中使用。

动态生成用于博客帖子的Schema.org标签 从有效的架构模板开始

首先,基于schema.org/BlogPosting规范为单个帖子构建完整的JSON / LD Schema片段。

确定必要的动态变量

文章之间有许多相同的变量; 例如,发布者信息。同样,每篇文章的主图像都有一个由WordPress生成的特定大小,在帖子之间总是相同的,所以我们可以保持高度和宽度变量不变。

在我们的例子中,我们已经确定了7个变量,这些变量在我们想要动态填充的帖子之间发生变化:

在Google跟踪代码管理器中创建变量
  • 主实体ID:页面URL。
  • 标题:我们将保持这一简单并使用页面标题。
  • 发布和修改日期:我们的博客在WordPress上,因此我们已经为“article:published_time”和“article:modified_time”提供了元标记。并不总是包含modified_time(除非在发布后修改帖子),但Schema规范建议包含它,因此如果还没有修改日期,我们应该将dateModified设置为已发布日期。在某些情况下,我们可能需要重新格式化日期 - 幸运的是,在这种情况下,它已经是ISO 860格式,所以我们很好。
  • 作者姓名:在某些情况下,我们需要从页面中提取内容。我们的博客列出了作者和署名的发布日期。我们需要提取名称,但省略时间戳,尾随管道和空格。
  • 文章图片:我们的博客安装了Yoast,它为Twitter和Open Graph指定了图像标签。注意:我正在使用meta twitter:image而不是og:image标签值,因为当我写这篇文章时,我们博客上的开放图形图像存在一个小错误。
  • 文章描述:我们将使用元描述。

这是我们的插入脚本,我们将在我们的标记中使用,这次将为我们需要创建的变量换出属性:

我现在正在遗漏dateModified - 我们将在一分钟内完成。

提取元值

幸运的是,Tag Manager使得从DOM元素中提取值非常容易 - 特别是因为,就像元属性一样,我们需要的确切值将在元素的一个属性中。要提取页面标题,我们可以获取<title>标记的值。我们不需要为此指定一个属性名称:

对于元属性,我们可以从content属性中提取值:

标记管理器还有一些我们可以利用的有用的内置变量 - 在这种情况下,页面URL:

处理页面元素

为了提取作者名称,我们网站的标记使得只有一个直选择器不起作用,这意味着我们需要使用一些自定义JavaScript来获取我们想要的文本(span元素的文本,而不是时间元素),并删除最后3个字符(“|”)以获得作者的名字。

如果这个选择器出现问题,我也会放入一个后备(只是我们的公司名称),以确保如果我们的选择器失败,则返回一个值。

测试

跟踪代码管理器有一个很棒的功能,允许您在部署代码之前对其进行分级和测试。

一旦我们有了变量,我们就可以进入预览模式并前往我们的一篇博文:

在这里,我们可以检查所有变量的值,以确保正确的值通过。

最后,我们设置我们的标签,并将其配置为触发我们想要的位置。在这种情况下,我们只是在博客帖子上触发这些标签:

这是我们标签的最终版本。

对于我们的dateModified参数,我们添加了几行代码来检查我们的修改变量是否已设置,如果不是,则将“dateModified”JSON-LD变量设置为已发布日期。你可以在这里找到原始代码。

现在我们可以保存标记,部署当前版本,然后使用Google结构化数据测试工具验证我们的工作:

成功!!

这只是此代码的第一个版本,用于测试我们可以使用Google跟踪代码管理器动态插入JSON-LD / Schema.org代码的想法。然而,在几天之后,我们使用Google Search Console进行了检查,确认我们在所有博客文章中都成功找到了BlogPosting Schema,没有任何错误,所以我认为这是实现结构化数据的可行方法。

结构化数据正在成为SEO工作中越来越重要的一部分,通过这样的技术,我们可以显着提高我们有效实施结构化数据的能力,并且技术开销最小。

我很想听听社区使用Tag Manager和JSON-LD的经验,我很想知道人们是否成功使用这种方法!

快乐标记!

所有文章
×

还剩一步!

确认邮件已发至你的邮箱。 请点击邮件中的确认链接,完成订阅。

好的