json - 通过 Google 标签管理器插入 JSON

Question

尝试从站点上的模板中动态提取 HTML 元素。 {{SCHEMA - Recipe Image}} 和 {{SCHEMA - Recipe Description}} 无法正常工作。 {{SCHEMA - Recipe Image}} 引用了正确的部分，但返回了 null(为 image.url 提供的值必须是有效的URL)在 Google 的结构化数据测试工具中。
{{SCHEMA - Recipe Description}}，它在我创建 Article 模式时起作用，由于某种原因不适用于这种类型的模式并给了我一个

Error at line 9, character 5: Parse error. '}' expected

错误。
谁能帮我理解为什么没有正确提取图像 URL 和描述？

<script>
  (function(){
var data = {
     "@context": "http://schema.org",
     "@type": "Recipe",
     "author": "Example",
     "cookTime": "PT1H",
     "description": "Generic description goes here.",
     "image": {
      "@type": "ImageObject",
      "url": {{SCHEMA - Recipe Image}}
     },
     "recipeIngredient": [
       {{SCHEMA - Recipe Ingredient}}
  ],
 "name": {{SCHEMA - Recipe Title}},
 "prepTime": "PT15M",
 "recipeInstructions": {{SCHEMA - Recipe Steps}}
}

var script = document.createElement('script');
script.type = "application/ld+json";
script.innerHTML = JSON.stringify(data);
document.getElementsByTagName('head')[0].appendChild(script); 
 })(document);
</script>

Answer 1

我可以看看自定义变量 {{ SCHEMA - Recipe Image }} 的代码吗？我的第一个想法是您没有正确选择图像的 src 属性值，但除非我看到该代码，否则我无法知道。此外，查看您尝试选择的 HTML 可能会有所帮助。

仅供引用，这是我成功实现图像自定义变量的方式:

function(){
var image = document.querySelector(".slide-2 a").getAttribute('href');
return image;
}

请注意，这是选择环绕图像的链接的 href 属性，您可能需要选择图像的 src 属性，具体取决于您的HTML 结构。

一种可能是您忘记“返回”图像，一旦您选择了图像，因此也请勾选它。

您可能需要做一些更接近于此的事情:

 function(){
    var image = document.querySelector("img").getAttribute('src');
    return image;
    }

另一个可能的答案:我最近为我的一个网站实现了这个，我让谷歌的结构化数据测试工具随机地将一个自定义变量显示为 null，但不是一直如此。我会刷新测试工具，它最终会正确显示，所以我不会 100% 信任该工具，因为它可能有问题。刷新一下，看看是否有帮助。

真正判断字段是否实际填充的唯一方法是打开“元素”选项卡下的 Chrome 开发人员工具，点击 Control - F 并搜索“架构”以找到由 GTM 插入的 JSON 对象，并查看 "url": 字段是否实际填充了 URL。

因此，如果这不能解决您的问题，请向我提供更多信息，我很乐意再看一眼!