schema.orgで営業時間を表現するためのopeningHoursというプロパティがあります。LocalBusinessRestaurantにとって非常に重要な情報であるためしっかりマークアップしたいところです。

schema.org のマークアップ例

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.

http://schema.org/openingHours

と説明されていて、ざっくり訳すと

営業時間は1週間の範囲の中から指定することができます。営業日は曜日を表す2文字の組み合わせ(Mo, Tu, We, Th, Fr, Sa, Su)をカンマ区切りで指定し、時間は24時間表記で開始時間-終了時間の形式で指定します。

火曜日と木曜日の午後4時から午後8時までの営業時間をマークアップした例は下記の通り

<time itemprop="openingHours" datetime="Tu,Th 16:00-20:00">Tuesdays and Thursdays 4-8pm</time>

time要素を使ってdatetime属性に値を記述しています。営業時間に限らずschema.orgでは、時間に関するプロパティのマークアップはtime要素とdatatime属性を推奨しているみたいですね。

time要素的にどうよ

ただ、先ほどの記述例に倣ってマークアップすると、HTML5のtime要素の仕様に反してしまいます。

validator.nuでの検証結果。Error: Bad value Mo-Su for attribute datetime on element time: The literal did not satisfy the time-datetime format.のエラーが出てしまう。

エラー画面からリンクされているtime要素のシンタックスを参照すると、schema.orgの例にあるような、1週間の繰り返しのうち何曜日と何曜日、という指定はありません。

datetime属性のシンタックスでは、Weeksで特定の週を(例:2015年の34週目)、Durationsではある期間を示すことが可能ですが、繰り返しを意味するシンタックスはありません。

よって、schema.org の例ではシンタックスエラーになります。datetimeの値はシンタックスエラーの場合にマシンリーダブルではなくなるのでよろしくないと考えました。

よろしい、ならばdata要素だ

schema.orgのopeningHoursの取りうる値はマシンリーダブルな形式なので、そのまま画面に表示すると、人間には分かりにくい表現となります。よってspan要素内のテキストをopeningHoursの値にするマークアップは避けたい...[1]

どうしたものかと調べていると、同じ境遇の方にStack Overflowで出会いました

Stack Overflowの回答者は、timeの代わりにdataを使いなよということで、

<div itemscope itemtype="https://schema.org/LocalBusiness">
  <p>Office Hours:</p>
  <p><data itemprop="openingHours" value="Mo-Fr 09:00-19:00">Monday-Friday: 9:00 am to 7:00 pm</data></p>
  <p><data itemprop="openingHours" value="Sa 10:00-17:00">Saturdays: 10:00 am to 5:00 pm</data></p>
  <p><data itemprop="openingHours" value="Su 11:00-16:00">Sundays: 11:00 am to 4:00 pm</data></p>
</div>

という例をあげていました。なるほど要素的にはtimeのように、value属性を見てくれるはず、と早速 data でマークアップしてみました。
(※そもそもtimeは一旦仕様から外れかけてdataに統合されそうでしたね)

ところがStructured Data Testing Toolで検証したところ、value属性の値ではなく要素内のテキストが読まれていました。

Structured Data Testing Toolの検証結果画面。data要素のvalueの値ではなく、textContentがopeningHoursの値となっている。

Micorodata周りの仕様を見ても、datavalueで大丈夫なはずなんだけどなー。うーん。


[1]今回は対象から外していますが、不定休などの場合は普通にテキストで値を与えて良いと思います。
<span itemprop="openingHours">不定休</span>

最後は万能 meta 要素

ということで、最後はMicrodataの困ったときのspan or meta ってことでmetaを使ってみます。

<div itemscope itemtype="https://schema.org/LocalBusiness">
<dl>
<dt>営業時間</dt>
<dd>
毎日元気に営業中!!!!!!!!!!
<meta itemprop="openingHours" content="Mo-Su" />
</dd>
</dl>
</div>

Structured Data Testing Toolで検証すると、当たり前ですがcontentの値が使われてます。

Structured Data Testing Toolの検証結果画面。

まとめ

ということで、

  • time要素
  • data要素
  • meta要素

の3つを使ってマークアップして検証してみましたが、time要素は、datetime属性のシンタックスに当てはまらない。data要素は、value属性の値が拾われない。ということで、今のところはmeta要素で行こうかなと思っています。

ただ、data要素の値が拾われているか拾われていないかは、Testing Tool上のことですので、Microdataの仕様にある例に倣ってdataを使用するのも良いと思います。

time要素のdatetime属性のフォーマットが拡充されればopeningHoursをマークアップするのには一番良さそうですが、それはそれで別問題のような気がしますしね。