[レベル: 上級]
JavaScript を利用して構造化データを生成する方法を解説するドキュメントを Google はデベロッパーサイトで公開しました。
Google タグマネージャおよびカスタム JavaScript を使ったやり方を説明しています。
タグマネージャで構造化データを動的に生成
手順の詳細はドキュメントを読んでいただくとして、この記事では特に気にかけておくべき点に触れておきます。
カスタム HTML で作成
タグマネージャで、構造化データ用に構成するタグはカスタム HTML です。
ページ内容に応じて動的に構造化データを生成するために変数を使えます。
変数の例はドキュメントで参照できます。
SSR の利用可能
サーバー サイド レンダリング (SSR) を実装している場合は、構造化データの生成も SSR に含めることができます。
Googlebot のレンダリングにかかる時間が大幅に短縮され、ほとんどは数分以内にレンダリングが完了するようになっています。
それでも、HTML にハードコーディングした場合と比較すると JavaScript で生成した構造化データは処理に時間がかかることがあるかもしれません。
可能であれば、SSR を利用することを僕は推奨します。
RRTT で検証
JavaScript で生成した構造化データが Google に正しく認識されているかどうかはリッチリザルト テスト ツールで検証できます。
注意点がいくつかあります。
- 構造化データテストツールを使わない――検証に構造化データ テストツールの利用はおすすめしません。構造化データテストは、独自のレンダリングの仕組みを使います。一方、リッチリザルト テスト（や URL 検査ツール、モバイルフレンドリー テスト、AMP テスト）は実際の Googlebot と同じレンダリングエンジンを利用しています。
- URL で検証する――コードではなく、構造化データを生成する JavaScript のコードを実装したページの URL で検証します。特に変数を使った場合は、Googlebot がその変数を本当に処理できているかどうかはコードでは確認できません。
ウェブに公開していないテスト環境では、RRTT が URL にアクセスできないことがあるかと思います。そんな環境では ngrok をセットアップします。ローカル環境やファイアウォールの内側にあるウェブサイトを検証できます。
タグマネージャを利用すると構造化データの生成や管理が楽になるという管理者もきっといることでしょう。
デベロッパーさんにドキュメントを教えてあげてください。