[レベル: 上級]
schema.orgをJSON-LDで設定する場合は、Google タグマネージャを利用することが可能です。
ウェブページに直接コードを記述しなくても、タグマネージャのカスタムHTMLとして設定して読み込ませることができます。
Googleタグマネージャを使ってJSON-LDを動的に挿入する方法
Googleタグマネージャを使ってJSON-LDを動的に挿入可能であることとその方法をSimo Ahava氏がブログで説明しています。
タグマネージャを利用している人ならやり方は非常に簡単です。
「タグの種類」に「カスタムHTML」を選んで、JSON-LDを使ったschema.orgのコードををそのまま貼り付けるだけです。
schema.orgの複数のタイプを1つのHTMLタグに埋め込むこともできます。
その場合はArray（アレイ）を使い、「,」（カンマ）で区切ってJSONオブジェクトを並べます。
上の例では、ソーシャルプロフィールと組織のロゴ、サイトリンク検索ボックスの3つのJSON-LDを使ったschema.orgの構造化データを貼り付けています。
<script type="application/ld+json">
[
{
"@context" : "http://schema.org",
"@type" : "Person",
"name" : "鈴木 謙一",
"url" : "https://www.suzukikenichi.com/",
"sameAs" : ["https://plus.google.com/+KenichiSuzuki", "https://twitter.com/suzukik", "https://www.facebook.com/suzukikenichi"]
},
{
"@context" : "http://schema.org",
"@type": "Organization",
"logo": "https://www.suzukikenichi.com/images/kaigaiseo_logo.jpg",
"url": "https://www.suzukikenichi.com/blog/",
"name": "海外SEO情報ブログ"
},
{
"@context" : "http://schema.org",
"@type": "WebSite",
"url": "https://www.suzukikenichi.com/",
"potentialAction": {
"@type": "SearchAction",
"target": "https://www.suzukikenichi.com/blog/?s={search_term}",
"query-input": "required name=search_term"
}
}
]
</script>コードを貼り付ける前に、記述に間違いがないことを新しい構造化データテストツールで必ず確認しておきましょう。
あとは、このタグを適用したバージョンを公開するだけです。
公開した後に、タグマネージャ内のJSON-LDのschema.orgがきちんと読み込まれているかどうかを新しい構造化データテストツールで再び確認します。
このときはコードを貼り付けるのではなくURLを指定して検証します。
去年のCSS Nite LP36でJSON-LDの使い方を説明しました。
講演のあとにタグマネージャを使っての配信が可能かどうかを参加者に質問されました。
そのときは「できるような気がするけれどわかりません。自分で確かめてみるといいです。」と答えたのですが、できることが判明しました。
注意点
JSON-LDをタグマネージャで公開する場合には注意点があるとのことです。
ページ読み込み最初の段階でコードも読み込まれなければなりません。
ページが表示された後、言い換えるとgtm.loadがdataLayerに引き渡された後は機能しません。
とはいえ、すべてのページに適用されるように「ルール」に「All pages」を指定しているなら気にする必要はありません。
dataLayerを利用している場合のみ注意が必要です。
タグマネージャを活用しているサイトでは便利そうですね。
マクロとの連携もできるようです。
P.S.
でも僕は利用しないと思います。
schema.orgのためのJSON-LDはブラウザのレンダリングにまったく関係ありません。
なのでコンテンツを可能な限り速く表示させるためになるべく最後に近いところで読み込ませたいんですよね。
タグマネージャは通常headセクションに設置します。
JSON-LDが早い段階で読み込まれてしまいます（非同期で読み込まれるのでほかデータの読み込みを遅らせることはないとしても、JSON-LDコードを読み込むためにデータの転送が発生する）。
bodyセクションの終わりに設置することもできますが、そうするとタグマネージャに入れているjQueryのような速くに読み込ませる必要がある仕組みに影響が出てくるかもしれません。