構造化データ

構造化データをGTM(Google Tag Manager)で一括設設置する方法

構造化データは、個別のURLに任意の構造化マークアップを反映することも可能ですが、このレポートでは、GTM(Google Tag Manager)を利用して、パンくずリスト構造化データを、サイトの全ページに一括で、効率的に設定する方法をまとめています。

前提条件

この方法を実行するためには、WebサイトにGTM(Google Tag Manager)タグが設定されていること、Webサイトにパンくずリスト(構造化データではない)が設置されていることが、前提条件となります。

仕様

今回設定する仕様は、Webサイトに既に設置しているパンくずリスト(構造化データではない)の階層とテキスト、URLをパンくず構造化データとして出力します。パンくずリストを設置していないページには、構造化データは配信されません。

構造化データをGTM(Google Tag Manager)で設定する手順

  1. GTMがWebサイトに正しく設定されているか確認
  2. Google Tag Managerにログインし、タグを付けたいサイトの「コンテナ名」を選択
  3. 選択したサイトのワークスペース画面「新しいタグを追加」を選択
  4. 名前のないタグを削除し、任意のタグの名前をつける
  5. タグ設定のペンマークを押下し、タグタイプを選択から「カスタムHTML」を選択
  6. HTML入力欄に、パンくずに当たるタグの情報を取得するJavascriptを入力
    ※必ず<script> </script>タグで囲む。
  7. トリガーのペンマークを押下し、トリガーの選択から「All Pages」を選択
  8. 「保存」を押下
  9. 「プレビュー」を押下
  10. プレビューモードになったことを確認しサイトにアクセスする
  11. プレビュー画面の下に、新規に追加したタグ名が表示されていることを確認する
  12. 確認後は、「プレビューモードを終了」を押下
  13. 「公開」を押下。※必要に応じて日付、バージョンなどコメントを記載
  14. chromeのデベロッパーツールから「Elements」を確認し、<head>内にパンくずの構造化jsonデータがあることを確認
  15. リッチリザルトテストでエラーが出ていないかを確認

Javascriptのサンプル

パンくず構造化データを出力するJavascriptのサンプルです。

※このコードはサンプルであり、弊社サイトでは検証済みですが、埋め込むサイトごとに、適宜修正が必要となりますので、参考程度に参照ください。

GTMのカスタムHTMLで設置するJavascriptのサンプル
GTMのカスタムHTMLで設置するJavascriptのサンプル

関連ページ

出典