[レベル: 上級]

schema.orgをJSON-LDで設定する場合は、Google タグマネージャを利用することが可能です。
ウェブページに直接コードを記述しなくても、タグマネージャのカスタムHTMLとして設定して読み込ませることができます。

Googleタグマネージャを使ってJSON-LDを動的に挿入する方法

Googleタグマネージャを使ってJSON-LDを動的に挿入可能であることとその方法をSimo Ahava氏がブログで説明しています。

タグマネージャを利用している人ならやり方は非常に簡単です。
「タグの種類」に「カスタムHTML」を選んで、JSON-LDを使ったschema.orgのコードををそのまま貼り付けるだけです。

GoogleタグマネージャのカスタムHTMLにJSON-LDのコードを貼り付け

schema.orgの複数のタイプを1つのHTMLタグに埋め込むこともできます。
その場合はArray(アレイ)を使い、「,」(カンマ)で区切ってJSONオブジェクトを並べます。

GoogleタグマネージャのカスタムHTMLに複数のJSON-LDのコードを貼り付け

上の例では、ソーシャルプロフィール組織のロゴサイトリンク検索ボックスの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 LP36JSON-LDの使い方を説明しました。
講演のあとにタグマネージャを使っての配信が可能かどうかを参加者に質問されました。
そのときは「できるような気がするけれどわかりません。自分で確かめてみるといいです。」と答えたのですが、できることが判明しました。

注意点

JSON-LDをタグマネージャで公開する場合には注意点があるとのことです。

ページ読み込み最初の段階でコードも読み込まれなければなりません。
ページが表示された後、言い換えるとgtm.loadがdataLayerに引き渡された後は機能しません。

とはいえ、すべてのページに適用されるように「ルール」に「All pages」を指定しているなら気にする必要はありません。
dataLayerを利用している場合のみ注意が必要です。

タグマネージャを活用しているサイトでは便利そうですね。
マクロとの連携もできるようです。

P.S.
でも僕は利用しないと思います。
schema.orgのためのJSON-LDはブラウザのレンダリングにまったく関係ありません。
なのでコンテンツを可能な限り速く表示させるためになるべく最後に近いところで読み込ませたいんですよね。
タグマネージャは通常headセクションに設置します。
JSON-LDが早い段階で読み込まれてしまいます(非同期で読み込まれるのでほかデータの読み込みを遅らせることはないとしても、JSON-LDコードを読み込むためにデータの転送が発生する)。
bodyセクションの終わりに設置することもできますが、そうするとタグマネージャに入れているjQueryのような速くに読み込ませる必要がある仕組みに影響が出てくるかもしれません。

このエントリーが役に立ったらシェアしてください

[Ads & Featured Contrents]

海外SEO情報ブログTOPセマンティック検索 › JSON-LDで記述したschema.orgをGoogle タグマネージャで読み込ませることが可能

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


▲ページの一番上に戻る