Now Loading...

構造化データとは?SEOへの影響・メリットから書き方まで紹介!

構造化データとは?SEOへの影響・メリットから書き方まで紹介!

SEOを取り巻く環境の中で構造化データというワードを目にすることが多くなってきたと思います。
Googleの検索品質評価ガイドラインでも、「Experience(経験)」「Expertise(専門性)」「Authoritativeness(権威性)」「Trustworthiness(信頼性)」の頭文字をとったE-E-A-Tを評価基準にしています。
構造化データを正しく用いれば著者情報などの情報を検索エンジンに正しく伝えることでそのサイトの信頼性や専門性を認知してE-E-A-Tの評価の向上につながる可能性があります。
今回は構造化データとは何か、そしてその使い方について解説していきます。

この記事でわかること

  • 構造化データとは何か
  • 構造化データのメリット・デメリット
  • セマンティックWEBという考え方
  • リッチリザルトについて
  • 構造化データの記述方法

01構造化データとは何か?

HTMLで書かれた情報が何を意味するのかを、検索エンジンやその他のクローラーに理解できるようタグ付けしたものです。検索エンジンは人間と同じようにサイトのテキストを理解することができません。そこで構造データを用いることでテキストなどに意味をメタデータとして持たせることで、ロボットが内容の解釈するのを容易にし、検索エンジンはより有用な検索結果をユーザーに提供できるようになります。

※メタデータ:あるデータや情報の属性や特徴を表す付随的な情報。WEBサイトでいうとデータの本体がページの内容(本文)ならメタデータはタイトル、投稿日時、最終更新日時、カテゴリ、執筆者名 などになります。データが何を表すのか(データの属性)を記すもので「データのデータ」とも言われる。

構造化データを話す上ではセマンティックWEBの考え方を知っておくと良いかもしれません。

02構造化データとセマンティックWEB

構造化データを話す上ではセマンティックWEBの考え方を知っておくと良いかもしれません。

セマンティックWEB

HTMLで書かれた情報が何を意味するのかを、検索エンジンやその他のクローラーに理解できるようタグ付けしたものです。検索エンジンは人間と同じようにサイトのテキストを理解することができません。そこで構造データを用いることでテキストなどに意味をメタデータとして持たせることで、ロボットが内容の解釈するのを容易にし、検索エンジンはより有用な検索結果をユーザーに提供できるようになります。

World Wide Webの考案者でもあるW3CのTim Berners-Lee(ティム・バーナーズ・リー)氏が提唱。 Webの利便性向上を目的に、Web上のデータを検索エンジンが理解できるように意味付けし、検索エンジンがより適切に情報を扱える状態を目指しているものになります。 検索エンジンは書かれている文字列は読み取れても、その意味を理解することは難しいとされています。 そこで、検索エンジンが情報を理解できるよう、それぞれの情報に「意味(=セマンティック)」をもたせる必要があります。その「意味を付与する」ために必要となるのが、構造化データなどの「メタデータ」です。 構造化データを設置することで検索順位に直接影響が出ることはないですがこういったセマンティックWEBの考え方を実現可能にするものになります。

03構造化データのメリット・デメリット

メリット

先ほど記述したように構造化データを設置することで検索順位に直接影響が出ることはないですが、構造化データのメリットとしては以下のようなものがあります。リッチリザルトが表示されることでページの視認性などユーザーエクスペリエンスが向上しユーザーも理解しやすくなるため構造化データを用いることで検索エンジンとユーザーの両方に優しいサイトになります。

  • 検索結果がリッチリザルトが表示されることでページの視認性などユーザーエクスペリエンスが向上しユーザーも理解しやすくなる
  • 構造化データを用いることで検索エンジンがサイトの情報を理解しやすくなる

デメリット

一方デメリットとしては専門的な知識が必要となることです。
また既存のサイトに導入する場合ページが大量にあるとその分工数も増えて労力がかかるため導入するハードルはネックになります。
ページが大量にある場合は導入するページを絞るといったような部分的な導入をすることで工数の負担を少なくすることもできます。

04リッチリザルトとは

先程からリッチリザルトという言葉を使っていますが、リッチリザルトとはどんなものなのか説明いたします。

リッチリザルト

通常の検索結果よりも視覚的・操作的な機能が追加された検索結果です。該当する種類の構造化データを適切に記述することで表示することができます。下は「拡張 パンくずリスト」で検索した1ページ目に表示されたものです。
ただし構造化データを設置したから100%リッチリザルトが表示されるとは限りません。

リッチリザルトサンプル
  1. ①パンくずリスト:URL 欄にパンくずを表示させることができます。通常検索結果で表示されるパンくずリストはページのスラッグ名になりますがスラッグ名だとパンくずリストからどんなページか理解しづらい場合があります。パンくずリストの構造化データを設定すると、URL 欄のドメインより後ろの部分にパンくずリストが表示されます。日本語で表示されるようになるので日本人向けのサイトの場合はユーザーが理解しやすくなります。
  2. ②FAQ:よくある質問ページの質問と回答を表示します。アコーディオン状に表示され、疑問をひとつにまとめているため解決に至るまでが速いという特徴があります。回答部分にはリンクも表示できるので、詳細な情報が知りたいユーザーをサイト内へと誘導することが可能です。

リッチリザルトの種類

現在Googleはリッチリザルトを30種類以上のパターンでサポートしています。
詳しくはGoogle公式の方でご覧ください。
Google 検索の視覚要素ギャラリー

05構造化データの記述方法

構造化データを記述する方法として2通りあります。

  • 直接HTMLに記述する方法
  • ツールを用いて記述する方法

ツールを用いる方法は直感的に操作ができ便利ですが扱える構造化データに制限があるため自由度が少ないです。 直接記述の方を用いる場合自由度がありツールに比べてエラーが少なく済むことが多い一方で工数が多くなり手間がかかる点がデメリットになります。

構造化データの記述には定められたフォーマットがありルールに沿って記述を行います。
記述する際にはボキャブラリーシンタックスというものを理解する必要があります。

ボキャブラリー

構造化データを設定する際に何についての情報なのかを定義するような規格です。
Googleがサポートしているボキャブラリーとしては、Google、Yahoo!、Microsoftが策定を進めてきた「schema.org」という規格があります。

シンタックス

構造データの記述方法のことを指します。
現在はJSON-LD , microdata , RDFaの3つありますがGoogleで推奨されているものは「JSON-LD」になります。

直接マークアップする方法

JSON-LDを用いる場合
構造化データサンプル

上記はGoogle検索セントラルのパンくずリストの記述例になります。
JSON-LDはheadタグ内が一般的ですが、HTML内のどこでも記述可能です。データを1箇所にまとめられることができ、記述量も少なく、シンプルで分かりやすい点が特徴に挙げられます。
デメリットはHTML内のコンテンツを変更する際は記述が隔離されているのでJSON-LDの調整をし忘れないよう注意が必要です。
今回はこのGoogle検索セントラルのパンくずリストの記述例を用いて解説していきます。

head内に記述していきます。
①script type=”application/ld+json”
JSON-LDの構造化データをマークアップするために、script要素で application/ld+json を指定します。

②”@context”: “https://schema.org”
@contextのプロパティで、https://schema.org の属性値を指定して、schema.orgを使った構造化データを記述することを宣言します。
そうすることで、https://schema.org で定義されてるボキャブラリー(プロパティやバリュー)を使って、有効なJSON-LDの構造化データを自由にマークアップすることができます。

③”@type”: “BreadcrumbList”
@typeのプロパティで何について表現するかを指定します。
ここでは@typeのプロパティで、BreadcrumbListの属性値を指定することでパンくずリストに関する情報を構造化データで記述できるようになります。
そして、基本的に@typeで指定した属性値にまつわるプロパティ(nameやurlなど)を@type以降にマークアップします。ここではitemListElementというプロパティでパンくずリストの中身を定義します。
@type:”ListItemでリストの属性値を指定してpositionで何番目か、nameにパンくずリストに表示される名前、itemにリンクを記入します。
今回の例の場合だと
https://example.com > Books
というふうに表示されます。
itemListElementの{}を増やすことでパンくずリストの階層を増やせます。

ツールを用いてマークアップする方法

直接記述する方法以外にも「構造化データ マークアップ支援ツール」と「データ ハイライター」を用いた方法もあります。
上記のツールを用いるデメリットとしては指定できるタイプが少ないため使用が限定されてしまいます。例えばよく使われるパンくずリストやFAQなどはサポートをしていないため自力でマークアップする必要があります。
またプラグインにも構造化データが記述されているものがあります。(Yoast SEOなど)

構造化データ マークアップ支援ツール

構造化データ マークアップ支援ツールのサイトへ行くと上画像のような画面が表示されます。
追加したい項目にチェックをします。下の入力欄に追加したいページのURLを入力します。
入力を終えたら「タグ付けを開始」をクリックします。

上画像のような画面に移ります。
今回は書評を選びました。右に表示される「マイデータアイテム」の中を見るとタイトルが必須項目なので、この場合書籍のタイトルの「基礎から時短ワザで覚えるPhotoshopの教科書」の部分をドラッグしてハイライトにします。
するとタイトル・画像などのメニューが出てくるのでその中からタイトルを選ぶとマイデータアイテムのタイトルに追加されます。同じ要領で他の部分も追加することができます。

マイデータアイテムの上にある「HTMLを作成」をクリックすると上の画像のような画面が出てきます。
表示されたHTMLをコピーしてheadに追加することで構造化データが追加されます。また「完了」を押すと、ページソース内に生成した構造化データが追加され、マークアップが完了となります。

また必ずhead内ということではないので、投稿に個別に設定したい場合は投稿の中でカスタムHTMLのブロックを追加しそこに貼り付けても大丈夫です。
その後正しく構造化データが追加されるかを検証するためにリッチリザルトテストを行います。

06構造化データの検証

構造化データをマークアップしても、エラーなどで有効性に問題があれば検索エンジンに認識されません。
直接記述して設置またはツールを用いて設置した後は本番に反映(アップロード)する前に、マークアップした構造化データが有効かツールを使って検証しましょう。

リッチリザルトテスト

リッチリザルトテストトップ画面

構造化データをテストするためのGoogleの公式ツールで、ページの構造化データで生成されるGoogleのリッチリザルトを確認できます。Google検索でリッチリザルトがどのように表示されるかをプレビューすることもできます。
まず上の画像のように調査したいページのURLを打ち込むか、コードを直接入力します。

リッチリザルトテスト結果画面

少し経つと上の画像のような結果が表示されます。
このように検出されていれば構造化データの追加がうまく機能していることになります。
検出されたデータというのが追加された構造化データの内容になります。

リッチリザルトテストエラー画面

結果によっては上の画像のように警告が表示されることもあります。
今回の場合の「項目「author」がありません」や「項目「headline」がありません」と表示されています。
これは記事に関する構造化データを追加したのですが記事の構造化データのタイプのArticleにはauthorとheadlineの情報が必要なのに入っていないという警告になります。
このような各構造化データの必須項目はGoogle検索セントラルの「機能ガイド」に記載されていますので適宜参照してください。

Search Consoleでの検証

Search Console拡張

Search Consoleを利用して構造化データの検証をすることもできます。
サマリーの一番下にある「拡張」に追加した構造化データが表示されます。
Search Consoleで表示される構造化データは「拡張」サポートされているもののみになります。
Search Console ヘルプ 「リッチリザルト レポート」

Search Console拡張詳細画面

「拡張」に表示されている項目をクリックすると構造化データごとにエラーはないかのレポートを確認することができます。
判定はエラー、有効(警告有)、有効の3つになります。

判定の内容
  • エラー:最低限のレベルを下回っています。エラーは可能な限り修正し、0にします。
  • 有効(警告あり):最低限のレベルを満たしていますが、ユーザーの利便性が低下する可能性があります。問題の優先順位によっては修正を行います。
  • 有効:最低限のレベルを満たしています。問題が含まれている場合がありますが、レポート上ではページに含まれる問題が記載されません。

07まとめ

ここまで構造化データについて解説してきました。
構造化データ自体は直接検索エンジンの評価に影響しません。
しかし構造化データを追加することで検索エンジンがページコンテンツを正しく理解できるのでWebページのインデックスが促進されたり、検索結果がリッチリザルトとして表示されることで視認性が上がりユーザーエクスペリエンスが向上しユーザーのページへの流入が促されるなど間接的にSEOに役立つようになります。
ユーザーにも検索エンジンにも優しいWEBサイトを目指すためには構造化データは重要な要素であると言えるでしょう。
株式会社ライトウェブでは構造化データのご相談も承ります。お気軽に弊社へお問い合わせください。

ご依頼・ご相談はこちら

この記事を書いた人

岸 由真

Front-end Engineer

スタッフ紹介ページへ

Lightning Lightalk
最新記事

Lightning Lightalk
記事一覧はこちら