構造化マークアップでSEO対策！

はじめに
SEOとは
構造化マークアップとは
構造化マークアップを行うとどうなる？
実際に書いてみよう
確認してみよう
おわりに

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

SEO対策として構造化マークアップを行ったので備忘録として記事にします。

はじめに

約1か月ぶりの更新になります。
あと数日で新卒が入ってくると気づいて1年経つ速さに置いてかれそうになっているむらさきです。
今回はSEO対策で行った構造化マークアップについて書きたいと思います。

SEOとは

SEOとはSearch Engine Optimization(検索エンジン最適化)の略で、これを行っていくことGoogleなどの検索結果で最初のページに出てくるようになり、沢山の人に見てもらえるようになります。
SEO対策の方法はたくさんあるのですが今回は「構造化マークアップ」について書いていきます。
他のSEO対策などは自分より詳しい人たちが記事を書いているので、当ホームページのSEOカテゴリもぜひご覧ください！(SEOカテゴリへ)

構造化マークアップとは

HTMLに書かれている文字列は何を意味しているかの情報は持っていません。人の名前かもしれないし、地名かもしれない。はたまた見出しのタイトルかもしれません。人間であれば「ここにはこういう内容が書かれているんだろうな」と推測することができますが、検索エンジンはそこまで理解できません。しかし「ここには人の名前が書いてあるよ！」「こっちは住所だよ！」と教えてあげれば検索エンジンは素早くページを理解してくれます。

構造化マークアップを行うとどうなる？

構造化マークアップを行うと検索エンジンに情報が適切に伝わり、検索結果ページでの表示がリッチスニペットで表示される可能性があります。
リッチスニペットとは検索結果画面で通常出てくるリンクと数行の説明テキストの他にレビューやクチコミ、サムネイル画像などの情報が一緒に表示される状態のことです。
構造化マークアップを行うことで必ずリッチスニペットで表示されるというわけではありませんので、他の有効的なSEO対策がある場合はそちらから行った方が良いと思いますが、リッチスニペットで表示されることでより多くの人の目に留まることができるので是非やっておきたいSEO対策になると思います。

実際に書いてみよう

構造化マークアップについて理解を深めたところでどのように記述すればいいかを見ていきましょう。
まずはGoogleの検索エンジンが理解できるフォーマットで記述していきます。
フォーマットにはボキャブラリーとシンタックスがあります。
ボキャブラリーとは「この値はこれを指しています！」「こっちはこういうものです！」という風に検索エンジンが分かる言語で定義されているものです。

data-vocabukary.org
schema.org

があります。

シンタックスとは記述方法でこの書き方に沿って書く事で正しく検索エンジンに理解してもらうことができます。

microdata
RDFa
JSON-LD

の3つがあります。今回はGoogleが一番推奨しているとされるJSON-LDを使用したschema.orgで記述していきたいと思います。(schema.orgで定義されているリストはこちら)

今回はこの記事(Article)用の構造化マークアップを例に書いていきたいと思います。HTML内であればどこに記述しても問題ありません。

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Article",
  "headline": "構造化マークアップでSEO対策！| SEO | DoRuby",
  "datePublished": "2018-03-26",
  "dateModified": "2018-03-26",
  "publisher":
  {
    "@type": "Organization",
    "name": "DoRuby",
    "logo": 
    {
      "@type": "ImageObject", 
      "url": "https://doruby.jp/assets/logo-254272aab3fa84603b6f1a8e78028ff55d9ae486f1f1fe69f4aeb9a5022dfe59.png",
      "width":
      {
        "@type": "Intangible",
        "name": 165
      },
      "height":
      {
        "@type": "Intangible",
        "name": 44
      }
    }
  },
  "about": "SEO対策として構造化マークアップを行ったので備忘録として記事にします。",
  "articleBody": "約1か月ぶりの更新になります。",
  "image":
  {
    "@type": "ImageObject",
    "url": "https://doruby.jp/uploads/entries/1315/9ca404d30c733ba0ab9493d2d114d4ab.jpg",
    "width":
    {
      "@type": "Intangible",
      "name": 720
    },
    "height":
    {
      "@type": "Intangible",
      "name": 479
    }
  }
  "author":
  {
    "@type": "Organization",
    "name": "株式会社アピリッツ"
  },
  "mainEntityOfPage":
  {
    "@type": "WebPage",
    "@id": "https://doruby.jp/users/ueki/entries/%E6%A7%8B%E9%80%A0%E5%8C%96%E3%83%9E%E3%83%BC%E3%82%AF%E3%82%A2%E3%83%83%E3%83%97%E3%81%A7SEO%E5%AF%BE%E7%AD%96%EF%BC%81"
  }
}
</script>

今回はこんな感じで書きました
最初に書いた“@context”は使用するボキャブラリがあるurlを指定しています。
途中でちょくちょく入ってくる“@type”はボキャブラリのリストに定義されている内容を指定しています。(Articleなら記事、ImageObjectなら画像ですよ！と検索エンジンに教える役割を担っています)
“@type”はかなり細かく分けられているので自分が構造化マークアップがしたいページの内容とボキャブラリリストを照らし合わせながら書くといいと思います！

確認してみよう

構造化マークアップが上手く行えているかを確認するにはGoogleが提供している構造化データテストツールを使用します。
すでに公開されているURLであればURLを入力することで正しくマークアップが行われているかを確認できます。
まだ公開されていないURLやテスト環境等の検索エンジンのbotがクロールできない環境ではURLで確認することはできません。
その代わり下記画像のようにコードスニペットにコードを直接記述することで確認することができます。

「テストを実行」を押下することで正しくマークアップされているか、エラーや警告がないかを確認することができます。
“@type”によっては入力必須のものもあったりするので細かくテストで確認しましょう！

おわりに

いかかだったでしょうか。弊社のSEO対策チームから業務で構造化マークアップを指示されて初めて存在を知って、調べながら実装をしていたのですが皆さんに共有できていれば幸いです。
それではまた次の記事でお会いしましょう！むらさきでした！