2016/3/17

【schema.org】営業日・営業時間の構造化マークアップ方法

区切り線

structured_data_openinghour

最近少しずつ、構造化マークアップに関するブログ記事などを目にするようになってきましたね。
セマンティックウェブなどと叫ばれ、少しずつ構造化マークアップの重要性が増してきているのだと日に日に感じています。

さて、今回はLocalBusinessやそのサブタイプなどで活用することの多い「営業日」「営業時間」のマークアップについて解説・紹介をしたいと思います。

openingHoursを使用

営業日や営業時間については、openingHoursを活用します。
schema.orgによる解説は以下の通りです。

The opening hours for a business. Opening hours can be specified as a weekly time range, starting with days, then times per day. Multiple days can be listed with commas ‘,’ separating each day. Day or time ranges are specified using a hyphen ‘-‘.
– Days are specified using the following two-letter combinations: Mo, Tu, We, Th, Fr, Sa, Su.
– Times are specified using 24:00 time. For example, 3pm is specified as 15:00.
– Here is an example: .
– If a business is open 7 days a week, then it can be specified as .

営業日、営業時間は全てopeningHoursというアイテムプロパティーでひとまとめに記述します。
営業日に関しては曜日単位で「,(カンマ)」で複数の記述ができ、営業時間に関しては営業開始時間と営業終了時間の間を「-(ハイフン)」でセパレートすることで記述します。

  • 営業日は次のように、曜日の頭文字を組み合わせて使用します。(Mo,Tu,We,Th,Fr,Sa,Su)
  • 営業時間は、24時間表示で表記します。(午後3時であれば15:00と表記)
  • 【マークアップ例】<time itemprop=”openingHours” datetime=”Tu,Th 16:00-20:00″>火曜~木曜の午後4時から午後8時までの営業時間</time>.
  • 1週間全て営業日の場合は、次のように指定します。<time itemprop=”openingHours” datetime=”Mo-Su”>月曜から日曜の毎日</time>.

実際の使用例

以下のNAP情報を、LocalBusinessのアイテムタイプで構造化マークアップをしてみましょう。

LYKAON株式会社
〒150-0002 東京都渋谷区渋谷1丁目17番2号 ヒューリック渋谷宮下公園ビル 7F(受付)・8F
TEL:0800-200-9680
受付時間:平日9:00~18:00

microdata

<dl itemscope="itemscope" itemtype="https://schema.org/LocalBusiness">
	<dt itemprop="name">LYKAON株式会社</dt>
	<dd itemprop="address">〒150-0002 東京都渋谷区渋谷1丁目17番2号 ヒューリック渋谷宮下公園ビル 7F(受付)・8F</dd>
	<dd>TEL:<span itemprop="telephone">0800-200-9680</span></dd>
	<dd>受付時間:<time itemprop="openinghours" datetime="Mo, Tu, We, Th, Fr, Sa 9:00-18:00">平日9:00~18:00</time></dd>
</dl>

JSON-LD

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "LocalBusiness",
"name": "LYKAON株式会社",
"telephone": "0800-200-9680",
"address": "〒150-0002 東京都渋谷区渋谷1丁目17番2号 ヒューリック渋谷宮下公園ビル 7F(受付)・8F",
"openinghours": "Mo, Tu, We, Th, Fr, Sa 9:00-18:00"
}
</script>

尚、Googleは、デベロッパー向けドキュメントにて、JSON-LDの使用を推奨しています。

We recommend using JSON-LD as the data format.
Provide Local Business Information

JSON-LDでの構造化マークアップの方法は以下の記事を参考にして下さい。

Schema.org JSON-LD
超簡単!schema.orgはJSON-LDで書こう

営業時間が複雑な場合

月~金の営業時間は9:00~20:00、土日の営業時間は9:00~18:00といった様に、営業時間がちょっと複雑な場合は、より詳細なマークアップが可能なOpeningHoursSpecificationを使用しましょう。

以下のNAP情報を、OpeningHoursSpecificationのアイテムタイプで構造化マークアップをしてみましょう。

LYKAON株式会社
〒150-0002 東京都渋谷区渋谷1丁目17番2号 ヒューリック渋谷宮下公園ビル 7F(受付)・8F
TEL:0800-200-9680
受付時間:月~金9:00~20:00、土日9:00~18:00
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "LocalBusiness",
"name": "LYKAON株式会社",
"telephone": "0800-200-9680",
"address": "〒150-0002 東京都渋谷区渋谷1丁目17番2号 ヒューリック渋谷宮下公園ビル 7F(受付)・8F",
"openingHoursSpecification":[
	{
		"@type": "OpeningHoursSpecification",
		"dayOfWeek":[
			"Monday",
			"Tuesday",
			"Wednesday",
			"Thursday",
			"Friday"
		],
		"opens": "9:00",
		"closes": "20:00"
	},
	{
		"@type":"OpeningHoursSpecification",
		"dayOfWeek":[
			"Saturday",
			"Sunday"
		],
		"opens": "9:00",
		"closes": "18:00"
	}
]
}
</script>

openingHoursSpecificationに対して[]でアレイし、その中を{}でエンベッディングすることで、openingHoursSpecificationというアイテムタイプに対して階層構造を作り、複数の値を入れ込むという形です。

microdataは<span>で複数の値を囲ってマークアップするだけなので、ここでは説明は省きます。

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

最後に、Structured Data Testing Toolで、構造化マークアップに誤りがないか確認して、問題なければOKです。
Structured Data Testing Tool  -  Google Developers

※おまけ ~NAP情報が画像の場合~

会社のNAP情報は、サイトによっては一部を画像で書き出している場合がありますが、そういった場合、microdataでは構造化マークアップをどうすればいいのか?という質問を受けることがあります。
JSON-LDで書けばいいと言ってしまえばそこまでですが、microdataでの対応方法を少し説明します。

HTML側にテキスト情報が存在していない場合は、meta要素を活用することで対応が可能です。
例えば、電話番号の表記が次のように画像で書き出されていた場合。

<img src="/image/tel.jpg" alt"電話番号">

次のようにmeta要素を追加することでテキスト情報を埋め込みます。

<img src="/image/tel.jpg" alt="電話番号">
<meta itemprop="telephone" content="0800-200-9680">

最後に

Googleは今、ローカルビジネス情報をナレッジパネルの表示としてサポートしています。
営業時間もその内の一つに含まれているので、営業時間のマークアップ方法は必ず抑えておきましょう。

  • このエントリーをはてなブックマークに追加

区切り線

コメント

  1. 河津武志 より:


    name属性ではなくてcontent属性ではないでしょうか?

    • 中嶋 瑛 より:

      >河津武志さん

      ほんとですね。nameになってるの全然気づきませんでした!
      ご指摘ありがとうございます。修正致しました。

コメントをどうぞ

メールアドレスが公開されることはありません。