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

Googleでお店や会社の名前を検索すると検索結果にビジネス情報のパネルが表示されますよね。ナレッジパネルといいます。
↓これです。

f:id:minimalgreen:20180720091254p:plain

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

Googleマイビジネスに登録する
Google マイビジネス - Google で無料のビジネスリスティングを作りましょう – Google

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

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

構造化データとは
JSON-LDを使ったschema.orgの記述方法
- JSON-LDを用いたschema.orgの記述例
ローカルビジネス情報のschema.orgデータ生成ツール
構造化データテストツールで正しい記述か確認

構造化データとは

構造化データのマークアップについてこの記事では書きたいと思います。
構造化データとは、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":"XXXX",　
  "addressLocality":"XX市",
  "addressRegion":"XX県",
  "postalCode":"XXX-XXXX",
  "addressCountry":"JP"
 },
 "geo":{　　　　　　　　　　// 位置情報のオブジェクト
  "@type":"GeoCoordinates",　// schema.orgのGeoCoordinatesという語彙を使用します
  "latitude":"35.624203",　　// 緯度は35.624203です
  "longitude":"134.452089"　// 経度は35.624203です
 },
 "telephone":"+81-012-34-5678",  // 電話番号
 "url":"https:/example.com/",   // サイトURL
 "sameAs":[　　　　　　　　　　 // 人・組織のソーシャルメディアのプロフィール
"https://twitter.com/example",
"https://www.facebook.com/example",
"https://plus.google.com/+example"]
}
</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コードレベルでマークアップしているページでは、データハイライターを利用する必要はありません）