SEO関連のあれこれ：JSON-LDで構造化データマークアップをしてみよう～店舗情報編～

さっそくですが、前回より。
「次回以降、Microdataで記述した残り2つもJSON-LDの記述をやってみようと思います！」
ということで！やります！(笑)

私がシリーズ化しようと(勝手に)思っている構造化データマークアップ実践編です。
今回は「店舗情報」をJSON-LDで構造化データマークアップします。
店舗情報はマークアップをすることでリッチスニペット、リッチカードに情報が表示される可能性が増えるので、ぜひぜひマークアップしたいものです。
構造化データって何？という方はまずこちらから！
構造化データマークアップ｜SEO女子コラム

同様の店舗情報ををMicrodataでマークアップしたバージョンはこちらにあるので、ぜひこちらも見てみてくださいね！
構造化データマークアップをしてみよう～店舗情報編～

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

今回使うシンタックスは「JSON-LD」、ボキャブラリーは「schema.org」を使用します。

基本となる店舗情報はMicrodataの時と全く同じ情報を使います。これ！

JSON-LDはHTMLタグ内には書き込まないので、こちらは情報だけが必要となります。
ではでは、さっそくマークアップを開始しましょう。

まず、JSON-LDを使う時は必ずこの記述を入れておきます。

これで今からJSON-LD使いますよ～という記述になりますね。

では、内容となるKeyとvalueを記述していきます。今回は「schema.org」を使い「店舗情報」をマークアップするので、@context(どんな記述で話すか)にはschema.orgを、@type(なんの記述か)には、店舗を表す「http://schema.org/LocalBusiness」を使います。こんな感じ！

これでお店の情報を書く準備が整いました。まずはお店の名前ですね！店舗名は「name」を使うことができるので、これを入れます。

次は住所です。住所は「address」ですが、「PostalAddress」で指定をするので{}を使います。
このように、別の意味を持つオブジェクトをバリューに埋め込むことを、「エンベッティング」と呼びます。

ではエンベッティングをするために住所をマークアップしましょう！
住所は「郵便番号」「国」「都道府県」「市町村」「それ以下の地域情報、番地とか」とわけて記載が出来ます。これらは

• 郵便番号「postalCode」
• 国「addressCountry」
• 都道府県「addressRegion」
• 市町村「addressLocality」
• その他地域「streetAddress」

をKeyに使います。情報を書き込んでみると…

こんな感じになります！これを「address」内にエンベッティングして…

こうなります。これで住所がマークアップ出来ました！続きましては電話番号ですね。これは「telephone」が使えるので入れましょう。

これを一文入れてあげます。入れる場所はどこでも大丈夫ですが、入れる際は必ず半角カンマで区切りましょう。
では最後に営業時間を入れていきます。

こちらでマークアップするときにも説明しているので詳しくはこっちを見て欲しいのですが、営業時間が日によって変わるためopeningHoursSpecificationを使います。しかも平日、休日で分けて記述をしないといけないので、バリューに情報が複数入ります。アレイ[]の登場です！
平日分、休日分を分けてopeningHoursSpecificationでマークアップ。それをLocalBusinessの方のopeningHoursSpecificationにエンベッティングする、というなんだかこんがらがりそうなことをします。まず平日と休日から。

平日、休日という括りはないので、曜日をすべて指定して分けます。月曜日はお休みのお店なので記入はしません。「PublicHolidays」は一般的に祝日を指すようです。時間はどういう書き方をしてもエラーにはなりませんが全世界共通の24時間表記にしておくのが良いようです。
ではこれをLocalBusinessの方のopeningHoursSpecificationにエンベッティング！

出来ました～！こう見ていると難しそうですが、一度理解をしてしまえば簡単です。また、JSON-LDの便利な所は直接ソースに書き込まないので、HTMLには無い情報もOKというところです。
ということで、実際のHTMLにはありませんが画像を最後に追加しましょう。というのも、LocalBusinessには画像が必須だからです。入れないとエラーが出てしまうんですね。Microdataだと画像を入れないといけませんが、JSON-LDは実際のサイトを変更しなくても画像を入れてあげられます。

では、画像を入れて…。

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "LocalBusiness",
  "name": "ヘアサロン「SEO」",
  "image": "http://exmple.com/sample.jpg",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "◯◯2丁目15番3号　サロンビル2F",
    "addressLocality": "大阪市中央区",
    "addressRegion":"大阪府",
    "postalCode": "000-0000",
    "addressCountry": "JP"
  },
  "telephone": "0000-00-0000",
  "openingHoursSpecification": [{
    "@type": "OpeningHoursSpecification",
    "dayOfWeek": [
      "Tuesday",
      "Wednesday",
      "Thursday",
      "Friday"
    ],
    "opens": "11:00",
    "closes": "22:00"
  },{
    "@type": "OpeningHoursSpecification",
    "dayOfWeek": [
      "Saturday",
      "Sunday",
      "PublicHolidays"
    ],
    "opens": "10:00",
    "closes": "22:00"
  }]
}
</script>

完成です☆