リッチスニペットを表示させるために効果的と言われている構造化データ。
以前筆者が案件に取り入れた際にも、効果があったのか、確かにリッチスニペットを表示させることが出来ました。
本記事では、構造化データの概要と、JSON-LDの記述方法について説明します。

はじめに

そもそも構造化データとは

通常のHTMLに書かれている情報は、各文字列や画像が何を意味しているのかまでは、検索エンジンには理解できません。
HTMLに書かれている情報を、メタデータで意味づけして、検索ロボットでも理解できるようにした情報を、構造化データと呼びます。
大きなwebサービスでいうと、食べログやクックパッド等で導入されています。

構造化データマークアップのメリット

現在検索順位には効果はないようですが、リッチスニペットが表示されやすくなると言われています。
リッチスニペットとは、検索結果に表示される普通の説明文以外のリッチな情報のことで、通常の情報に加えて、画像やレビュー、パン屑リストなどを表示させることが出来ます。
それによって、ユーザーの注意を引き付けやすくなり、結果的にクリック率の向上に繋げることが出来ます。

ただし、構造化データを採用することでリッチスニペットの表示が保証されるというわけではなく、効果があると言われているのにすぎませんから、ご留意ください。

構造化データマークアップ実践

ここからは、具体的にどのように構造化データをwebサイトに適用するのかを見ていきます。

構造化データのボキャブラリ

schema.orgは、ボキャブラリの割り当てを定義したボキャブラリの集合で、構造化データをする際は、このschema.orgに準じてマークアップする方法が一般的です。
Google、yahoo、Microsoftの大手検索エンジン企業が共同で取り組んでおり、値の数は日々拡張されています。
ボキャブラリは公式サイトから確認することが出来ます。

利用可能なシンタックス

シンタックスとは、構造化データの書き方のことです。
現在下記の3種類のシンタックスがあります。

JSON-LD
microdata
RDFa

それぞれ特徴がありますが、簡単に説明すると、HTMLタグに直接書くのがmicrodataとRDFa、scriptタグ内にまとめて記述するのがJSON-LDです。
Googleは、JSON-LDを推奨しているようです。本記事でもこれからJSON-LDに絞って、話を進めていきます。

JSON-LDの基本

JSON-LDでは、HTML上で各情報に直接マークアップするその他のシンタックスとは異なり、スクリプトを用いて記述します。その名前の通り、JSON形式で記述します。Googleが推奨しているというだけではなく、各HTMLに直接マークアップする必要がないため、一箇所で構造化データを記述できるという利点があります。

スクリプトタグ

<script type="application/ld+json">
{
//ここに内容を記述します
}
</script>

JSON-LDの宣言です。
記述はHTMLファイル内のどこでも可能ですが、パフォーマンスを考慮すると、body閉じタグの直前に記述するのがおススメな様です。

JSONオブジェクト

keyとvalueをセットにして、情報を記述していきます。

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Organization",
  "name": "株式会社hoge",
}
</script>

入れ子にもできます。

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Event",
  "name": "hoge会",
  "location": {
    "@type": "Place",
    "name": "fuga劇場",
    "address": "東京1-1-1"
  }
}
</script>

複数ある場合は、配列にして記述します。

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Organization",
  "name": "hoge",
  "contactPoint": [{
    "@type": "ContactPoint",
    "telephone": "XXXXXXX",
    "contactType": "customer support"
    },{
    "@type": "ContactPoint",
    "telephone": "XXXXXXX",
    "contactType": "customer service"
  }]
}
</script>

@XXなkey

頭に@が付いた特殊なkeyが幾つかありますが、その内よく使うのは3つです。

key	value	補足
`@context`	http://schema.org	schema.orgに準じて書くことを宣言
`@type`	EventやOrganizationなど	書く内容にあったものを記述
`@id`	ページのURL	パン屑リストを書くときなどに使用

記述方法の基本は以上です。
ここからは、よく使う構造化データの書き方を紹介します。

パン屑リスト

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "item": {
        "@id": "トップページのURL",
        "name": "トップページのページタイトル"
      }
    }, {
      "@type": "ListItem",
      "position": 2,
      "item": {
        "@id": "第2階層のURL",
        "name": "第2階層のページタイトル"
      }
    }, {
      "@type": "ListItem",
      "position": 3,
      "item": {
        "@id": "第3階層のURL",
        "name": "第3階層のページタイトル"
      }
    }
  ]
}
</script>

イベント

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Event",
  "location": {
    "@type": "Place",
    "address": {
      "@type": "PostalAddress", // 開催場所情報
      "streetAddress": "市区町村以降（番地など）",
      "addressLocality": "市区町村",
      "addressRegion": "都道府県",
      "addressCountry": "国",
      "postalCode": "郵便番号"
    },
    "name": "名前"
  },
  "name": "イベント名",
  "startDate": "開始日時", // 2018-08-30T15:00 など
  "offers": {
    "@type": "Offer", // チケット情報
    "price": "金額",
    "priceCurrency": "通貨",
    "url": "チケット購入が出来るサイトのURL"
  },
}
</script>

検索クエリ

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "WebSite",
  "url": "https://www.example.com/",
  "potentialAction": {
    "@type": "SearchAction",
    "target": "https://example.com/search?q={query}",
    "query-input": "required name=query"
  }
}
</script>

記事

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "NewsArticle",
  "mainEntityOfPage":{
    "@type":"WebPage",
    "@id":"ページのURL"
  },
  "headline": "ページタイトル",
  "description": "記事のリード文",
  "image": {
    "@type": "ImageObject", // サムネイル画像
    "url": "サムネイル画像のURL",
    "width": 横幅,
    "height": 縦幅
  },
  "datePublished": "記事を書いた日", // 2018-08-30T06:00:00+09:00 など
  "dateModified": "記事を更新した日",
  "author": {
    "@type": "Person",
    "name": "書いた人の名前"
  },
   "publisher": {
    "@type": "Organization",
    "name": "発行している団体",
    "logo": {
      "@type": "ImageObject",
      "url": "発行している団体のロゴ画像のURL",
      "width": 横幅,
      "height": 縦幅
    }
  }
}
</script>

構造化データマークアップの検証

マークアップが完了したら、Googleの構造化データテストツールを使って、正しくマークアップで来ているかどうか検証します。
サイトのURLを貼って、テストを実行してください。

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