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

2020-06-11

(LastUpdated: 2020-06-11)

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

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

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

構造化データ（json-ld）ってなんだろう？

スタートアップ系の本が雑然と積み上げられた画像

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

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

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

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

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

AMPのチュートリアルに、基本の書き方の説明がありました。まずはこの通りに作ってみましょう。 AMP HTML ページを作成する – 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.tokyodiary.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は入れないほうがいい？

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

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

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

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

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

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

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

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

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

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

これで行けた！

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

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

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

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