使用 JavaScript 添加 JSON-LD

Question

我正在尝试使用 JSON-LD 实现结构数据。我正在做的是使用 jQuery 动态获取内容并制作 JSON 格式并附加到head元素内。

<script id="dynamicJSONLD"></script>

$(document).ready(function(){
var product_name = $(.product-pg .product-name).text();
data = {
               "@context": "https://schema.org",
               "@type": "Product",
               "url": "https://www.example.com/productone",
               "name": product_name  
            };

//creating the script element and storing the JSON-LD

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

//OR

//storing the JSON-LD using ID
$("#dynamicJSONLD").html(JSON.stringify(data));
});

两种方式（创建script元素并存储 JSON-LD / 使用 ID 存储 JSON-LD）都有效吗？哪种实现方式最好？另外，谷歌是否像上面一样使用 JavaScript 抓取动态添加的 JSON-LD？

Answer 1

是的，Google 可以抓取动态添加的 JSON-LD，如这篇关于该主题的Google 文章所述：

当 JSON-LD 数据被动态注入页面内容时，例如通过 JavaScript 代码或内容管理系统中的嵌入小部件，Google 可以读取 JSON-LD 数据。

这两种方法肯定都有效，但如果您要使用 ID 存储 JSON-LD，则需要将所需的类型属性添加到脚本中：

<script id="dynamicJSONLD" type="application/ld+json"></script>

添加完标记后，请务必使用Google 的结构化数据测试工具对其进行测试！