Nuxt.jsで作ったサイトに構造化マークアップ(JSON-LD)対応してみた

こんばんは、るかです。
ちょっとしたNuxt.jsネタを書いていきたいと思います。

このブログの記事ページにJSON-LD形式の構造化マークアップを追加してみましたのでそのメモを残しておきます。

構造化マークアップについて

ざっくり言ってHTMLマークアップでは伝えきれない細かな情報をGoogleを始めとする検索エンジンなどに伝えるためのデータです。

これらの情報を渡すことで検索エンジンがよりそのページにどんな内容が書いてあるのかを判断できるようになって検索ギャラリーにあるリッチリザルトが使えるようになり、クリック率なんかが上がる効果があったりするとかないとか…

構造化するにはいくつか方法があるのですが、今回はGoogleが推奨しているJSON-LDでやってみました。

Nuxt.jsでの実装

早速結果のコードから...
参考: vue.js+Nuxt.jsで構造化データマークアップをしてみた - Qiita

ほぼ上記のコードのままなんですが構造化データテストツールで見たときに警告が出たりしてたので出ないように書き換えたのが下記になります。

JSON-LDの詳しい仕様はschema.orgに定義があるのでそれを参考に。 構造化マークアップを実装したいページのheadで定義します。

export default {
  head() {
    return {
      // ・・・省略
      __dangerouslyDisableSanitizers: ['script'],
      script: [
        {
          innerHTML: `{
            "@context": "http://schema.org",
            "@type": "Article",
            "author": {
              "@type": "Person",
              "name": "Ruka Saito"
            },
            "publisher": {
              "@type": "Organization",
              "name": "_R",
              "logo": {
                "@type": "ImageObject",
                "url": "${process.env.BASE_URL + '/icon.png'}"
              }
            },
            "name": "${this.currentPost.fields.title}",
            "headline": "${this.currentPost.fields.title}",
            "image": "${
              _.isEmpty(this.currentPost.fields.heroImage)
                ? process.env.BASE_URL + '/img/noImg.png'
                : this.currentPost.fields.heroImage.fields.file.url
            }",
            "datePublished": "${this.currentPost.fields.publishDate}"
          }`,
          type: 'application/ld+json'
        }
      ]
    }
  },
  // ・・・省略
}

これでテストツールにかけてエラーが無ければ大丈夫。
実際にリッチリザルトが適用されるかはわかりませんが適用されたらいいなぁ…