読者です 読者をやめる 読者になる 読者になる

Minimal Green

はてなブログカスタマイズや、HTML、CSS、サイト制作などについて書いています。

schema.orgで構造化データマークアップしてGoogleにローカルビジネス情報を伝える

ローカルビジネス サイト制作

Googleでお店や会社の名前を検索すると検索結果にビジネス情報のパネルが表示されますよね。ナレッジパネルといいます。
↓これです。
f:id:syofuso:20160822153905p:plain
Googleの検索結果に実店舗の所在地や営業時間、メニュー、クチコミ情報、店舗の外観が表示されたらユーザーにとって便利です。
ナレッジパネルが表示されるにはいろいろな条件があるようですが、サイト運営者ができることは

Googleマイビジネスに登録する
Google の無料ビジネス リスティング | Google マイビジネス – Google

構造化データをマークアップする
ローカルビジネスのためのschema.orgの仕様をGoogleが公開。ナレッジパネルから予約や注文も可能に | 海外SEO情報ブログ

Googleマイビジネスへの登録は実店舗のローカルビジネスを運営しているなら必須です。写真や店舗の詳細な情報を登録しましょう。

構造化データとは

構造化データのマークアップについてこの記事では書きたいと思います。
構造化データとは、HTMLで書かれた情報が何を意味するのかを、Yahoo!やGoogle検索エンジンのクローラー(コンピュータ、ボット、人工知能)に理解できるよう意味付けしたものです。
人間ならサイトを見て、これはコンビニだなとかレストランだな理解できますが、ロポットが人間のように理解することは難しいです。
そこで、決められたフォーマットをもとに、データ(data)をロボットにも理解できるよう構造化して記述したものが構造化データです。
この決められたフォーマットのうち、言葉の定義であるボキャブラリーのひとつがschema.orgであり、構造化データを記述する文法であるシンタックスのひとつがJSON-LDです。
Googleがサポートしているボキャブラリー(2016年8月)

・data-vocabulary.org
・schema.org
Googleがサポートしているシンタックス

・microdata
・RDFa
・JSON-LD

JSON-LDを使ったschema.orgの記述方法

ここではGoogle推奨のボキャブラリーschema.orgで、シンタックスはJSON-LDで記述する方法を紹介したいと思います。

www.suzukikenichi.com
鈴木謙一さんの記事で詳しく記述方法について書かれています。
要点をまとめると

JSON-LDの1つのまとまりは、
で囲みます。

{} で囲んだ1つのまとまりを JSONオブジェクト と呼びます。
JSONオブジェクトは、1つまたは複数のKey(キー) とValue(バリュー) のペアで構成されます。

キーとバリューは「:」(コロン)で区切ります。
そして、「"」(ダブルクォーテーション)でともに囲みます。

次にキーが続くときにカンマを打ちます。

JSON-LDを用いたschema.orgの記述例

澄風荘のサイトで実装している構造化データを例に書きます。

<script src=https://apis.google.com/js/platform.js async defer></script><script type=application/ld+json>
{
 "@context":"http://schema.org", // schema.orgをコンテキストを使用します
 "@type":"LodgingBusiness", // schema.orgのLodgingBusinessという語彙を使用します。
 "name":"兵庫 かにと温泉の浜坂 かにソムリエの宿 澄風荘", // 名前は「兵庫 かにと温泉の浜坂 かにソムリエの宿 澄風荘」です
 "address":{         // 所在地情報のオブジェクト
  "@type":"PostalAddress", // schema.orgのPostalAddressという語彙を使用します
  "streetAddress":"浜坂1856−1", 
  "addressLocality":"美方郡新温泉町",
  "addressRegion":"兵庫県",
  "postalCode":"669-6702",
  "addressCountry":"JP"
 },
 "geo":{          // 位置情報のオブジェクト
  "@type":"GeoCoordinates", // schema.orgのGeoCoordinatesという語彙を使用します
  "latitude":"35.624203",  // 緯度は35.624203です
  "longitude":"134.452089" // 経度は35.624203です
 },
 "telephone":"+81-796-82-4401",  // 電話番号
 "url":"https://syofuso.com/",   // サイトURL
 "sameAs":[           // 人・組織のソーシャルメディアのプロフィール
"https://twitter.com/syofuso",
"https://www.facebook.com/syofuso",
"https://plus.google.com/+Syofusohamasaka"]
}
</script>

最初に@Contextでschema.orgで記述することを宣言。組織や人、ビジネスのタイプを定義します。ここでは旅館や民宿等宿泊施設である"LodgingBusiness"。
会社やお店のロゴを送るには

"logo" : "ロゴ画像のURL"

を追加します。

他にもパンくずリストやレシピ、レビュー系、イベントのリッチスニペットを表示させることもできます。
リッチスニペットとは | SEO用語集:意味/解説/SEO効果など [SEO HACKS]

ローカルビジネス情報のschema.orgデータ生成ツール

記述方法をきちんと勉強することも必要ですが、まだまだ初心者向けの情報は少なく、実装のハードルは高いかもしれません。
そこで便利なオンラインツールを紹介します。必要項目に入力するだけで、ローカルビジネスに必要なschema.orgデータのコードを生成してくれます。
mamewaza.com

またHTMLがいじれない場合にはGoogle search consoleのデーターハイライターや構造化データ マークアップ支援ツールを使うという方法もあります。
データ ハイライターについて - Search Console ヘルプ
(すでにschema.orgなど構造化データを用いてHTMLコードレベルでマークアップしているページでは、データハイライターを利用する必要はありません)

構造化データ テスト ツールで正しい記述か確認

コードを記述したら構造化データ テスト ツールで正しい記述か確認しましょう。

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

モバイル検索の重要性が増すとともに、ローカルSEOは需要になってきています。
構造化データを活用して検索エンジンに、ユーザーに正確なビジネス情報を伝えましょう。