16

我正在开发一个网站，我想将结构化数据添加到详细页面。问题是我需要在知道要添加到 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() 在两个地方被调用。如果我一开始就立即调用它，没有问题，并且使用谷歌结构化数据测试工具，我能够跟踪我需要的结构化数据。问题在于，那时我没有创建结构化数据的信息，因为我需要等待 Parse 的响应。

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

4

2 回答 2

23

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 字符串中的换行符。

于 2015-08-04T09:19:31.880 回答
0

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

我们创建了一个嵌套函数，我们在页面加载时调用并传递航班详细信息，然后在页面加载时调用“priceGraber”API（获取航班价格），一旦 priceGraber 返回成功响应，我们就会在页面上注入模式。

模式创建者功能：

    // 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);
    };
};

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

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

        <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 响应中调用下面的函数，在那里我们得到“价格”表单 API，然后这个函数调用嵌套函数，然后将模式附加到头部

window.injectProductSchema(price);
于 2019-10-01T06:10:06.163 回答