Google WebサイトにJavaScriptを使用して構造化されたデータの生成

最新のWebサイトは、JavaScriptを積極的に使用して動的なコンテンツを表示しています。 JavaScriptを使用してWebサイトに構造化されたデータを作成する場合、注意する必要があるいくつかのポイントがあります。このマニュアルでは、ベストプラクティスと実装戦略について説明します。

構造化されたデータを使用し始めたばかりの場合は、Google検索エンジンでこれらのデータがどのように機能するかに慣れることができます。

JavaScriptを使用して構造化されたデータを生成するためのいくつかのオプションがありますが、それらの中で最も人気のあるものは次のとおりです。

• Googleタグマネージャー
• 城JavaScript

製品にマーキングを使用する場合、動的に生成されたマーキングは、検索エンジンの製品インデックス作成の頻度と精度を低下させる可能性があることに留意してください。これは、商品の可用性やその価格など、急速に変化するデータにとって特に重要です。あらゆる種類の取引結果を最適化する売り手である場合は、サーバーがGoogleからの負荷の増加に対処できることを確認してください。

Google Tag Managerを使用するダイナミックジェネレーションJSON-LDにGoogle WebサイトにJSON-LD

Google Tag Managerは、コードを編集する必要なく、サイトのタグを制御できるプラットフォームです。 Google Tag Managerを使用して構造化されたデータを生成するには、次の手順に従ってください。

• Googleタグマネージャーをサイトに設定してインストールします。
• コンテナに新しいユーザーのタグを追加します。
• サポートされている構造化データのブロックをタグコンテンツに挿入します。
• コンテナ管理者のメニューに示すように、コンテナを取り付けます。
• サイトにタグを追加するには、Googleタグマネージャーインターフェイスにコンテナを公開します。
• 実装をテストします。

GoogleサイトのGoogleタグマネージャー変数の使用

Google Tag Manager（GTM）は、ページからデータを抽出し、構造化データに含めるために変数の使用をサポートしています。変数の使用は、GTMの情報の複製を回避します。これにより、ページの内容とGTMを使用して実装された構造化データとの間の不一致のリスクが低下します。

たとえば、ページの名前をレシピの名前として使用するレシピのJSON-LDブロックを動的に作成して、次のユーザー変数という名前のrecipe_nameを作成できます。

 function() { return document.title; } 

その後、カスタムタグでrecipe_nameを使用できます。

ページから必要なすべての情報を収集するための変数を作成することをお勧めします。

カスタムタグの内容の例は次のとおりです。

注：この例は、GTMの変数RECIPE_NAME、RECIPE_IMAGE、およびRECIPE_AUTHORを決定したことを示唆しています。

Google WebサイトにカスタムJavaScriptを使用した構造化データの生成

構造化されたデータを生成する別の方法は、JavaScriptを使用してすべてのデータを生成するか、サーバーマーキングに情報を追加することです。いずれにせよ、GoogleはページをレンダリングするときにDOMに存在する構造化されたデータを処理および理解できます。 GoogleがJavaScriptをどのように処理するかについては、JavaScriptのリーダーシップをご覧ください。

JavaScriptを使用した生成された構造化データの例：

• 興味のある構造化されたデータのタイプを決定します。
• サイトを編集して、次のフラグメントJavaScriptを有効にします（CMSまたはホスティングサプライヤーのドキュメントを参照するか、開発者に連絡してください）。

 fetch('https://api.example.com/recipes/123') .then(response => response.text()) .then(structuredDataText => { const script = document.createElement('script'); script.setAttribute('type', 'application/ld+json'); script.textContent = structuredDataText; document.head.appendChild(script); }); 

• RICH結果テストツールを使用して実装をテストします。

Google Webサイトで構造化されたデータのサーバーレンダリングを使用する

サーバーレンダリングを使用する場合は、レンダリングの結果に構造化データを含めることもできます。フレームワークのドキュメントをチェックして、希望するタイプの構造化データのJSON-LDを生成する方法を確認してください。

Google Webサイトの構造化データの実装をテストする

Googleが構造化されたデータをインデックスできることを確認するには、次の手順に従ってください。

• リッチな結果テストツールを開きます。
• テストするURLページを入力します。コードを使用する場合、制限が発生する可能性があるため、コードではなくURL入力を使用することをお勧めします（たとえば、CORS制限）。
• [URLのテスト]をクリックします。

成功： すべてを正しく実行し、構造化されたデータの種類がツールでサポートされている場合、「ページは豊富な結果の対象となる」というメッセージが表示されます。 RICH結果テストでサポートされていない構造化データのタイプをテストする場合は、レンダリングを確認してください。構造化されたデータが含まれている場合、Googleはそれを処理できます。

もう一度やり直してください： エラーや警告がある場合、おそらく構文エラーまたは不在のプロパティである可能性があります。構造化されたデータの種類のドキュメントをチェックして、必要なプロパティをすべて追加したことを確認してください。問題が排除されていない場合は、ガイドもチェックして、検索のためにJavaScriptの問題を修正してください。

サイトの構造化データを生成またはテストするためにサポートが必要な場合は、電子メールの問題についてはSEO会社「SEO.computer」に連絡できます。 info@seo.computer またはwhatsappを介して +79202044461。

ID 15