前回に引き続き、今回は調子に乗って店舗情報なるものを構造化データでマークアップしてみようと思います！
検索をしてみたら結構色んな人が解説してくれているので困ることは無さそうですが、とりあえずまとめて解説をしてみましょう。初めて構造化データマークアップする人でも簡単に出来るように解説してみたいと思います。
構造化データマークアップ実践
まずはおさらい、構造化データマークアップとは！？という疑問から入る人はこちらのページを読んで下さい！
構造化データマークアップ｜SEO女子コラム
それでは早速実践です。今回も使うシンタックスは「Microdata」、ボキャブラリーは「schema.org」を使用します。
店舗情報というと、主にお店をやっている人がそのお店の情報を書いている部分です。この部分をマークアップすると、スニペットにお店の開店時間、閉店時間が表示されたりするのでユーザーにサイトを知ってもらうことが出来ますよ。
今回は、「ヘアサロン」を例に上げてみましょう。お店の概要はこんな感じ。
- ヘアサロン「SEO」
- 〒000-0000 大阪府大阪市中央区◯◯2丁目15番3号 サロンビル2F
- TEL：0000-00-0000
- 営業時間：平日11:00～22:00 土日祝10:00～20:00
- 定休日：月曜日
サロンの名前が思いつかなかったとかそんな…。はい、ソースはこんな感じ。リストタグ使ってみました。今回も分かりやすいように改行を盛り込んでおります。
<li>ヘアサロン「SEO」</li>
<li>〒000-0000 大阪府大阪市中央区◯◯2丁目15番3号 サロンビル2F</li>
<li>TEL：0000-00-0000</li>
<li>営業時間：平日11:00～22:00 土日祝10:00～20:00</li>
<li>定休日：月曜日</li>
</ul>
それでは、マークアップしていきましょう！
まずはMicrodataを使ってお店のことをマークアップをしますという宣言から入ります。Microdataの宣言にはitemscopeを使用。店舗のことですよ、という宣言はitemtypeで、ボキャブラリーを指定します。
今回はschema.orgの中の「http://schema.org/LocalBusiness」を使います。これはいわゆる「お店」をさすボキャブラリーで、結構幅広く使えます。レストランだったり銀行だったり、カラオケだったりなんだったり…実店舗があればなんでもこれで使えます。大体はこのLocalBusinessでまかなえるかと。さてと、一旦ここまでを入れましょう。
<li>ヘアサロン「SEO」</li>
<li>〒000-0000 大阪府大阪市中央区◯◯2丁目15番3号 サロンビル2F</li>
<li>TEL：0000-00-0000</li>
<li>営業時間：平日11:00～22:00 土日祝10:00～20:00</li>
<li>定休日：月曜日</li>
</ul>
<ul>タグがマークアップしたい全体をまとめているので、そこに入れました。では次に簡単にマークアップ出来るものから。お店の名前と電話番号です！
名前に関しては「itemprop="name"」で「名前ですよ」と示してあげます。電話番号は「itemprop="telephone"」ですね。
ここで疑問になると思うのですが、そのnameとかtelephoneはどこからもってきてるの？という疑問です。
そもそも構造化データに使っているボキャブラリーは、階層構造になっています。そのカテゴリの中では使えるタイプなどが決まっているんです。schema.orgのサイトではその階層構造が見えるようになっています。
使いたいもの…例えば今回はLocalBusinessなので、LocalBusinessの中に入ってみると、LocalBusinessで囲んだ中で使えるタイプやプロパティがズラッと並んでいるんです。
この中から、使えるものを探し出してきて指定する、という感じです。今回電話番号はここにあったので、telephoneを引っ張りました☆
さて、ではこの2つのマークアップを入れましょう。名前は<li>が上手く使えそうなので、そこに付属させます。ただ、電話番号の方は番号のみをマークアップするので、TEL部分は省いてマークアップしましょう。
<li itemprop="name">ヘアサロン「SEO」</li>
<li>〒000-0000 大阪府大阪市中央区◯◯2丁目15番3号 サロンビル2F</li>
<li>TEL：<span itemprop="telephone">0000-00-0000</span></li>
<li>営業時間：平日11:00～22:00 土日祝10:00～20:00</li>
<li>定休日：月曜日</li>
</ul>
さくさく次へ行きましょう！次は住所ですね！住所は「itemprop="address"」なのですが、ただのテキストではなくてhttp://schema.org/PostalAddressでマークアップすることでより詳細を明記することが出来ます。
<li itemprop="name">ヘアサロン「SEO」</li>
<li itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">〒000-0000 大阪府大阪市中央区◯◯2丁目15番3号 サロンビル2F</li>
<li>TEL：<span itemprop="telephone">0000-00-0000</span></li>
<li>営業時間：平日11:00～22:00 土日祝10:00～20:00</li>
<li>定休日：月曜日</li>
</ul>
これでLocalBusinessの中の住所をPostalAddressでマークアップしてますよ～という感じになります。では住所部分をマークアップ！
住所は大まかに「郵便番号」「国」「都道府県」「市町村」「それ以下の地域情報、番地とか」という風に別れます。流石に国まで明記してることはあんまりないので、大抵は都道府県からでしょうか？ただ一応書いておくと…
- 郵便番号「itemprop="postalCode"」
- 国「itemprop="addressCountry"」
- 都道府県「itemprop="addressRegion"」
- 市町村「itemprop="addressLocality"」
- その他地域「itemprop="streetAddress"」
というプロパティを使います。これで実際に囲んでみましょう。
<li itemprop="name">ヘアサロン「SEO」</li>
<li itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
〒<span itemprop="postalCode">000-0000</span> <span itemprop="addressRegion">大阪府</span><span itemprop="addressLocality">大阪市中央区</span><span itemprop="streetAddress">◯◯2丁目15番3号 サロンビル2F</span></li>
<li>TEL：<span itemprop="telephone">0000-00-0000</span></li>
<li>営業時間：平日11:00～22:00 土日祝10:00～20:00</li>
<li>定休日：月曜日</li>
</ul>
それでは最後に営業時間をマークアップします！単純な営業時間ならopeningHoursでいいのですが、今回はちょっと複雑なマークアップをするのでopeningHoursSpecificationを使います。
まずは曜日。曜日はitemprop="dayOfWeek"を使いますが、曜日などは営業日単位で全部示してあげないといけません。タグの中に「content」を使って、そこにカンマ区切りの曜日を入れていきます。
月曜日お休みのお店なのでこんな感じ。次に時間ですが、時間に関しては開店時間と閉店時間を分けて書く必要があります。時間に関してはtimeタグ、さらにはcontentではなく「datetime」を使って時間を指定します。
こんな具合です。…しかし、曜日の方はこれでいいのかな。エラーは吐き出さないですが記述が間違っていたら誰か！誰か指摘してください…！(他力本願)
では、この条件を使ってマークアップをしてみます！
<li itemprop="name">ヘアサロン「SEO」</li>
<li itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
〒<span itemprop="postalCode">000-0000</span> <span itemprop="addressRegion">大阪府</span><span itemprop="addressLocality">大阪市中央区</span><span itemprop="streetAddress">◯◯2丁目15番3号 サロンビル2F</span></li>
<li>TEL：<span itemprop="telephone">0000-00-0000</span></li>
<li>営業時間：
<span itemprop="openingHoursSpecification" itemscope itemtype="http://schema.org/OpeningHoursSpecification"><span itemprop="dayOfWeek" content="Tu,We,Th,Fr">平日</span><time itemprop="opens" datetime="11:00">11:00</time>～<time itemprop="closes" datetime="22:00">22:00</time></span>
<span itemprop="openingHoursSpecification" itemscope itemtype="http://schema.org/OpeningHoursSpecification"><span itemprop="dayOfWeek" content="Sa,Su,PublicHolidays">土日祝</span><time itemprop="opens" datetime="10:00">10:00</time>～<time itemprop="closes" datetime="20:00">20:00</time></span></li>
<li>定休日：月曜日</li>
</ul>
じゃ～ん！こんな感じでしょうか？イメージフィールドが必須条件となっているのでエラーを吐き出しますが、営業時間等はバッチリです！では、実際のタグで見てましょう。
<ul itemscope itemtype="http://schema.org/LocalBusiness"> <li itemprop="name">ヘアサロン「SEO」</li> <li itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"> 〒<span itemprop="postalCode">000-0000</span> <span itemprop="addressRegion">大阪府</span><span itemprop="addressLocality">大阪市中央区</span><span itemprop="streetAddress">◯◯2丁目15番3号 サロンビル2F</span></li> <li>TEL：<span itemprop="telephone">0000-00-0000</span></li> <li>営業時間： <span itemprop="openingHoursSpecification" itemscope itemtype="http://schema.org/OpeningHoursSpecification"><span itemprop="dayOfWeek" content="Tu,We,Th,Fr">平日</span><time itemprop="opens" datetime="11:00">11:00</time>～<time itemprop="closes" datetime="22:00">22:00</time></span> <span itemprop="openingHoursSpecification" itemscope itemtype="http://schema.org/OpeningHoursSpecification"><span itemprop="dayOfWeek" content="Sa,Su,PublicHolidays">土日祝</span><time itemprop="opens" datetime="10:00">10:00</time>～<time itemprop="closes" datetime="20:00">20:00</time></span></li> <li>定休日：月曜日</li> </ul>
出来ました！！
いかがだったでしょうか？難しいところもありますが、これでオープンなどの情報がGoogleに伝わるんです。スニペットのみ情報が出たりするので、店舗さんはぜひ構造化、やってみてくださいね！
