16

Web サイトを開発していて、詳細なページに構造化データを追加したいと考えています。問題は、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 からの応答を待つ必要があるためです。

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

4

2 に答える 2

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>

スキーマの動的注入

「価格」フォームAPIを取得するajax応答内で以下の関数を呼び出し、次にこの関数がネストされた関数を呼び出し、スキーマを頭に追加します

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