如何在需要等待内容加载的动态页面上使用 JSON-LD 添加结构化数据？

Question

我正在开发一个网站，我想将结构化数据添加到详细页面。问题是我需要在知道要添加到 JSON-LD 脚本的内容之前请求数据。

我正在使用 Parse 作为后端。我还尝试四处寻找有关如何实现该目标的教程，但似乎无法动态添加 JSON-LD。

我真的希望有人能帮助我！ :)

编辑：

我需要放入 JSON-LD 的数据响应在 DOM 准备就绪后出现。这种情况下的模式是什么？

我有一个项目列表，当点击其中一个时，我必须打开一个我必须先加载的详细信息页面，但是在加载内容之后，我想通过 JSON- 提供结构化数据LD.

我刚开始，我发现很难解决这个问题。

编辑 2：

这是我的实际实现：

在HTML中：

<body>
    // my html page code
    ...
    <script type="text/javascript">
        loadDetailPageContent();
    </script>
</body>

在 JS 中：

function loadDetailPageContent() {
    // Calling the method here is too early because I don't have info
    //writeData();
    createDetailPage();
}

function createDetailPage() {
    var recipe = Parse.Object.extend("Recipe");
    var query = new Parse.Query(recipe);
    query.equalTo("objectId", myId);
    query.first({
        success: function(result) {
            // Calling the method here would be perfect
            writeData();
        },
        error: function(error) {
            alert("Error: " + error.code + " " + error.message);
        }
    });
}

function writeData() {
    var script = document.createElement('script');
    script.type = 'application/ld+json';
    script.text = JSON.stringify({
        "@context": "http://schema.org",
        "@type": "Recipe",
        "name": "My recipe name"
    });
    document.querySelector('head').appendChild(el);
}

如您所见，在两个地方调用了 writeData() 方法。如果我一开始就立即调用它，没有问题，并且使用 Google 结构化数据测试工具，我能够跟踪我需要的结构化数据。这样做的问题是，那时我没有创建结构化数据的信息，因为我需要等待 Parse 的响应。

当我在成功回调中调用方法时，测试工具无法再检索数据:(

Answer 1

http://jsfiddle.net/c725wcn9/2/embedded

您需要检查 DOM 来检查它是否有效。需要Jquery。

$(document).ready(function(){
   var el = document.createElement('script');
   el.type = 'application/ld+json';
   el.text = JSON.stringify({ "@context": "http://schema.org",  "@type": "Recipe", "name": "My recipe name" });

   document.querySelector('head').appendChild(el);
});

您的代码包含变量名称 script，但将变量 el 附加到 <head>。还删除了使用 JSON-LD playground 检查的 JSON 字符串中的换行符。

Answer 2

我认为 Mousey 完美地回答了这个问题，我将分享类似的我们在页面上加载航班详细信息但对于价格我们调用 API 的场景当页面加载时，所以我们必须在获取价格时动态加载架构。

我们创建了一个嵌套函数，我们在页面加载和通过飞行时调用它当我们调用 "priceGraber" API 时页面加载的详细信息（获取航班价格），一旦 priceGraber return 成功响应，我们就会注入模式在页面上。

架构创建者函数：

    // create product schema
createProductSchema = function(from, to, currency) {
    return injectSchema = function(price) {
        let el = document.createElement('script');
        el.type = 'application/ld+json';
        el.text = JSON.stringify({
            "@context": "https://schema.org/",
            "@type": "Product",
            "name": `Flight from ${from} to ${to}`,
            "description": `Cheap flights from ${from} to ${to}`,
            "offers": {
                "@type": "Offer",
                "url": `http://flightsearches.net?fso=${from}&fsd=${to}`,
                "priceCurrency": `${currency}`,
                "availability": "https://schema.org/InStock",
                "price": `${price}`,
            }
        });

        console.log('inject now ');
        document.querySelector('head').appendChild(el);
    };
};

页面加载时传递页面加载时可用的架构信息

下面的脚本在 blade 文件中，{{ $flight_from }}，{{ $flight_to }} 是 blade 指令（服务器端变量）

        <script>
    $(function(){
                if(typeof createProductSchema == "function") {
                    console.log('create product schema...');
                    window.injectProductSchema = createProductSchema({{ $flight_from }},  {{ $flight_to }});
                } else {
                    console.error("product schema creator doesn't exists !");
                }
            });

         </script>

动态注入模式

我们在 ajax 响应中调用下面的函数，我们得到 "price" 形式 API 然后这个函数调用嵌套函数，然后将模式附加到 head

window.injectProductSchema(price);

如何在需要等待内容加载的动态页面上使用 JSON-LD 添加结构化数据？

How do I add structured data using JSON-LD on dynamic pages that need to wait for content to load?

json

parse-platform

json-ld

structured-data