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

Question

我有 JSON-LD，如图所示，其中 ratingValue 和 ratingCount 来自后端，但我想从 UI 到 Ajax 在 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;

    }
}

Answer 1

您当然可以动态更新 JSON-LD，这是一个更粗略的示例 - 但您可以运行代码片段并查看它的工作情况。我通过 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不会被修改
您应该会在开发工具中看到变化
如果您正在使用 Googles Structured Data Tool，并且在您的函数更新它之前解析了原始 JSON，我敢打赌 Google 不会抓住零钱。
如果您使用的是 querySelector，可能需要确认您打算修改的 JSON-LD 是页面上 JSON-LD 的第一个实例。

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

How can I dynamically update the JSON-LD script with Ajax?

javascript

html

seo

json-ld