【SEO】構造化データをGTMで追加しても問題ない【検証済み】

「構造化データを追加するときには、Googleタグマネージャ（以下GTM）は使わないほうがいい。」という定説がこれまで広がっていましたが、その定説が覆りました。

GTMでの構造化データの追加については、過去にGoogleのJohn Mueller（ジョン・ミューラー）氏が、Twitter上でアドバイスを行なっています。

ミューラー氏のフォロワーが構造化データについて次のように質問をしました。

>GTMを利用して構造化データを設定していたところ、構造化データテストツールでの検証が最近失敗するようになりました。どうしてですか？

それに対してミューラー氏は、以下のように返信していました。

>構造化データを追加するのに、GTMのようなツールには私なら頼らない――うまく動くこともあるだろうが、>構造化データを挿入する第一の方法にはしないほうがい。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="en" dir="ltr">I wouldn&#39;t rely on a tool like GTM to add structured data -- it can work, but it shouldn&#39;t be your primary way of integrating structured data.</p>&mdash; 🍌 John 🍌 (@JohnMu) <a href="https://twitter.com/JohnMu/status/1017108440907419649?ref_src=twsrc%5Etfw">2018年7月11日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

この発言を受けて、以下のSEOを扱うサイトから国内でもその情報が拡散されました。

- [構造化データの追加には Google タグマネージャ を使わないほうがいい](https://www.suzukikenichi.com/blog/you-sholdnt-add-structured-data-by-google-tag-manager/
)

- [商品（Product）を構造化データでマークアップするメリットと手順](https://www.principle-c.com/column/seo/product-structured-data/#__2091157226.1561037213
)

ところが、最近になって実際の事例を見て考えが変わったのか、ミューラー氏は「問題ない」と言い出してます。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="en" dir="ltr">Reading the linked article, it seems quite complete and balanced - I think it&#39;s fine. It also touches on the aspect you mentioned, using GTM vs on-page markup. Happy to see more sites trying out new structured data types!</p>&mdash; 🍌 John 🍌 (@JohnMu) <a href="https://twitter.com/JohnMu/status/1139070944230723584?ref_src=twsrc%5Etfw">2019年6月13日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

このツイートを見ればわかるように、Googleは考えを変更したようなので、GTMを使って構造化データを挿入することは今後、特に問題無いのかもしれません。

「多くのサイトが新しい構造化データの実装方法を試しているのを見て幸せだ」とミューラ氏が付け加えているところを見ると、別にミューラー氏も全ての事項において確証を持って発言している訳ではないので、

結局はSEOをやる上で最も大切なのは、ちゃんと検証して、検証して、検証して、てめえで判断していけよという話ですよね。

#実際にFAQの構造化データをGTMで追加して検証してみました

ここからは、実際にFAQの構造化データをGTMで追加する検証を行なっていきます。

##検証の流れと方法について
環境等も記載しておきます。

1. FirebaseにFAQの静的ページ(HTML)をデプロイ・Web上に公開
2. GTMを使用して、ページにJSON-LDの構造化データを挿入
3. リッチリザルトテストツールとSearch ConsoleのURL検査ツールで検証

##公開されたFAQのページを用意

FAQの構造化データのJSON-LDを挿入するHTMLは以下のようなものになります。
まあ、、あくまで検証なので、簡単に3つの質問と答えを用意しています。

```html
<div id="wrapper">
   <h1>FAQ</h1>
     <h2>Q.［災害用伝言板］安否確認方法を教えてください。</h2>
       <p>災害用伝言板へアクセスしてください。</p>
     <h2>Q.前月分の料金が確定するのはいつですか？</h2>
       <p>お客さまの締め日から10日後が料金確定日の目安です。</p>
     <h2>Q.［iPhone］電池の減りが早いです。改善方法はありますか？</h2>
       <p>はい、電池の減りが早くなる原因の確認と対策で電池の減りを抑えることができます。</p>
</div>
```

実際の画面で見るとこういう感じ。

<img width="385" alt="FAQのスクショ" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67591/b15267de-b46d-8391-bb99-897938631dd3.png">

そして、JSON-LDは以下のようになります。

```javascript
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [{
    "@type": "Question",
    "name": "Q.［災害用伝言板］安否確認方法を教えてください。",
    "acceptedAnswer": {
      "@type": "Answer",
      "text": "災害用伝言板へアクセスしてください。"
    }
  }, {
    "@type": "Question",
    "name": "Q.前月分の料金が確定するのはいつですか？",
    "acceptedAnswer": {
      "@type": "Answer",
      "text": "お客さまの締め日から10日後が料金確定日の目安です。"
    }
  }, {
    "@type": "Question",
    "name": "Q.［iPhone］電池の減りが早いです。改善方法はありますか？",
    "acceptedAnswer": {
      "@type": "Answer",
      "text": "はい、電池の減りが早くなる原因の確認と対策で電池の減りを抑えることができます。"
    }
  }]
}
</script>
```

このJSON-LDを、GTMを使って挿入する形になります。
（とは言っても普段、GTMに慣れている方は何んともない作業なのですが、、）

##GTMを使用して、ページにJSON-LDの構造化データを挿入

とりあえずGIFでどうぞ。

![gtm.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67591/6c13663f-20fa-6700-706f-68d94ce66207.gif)

まず、Googleタグマネージャを開き、[新しいタグを追加]を選択します。

タグに任意の名前を付けます。次に、[カスタムHTMLタグ]を選択して、先ほどのJSON-LDのコードを貼り付けます。

次に、トリガーを設定します。（今回はサイトに静的ページが1ページしかないので、全てのページでトリガが発火されるようにしています）

GTMのトリガーに関する詳しい説明は[こちら](https://support.google.com/tagmanager/topic/7679108?hl=ja&ref_topic=7679384)。

トリガーのタイプ（発火のタイミング）ですが、ページビューであれば、

- DOM Ready
- ウィンドウの読み込み
- ページビュー

いづれでも問題は無かったです。

あとは公開して終わりです。（公開前にプレビューすることはお薦めします）

##リッチリザルトテストツールで検証

まずは、リッチリザルトテストツールで検証した結果です。

<img width="1268" alt="スクリーンショット_2019-06-20_23_43_41.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67591/82a11b55-156a-d0d3-92b1-42e9cee79530.jpeg">

問題なくリッチリザルトの対象として認識されています。

<img width="1271" alt="スクリーンショット_2019-06-20_23_44_07.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67591/70fe225c-e0cc-30fe-a036-0050dcbb9987.jpeg">

実際にプレビューした結果です。こちらも問題なしです。

##Search ConsoleのURL検査ツールで検証

まずは、Search ConsoleのURL検査ツールで検証した結果です。

<img width="1266" alt="スクリーンショット_2019-06-21_0_05_32.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67591/b8de00b7-1786-b077-d596-1abe3b28aed6.jpeg">

特に問題なく無事にクロールされました。

#まとめ
結論としては、FAQの構造化データをGTMで追加しても問題は無かったです。

ただ、システム環境によって変わってきたりするので、一概には絶対とは言えない。少なくとも今回は上手くレンダリングされて、クローラーにインデックスされました。

FAQしか検証できていないので、~~今後は求人情報やその他の構造化データに関しても検証を行なっていきます。~~※2019/06/21 検証した結果、他の構造化データも問題無い。

運用面から見れば、エンジニアに依存せずに済むので、GTMで構造化データを追加できるメリットはかなり大きい。
これからはジャンジャンGTMで構造化データ対応していきましょう。