如何使用 Ajax 动态更新 JSON-LD 脚本？答案

【问题标题】：How can I dynamically update the JSON-LD script with Ajax?如何使用 Ajax 动态更新 JSON-LD 脚本？
【发布时间】：2019-01-26 08:52:39
【问题描述】：

我有如图所示的 JSON-LD，其中 ratingValue 和 ratingCount 来自后端，但我想通过 Ajax 调用从 UI 执行它并在 aggregateRating 中更新它。

但是当打开页面源时，它显示来自后端的数据，但是当我执行console.log() 时，它显示的是预期的值，但它没有在页面源中更新。

有什么办法可以从 UI 方面做到吗？

<script type="application/ld+json"> {
    "@context": "http://schema.org/",
    "@type": "Product",
    "name": "Phone",

    "aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": "4.5",
        "ratingCount": "80"
    },
    "offers": {
        "@type": "AggregateOffer",
        "lowPrice": "5",
        "highPrice": "10",
        "priceCurrency": "USD",
        "availability": "http://schema.org/InStock"
    }
}
</script>

(function () {
    var id = $ {
        prdId
    };
    var response = "";
    $.ajax({
        url: url;
        dataType: "jsonp",
        data: {
            pid: id,
            _method: "GET",
            t: new Date().getTime()
        },
        timeout: 20000,
        xhrFields: {
            withCredentials: true
        },
        type: "get",
        success: function (json) {
            if (json.success == true) {
                response = json.data;
                //call api
                structureData(response);
            } else {
                response = "error";
            }

        }
    });


    function structureData(resp) {
        var json = document.querySelector('script[type="application/ld+json"]').textContent;
        json = JSON.parse(json);

        json["aggregateRating"] = {
            "@type": "AggregateRating",
            "ratingValue": resp.averageScore,
            "reviewCount": resp.averageScore
        }
        var jso = JSON.stringify(json);

        document.querySelector('script[type="application/ld+json"]').textContent = jso;

    }
}

【问题讨论】：

标签： javascript html seo json-ld

【解决方案1】：

您绝对可以动态更新 JSON-LD，这是一个更粗略的示例 - 但您可以运行代码 sn-p 并查看它是否正常工作。我通过this SO question 找到了大致相同主题的代码，但对其进行了修改以更好地匹配您的示例：

let jsonLdScript = document.querySelector('script[type="application/ld+json"]');
let jsonld = JSON.parse(jsonLdScript.innerText);

document.getElementById('orig-result').textContent = jsonLdScript.innerText;

jsonld.aggregateRating.ratingValue = "5";
jsonld.aggregateRating.ratingCount = "95";

let newJson = JSON.stringify(jsonld);

jsonLdScript.innerHTML = newJson;

document.getElementById('result').textContent = jsonLdScript.innerText;

<html>
  <head>
  <script type="application/ld+json"> 
  {
    "@context": "http://schema.org/",
    "@type": "Product",
    "name": "Phone",
    "aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": "4.5",
        "ratingCount": "80"
    },
    "offers": {
        "@type": "AggregateOffer",
        "lowPrice": "5",
        "highPrice": "10",
        "priceCurrency": "USD",
        "availability": "http://schema.org/InStock"
    }
  }
  </script>
  </head>
  <body>
    <p>Original Output JSON-LD: <br /><strong id="orig-result"></strong></p>
    <p>New Output JSON-LD: <br /><strong id="result"></strong></p>
  </body>
</html>

你是如何测试的？需要注意的几点：

显然原始页面 DOM 不会被修改
您应该会看到开发工具中的变化
如果您使用的是 Google 的 Structured Data Tool，并且在您的函数更新之前解析了原始 JSON，我敢打赌 Google 不会捕捉到变化。
如果您使用的是 querySelector，可能需要确认您要修改的 JSON-LD 是页面上的第一个 JSON-LD 实例。

【讨论】：