Structured data for opening hours semantic html
Asked Answered
C

3

9

I'm supposed to mark up the opening hours of a company with HTML5 microdata. After searching on Google and schema.org for a bit i wrote the following code:

<time itemprop="openingHours" datetime="Mo 13:00-17:30"><span class="day">Maandag:</span>   <span class="hours">13:00-17:30</span></time>
<time itemprop="openingHours" datetime="Tu 09:00-17:30"><span class="day">Dinsdag:</span>   <span class="hours">09:00-17:30</span></time>
<time itemprop="openingHours" datetime="We 09:00-17:30"><span class="day">Woensdag:</span>  <span class="hours">09:00-17:30</span></time>
<time itemprop="openingHours" datetime="Th 09:00-17:30"><span class="day">Donderdag:</span> <span class="hours">09:00-17:30</span></time>
<time itemprop="openingHours" datetime="Fr 09:00-21:00"><span class="day">Vrijdag:</span>   <span class="hours">09:00-21:00</span></time>
<time itemprop="openingHours" datetime="Sa 08:30-15:00"><span class="day">Zaterag:</span>   <span class="hours">08:30-15:00</span></time>

When i check the website in with Google's structured data testing tool i see that the structured data is recognized correctly. The problem is that one of the requirements of this assignment is that it conforms to W3C's HTML validator. For eacht time element i get the following error.

Bad value Mo 13:00-17:30 for attribute datetime on element time: The literal did not satisfy the time-datetime format.

I get why i get this error, what i don't get is how i can specify my opening-hours in a way that they are marked up with HTML5 Microdata and that they are also valid HTML according to the HTML5 validator.

Hope you guys can help me out on this one. :)

Coalfield answered 10/11, 2013 at 13:39 Comment(3)
The OpeningHoursSpecification seems to solve it. #14040303Grattan
Thanks Scott! Finally got it working :)Coalfield
@Weszzz7: You could post your solution as answer.Smocking
B
6

Maintainer of the W3C HTML Checker (aka validator) here. I wrote the code that does that check. The value Mo 13:00-17:30 in the question doesn’t conform to the rules in the HTML spec giving the allowed values of datetime.

The value Mo 13:00-17:30 seems to be trying to specify a special time range: A day of the week plus a time range.

But the HTML spec doesn’t allow the value to be in that format. The closest format that it does allow is a ISO8601-format duration string.

A duration string that would be valid: datetime="4h 30m".

That’s about as close as you can get, because in the HTML spec, the rules for specifying a duration are that it must be a single expression of a number of hours+minutes+seconds. So:

  • an duration expression that specifies a pair of times (as the question has) is not valid
  • as expression of a duration that specifies a day of the week is not valid
Benzaldehyde answered 12/9, 2015 at 13:55 Comment(0)
D
2

I used data instead of time - works for validator.w3.org as well as for www.google.com/webmasters/tools/richsnippets: <data itemprop="openingHours" value="Mo-Su 07:00-22:00">7 days a week, 7 am to 22 pm</data> Thanks to Hixie on freenode#whatwg.

Dissipate answered 11/9, 2014 at 23:35 Comment(0)
D
1

If the datetime format is causing the validation to fail, you could place the hours of operations in the meta tag element:

  <meta itemprop="openingHours" content="Mo,Tu 11..." />
  <meta itemprop="openingHours" content="We,Th 12..." />
  ...

According to the specs, the meta element will be valid there if it has the itemprop attribute.

Denier answered 2/1, 2016 at 22:20 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.