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

虽然实现Schema过去需要对站点的标记进行大量更改，但JSON-LD格式创建了一个很好的替代方法，可以使用最少的代码向页面添加微数据。

网络营销 网站优化 网站推广 谷歌推广 网络推广公司 外贸推广 谷歌seo 外贸网站推广 回到主页回到主页使用Google跟踪代码管理器动态生成架构/JSON-LD标签今年早些时候在波特兰的SearchFest最大的收获之一是语义搜索和结构化数据的重要性迅速上升-特别是Schema.org。

虽然实现Schema过去需要对站点的标记进行大量更改，但JSON-LD格式创建了一个很好的替代方法，可以使用最少的代码向页面添加微数据。

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

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

麻烦的是，虽然看起来TagManager会让您在页面上插入JSON-LD片段没有问题，但似乎无法使用其他跟踪代码管理器功能来动态生成该代码段。

TagManager允许您使用CSS选择器或一些基本JavaScript从页面中提取内容来创建变量。

然后可以在您的标签中动态使用这些变量（查看Mike关于语义分析的帖子，以获得一个很好的例子）。

因此，如果我们想抓取该页面URL并将其动态传递给JSON-LD片段，我们可能会尝试这样的事情：但这不起作用。

游民。

这意味着如果您想使用GTM将BlogPostingSchema类型添加到每个博客帖子中，则必须为每个帖子创建不同的标记和触发器（基于URL）。

不完全可扩展。

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

动态生成JSON-LD我们的第一个例子不起作用的原因是TagManager用一小段调用函数的JavaScript替换每个变量-返回调用的任何变量的值。

我们可以在Google结构化数据测试工具中看到此错误：该错误是TagManager将JavaScript插入应该是JSON标记的结果-这是无效的，因此标记失败。

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

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

这里，我们的Schema数据包含在JavaScript“data”对象中，我们可以使用TagManager中的变量动态填充它。

然后，代码段在页面上使用正确的类型（application/ld+json）创建脚本标记，并使用我们的数据填充标记，我们使用JSON.stringify函数将其转换为JSON。

此示例的目的仅仅是演示脚本的工作原理（动态交换组织架构类型的URL实际上没有多大意义）。

那么让我们看看它如何在现实世界中使用。

动态生成用于博客帖子的Schema.org标签从有效的架构模板开始首先，基于schema.org/BlogPosting规范为单个帖子构建完整的JSON/LDSchema片段。

确定必要的动态变量文章之间有许多相同的变量;例如，发布者信息。

同样，每篇文章的主图像都有一个由WordPress生成的特定大小，在帖子之间总是相同的，所以我们可以保持高度和宽度变量不变。

在我们的例子中，我们已经确定了7个变量，这些变量在我们想要动态填充的帖子之间发生变化：在Google跟踪代码管理器中创建变量主实体ID：页面URL。

标题：我们将保持这一简单并使用页面标题。

发布和修改日期：我们的博客在WordPress上，因此我们已经为“article：published_time”和“article：modified_time”提供了元标记。

并不总是包含modified_time（除非在发布后修改帖子），但Schema规范建议包含它，因此如果还没有修改日期，我们应该将dateModified设置为已发布日期。

在某些情况下，我们可能需要重新格式化日期-幸运的是，在这种情况下，它已经是ISO860格式，所以我们很好。

作者姓名：在某些情况下，我们需要从页面中提取内容。

我们的博客列出了作者和署名的发布日期。

我们需要提取名称，但省略时间戳，尾随管道和空格。

文章图片：我们的博客安装了Yoast，它为Twitter和OpenGraph指定了图像标签。

注意：我正在使用metatwitter：image而不是og：image标签值，因为当我写这篇文章时，我们博客上的开放图形图像存在一个小错误。

文章描述：我们将使用元描述。

这是我们的插入脚本，我们将在我们的标记中使用，这次将为我们需要创建的变量换出属性：我现在正在遗漏dateModified-我们将在一分钟内完成。

提取元值幸运的是，TagManager使得从DOM元素中提取值非常容易-特别是因为，就像元属性一样，我们需要的确切值将在元素的一个属性中。

要提取页面标题，我们可以获取