vue.js+Nuxt.jsで構造化データマークアップをしてみた

10153 ワード
JSON-LD nuxt.js Vue.js 構造化データ Vue.js テキストリンク

構造化データマークアップとは

構造化データとは「更新日」や「著者」などのサイトの情報を構造的に示すことの出来るデータ構造です。
これを記載することでGoogleが単なる文字列としてではなくデータ構造としてサイトを認識することが出来るようになり、パンくずから料理のレシピまで検索結果をリッチに見せてくれるようになります。
必須と言わないまでも、SEO対策の１つとしてよく使われる方法ですね！

構造化データの3つの方法

構造化データの記載方法には以下の３種類があります。

  • JSON-LD
  • microdata
  • RDFa

下の例を見てもらえればわかりますが、microdataとRDFaは実際に表示に使用するタグの中にデータを埋め込んでいきます。そのため記述が分散して見づらくなってしまったり、データとしてだけ入れ込みたい場合にhiddenな要素を作る必要があったり、非常に見づらくなってしまいます。
GoogleとしてもJSON-LDを推しているようなのでJSON-LDでの記載方法について調べてみました。

JSON-LDの例

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "MusicGroup",
  "event": [{
    "@type": "Event",
    "location": "Memphis, TN, US",
    "offers": "ticketmaster.com/foofighters/may20-2011",
    "startDate": "2011-05-20",
    "url": "foo-fighters-may20-fedexforum"
  }
}
</script>

microdataの例

<div itemscope itemtype="http://schema.org/MusicGroup">
<h1 itemprop="name">Foo Fighters</h1>
<div itemprop="video" itemscope itemtype="http://schema.org/VideoObject">
  <h2>Video: <span itemprop="name">Interview with the Foo Fighters</span></h2>
  <meta itemprop="duration" content="T1M33S" />
  <meta itemprop="thumbnail" content="foo-fighters-interview-thumb.jpg" />
  <object ...>
    <param ...>
    <embed type="application/x-shockwave-flash" ...>
  </object>
  <span itemprop="description">Catch this exclusive interview with
    Dave Grohl and the Foo Fighters about their new album, Rope.</span>
</div>
</div>

RDFaの例

<div vocab="http://schema.org/" typeof="MusicGroup">
<h1 property="name">Foo Fighters</h1>
<div property="video" typeof="VideoObject">
  <h2>Video: <span property="name">Interview with the Foo Fighters</span></h2>
  <meta property="duration" content="T1M33S" />
  <meta property="thumbnail" content="foo-fighters-interview-thumb.jpg" />
  <object ...>
    <param ...>
    <embed type="application/x-shockwave-flash" ...>
  </object>
  <span property="description">Catch this exclusive interview with
    Dave Grohl and the Foo Fighters about their new album, Rope.</span>
</div>
</div>

ref) http://schema.org/interactionStatistic

JSON-LDでの記載方法

headの中でscriptを埋め込んでいきたいため、各pagesの<script>内でheadを指定していきます。
しかし Nuxt.jsでは各プロパティをsanitizesして表示するため、そのままだとescapeされてしまいます。
ですのでそれを無効化するために__dangerouslyDisableSanitizersを使用していきます。

pages/index.js
<script>
  export default {
    ...
    head () {
      return {
        __dangerouslyDisableSanitizers: ['script'],
        script: [{
          innerHTML: `{
            "@context": "http://schema.org",
            "@type": "Article",
            "author": "${this.currentPost.fields.author}",
            "name": "${this.currentPost.fields.title}"
            "datePublished": "${this.currentPost.fields.publishDate}"
          }`,
          type: 'application/ld+json'
        }]
      }
    },
    ...

まとめ

非常に簡単で、コードとしてもシンプルに対応できました！
今は簡単なWebsiteなら本当に一瞬で出来るため、便利な時代ですね。

参考