LoginSignup
6
9

More than 5 years have passed since last update.

構造化データがよく分かる!基本からJSON-LDの書き方まで紹介

Last updated at Posted at 2019-04-19

構造化データとは

構造化データとは、簡単にいうと「コンピュータに文章の意味を伝える」ことです。

HTMLで書かれている情報に何を表しているのか意味付けをして、検索ロボットでもその内容が理解できるようにします。

構造化データの具体例

例えば、以下のような文字列があるとします。

<div>株式会社イーツー・インフォは横浜市にあります</div>

私たちは、この文章を見た時に会社名は、「株式会社イーツー・インフォ」、住所は「横浜市」であることがわかります。

しかし、検索エンジンは人間ではないので、これらの文章が何を表しているのか理解できません。

そこで、HTMLのマークアップを行うことで、検索ロボットにその情報に意味を伝えることが構造化データです。

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

メリットは、リッチスニペットが検索結果に表示されるため、ユーザーの目につきやすくなり、クリックされやすくなります。

リッチスニペットとは、検索結果に表示される通常の説明文(descriptionという概要)以外のリッチな情報のことです。例えば料理の画像やレビューなどがあります。

以下がリッチスニペットの例です。

リッチスニペットの種類

画像

スクリーンショット 2019-04-19 12.09.41.png

レビュー

スクリーンショット 2019-04-19 12.11.15.png

ボキャブラリーとシンタックスについて

構造化データを理解する上で重要なキーワードが「ボキャブラリー」と「シンタックス」です。

ボキャブラリー

ボキャブラリーとはマークアップを定義する単語集のようなものです。

ボキャブラリーの代表例はschema.orgです。

シンタックス

シンタックスとは、文章の意味を検索エンジンに伝えるための書き方のことです。

代表的なものだと次の3つがあります。

  • Microdata
  • RDFa
  • JSON-LD

今回はこの中でJSON-LDを取り上げて紹介します。

JSON-LDとは

JSON-LDは、スクリプトを用いて記述します。その名前の通り、JSON形式の記述です。

JSON-LDを利用するメリット

メリットはコードがシンプルで見やすくなることです。
MicrodataやRDFaはHTML上で各文章に直接マークアップしますが、その場合、HTMLが複雑になりやすくなります。
一方、JSON-LDはどこにでも記述ができ、コードを一箇所にまとめることができるので、コードがシンプルで見やすくなります。

JSON-LDの書き方

JSON-LDで書くには次のような宣言文が必要です。

<script type="application/ld+json">
//ここに内容を書いていきます
</script>

JSON-LDでは「{}(波かっこ)」の中に「key : value」という形で書いていきます。そして一行書くごとに「,(カンマ)」で区切りをつけていきます。

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Organization"
}
</script>

@contextでschema.orgで書くことを宣言します。
@typeでschema.orgのどのタイプであるかを示します。Event, Book, Movie, Recipe, Organization, Personといったものがあります。

@typeのvalueで指定したタイプで利用できるプロパティを記述していきます。どんなプロパティが利用できるのかは、schema.orgのサイトで確認できます。

以下が記述例です。

<script type="application/ld+json">
{
    "@context": "http://schema.org",
    "@type": "Organization",
    "name": "株式会社イーツー・インフォ",
    "telephone": "03-xxxx-xxxx",
    "email": "info@sample.co.jp"
}
</script>

構造化データをテストツールでチェックする

完了したら、構造化テストツールで確認します。
「エラーなし」「警告なし」と表示されていなければOKです。

6
9
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
9