javascript - 使用 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)都有效吗？哪种是最好的实现方式？另外，Google 是否使用 JavaScript 像上面那样抓取动态添加的 JSON-LD？

Answer 1

是的，Google 可以抓取动态添加的 JSON-LD，如 this Google article 中所述关于主题:

Google can read JSON-LD data when it is dynamically injectedinto the page's contents, such as by JavaScript code or embeddedwidgets in your content management system.

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

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

添加完标记后，确保使用 Google's Structured Data Testing Tool 对其进行测试!