schema.orgを設定してクリック率UP！JSON-LDの記述方法の基本

みなさんは、レストランの名前を検索したときに、検索画面の右側にそのお店の営業時間や、住所、地図などの情報が表示されているのを見たことがありませんか？
検索結果に出てきたサイトのタイトル下に、レストランの評価の星マークや料理の価格帯が表示されているのを見たこともあるのではないでしょうか。

Googleでは、検索結果に表示されたサイトの情報を集め、ページ右側のナレッジパネルや、リッチスニペットと呼ばれる、基本情報以外の＋αの情報を表示しています。 画像や動画が表示されて目につきやすかったり、レビューが気になってサイトをついついクリックしたくなります。
この＋αの情報は、schema.orgの表記に基づいた構造化データのマークアップを行い、検索エンジンにサイトについての詳しい情報を伝えることで表示されやすくなります。

schema.org（スキーマ）とは、検索エンジンに自分のサイトの情報をより詳しく伝えるための表記方法のことです。
人間が見れば、これはサイト名、これは住所、これは電話番号、といったように目で見て記載されている文字情報が何かを理解できますが、ロボットにはできません。
サイトを巡回（クロール）する検索エンジンのロボットにも理解できるよう、一定の決まったフォーマットに沿って記述したものを構造化データと呼びます。

schema.orgで定められた記述方式に沿ってサイトの情報を記載することで、自分のサイトがどういうサイトなのか、どんな情報がのっていて、何に関連するサイトなのかを検索エンジンに伝えることができます。 結果として、検索結果画面上で、サイトの情報や評価、画像など、より具体的な情報をリッチスニペットやナレッジパネルに表示させることができます。クリックせずともサイトの概要を知ることができるため便利で、ユーザーの興味を引きやすいためクリックにもつながります。

リッチススニペットを表示してもらえるかはGoogle側の采配によるため、必ずしも目的通りに表示される保証はありませんが、検索エンジンのロボットがサイトの内容をより正しく解析することにつながるので、設定しておきましょう。

また、schema.orgはGoogle、Microsoft(Bing)、Yahoo!の3社が共同で策定しており、Googleに限らずBingでも現在schema.orgをサポートしていることが発表されているため、今後のSEOの観点で期待できるのではないでしょうか。

設定するにあたっては最低限のHTMLの知識が必要になってきますが、HTMLの知識がない、という方も、Googleのデータハイライターという機能を使って手軽にマークアップすることができます。 以前のTIPS記事で紹介していますので、合わせて参考にしてみてください。

vol.74 構造化データをお手軽に データハイライターを使ってみよう

schema.orgに沿ってコンテンツをマークアップするには、
1.ページの内容に合ったtypeを選ぶ
2.そのtypeで定められているプロパティに応じて情報を記載する
必要があります。

スキーマは、Recipe、Product、Article、Person、Organizationなどの「type」で構成されており、それぞれのtype毎に設定できる「プロパティ」が変わってきます。
どのプロパティを設定することができるかは、schema.orgのサイト内のリストで確認することができます。

schema.orgのリスト

一般の企業であれば「Corporation」typeを用いることができますが、弁護士事務所のサイトなら「Attorney」、カフェのサイトなら「FoodEstablishment」や「Restaurant」など、より専門的な職種のtypeを選ぶこともできます。

schema.orgの記述方法は、各コンテンツ部分に直接記述するMicrodataやRDFa、ページ内にまとめて記述を加えるJSON-LDなどの方法があります。
今回はGoogleが推奨しており、当社でも採用しているJSON-LDでの記述方法を紹介していきます。

JSON-LD方式では、記述はHTMLのhead内に書いていきます。 JSON-LD方式で記述していくことを宣言する「」のタグ内に項目を書いていきます。

schema.orgでは、一つのかたまりを波カッコ「｛｝」内に書いていきます。
波カッコの中にはtypeに対応したプロパティ＝keyと、その値としてのサイト固有の情報＝valueを書きます。
keyとvalueは「:」（コロン）で区切り、それぞれ「”」（ダブルクォーテーション）で囲んで表現します。
「key:value」のペアがあり、その次にさらにkeyが続くときには、valueのあとにカンマ「,」を打ちます。
※@がついたKeyは特殊なKeyで、「keyword(キーワード)」と呼ばれます。

それでは、実際にBOELのWebサイトの記述の一部を例にあげて見ていきましょう。

<script type="application/ld+json">
{
"@context":"https://schema.org",
"@type":"Corporation",
"name":"株式会社BOEL",
"alternateName":"BOEL Inc.",
"description":"ブランディング、デザインのことならBOEL Inc. ブランド戦略からビジュアルコミュニケーションに至るまでユーザー中心のデザインプロセスを通じ、顧客が満足する価値あるクリエイティブとカスタマーエクスペリエンスを提供します。 We are BOEL -based creative agency. We will help improve the business value of the company through the design process of user-centered design.",
"founder":"Teppei Tazawa",
"foundingDate":"13 May,2010",
"url":"https://boel.jp",
"address":{
"@type":"PostalAddress",
"addressLocality":"Tokyo",
"addressRegion":"JP",
"postalCode":"1520004",
"streetAddress":"3-23-10 TAKABAN MEGURO-KU"
},
"sameAs":[
"https://boel.co.jp","https://www.facebook.com/BOEL.Inc",
"https://twitter.com/BOEL_Inc",
"https://plus.google.com/+BoelJpInc/posts",
"http://boel-inc.tumblr.com"
]
}
</script>

まず、全体を「script type」のタグで囲みます。

"@context":"https://schema.org",
"@type":"Corporation",

@type以下には、指定したtypeで使用できるプロパティをkeyとして記述していきます。
どのプロパティが使用できるかはschema.orgで定義されています。
BOELでは、検索結果に表示された時に企業情報として最低限必要な項目がきちんと表示されることを意図して、「Corporation」に記載できるプロパティから項目を選んでいます。keyに対応するvalueには、サイトの固有の情報を入れていきます。

"name":"株式会社BOEL", 
"alternateName":"BOEL Inc.", 
"description":"ブランディング、デザインのことならBOEL Inc. ブランド戦略からビジュアルコミュニケーションに至るまでユーザー中心のデザインプロセスを通じ、顧客が満足する価値あるクリエイティブとカスタマーエクスペリエンスを提供します。 We are BOEL -based creative agency. We will help improve the business value of the company through the design process of user-centered design.", 
"founder":"Teppei Tazawa", 
"foundingDate":"13 May,2010", 

schema.orgの「Corporation」で使用できるプロパティ一覧から、以下の5つの項目を入れています。

schema.org Corporationプロパティ一覧

次の「adress」の箇所は、少し複雑になっています。

"address":{
  "@type":"PostalAddress",
  "addressLocality":"Tokyo",
  "addressRegion":"JP”,
  "postalCode":"1520004",
  "streetAddress":"3-23-10 TAKABAN MEGURO-KU"
},

schema.orgの「Corporation」で使用できるプロパティ一覧で「adress」欄を見ると、テキストと「PostalAddress」を入れることができると記載されています。
“address”:”3-23-10 TAKABAN MEGURO-KU,Tokyo 1520004,Japan”というように、単純にvalueに住所そのものをテキストで打つことも可能ですが、より一つ一つの項目の意味を正確に伝えるために「PostalAddress」というtypeを「adress」内に埋め込むことができます。この方法を「エンベッディング」と呼びます。
「”@type”:”PostalAddress”, 」以下には、「PostalAddress」で指定することのできるプロパティである「addressLocality」=地域、「addressRegion」=国、「postalCode」=郵便番号、「streetAddress」=住所を追加しています。

valueに複数の値を入れたいときには、次の「sameAs」のように「［］」で括ります。この記述方法は「アレイ」と呼ばれます。 「sameAs」は関連するURLを記載するプロパティのため、ここではBOELの関連URLを指定しています。

"sameAs":[
"https://boel.co.jp","https://www.facebook.com/BOEL.Inc",
"https://twitter.com/BOEL_Inc",
"https://plus.google.com/+BoelJpInc/posts",
"http://boel-inc.tumblr.com"
]

一通り内容を記述したら、Googleの構造化データテストツールを使用して、正しく表示されるかテストしましょう。構造化データテストツールにURLを入力、または「コードスニペット」で必要箇所のコードを貼り付けることで、正しく記述できているかをチェックすることができます。

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

いかがでしたか？
schema.orgのプロパティは非常に多種多様なので、まずは基本的な情報を網羅できるよう、伝えたい重要な情報をピックアップして入れていきましょう。
サイトのクリック率に関わってくる重要な要素となるので、ぜひ試してみてください。