構造化データ
構造化データをGTM(Google Tag Manager)で一括設設置する方法
構造化データは、個別のURLに任意の構造化マークアップを反映することも可能ですが、このレポートでは、GTM(Google Tag Manager)を利用して、パンくずリスト構造化データを、サイトの全ページに一括で、効率的に設定する方法をまとめています。
前提条件
この方法を実行するためには、WebサイトにGTM(Google Tag Manager)タグが設定されていること、Webサイトにパンくずリスト(構造化データではない)が設置されていることが、前提条件となります。
仕様
今回設定する仕様は、Webサイトに既に設置しているパンくずリスト(構造化データではない)の階層とテキスト、URLをパンくず構造化データとして出力します。パンくずリストを設置していないページには、構造化データは配信されません。
構造化データをGTM(Google Tag Manager)で設定する手順
- GTMがWebサイトに正しく設定されているか確認
- Google Tag Managerにログインし、タグを付けたいサイトの「コンテナ名」を選択
- 選択したサイトのワークスペース画面「新しいタグを追加」を選択
- 名前のないタグを削除し、任意のタグの名前をつける
- タグ設定のペンマークを押下し、タグタイプを選択から「カスタムHTML」を選択
- HTML入力欄に、パンくずに当たるタグの情報を取得するJavascriptを入力
※必ず<script> </script>タグで囲む。 - トリガーのペンマークを押下し、トリガーの選択から「All Pages」を選択
- 「保存」を押下
- 「プレビュー」を押下
- プレビューモードになったことを確認しサイトにアクセスする
- プレビュー画面の下に、新規に追加したタグ名が表示されていることを確認する
- 確認後は、「プレビューモードを終了」を押下
- 「公開」を押下。※必要に応じて日付、バージョンなどコメントを記載
- chromeのデベロッパーツールから「Elements」を確認し、<head>内にパンくずの構造化jsonデータがあることを確認
- リッチリザルトテストでエラーが出ていないかを確認
Javascriptのサンプル
パンくず構造化データを出力するJavascriptのサンプルです。
※このコードはサンプルであり、弊社サイトでは検証済みですが、埋め込むサイトごとに、適宜修正が必要となりますので、参考程度に参照ください。