フロントエンジニアでも知っておきたい！SEOにおける構造化データについて

こんにちは。デザイナーのSUGIYAMAです。
デザインを再現するだけであれば、そこまで気にしなくていいかもしれませんが、やはりコーディングしていく上で、検索サイトなどの掲載順位は気にしなければなりません。正しいHTMLマークアップは言わずもがなですが、よりウェブサイトの内容を正しくに伝えるために「構造化データ」というものがあります。
フロントエンドコーディングのもう少し先を考えるために「構造化データ」について、自分なりに勉強したので、備忘録として残しておければと思います。

構造化データとは？

検索エンジンがページの内容を理解しやすくするよう"意味づけ"をするためのもので、サイトの情報をより正確に検索エンジンに伝わるようにするために標準化されたデータ形式です。
検索エンジンでは、ページ内にただテキストとして書かれているだけの文章の意味や意図などを正確に理解できません。

例えば「株式会社プラカンは2005年8月に設立された、WEB制作会社です」というテキストがあるとします。
これを検索エンジンに正確に伝えるために各項目ごとにデータ化します。
組織名は「株式会社プラカン」で、創業は「2005年8月」で、業種は「WEB制作会社」です。

このように、検索エンジンが内容を読み取りやすくして、Webサイト内をクロールしてもらう事で、より正確にページの内容を把握し、品質を上げる事が目的になります。

構造化データの規格（ボキャブラリー）

構造化データの規格のひとつとして「Schema.org（スキーマ・オーグ）」のというものがあります。
Schema.orgは、Google、Microsoft、Yahoo、Yandexの検索大手がWeb検索結果に等しく構造化データを反映する目的で開発された規格（ボキャブラリー）です。
schema.org以外にも「data-vocabulary.org」などがあります。

※ボキャブラリーとは、構造化データをマークアップする際に、どの単語がどのような情報に対応しているのかを示す規格のこと

構造化データのフォーマットについて

構造化データを用いる際のフォーマット（シンタックス）として、主に3つほどあります。
※シンタックスは構造化データをHTMLにどのように記述するかという仕様のこと

microdata	schema.orgが最初に仕様統一を図ったマークアップ方法で、構造化データと実際のHTMLが一致しやすいというメリットがある一方で、ソースが煩雑になるというデメリットもあります。
RDFa Lite	1999年にW3Cによって規格化されている形式となっています。構造化データと実際のHTMLが一致しやすく、XHTMLでも使えます。ところが、ソースが煩雑になってしまう、Googleの構造化マークアップ支援ツールでサポートされていないといった点もあります。
JSON―LD　 （Googleが推奨）	Microdataと比較してコンピューターが読み取りやすい形式となっています。 ソースと分離でき、不可視のデータに関して記述が少なくて済みます。しかしこのとき、可視データは同じ内容を2カ所に記述する必要があります。

シンタックスは「JSON-LD」、ボキャブラリーは前述した「schema.org」がそれぞれGoogleに推奨されているので、基本的にはこの2つで構造化データを行うのがおすすめです。

記述方法

それでは、json-ldを使ってschema.orgで構造化データを記述した場合の例をご紹介します。

<script type="application/ld+json">
  {
    "@context": "http://schema.org",
    "@type": "website",
    "name": "株式会社プラカン",
    "inLanguage": "jp",
    "publisher": {
      "@type": "Organization",
      "name": "株式会社プラカン",
      "logo": {
        "@type": "ImageObject",
        "url": "ロゴ画像のURL"
      }
    },
    "headline": "株式会社プラカン",
    "description": "ホームページ制作会社プラカンは、大阪の新大阪を拠点に全国のWEB制作をサポート。コーポレートや採用サイト、病院や学校のホームページからランディングページなど2,000を超える多数の実績がございます。",
    "url": "https://www.purakan.co.jp"
  }
</script> 

まず、「<script type="application/ld+json">」の部分で、この構造化データはjson-ldのフォーマットで記述することを指定します。
次に「"@context": "https://schema.org/"」の部分で、意味付けをする規格がschema.org/であることを提示します。それ以降の@type~の部分から、このページが何について書かれているコンテンツなのかを意味付けしています。

@typeの種類について

schema.orgでは様々な「@type」はが用意されています。
Webサイトに掲載されているページコンテンツの内容や業種に合わせたTypeを選択することで、より精度の高い構造化データを記述することが可能です。
Typeは複数入れることができるので、ページに適したtypeを選定してください。
また、Googleでは特定の@typeを使用することで「リッチリザルト」の表示する事が可能です。

リッチリザルトとは

Googleの検索結果画面上でより多くユーザーに情報を届けるために提供している機能です。一般的なページのタイトルとディスクリプションの他にも多彩な情報を掲載されます。
https://developers.google.com/search/docs/appearance/structured-data/search-gallery?hl=ja

※「@type」のすべてがリッチリザルトに適応しているわけではありません。構造化データ＝リッチリザルトというわけではないのでご注意ください。

よく使われる@type

一般的なWEBサイトによく利用されるSchema.orgのTypeをご紹介します。
また、Googleの公式による、より詳しく解説しているURLも合わせて記載しているので、そちらも参考にしてもらえればと思います。

★BreadcrumbList（パンくず）

サイト全体の階層でこのページがどのページの配下に属しているかを明確にするtypeです。

★Organization（組織）

サイトの企業情報を明確にするtypeです。
全ページに記載したりもしていますが、厳密には「トップページ」や「会社概要」といった、
直接自社の組織情報について説明しているページに限って使用することが推奨されています。

★Article、NewsArticle、BlogPosting（ニュース・ブログなど）

新着情報や報道記事などに利用されます。
新着情報などは「NewsArticle」、
雑記ブログなどは「BlogPosting」を利用するとよいとされています。

★Product（商品）

ECサイトなどで商品を紹介しているページに利用します。
Productの構造化データについては、これだけで一つの記事ができるほどに色々と構造化することが可能です。Googleが紹介しているサイトのURLを記載しておくので、そちらを見ながら自分に合った構造を書き分けてください。

★JobPosting（求人情報）

採用情報などで掲載している求人情報などを構造化します。
構造化することで、求人情報を Google検索結果に表示して、特別なユーザーエクスペリエンスを提供できるようになります。

これ以外にも「FAQ」や「レストラン」「ローカル ビジネス」などいった様々なtypeが用意されているので、ページに属したtypeを探してみてください。

作成した構造化データを確認する

入力しても正しく記述できていなければ意味がありません。
作成した構造化データが正常にクローラーが認識しているかをテストするためのツールがあり、それで正しく記述できているかを確認することができます。すでにサイト上にアップしている場合はURLを、まだの場合はコードを入れることで結果を確認することができます。

構造化データをテスト

https://developers.google.com/search/docs/appearance/structured-data?hl=ja

リッチリザルト テスト	Googleのリッチリザルトに準拠しているかを確認できます。 また、Google検索でリッチリザルトがどのように表示されるかをプレビューすることもできます。
スキーママークアップ検証ツール	構造化データを全て検証します。

【まとめ】SEOにおける構造化データの役割

いろいろと説明しましたが、構造化データを入れるだけでランキングのスコアが上がるという事はありません。ただ、ページを検索エンジンに正確な情報を伝える事で、間接的にページへのアクセス促進につながるのと私は考えています。入れていないページより入れておく方が有利なのは確実ではないでしょうか。
ただし、ページに適してしない構造化データを入れてしまうと、逆効果になるので、入れる際はページに適した構造化データを入れるように心がけましょう。

参考文献

Google検索での構造化データのマークアップの仕組み概要
https://developers.google.com/search/docs/appearance/structured-data/intro-structured-data?hl=ja

json-ldの仕組みとは？SEO効果と構造化マークアップの方法を解説
https://gmotech.jp/semlabo/seo/blog/json-ld-seo/

リッチリザルトとは？種類や効果、設定と確認方法、注意点を解説
https://gmotech.jp/semlabo/seo/blog/rich-results-point/