構造化データ。
これは一体何で必要なのか。

AMPといえば、「モバイルChromeの検索結果のカルーセルに出る」というのが特徴の一つ。
最初はAMPで書きさえすれば、出るようになるのかと思っていました。
が、どうやら勘違いだったらしい・・・

出すためにはどうしたらよいかというと、構造化データ（json-ld）が必要だとのこと。

構造化データ・・・😅
全然わからなかったのですが、json-ldという形式のファイルを用意する必要があるようです。

json-ld形式で、当該記事の情報を書かなくてはいけない。
必要なパラメータも決まりがあるので、正確に記述するのは少々面倒ですね。

各記事に設定値を書く必要があるようです。
もしかしたらサイトに対して1ファイルで済むのかな？

AMPのチュートリアルに、基本の書き方の説明がありました。
まずはこの通りに作ってみましょう。
AMP HTML ページを作成する – AMP

ただ、これだと「設定値が足りない」と言うエラーが構造化データ テストツールで出ました。
そこで、必要そうなパラメータを、あとから追加していきました。

googleがテストツールを用意してくれています。
構造化データ テストツール

ここにURLを放り込んで、エラーや警告が出たら、解決する必要があります。
面倒ですが、一つ一つ調べて潰していきましょう。
エラーの内容も出ますので、それほど戸惑うことはないかと。

ついでにプレビューもできます。
「自分の記事がどのように表示されるか」を確認することができます。
パラメータによって見え方が変わるんじゃないかな。

logoのwidthとheightの項目には、設定値を入れてはいけないようです。
最初、ググって調べて、入れている方もいたので真似ていたんです。

しかし、構造化データテストツールでエラーが・・・
なので、外しました。

このブログではnuxt.jsを使って、静的なサイトをジェネレートして、ブログが構築されています。
なので、これらの記述がページごとに挿入されるように、うまいことやらなくてはなりません😎

ところが・・・結構ハマりました😓

gegenerateする時に、ダブルクォートがHTMLエンティティされちゃいました。
どうしたらいいかでかなり悩みました。

__dangerouslyDisableSanitizers: ['script']
この設定を入れてやることで、サニタイズ（HTMLエンティティ）を無効にできます。

headのinnerHTMLに以下のように記述します。

  head () {
     script: [
       {
         innerHTML: '{  }',　/* { }に上記の記述を書く */         type: 'application/ld+json'       }
     ],      __dangerouslyDisableSanitizers: ['script'] /* innerHTMLだとダブルクォートがエスケープされちゃうの対策 */    }
  }

これで行けた！

決められたとおりにページに挿入するだけなので、構造化データの導入自体は簡単です。
MFI(モバイル・ファースト・インデックス)などで、いよいよモバイル対応が重視されてきました。
対応することで、モバイルユーザーにもプラスになりそうです。

ブログシステムなんかを利用する場合は、ちょっとひねりが必要です。
wordpressなんかだったら、きっと良いプラグインもあったりするのでしょうね。

まずは手軽にトライしてみましょう。