GTM DOM元素图片URL变量多余反斜杠导致食谱富摘要报错

问题本质 #

数据层自动在URL斜杠前加两个反斜杠，是JSON转义逻辑重复执行导致的：正常JSON序列化仅会对特殊字符添加1个转义反斜杠，当前配置中转义流程被触发了两次，最终输出到页面的JSON-LD结构化数据里，转义符变成了可见的无效字符，谷歌爬虫无法识别合法图片地址，直接导致富摘要校验失败。

异常参考截图 #

操作步骤（无复杂代码，GTM后台即可完成） #

• 第一步：创建自定义JS变量清理转义符
  进入GTM变量面板，新建「自定义JavaScript」类型变量，直接复制以下代码，把代码里的变量占位符替换成你当前调用的食谱图片变量名即可，这个变量会自动清除URL里所有多余的反斜杠：

  function() {
    // 替换为你自己GTM里的图片变量名，保留两侧大括号
    const rawUrl = {{你的食谱图片变量}};
    return rawUrl.replace(/\\/g, '');
  }
  

• 第二步：替换结构化数据的写入逻辑
  删掉原来用字符串拼接写JSON-LD的自定义HTML标签内容，改用原生JS构造结构化数据对象，从根源避免转义冲突，参考代码如下：

  const schemaData = {
    "@context": "https://schema.org/",
    "@type": "Recipe",
    // 已有的其他结构化字段（名称、作者、食材、时长等）保持原样即可
    "image": {{刚才新建的清理完转义的图片变量}},
    // 其余原有字段不要改动
  };
  const scriptDom = document.createElement('script');
  scriptDom.type = 'application/ld+json';
  scriptDom.text = JSON.stringify(schemaData);
  document.head.appendChild(scriptDom);
  

• 第三步：效果校验
  保存修改后进入GTM预览模式，打开对应食谱页查看页面渲染的JSON-LD脚本，确认图片URL为正常的https://域名/图片路径.jpg格式、无多余反斜杠后，提交GTM版本，再用富结果测试工具检测即可通过校验。

注意事项 #

• 不要手动在JSON字符串里添加转义反斜杠，JSON.stringify()方法会自动完成所有合法转义，手动添加转义符必然会出现重复转义问题
• 如果图片地址是从页面DOM抓取的，优先读取图片元素的原生src属性值，不要读取经过前端框架二次渲染的属性文本，能从根源避免转义异常

内容的提问来源于stack exchange，提问作者Julia Ziegler