Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

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

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

構造化データの記載方法には以下の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なら本当に一瞬で出来るため、便利な時代ですね。

参考

dorarep
いつも困ったときにお世話になっているので、少しでも皆様のお力になれれば幸いです! PHP/Laravel/Ruby on Rails/TypeScript/Vue.js/React/React Native/DevOps/CircleCI/エンジニア採用
https://www.stacky-health.work/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした