「構造化データ」がよく分かる！初心者向け徹底解説

SEO対策の文脈において、最近頻繁に話題になる「構造化データ」。詳細に理解されている方はそこまで多くないのでは？と思います。ここでは構造化データやリッチスニペットの概要から、HTMLでの記述方法、テストツールなど、全体像を掴んで頂ければと思います。この記事は2014年に書かれたものを2019年最新版にコンサルタント青木が変更・追記いたしました。

これだけは押さえてほしい構造化データ2つのポイント
 セマンティックWebとは
 構造化データとは
 構造化データを使用するメリット
 ボキャブラリーとシンタックス
 構造化データをマークアップする方法
 構造化データをHTML上で直接マークアップする方法
 データハイライターを用いる方法
 テストツールのご紹介
 まとめ

これだけは押さえてほしい構造化データ2つのポイント

難しいイメージのある構造化データですが、ざっくりまとめるとこの2つがポイントになります。

検索エンジンがページの内容を理解しやすくなる
検索結果に様々な要素が表示されるようになる

検索エンジンは人間と同じようにサイトのテキストを理解することができません。もちろんある程度はわかるはずなのですが、完璧とはいきません。そこで、テキストに”意味”のマークアップを行い、検索エンジンがテキストを理解できるようにするというのが、構造化データの基本的な考えになります。

そして、検索エンジンがテキストを理解できるようになると、その情報を使って検索結果に様々な要素を表示できるようになるのです。例えば、「コンビニアルバイト」などで表示されるGoogleしごと検索(Google for jobs)も構造化データを用い、検索結果に表示しています。

なんとなく、構造化データを理解していただけましたでしょうか？ここからはしっかりと構造化データについて解説しますが、困ったら2つのポイントに立ち返ってみてください。

セマンティックWebとは

構造化データとセマンティックWebという考え方は切っても切り離せないものです。今回は構造化データを説明する前にセマンティックWebというものに簡単に触れておきたいと思います。

「セマンティックWeb」は、例えば以下のように説明されています。

Webページおよびその中に記述された内容について、それが何を意味するかを表す情報(メタデータ)を一定の規則に従って付加することで、コンピュータが効率よく情報を収集・解釈できるようにする構想。インターネットを単なるデータの集合から知識のデータベースに進化させようという試みがセマンティックWebである。
引用元：セマンティックWeb（Semantic Web）とは

コンピュータ(検索エンジン)は従来、テキストを単なる”文字”として認識し情報として蓄積していました。しかし、それでは検索エンジンは文字を記号としてしか認識することができず、その意味を推し量ることはできません。

そこで、文字を”意味”としてその背景や文脈まで解釈し、それを蓄積していこうというのがセマンティックWebの考え方です。

構造化データとは

セマンティックWebを実現するための手段として、構造化データがあります。構造化データは、テキストなどに意味をメタデータとして持たせることで、ロボットが内容の解釈を容易にし、検索エンジンはより有用な検索結果をユーザーに提供できるようになります。

とはいっても、わかりづらいので例を。例えば、以下のような例を考えます。

<div>
名前：青木 創平
生年月日：1994年8月19日
</div>

私達はこれを見た時に、この人は青木創平という”名前”の人物で、1994年の8月19日が”生年月日”だと、ある程度推測することができます。

検索エンジンもその推測ができないわけではありませんが、これを明確に名前と誕生日だと定義することは難しいのです。そこで、”名前”や”生年月日”という情報の「意味」を検索エンジン等に明確に伝えてあげましょうというのが構造化データの考え方です。

構造化データはHTMLに直接マークアップする、もしくはデータハイライターや構造化データマークアップ支援ツールを用いて設定しますが(設定方法は後述します。)、上述した青木創平の例でいうと以下のような記述となります。

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Person",
"name": "青木　創平",
"birthDate": "1994-08-19"
} 
</script>

nameやbirthDateという値が含まれているのが御覧頂けるかと思いますが、特定の情報に対してHTMLマークアップを行う(メタデータを付与する)ことでその情報の説明が付与することができるようになります。

構造化データを使用するメリット

検索エンジンがサイトコンテンツの把握を容易に行えます

上述した通り、特定のテキストあるいは画像がどういう情報なのかを指し示すことで、検索エンジンはコンテンツの内容がどういう意味を持つものか、容易に把握できるようになります。

構造化データを用いることで、前述した文章は、「私の名前は青木創平で、誕生日は1994年8月19日です」のように、情報の持つ意味がより明確に検索エンジンに伝わり、適切に認識されるようになります。

検索結果にリッチスニペットが表示されます

通常の検索結果においてサイトが表示される際には青色のリンク、その下meta descriptionやサイト内テキストから引用したスニペットが表示されますが、構造化データを用いることで、リンクの下に通常とは異なる情報が表示されることがあります。これを「リッチスニペット」と言います。

こういった検索結果を見たことがある方は多いのではないかと思います。

▼リッチスニペットの例

この場合はパンくずリスト、レビュー、価格帯の情報がマークアップされたことで、検索結果にリッチスニペットとして表示されています。

これにより検索結果で目につきやすくなり、クリックされやすくなるなどのメリットがあります。リッチスニペットに対応されているコンテンツは、上の画像のパンくずリストやレビュー情報、価格情報以外にもイベント、記事、レシピなどがあります。また、2019年1月に実装された「Googleしごと検索」は構造化データをマークアップすることで「〇〇求人」、「〇〇バイト」のようなクエリで、エンリッチリザルトが表示され、そこからユーザーは求人に申し込むことができるようになりました。

▼「正社員求人」の検索結果
Googleしごと検索が反映された検索結果

ボキャブラリーとシンタックス

構造化データを理解する上で、この2つの言葉についてきちんと理解しておく必要があります。端的に言うと、ボキャブラリーが値を表し、シンタックスはその記述方法になります。

ボキャブラリー

冒頭の例では青木創平に”name”、1994-08-19に”birthDay”という値を付けました。その指定する値を定義している規格のようなものがボキャブラリーです。

ボキャブラリーの代表的なものにschema.orgがあります。schema.orgはGoogle、yahoo!、Microsoftの大手検索エンジン企業が共同で取り組んでおり、値の数は日々拡張されています。

先ほどの例は、人物の説明でしたが、人物を説明する際には名前や誕生日はもちろんのこと、所属している団体やその人が運営するサイトなども説明することがあるかと思います。schema.orgはそういった部分も網羅しており、例えば人物(Person)であればこちらのページにてまとめられています。Propertyという欄で人物の説明に対してマークアップ可能な値が表示されています。

また、見て頂くとわかるかと思いますが、プロパティは階層構造となっています。

例えば、「Thing(もの)」という大項目の子として「Book(本)」や「Event(イベント)」という項目、「Event(イベント)」の子として「BusinessEvent（企業向けイベント）」といった階層を形成しています。

シンタックス

ボキャブラリーは値を定義しているだけのものですので、HTMLにマークアップする際にはどうマークアップするかの仕様が必要ですが、その仕様がシンタックスです。

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Person",
"name": "青木　創平",
"birthDate": "1994-08-19"
} 
</script>

ちなみにこの文章でいうと<script type=”application/ld+json”>～<;/script>の部分がシンタックスで決められている仕様です。

シンタックスには代表的なもので以下の3つがあります。

JSON-LD
Microdata
RDFa

Googleが推奨しているのはJSON-LDです。(この記事でもJSON-LDを採用しています。)

また、JSON-LDはHTML上で各情報に直接マークアップするその他のシンタックスとは異なり、スクリプトを用いて記述するため、各データに直接マークアップする必要がなく、HTMLのどこに記述しても大丈夫な仕様になっております。

先ほどの例で再確認

再度、青木創平の例を用いて詳しく見てみましょう。

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Person",
"name": "青木　創平",
"birthDate": "1994-08-19"
}
</script>

1. <script type=”application/ld+json”>～</script>
JSON-LDでマークアップする際のルールとして、必ずこの記述をします。また、scriptとありますが、スクリプトを実行させるものではありません。この間にマークアップします。

2. “@context”: “http://schema.org”
この記述はschema.orgを使って記述することを宣言するためのものです。

schema.orgとJSON-LDの組み合わせで記述する際は必ずこの記述をします。ここまでは基本固定で大丈夫です。

3. “@type”: “Person”
@type で何について表現するのかを指定します。今回であれば、人についてはPersonで定義されています。他にも、イベントは、Eventで定義、製品などはProductで定義されています。

4. “name”: “青木　創平”,
＠typeで指定しているバリューを表現するためにキーに値を入れていきます。今回であればバリューはPerson、キーはname、値は青木創平となります。また、キーはバリューに紐付いております。

構造化データをマークアップする方法

構造化データを検索エンジン(Google)に伝える際には大きくわけて2つの方法があります。

HTML上で直接マークアップする方法
データハイライターを用いる方法

前者のHTMLに直接マークアップする方法は、文字通り上述した青木の例のようにHTMLタグに構造化データの要素を追加する方法になります。

一方でデータハイライターを用いる場合、ウェブマスターツールのページ上でクリックすることによりページの構造化データを(HTMLをいじることなく)Googleに伝えることが可能です。

Googleヘルプには以下のように書かれています。

■データハイライターの使用ができるケース:
記事
イベント
地域のお店やサービス
レストラン
商品
ソフトウェアアプリケーション
映画
テレビ番組のエピソード
書籍
引用元:データハイライターについて – Search Console ヘルプ

どちらの方法もメリット・デメリットがありますので、運営されている体制やサイトの状況などにより、どちらを使うか検討することが望まれます。

ではそれぞれ実際に説明していきましょう。

構造化データをHTML上で直接マークアップする方法

この方法には大きく分けて2つあります。それぞれ説明します。

ボキャブラリーとシンタックスを参考にHTMLにマークアップしていく方法

今回はボキャブラリーにschema.orgとシンタックスにMicrodataを用いてマークアップする方法を紹介します。

一般的に構造化データがマークアップされている情報は人物や商品、パンくずが多いですが、こちらにまとめられている通り、マークアップできる情報は他にも沢山あります。

今回は以下の文章について考えてみましょう。

<div>会社名：ナイル株式会社</div>
<div>住所：東京都品川区東五反田1-24-2東五反田1丁目ビル7F</div>
<div>問合せ先：03-6409-6766</div>
<div>創業年：2007年1月15日</div>
<div>創業者：高橋飛翔</div>
<div>オフィシャルサイト：https://nyle.co.jp/</div>

①まずは構造化マークアップできる箇所を確認しましょう。

構造化データをマークアップできる箇所と、マークアップすることで検索結果にリッチリザルトとして表示されるかを確認しましょう。今回はすべての情報をマークアップできますが、問い合わせ先以外はマークアップしても、検索結果にリッチリザルトが表示されません。もちろん、だからといってマークアップ自体が無駄になるわけではなく、構造化データの設定により検索エンジンは意味情報を理解しやすくなります。あくまでマークアップの優先度を考える際などに役立てましょう。

②マークアップを行いましょう。

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Corporation",
"name": "ナイル株式会社",
"founder": "高橋飛翔",
"foundingDate": "2007年1月15日",
"url": "https://nyle.co.jp/",
"contactPoint": {
 "@type": "ContactPoint",
      "telephone": "+81-3-6409-6766",
      "contactType": "customer support",
      "areaServed": "JP"
    },
"address": {
    "@type": "PostalAddress",
    "addressLocality": "品川区, 東京",
    "postalCode": "141-0022",
    "streetAddress": "東五反田1-24-2東五反田1丁目ビル7F"
  }
} </script>

これでこのテキストに構造化データをマークアップできました。

構造化データマークアップ支援ツールを用いた方法

ウェブマスターツールには、構造化データマークアップを支援する機能があります。

先に説明した方法だとschema.orgなどを理解した上でマークアップする必要がありましたが、こちらの方法はそれよりも容易に構造化データを用いることが可能になります。

ここでは弊社平塚が執筆したブログを用いて説明します。

①構造化データマークアップ支援ツールに該当するページのURLを入力し、今回マークアップするデータを選択した上でタグ付け開始をクリックします。

▼ページタイプとURLの入力ページ
構造化データマークアップ支援ツールサイトタイプ設定画面

今回はブログ記事のマークアップですので、記事を選択しました。

②実際にマークアップしてみましょう。

タグ付けはツール内でページが読み込まれた画面で行います。右にタグ付けできるデータが並びます。この例で言うと、前の画面で記事を選んだため、著者や公開日など、記事に関連するデータが並んでいます。

ではまず一番上にある「名前」(今回の場合は記事タイトルです)をマークアップしてみましょう。

▼データのタグ付けページ
構造化データマークアップ支援ツールメイン画面

タイトルに当たるところをドラッグすると、選択肢が出てきますのでそこから「名前」を選択しますと右側にマークアップしたいテキストもしくは画像が追加されます。著者情報や公開日なども同様の要領で指定していきます。

データの指定が終わったら右上にある「HTMLを作成」をクリックするとそのページのHTMLが出力されます。

▼出力されたHTML 構造化データマークアップ支援ツールHTML画面

イメージ

③出力されたHTMLをサイトに反映させます。
サイト運用の仕方にもよりますが、出力されたHTMLをコピーしてHTMLを実装しましょう。これでマークアップは完了です。制限は多いですが、専門的な知識がなくても構造化データをマークアップできるので利便性は高いです。自分のサイトにはどのような構造化データをマークアップできるのか確認するのにも役立ちます。

データハイライターを用いる方法

データハイライターを用いた場合には直接HTMLをいじる必要がなく、構造化データマークアップ支援ツールのようにブラウザ上でクリックすることで構造化データをGoogleに伝えることが可能です。

①ウェブマスターツールでデータハイライターを開きます。

ハイライト表示を開始しましょう。

▼URLとページタイプの選択画面データハイライターの最初の設定画面です

先ほどと同様に構造化データを設定したいURLを入力し、タイプを選択します。今回も弊社平塚が執筆したブログを用いますので、タイプに「記事」を選択しました。

また「このページをタグ付けし、他のページも同様にタグ付けする」の場合は(幾つかのサンプルページにてタグ付けを行うことで)同様のページ群もGoogleが学習して構造化データを認識してくれるようになります。一方で「このページだけをタグ付けする」場合はGoogleに学習させず選択したページのみをタグ付けしたい場合に用います。

ブログ記事のように同じようなページ群がある場合には前者、そうでない場合には後者が望まれると思います。
今回はブログ記事ですので前者を選択しました。

②タグ付けを行います。

▼タグ付け画面データハイライター-データ選択画面

上述した構造化データマークアップ支援ツールと同様に、タグ付けしたいところをクリックもしくはドラッグし、タグ付けするデータを選択します。タグ付けが終了したら右上の「完了」を選択しましょう。

③Googleに自動でタグ付けして欲しいページを選択します。
※この選択肢は「このページをタグ付けし、他のページも同様にタグ付けする」を選択した場合にのみ表示されます。

▼ページセットの作成画面データハイライターのこの画面でデータを抽出するページを選択します

Googleが同様のタイプだと判断したページ群が選択肢として表示されます。それでは問題がある場合は「カスタム」で設定しましょう。※ページ群の設定は正規表現で行います。

これらを選択したら「ページセットを作成」に進みましょう。

④サンプルページで上手く設定できているか確認します。

Googleは最初にタグ付けした設定から他のページでも同様の構造化データをタグ付けします。このページでは③で選択した構造化データを設定したいページ群の中から、構造化データ部分をハイライトした状態でサンプルページが表示されます。自分の意図通りに設定されている場合には、右上の「次へ」をクリックしましょう。

▼サンプルページの確認画面1 データハイライター-サンプル画面1

次々にサンプルが表示されますので、問題がある場合には手動で設定を修正しましょう。5ページ分のサンプルを確認すると、「完了」という項目が右上に表示されるので次に進みましょう。

▼サンプルページの確認画面2 データハイライター-サンプル画面2

最後に確認したサンプルページを再度見直して、問題が無い場合は右上の「公開」ボタンを押しましょう。これでデータハイライターによる構造化データの設定は完了です。

テストツールのご紹介

構造化データテストツール

構造化データテストツールで正しく構造化データが記述できているかを確認できます。URLもしくはHTMLを入力することでそのページに設定した構造化データが正しく設定されているか、どの項目が設定されているかに加えて、検索結果上でどういう表示がなされるページなのかを確認できます。

テストツール

構造化データのマークアップを行った後には出来る限りこのツールを用いて、正しく設定されたかを確認するようにしましょう。

※なお、このツールで表示される検索結果プレビューが必ずしも本物の検索結果で表示されるとは限らないようです。

Google Search Consoleの「構造化データ」項目

Google Search Consoleの構造化データでは、構造化データの設定にエラーが無いか一覧で確認することができます。検索結果のプレビュー機能は無いですが、構造化データにエラーがあるデータタイプやページが一覧で確認できますので、URLを何度も入力する必要のある構造化データテストツールよりもその点は便利です。サポートしている(確認できる)構造化データはリッチリザルトのステータスレポート – Search Console ヘルプを確認してください。

まとめ

ここ最近のGoogleの動きを見ても、構造化データを利用する重要性は言わずもがなだと思います。ECサイトなどは受ける恩恵も大きく、サイトによってはもはや必須と言っても良いかもしれません。しかし、リッチスニペットが表示されない構造化データのマークアップに関しては、コスト・工数的に現実的でない場合が多く、そのあたりのバランスはなかなか難しいです。サイトの施策状況やリソースから考えると良いでしょう。もし構造化データを含めたSEOのことでご相談があれば、お気軽に弊社までご連絡ください。

最後に、こちらも参考にどうぞ。

皆様のお役に立ちましたら幸いです。

ナイル株式会社　青木

「構造化データ」がよく分かる！初心者向け徹底解説はナイル株式会社 - SEO HACKSで公開された投稿です。

目次