構造化データって何の役に立つの？
役割から記述方法まで！
「構造化データ」って？という疑問をお持ちの方、わたしもその一人です。
そこで、今後さらなる発展を遂げそうな「構造化データ」について、深掘りしてみました。そもそも、「構造化データ」って、何のためにあるのでしょう？平たく言うと、検索エンジンにウェブページのテキストの意味を伝えるためのものです。検索エンジンはロボットですから、テキストの意味は理解できません。ロボットにテキストの意味を伝えるには、その物事に関連する情報をロボットにもわかるように紐づけて表記する必要があります。それが「構造化データ」なのです。
例えば、猫、キジトラ、タマ、雌、10カ月という単語があります。
このままでは検索エンジンは何について記述しているのか理解できません。
この情報に「構造化データ」の施策をすると
- ペットは猫で
- 模様はキジトラ
- 名前はタマで
- 性別は雌
- 年齢は10カ月
というふうに、人が意味を理解するようにロボットがテキストの意味を理解します。
ちなみにこの考え方をセマンティック・ウェブと言います。
参考サイト
SEO研究所サクラサクラボ
表示されるスニペットがリッチになる
ロボットの理解が進むと、どんな影響がでるのしょう？
現在、明言されているのは、検索結果のスニペットのリッチ化です。ちなみに、検索順位に関しては、現在の時点では影響はありません。スニペットとは検索結果にmeta descriptionや本文から抽出した内容を表示させたものです。
例として、「芋煮」を検索して表示したレシピページをみてください。通常はこんな感じです。meta description の内容が表示されます。
次は、「構造化データ」によってスニペットがリッチになった場合の表示です。
検索結果の表示内容が増え、表示面積も広がります。パンくずリストや画像も表示されます。その結果、ユーザーの目に止まりやすく、クリック率が上昇するという結果が出ています。
以下はスペインの調査会社による調査結果です。
表の最上部のtitle（タイトル）、snippet（スニペット）、url（URL）、images（画像）にどれだけ目が行く（fixations）のかを調べました。１番左の項目が目的ですが、マルチメディアを除く全ての目的でスニペット（snippet）が、一番ユーザーの目をとめていることがわかります。
参照
データの作り方
構造化データを記述するには次の2つが必要になります。
ボキャブラリーとシンタックスです。
ボキャブラリー（タイプとプロパティ）が値を表し、シンタックスはその記述方法（HTMLへの記述方法）になります。
ボキャブラリー
ボキャブラリーの規格はschema.orgです。
data-vocubraryという規格もありますが、今は非推奨です。
schema.orgはGoogle、Yahoo、Microsoftが策定を進めてきたボキャブラリーの規格です。
シンタックス
以下３つの規格があります。
- Microdata（コンテンツ内に構造化データをネストするために使用される、オープン コミュニティの HTML 仕様）
- RDFa（コンテンツに対応する HTML タグ属性を追加 HTML ページの見出しと本文の両方で使用される）
- JSON-LD（ページの見出しや本文の scriptタグ内に埋め込まれる JavaScript 表記）google推奨
まとめると、googleによる推奨規格はschema.org+ JSON-LDです。
記述方法
肝心の記述方法ですが、簡単です。
<script> ～</script> 内に記述します。今のところ、head,body,どこにでも記述できますが、htmlの読み込みを遮らないように </body> （bodyの閉じタグ）の前に書くことがおすすめです。
まず、JSON-LDの構造の説明です！
1 ：JSON-LDフォーマットの宣言
<script type=”application/ld+json”>～</script>
で、どのようなルールでマークアップするかを宣言します。
ここではJSON-LDで記述しますと宣言しています。
2：JSONオブジェクト
JSONオブジェクトとは、宣言文の間にある、「{ ～ }」で囲んだまとまりのことです。
keyとvalueによるペアによって構成されます。
keyはボキャブラリーのプロパティ（属性）を、valueは値を指します。
” key: value “
keyとvalueのペアを続けて並べるときは「,（カンマ）」を使って間を区切ります。
” key: value “,
” key: value “
一番最後はカンマはいりません。
3：キーワード
JSON-LDでは、keyに@Context、@type、@idといったキーワードが定義できます。キーワードは10種類以上存在しますが、schema.orgで利用するのは、主に@Context、@type、@idの3つです。
“@context”: “http://schema.org”,
Keyは@contextでvalueはhttp://schema.orgです。
@Contextでschema.orgを利用することを示しています。
“@type”: “Organization”,
続いて、@type で何について表現するのかを指定します。Event, Book, Movie, Recipe, Organization, Personなどが入る部分です。そして@typeのValueで指定したタイプで利用できるプロパティを記述していきます。
どんなプロパティが利用できるのかは、schema.orgのサイトで確認できますが、数が多いです。リッチスニペットだけを目的とするなら、デベロッパーサイトの技術ドキュメントに指示されているプロパティだけで十分です。
この例だと、＠typeでOrganization（会社）を指定したので、”Organization”のプロパティを指定しています。”name”: “マルキンアド株式会社”,”telephone”: ” 0274-60-1311″,”email”: “info@marukin-ad.co.jp”の部分です。
検索エンジンはこのウェブページが会社についてのもので、その会社の名前、電話番号、e-mailアドレスが記述されていると認識します。
親子関係をもたせる場合
Valueに入れ子的に、JSONオブジェクトを埋め込むことをEmbedding（エンベッディング）と言います。
“employee”:
{“@type”:”Person”,
“name”:”丸金太郎”
}
上記のようにkey：の後に「｛key:value｝」と記述します。
参照サイト：
検証方法
Google DevelopersのTesting Toolで文法チェックができます。書いたコードをコピペまたは構造化データの書かれたページのURLを張り付けるだけです。
どんな事柄がサポートされているの？
どんなものが構造化データでサポートされ、リッチリザルト（リッチスニペット）になるのかは、グーグルのページでチェックしてください。
https://support.google.com/webmasters/answer/7552505?hl=ja
パンくずリスト- イベント
- How-to
- 求人情報
- ロゴ
- 商品
- Q&A ページ
- レシピ
- 動画
用途別構造化データ記述例
以下のサイトにそれぞれの用途別テンプレートが記載されています。
わかりやすいので、自分の使用したい構造化タイプを、まずはこちらでさがすのもいいと思います。
https://www.itti.jp/web-design/microdata-json-ld/
googleにも用途別の記述例が載っています。
https://developers.google.com/search/docs/data-types/article?hl=ja
構造化データ マークアップ支援ツール（googleのガイドに沿って選択するだけ）
https://www.google.com/webmasters/markup-helper/u/0/
構造化データまとめ
構造化データは、検索エンジンがページの内容を理解するのに役立ちます。リッチスニペットの表示で、検索結果の表示面積を増やし、より多くのクリックへつながる要因になります。さらに、検索結果に表示されないデータでも、より多くをマークアップする意味があるといいます。
2018年4月6日に開催された ISM Spin-off #4 − Google Search Night で Google の Gary Illyes（ゲイリー・イリェーシュ）氏は、以下のように発言しました。
“ページにある構造化データはすべて Google にインデックスされます。”
構造化データがたくさんあればあるほど、Google のコンテンツ理解の手助けになり、ユーザーのクエリに関連性があるかどうかを、より的確に判断するヒントになるからです。今後も、グーグルによる構造化データのサポートは変わると思いますが、ますます重要度を増していくことが予想されます。良質なコンテンツを作成することが、最良のSEOと言われますが、構造化データも備えあれば、憂いなしのようです。
参照サイト：
海外SEO情報ブログ
WEBデザイナー ／ Y.E
