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

最新のWebサイトはJavaScriptを使用して多くの動的なコンテンツを表示します。 JavaScriptを使用してサイトで構造化されたデータを生成する場合に注意する価値があることがいくつかあります。このリーダーシップは、ベストプラクティスと実装戦略を検証します。構造化データの分野の初心者である場合は、構造化されたデータがどのように機能するかをお読みください。

JavaScriptを使用して構造化されたデータを生成する方法はいくつかありますが、それらの最も一般的なものは次のとおりです。

• Googleタグマネージャー
• ユーザーJavaScript

製品マーキングを使用していますか？動的に生成されたマーキングは、ショッピングが頻繁ではなく、信頼性が低下する可能性があり、商品や価格の可用性など、急速に変化するコンテンツの問題になる可能性があることに留意してください。あらゆる種類の消費者の結果に最適化する売り手である場合は、Googleからのトラフィックを増やすための十分なコンピューティングリソースをサーバーに持っていることを確認してください。

Google WebサイトでDynamic Generation JSON-LDにGoogleタグマネージャーを使用する

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

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

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

Google Tag Manager（GTM）は、変数の使用をサポートして、ページから情報を抽出し、構造化されたデータに追加します。変数を使用して、GTMの情報の複製を避けるために、ページから構造化されたデータを抽出します。 GTMのデータの複製は、ページの内容とGTMを使用して追加された構造データ間の不一致のリスクを高めます。

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

function() { return document.title; }

次に、ユーザー-Tagでrecipe_nameを使用できます。

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

これがユーザーコンテンツの例です-The：

注：前の例では、GTMの変数recipe_name、recipe_image、recipe_authorを決定したことが示唆されています。

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

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

JavaScriptを使用して生成された構造化データの例を次に示します。

• 興味のある構造化されたデータの種類を見つけてください。
• たとえば、JavaScriptフラグメントを有効にするためにサイトを編集してください。

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サイトのサーバーレンダリングを使用します

サーバーレンダリングを使用する場合は、構造化データをレンダント出力に含めることもできます。フレームワークのドキュメントをチェックして、興味のある構造化されたデータの種類についてJSON-LDを生成する方法を見つけてください。

Googleでサイトの実装をテストする方法

Google検索が構造化されたデータをインデックス付けおよび処理できることを確認するには、実装をテストします。

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

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

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

電子メールのあらゆる問題についてSEO会社「SEO.computer」に連絡できます info@seo.computer、whatsapp +79202044461。

ID 146