「構造化データ」とは

「構造化データ」は、HTMLファイルに含めておく隠し項目の一般名称です。<meta> タグの keywords や description などと同じく、ホームページの表面には現れませんが検索エンジンが読み取って解釈する情報の一つで、検索結果ページにより分かりやすい情報（リッチスニペット）が表示される可能性に繋がります。

「構造化データ」としてどんな情報を書いておくことができるかは、規格が定められており、schema.org（すきーま・おるぐ）というグループが定めたものが一般的に使われています。schema.org はグループの名前でもあり、規格を公開しているサイト名であり、その URLでもあります。

「構造化データ」が表すものと検索エンジンとの関係

Webサイトのどのページにも "keywords" や "description" メタタグ（それぞれ、ページのキーワードと概要）が記載できるのとは異なり、構造化データではまず、Webページ（HTMLファイル）が「何を表しているのか」を定め、それに対応する属性を追記していく構造を取ります。例えば Webページが「記事（Article）」であれば、「著者（author）」や「発行日（datePublished）」の情報が必要とされます。一方、Webページが「イベント（Event）」を表すのであれば、「上映時間（duration）」や「場所（location）」の情報が求められます。

ただし、schema.org で規格として提案されている項目を全ての検索エンジンが読み取ってくれる訳ではありませんし、必須とみなす項目も異なります。

検索エンジンでの効果

構造化データをページに埋め込んでおけば必ず検索エンジンがそのページを上位に表示してくれる訳ではありませんが、検索エンジンによっては検索結果ページに「リッチスニペット」と呼ばれる追加情報を表示するなど、ユーザに分かりやすく情報を伝えるために利用されることがあります。

例えば、イベントの情報であれば、開催時刻や場所が直接検索結果ページに表示されたり、店舗情報であれば、開店時間が表示される場合があります。なお、これらの情報は、必ずしもそのページの構造化データからのみ取得している訳ではないようです。また、何がどのように表示されるかも、今後変わっていく可能性があります。

Google では、構造化データと Google検索サイトでの表示の対応を以下のサイトで公開しています。
Google 構造化データギャラリー

構造化データの書き方

メタタグ情報の場合、書き方は「<meta name="keywords" ...>」というHTMLタグを使った一種類しかありませんが、構造化データの書き方は複数あります。主なものは以下の 3種類です。

Microdata
RDFa
JSON-LD （2017年9月現在で Google 推奨）

このうち Microdata と RDFa は HTMLタグに直接「これは○○を表している部分」という属性を付けていく方法です。両者は属性名や値の書き方が異なりますが、HTMLタグをベースにしている点が共通しています。このサイト（すぐ使えるサポート情報）は Microdata を採用しています。

一方、JSON-LD は表示用の内容を記載しているHTMLタグ部分とは別に、<script> タグ内にそのページの内容を JavaScript 風の文法で記載します。現在 Google が推奨している構造化データの形式が JSON-LD です。

以下にそれぞれの例と特長を挙げます。例えば以下のようなHTMLがあったとします（schema.org から引用して日本語に変更）。

コピー

<div class="event-wrapper">
  <div class="event-date">10月14日（土）</div>
  <div class="event-title">災害に見舞われた町</div>
  <div class="event-venue">
    イベントスペース「高跳び込み」
    <div class="address">
      160-0021 東京都新宿区<br>
      歌舞伎町1−19
    </div>
  </div>
  <div class="event-time">9:30 PM</div>
  <div class="event-price">1,300円</div>
  <a href="http://www.example.com/ticket/309433">チケット購入</a>
</div>

Microdata での構造化データタグ付

Microdata で構造化データのタグ付をしたのが下記のコードです。太字の強調した部分が追加した Microdata のタグと属性、値です。

itemscope というキーワードと itemtype属性でそのタグ内の情報が何のデータを表しているかを示し（青字部分）、itemprop属性でその具体的値を示しています（赤字部分）。

コピー


<div class="event-wrapper" itemscope itemtype="http://schema.org/Event">
  <div class="event-date" itemprop="startDate" content="2017-10-14T21:30">10月14日（土）</div>
  <div class="event-title" itemprop="name">災害に見舞われた町</div>
  <div class="event-venue" itemprop="location" itemscope itemtype="http://schema.org/Place">
    <span itemprop="name">イベントスペース「高跳び込み」</span>
    <div class="address" itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
      <span itemprop="postalCode">160-0021</span>
      <span itemprop="addressRegion">東京都</span>
      <span itemprop="addressLocality">新宿区</span><br>
      <span itemprop="streetAddress">歌舞伎町1−19</span>
    </div>
  </div>
  <div class="event-time">9:30 PM</div>
  <span itemprop="offers" itemscope itemtype="http://schema.org/Offer">
      <div class="event-price" itemprop="price" content="1300">1,300円</div>
      <span itemprop="priceCurrency" content="JPY" />
      <a itemprop="url" href="http://www.example.com/ticket/309433">チケット購入</a>
  </span>
</div>

この方法でタグ付を行えば自ずから、HTMLタグの階層構造がデータ構造と一致する事になります。この例では、div.event-wrapper がイベント情報のまとまりを表し、その下に開始日時（startDate）、イベント名（name）、会場（location）などの情報があります。「itemprop="location"」の付いている div.event-venue には「itemscope itemtype="http://schema.org/Place"」が並置されていて、このタグが場所情報（Place）を内包している事を示しています。

コピー

<!-- ↓ Event の location（会場）情報であり、構造は Place である事を示している -->
<div class="event-venue" itemprop="location" itemscope itemtype="http://schema.org/Place">
    <span itemprop="name">イベントスペース「高跳び込み」</span>
    <!-- ↓ 同様に、Place の address（住所）情報であり、構造は PostalAddress である事を示している -->
    <div class="address" itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
        ：（省略）
    </div>
</div>

通常は、itemprop属性を付けたタグ内のテキストがその値とみなされますが、言葉としての表示がデータ形式としては読み取りにくい場合（下記緑字部分）、content属性を付けてその中に値を表示します（同赤字）。

コピー

<!-- ↓ 日付情報は、コンピュータに読みやすい形式を content 内に書き直す。 -->
<div class="event-date" itemprop="startDate" content="2017-10-14T21:30">10月14日（土）</div>

また、通貨を示す「JPY」はWebページには表示しませんので、このような値は <span itemprop="xxx" content="..." /> のように値の無い <span> タグか、または <meta> タグで記載します（下記青字部分）。

コピー

<!-- ↓ 価格の数値情報も同様に書き直し。通貨情報は表面には出さずに記載。 -->
<div class="event-price" itemprop="price" content="1300">1,300円</div>
<span itemprop="priceCurrency" content="JPY" />

どのような値を記載できるかは、schema.org サイトで公開されています（英語）。

Microdata の特長

HTML構造に属性を付けていく事ができる。このため、データを重複して記載する必要がなく、JSON-LDに比べてファイルが軽量。
HTMLタグ構成によっては構造を反映した属性付けが難しい事がある。このため、既存のページに Microdata で構造化データを追加するには、タグ構成の変更が必要になる場合が多い。

RDFa での構造化データタグ付

RDFa で同じHTMLに対して構造化データのタグ付を行うと以下の通りです。太字の強調した部分が追加した RDFa のタグと属性、値です。

コピー

<div vocab="http://schema.org/" class="event-wrapper" typeof="Event">
  <div class="event-date" property="startDate" content="2017-10-14T21:30">10月14日（土）</div>
  <div class="event-title" property="name">災害に見舞われた町</div>
  <div class="event-venue" property="location" typeof="Place">
    <span property="name">イベントスペース「高跳び込み」</span>
    <div class="address" property="address" typeof="PostalAddress">
      <span property="postalCode">160-0021</span>
      <span property="addressRegion">東京都</span>
      <span property="addressLocality">新宿区</span><br>
      <span property="streetAddress">歌舞伎町1−19</span>
    </div>
  </div>
  <div class="event-time">9:30 PM</div>
  <span property="offers" typeof="Offer">
     <div class="event-price">
        <meta property="priceCurrency" content="JPY" />
        <meta property="price" content="1300" />1,300円
     </div>
     <a property="url" href="http://www.example.com/ticket/309433">チケット購入</a>
  </span>
</div>

Microdata とほぼ同じですが、http://schema.org/ のサイト名は1回だけ vocab属性で示します。タグ内の情報が何のデータを表しているかは typeof属性で、具体的値は property属性で示します。

上記例では、Microdata の例では <span> タグで表示していた通貨情報を <meta> タグで記載しています。

JSON-LD での構造化データ

JSON-LD の場合、構造化データはページの内容の外に書きます。<script> が置ける場所なら <head> 内、<body> 内のどこでも良いです。上の2つと同じ情報を JSON-LD で表現すると、下記の通りです。

コピー

<script type="application/ld+json">
{
    "@context": "http://schema.org",
    "@type": "Event",
    "location": {
        "@type": "Place",
        "address": {
            "@type": "PostalAddress",
            "postalCode": "160-0021",
            "addressRegion": "東京都",
            "addressLocality": "新宿区",
            "streetAddress": "歌舞伎町1−19"
        },
        "name": "イベントスペース「高跳び込み」"
    },
    "name": "災害に見舞われた町",
    "offers": {
        "@type": "Offer",
        "price": "1300",
        "priceCurrency": "JPY",
        "url": "http://www.example.com/ticket/309433"
    },
    "startDate": "2017-10-14T21:30"
}
</script>

データの階層構造は上の2つの例と同じですが、それを別の場所に取り出して記載しています。HTML構造と無関係にデータ構造を記載できますのでその点がメリットです。ただし、表示用と構造化データ用の2か所同じ内容で更新が必要になりますので、CMSなどのページ自動生成ツールを使っていない限り、編集ミスの可能性が大きくなります。

JSON-LD の特長と注意点

HTML構造と無関係にデータ構造を記載できる。このため、既にあるHTMLのコーディングを変更せずに構造化データを追加する事ができる。
カンマの打ち方を間違えるとデータ全体の読取りができなくなるので注意が必要。
表示用のデータの他、構造化データ用に同じ内容をファイル内に重複して書かなければならない。
上の2点から、頻繁に編集する手動編集のページには向かない。

3つの使い分け

上記の3つの表記方法は、一つのHTMLファイル内に共存できます。例えば、JSON-LD で Event の情報を表示し、Microdata で WebPage の情報を記載しても良いのです。ただし、同じタイプ（例えば Event ）の情報の属性を別の方法に分けて記載する事はできません。例えば、イベント名と開催時刻は Microdata で記載し、チケット情報は JSON-LD で記載する、などの分離はできません。

複数の情報を表したいとき

一つのWebページの中に複数のデータ構造を含めたい場合、例えば、「このページは WebPage （Webページ）でもあり、Event（イベント情報）でもある」といった場合もあります。

Microdata で WebPage であり、Event である事を表現

Microdata と RDFa の場合は、タイプを2つ併記できます（下記は Microdata の例）。

コピー

<html itemscope itemtype="http://schema.org/WebPage http://schema.org/Event">

JSON-LD で WebPage であり、Event である事を表現

JSON-LD の場合は、<script> タグの塊を繰り返します。

コピー

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "WebPage",
  "author": {
　　：（省略）
}
</script>
<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Event",
  "location": {
　　：（省略）
}
</script>

構造化データに関するその他の情報

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

Google が、構造化データがどのように読み取られているかをチェックするツールを提供しています。文法エラーや推奨項目の不足などもレポートしてくれます。

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

データ設定時の注意点

構造化データを設定する時は、データが正確な値のみを記載するように Google は推奨しています。例えば、開催時刻が未定なら、「0時」（2017-10-14T00:00）といった適当な値を入れておくよりは日付のみ（2017-10-14）の方がよいとの事です。

何を書けるのか？

構造化データでどんなデータを表せるのかは、非常に多岐に渡りますが、Webサイトでよく使われる情報のタグ付方法を Google が「ギャラリー」として公開しています。ページは英語ですが、「READ THE GUIDE」→「SEE MARKUP」と順にボタンを押すとサンプルコードが表示されます。

Google 構造化データギャラリー

「Google 構造化データギャラリー」では、下記のような情報を検索エンジンに分かりやすく表示するためのタグ付の例が掲載されています。

Breadcrumbs	パンくずリスト
Corporate Contact Information	会社の問合せ窓口
Logos	ロゴ
Social Profile Links	SNSリンク
Articles	記事
Books	本
Courses	セミナー
Events	イベント
Job Postings	求人情報
Local Businesses	店舗情報
Music	音楽アルバム・ミュージシャン
Podcasts	ポッドキャスト
Products	製品情報
Recipes	料理のレシピ
TV and Movies	テレビ番組と英語
Videos	ビデオ