Webflow环境下如何动态增删VideoObject类型的JSON Schema

原方案失效原因 #

• 提前把JSON-LD写在html-dynamic-1容器内时，页面加载解析阶段浏览器和爬虫就已经读取到了结构化数据，后续再清空容器内容不会撤回已被识别的Schema，逻辑本身不成立
• JQuery在Webflow中容易出现加载顺序依赖问题，优先用原生JS避免兼容问题

具体实现步骤 #

1. 清理原有静态配置：清空类名为html-dynamic-1的div的所有内容，不要再写入静态的JSON-LD代码
2. 配置动态字段存储：在集合页中添加一个隐藏的占位元素（建议设置id为video-data），把视频对应的名称、描述、缩略图等字段通过Webflow集合绑定功能，写入元素的自定义data-*属性，示例结构如下：

<div id="video-data" hidden 
  data-video-name="视频名称"
  data-video-desc="视频描述"
  data-video-thumb1="缩略图1地址"
  data-video-thumb2="缩略图2地址"
  data-video-thumb3="缩略图3地址"
  data-author-name="作者名称"
  data-publisher-name="发布方名称"
  data-publisher-logo-name="logo名称"
  data-publisher-logo-url="logo地址"
  data-upload-date="上传日期（ISO格式，如2024-01-01）"
  data-content-url="视频源地址"
  data-embed-url="视频嵌入地址"
></div>

3. 插入动态生成代码：将以下原生JS代码添加到Webflow页面设置的</body>标签前自定义代码区域：

// 判断视频容器是否存在且未隐藏
const videoContainer = document.getElementById('youtube-video-1');
if (videoContainer && !videoContainer.classList.contains('w-condition-invisible')) {
  // 读取视频参数
  const videoData = document.getElementById('video-data').dataset;
  // 构造Schema内容
  const videoSchema = {
    "@context":"https://schema.org",
    "@graph": [
      {
        "@type": "VideoObject",
        "name": videoData.videoName,
        "description": videoData.videoDesc,
        "thumbnailUrl": [
          videoData.videoThumb1,
          videoData.videoThumb2,
          videoData.videoThumb3
        ],
        "author": {
          "@type": "Person",
          "name": videoData.authorName
        },
        "publisher": {
          "@type": "Organization",
          "name": videoData.publisherName,
          "logo": {
            "@type": "ImageObject",
            "name": videoData.publisherLogoName,
            "url": videoData.publisherLogoUrl,
            "width": 1200,
            "height": 257
          }
        },
        "uploadDate": videoData.uploadDate,
        "contentUrl": videoData.contentUrl,
        "embedUrl": videoData.embedUrl
      }
    ]
  };
  // 创建并插入JSON-LD标签
  const scriptEl = document.createElement('script');
  scriptEl.type = 'application/ld+json';
  scriptEl.textContent = JSON.stringify(videoSchema);
  document.head.appendChild(scriptEl);
}

验证方式 #

打开对应页面，右键查看页面源代码/打开浏览器开发者工具的Elements面板，有视频的页面会在head标签末尾出现对应application/ld+json类型的script标签，无视频的页面不会生成该标签。

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