JavaScript を使用して構造化データを生成する

最新のウェブサイトでは、多くの動的コンテンツの表示に JavaScript を使用しています。JavaScript を使ってウェブサイトに構造化データを生成するには、注意点がいくつかあります。このガイドでは、おすすめの方法と実装の手順について説明します。構造化データを初めて使用する場合は、構造化データの仕組みについてをご覧ください。

JavaScript を使って構造化データを生成する方法はいろいろありますが、一般的なのは次の方法です。

Google タグ マネージャーを使用して動的に JSON-LD を生成する

Google タグ マネージャーは、コードを編集することなしにウェブサイトのタグを管理できるプラットフォームです。Google タグ マネージャーで構造化データを生成する手順は次のとおりです。

  1. サイトで Google タグ マネージャーの設定とインストールを行います。
  2. 新しいカスタム HTML タグをコンテナに追加します。
  3. 使用する構造化データのブロックをタグコンテンツに貼り付けます。
  4. コンテナ管理メニューの [Google タグ マネージャーをインストール] セクションの表示に沿ってコンテナをインストールします。
  5. タグをウェブサイトに追加するには、Google タグ マネージャーのインターフェースでコンテナを公開します。
  6. 実装をテストします。

Google タグ マネージャーでの変数の使用

Google タグ マネージャー（GTM）は、ページ上の情報を構造化データの一部として使用するための変数をサポートしています。GTM に情報を複製する代わりに、変数を使用してページから構造化データを抽出します。これは、GTM に情報を複製すると、ページ コンテンツと GTM で挿入した構造化データとの間に不整合が生じるリスクが高まるためです。

たとえば、次のような recipe_name という名前のカスタム変数を作成することで、レシピ名にページタイトルを使用するレシピ JSON-LD ブロックを動的に作成できます。 

function() { return document.title; }

これで、{{recipe_name}} をカスタムタグ HTML 内で使用できます。

変数を作成し、ページ内の必要な情報はすべて変数で収集することをおすすめします。

カスタム HTML タグのコンテンツの例を以下に示します。

<script type="application/ld+json">
  {
    "@context": "https://schema.org/",
    "@type": "Recipe",
    "name": "{{recipe_name}}",
    "image": [ "{{recipe_image}}" ],
    "author": {
      "@type": "Person",
      "name": "{{recipe_author}}"
    }
  }
</script>

カスタム JavaScript を使用して構造化データを生成する

構造化データを生成する方法には、JavaScript を使用して構造化データをすべて作成するか、サーバー側でレンダリングされた構造化データに情報を追加する方法があります。どちらの方法でも、Google 検索によるページのレンダリング時に、DOM 内の有効な構造化データが認識され、処理されます。Google 検索による JavaScript の処理の詳細については、JavaScript に関する基本事項のガイドをご覧ください。

構造化データを JavaScript で生成する例を以下に示します。

  1. 使用する構造化データのタイプを特定します。
  2. ウェブサイトの HTML を編集して、次の例のような 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);
});
  3. リッチリザルト テストで実装をテストします。

サーバー側レンダリングの使用

サーバー側レンダリングを使用している場合は、レンダリングからの出力に目的の構造化データを含めることもできます。使いたい構造化データタイプ用の JSON-LD を生成する方法については、お使いのフレームワークのドキュメントをご確認ください。

実装をテストする

生成した構造化データが Google 検索によりクロールされ、インデックス登録されることを確認するため、以下のように実装をテストします。

  1. リッチリザルト テストを開きます。
  2. テストする URL を入力します。
  3. [URL をテスト] をクリックします。

    成功: 手順をすべて正しく行い、その構造化データタイプをリッチリザルト テストがサポートしていれば、「このページはリッチリザルトの対象です」というメッセージが表示されます。
    リッチリザルト テストがサポートしていない構造化データタイプをテストする場合は、レンダリングされた HTML を確認します。レンダリングされた HTML に構造化データが含まれていれば、Google 検索による処理が可能です。

    再試行: エラーや警告が表示される場合は、構文エラーまたはプロパティの欠落が考えられます。 構造化データタイプに関するドキュメントを読み、すべてのプロパティが含まれていることを確認してください。問題が解決しない場合は、検索関連の JavaScript の問題を解決するためのガイドもご確認ください。