SEO

リッチスニペットを表示するための構造化データ記述法

2016.08.23

検索エンジンでサイト集客する上で重要なポイントの一つにスニペットがあります。大手グルメ口コミサイトの食べログを例に見てみましょう。

ユーザーが、検索結果を見て自分の求める商品、情報があるかないかの判断材料になりますので、スニペットを最適化することはサイトの集客力(クリック率)向上に寄与すると考えられます。

次にこちらの画像をご覧下さい。

アプリの評価がスニペット上に目立つ形式で掲載されています。

こちらの検索結果画面ですと最上位にリスティング広告が見受けられますが、赤枠で囲まれた上こちらのスニペットの方が目を引きますね。

リッチスニペットは通常のスニペットと両立して表示できれば集客力の向上が期待できます。

通常のスニペットは、meta descriptionタグにスニペットに表示ない情報ある程度、能動的にコントロールできますが、このリッチスニペットを表示するためには構造化データというコードをサイト内に記述する必要があります。

リッチスニペットの表示を目的とした構造化データの記述方法について解説していきます。

構造化データとは

構造化データは、Googleのロボットが理解しやすいように言葉に対しての意味を付加するためのデータです。当ブログでは下記のように構造化データを記述しています。

<script type="application/ld+json">
{
 "@context": "http://schema.org",
 "@type": "Webpage",
 "name": "アクシス集客ブログ",
 "url": "http://axis-blog.com",
 "provider":{
  "@type": "Organization",
  "name": "株式会社アクシス",
  "member": [{
  "@type": "Person",
  "name": "平岡謙一"
  },
  {
   "@type": "Person",
   "name": "落合隆文"
  },
  {
   "@type": "Person",
   "name": "西尾和晃"
  },
  {
   "@type": "Person",
   "name": "宇野一成"
  },
  {
   "@type": "Person",
   "name": "山田尚明"
  },
  {
   "@type": "Person",
   "name": "松井南人"
  }]
 }
}
</script>

下記の3行に着目してしてみましょう。

 "@type": "Webpage",
 "name": "アクシス集客ブログ",
 "url": "http://axis-blog.com",

この構造化データではこちらのWebサイトは「アクシス集客ブログ」であり、URLは「http://axis-blog.com」であると情報付加しています。

ロボットは「1+1=2」のような数式で算出できる内容は人間よりも早く理解できますが、「アクシスブログのURL=http://axis-blog.com」であったり、「黄色の看板の牛丼屋＝吉野家」のような情報の処理は理解は苦手です。

そのため、構造化データのようなメタデータを提供してロボットに学習させてあげることで、ロボットはユーザーにとって使いやすい検索結果を提供してくれるような仕組みになっています。

構造化データが付与されたサイトはGoogleのロボットにとってやさしいサイトであると言えるでしょう。

具体的な記述方法

具体的な構造化データの記述方法について説明していきます。

記述方法は複数あるのですが、今回は最もポピュラーなschema.orgと呼ばれるルールに従ってJSON-LDという記述方法をご紹介します。

リッチスニペットに表示な必要最低限の構造化データが下記になります。

<script type="application/ld+json">
{
 "@type": "Webpage",
 "name": "サイト名",
 "url": "サイトのURL",
 "provider":{
  "@type": "Organization",
  "name": "サイト運営者の名前",
  "review": {
   "author": "レビュワーの名前",
   "reviewRating": {
     "worstRating": "レビュー最低点",
     "ratingValue": "レビュワーがつけた点数",
     "bestRating": "レビュー最高点"
    }
   }
  }
 }
}
</script>

ここで、「name」や「url」など:(セミコロン)の左側を「キー」と呼びロボットに伝える事柄を記述します。

一方で、右側に「バリュー」と呼び、「キー」の具体的な内容を記述します。

schema.orgをJSON-LDで記述する場合最初の3行か下記のようになります。

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

また、最後の2行は下記のようになります。この前後5行はこのような形式と割り切って下さい。

 }
</script>

次に具体的に各キーに対してバリューを入れた例がこちらになります。

 "@type": "Webpage",
 "name": "太郎のサイト",
 "url": "http://tarou.com",
 "provider":{
 "@type": "Organization",
 "name": "太郎",
 "review": {
  "author": "花子",
  "reviewRating": {
    "worstRating": "0",
    "ratingValue": "3.5",
    "bestRating": "5"
   }
  }
 } 
}

ここでは・サイト「太郎のサイト」のURLは「http://tarou.com」である・サイト「太郎のサイト」の主催者は「太郎」である・サイト「太郎のサイト」に対して、レビュワー「花子」は5満点中(最低0点)、3.5点と評価したことを構造化データで定義しています。

この構造化データをGoogleのロボットが読み取り、リッチスニペットに反映させます。