構造化データ(JSON-LD)をAMPブログに設置する方法

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

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

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

  1. 構造化データ(json-ld)ってなんだろう?
  2. AMPのチュートリアルをもとにコードを書く
  3. googleのテストツールを使ってテストする
  4. logoのwidthとheightは入れないほうがいい?
  5. Nuxt.jsで作るときの注意点
  6. ダブルクォートがエンティティされる問題を解決する
  7. まとめ:とりあえずサクッと入れときましょ

構造化データ(json-ld)ってなんだろう?

このセクション、整理して加筆修正します! 中途半端ですみません🙏

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

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

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

AMPのチュートリアルをもとにコードを書く

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

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

このサイト(このページ)のjson-ldは以下の通り

{
    "@context": "http://schema.org",
    "@type": "BlogPosting",
    "mainEntityOfPage": {
      "@type": "WebPage",
      "@id": "https://chaos-boy.tokyo/posts/"
    },
    "headline": "既存ブログサービスと、自分で構築するCMSと、静的サイトのどれを選んだらいいかを考えてみました",
    "image": {
      "@type": "ImageObject",
      "url": "https://chaos-boy.tokyo/img/blog/diary.jpg",
      "width": 250,
      "height": 250
    },
    "datePublished": "2018-05-25",
    "dateModified": "2018-05-25",
    "author": {
      "@type": "Person",
      "name": "Chaos boy"
    },
    "publisher": {
      "@type": "Organization",
      "name": "こんやのおかずはなんだろな?",
      "logo": {
        "@type": "ImageObject",
        "url": "https://chaos-boy.tokyo/img/logo.png"
      }
    },
    "description": "ブログサービスを検討している方へ。ちょっと高度な静的サイトという選択肢も含めてメリットとデメリットを比較してみました。"
  }

単純なやり方は、これを各ページごとに、設定されていればOKです。
もちろん、内容は、各ページにあった内容が記述されている必要があります。

googleのテストツールを使ってテストする

googleがテストツールを用意してくれています。

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

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

logoのwidthとheightは入れないほうがいい?

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

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

Nuxt.jsで作るときの注意点


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

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

ダブルクォートがエンティティされる問題を解決する

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

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

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

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

これで行けた!

まとめ:とりあえずサクッと入れときましょ

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

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

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

#json,#amp,#nuxt.js,#blog

AMPサイトでgoogle analyticsを設置する方法

Google Fonts+日本語をAMPサイトに導入する

ブログサービスの選び方。静的サイトという選択肢はいかがでしょう?

AMPでfadeやparallaxを簡単に実現できるamp-fx-collectionの使い方

AMPで「ページトップへ遷移する」ボタンを設置する方法とNuxt.jsでハマったところを解決

3分でOK!AMPサイトにfacebookプラグインでコメント欄を設置する

サイトのAMP化を検討している方へ導入によるメリットとそうじゃない部分を解説します

CircleCIを導入してシンプルなワークフローを実現!デプロイの効率化にチャレンジ

モバイルファーストインデックス(MFI)が検索順位やインデックスに与える影響とは?

ブログの古い記事を見直したらアクセスが少しだけど上がりました