web-dev-qa-db-ja.com

コンテンツの読み込みを待つ必要がある動的ページにJSON-LDを使用して構造化データを追加するにはどうすればよいですか？

私はウェブサイトを開発していて、詳細なページに構造化データを追加したいと思っています。問題は、JSON-LDスクリプトに何を追加するかを知る前に、データを要求する必要があることです。

私はバックエンドとしてParseを使用しています。また、それを実現する方法についてのチュートリアルを探し回ろうとしましたが、JSON-LDを動的に追加することはできないようです。

誰かがそれを手伝ってくれることを本当に願っています！ :)

編集：

JSON-LDに入力する必要のあるデータを含む応答は、DOMの準備ができた後に行われます。この状況でのパターンは何ですか？

アイテムのリストがあり、そのうちの1つをクリックすると、最初にロードする必要がある詳細ページを開く必要がありますが、コンテンツがロードされた後、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（）メソッドは2か所で呼び出されます。最初からすぐに呼べば問題ありませんし、Google構造化データテストツールを使えば、必要な構造化データを追跡することができます。それに関する問題は、Parseからの応答を待つ必要があるため、その時点で構造化データを作成するための情報がないことです。

成功コールバックでメソッドを呼び出すと、テストツールはデータを取得できなくなります:(

jsonparse-platformjson-ldstructured-data
13
AlexBalo

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文字列からの改行文字も削除されます。

17
Mousey

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);
0
Furqan Freed