5

I want to specify if the Product is "In Stock" using HTML5+Microdata's <meta> tag using Schema.org.

I am unsure if this is the correct syntax:

<div itemscope itemtype="http://schema.org/Product">
  <h2 itemprop="name">Product Name</h2>
  <dl itemprop="offers" itemscope itemtype="http://schema.org/Offer">
    <dt itemprop="price">$1</dt>
    <meta itemprop="availability" itemscope itemtype="http://schema.org/ItemAvailability" itemid="http://schema.org/InStock">
  </dl>
</div>
unor
  • 92,415
  • 26
  • 211
  • 360
jacko333
  • 59
  • 1
  • 2
  • 2
    Did you check what it lookes like in googles' [Rich Snippet Testing Tool](http://www.google.com/webmasters/tools/richsnippets?url=//diveintohtml5.org/examples/review-plus-microdata.html)? – Oded Sep 03 '11 at 13:27
  • @Oded Cannot check because my web is not uploaded. Also, sometimes tools will correctly extract the content even if the syntax is incorrect ! So... is the syntax correct ? – jacko333 Sep 03 '11 at 13:37
  • I think the confusion may stem from this [Google Merchant Center help topic](https://support.google.com/merchants/answer/6069143?hl=en-GB). It shows this: `` – bluescrubbie Nov 14 '14 at 18:17
  • @bluescrubbie I'm surprised Google endorses that syntax. Though `itemtype` is technically a global attribute, I've never seen the `meta` element use it in the wild. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta – chharvey Feb 15 '16 at 04:46

6 Answers6

9

The meta tag can't be used with an itemscope like that. The correct way to express this is through a canonical reference using the link tag:

<div itemscope itemtype="http://schema.org/Product">
  <h2 itemprop="name">Product Name</h2>
  <dl itemprop="offers" itemscope itemtype="http://schema.org/Offer">
    <dt itemprop="price">$1</dt>
    <link itemprop="availability" href="http://schema.org/InStock">
  </dl>
</div>
Lawrence Woodman
  • 1,424
  • 9
  • 13
  • Nice markup. I would like to read more about this implementation sense I don't know how it works. Do you or anyone else reading this have a source? – superhero Apr 28 '12 at 21:35
  • 2
    It's in the documentation on schema.org: [Enumerations and canonical references: use link with href](http://schema.org/docs/gs.html#advanced_enum) – Michaël Hompus Feb 26 '13 at 21:40
3

I did the same as the OP and got the same thing, where the availability on the testing tool is linked to a sub-item... I was finally able to get it to verify properly with this:

<meta itemprop='availability' content='http://schema.org/InStock'>

Here is the Google structured tool output for the offer:

Item 1
type:   http://schema.org/offer
property:   
price:  Price: $139.00
pricecurrency:  USD
availability:   http://schema.org/InStock
1

While it is allowed to use meta (if used for Microdata!) in the body, your example is not correct for several reasons:

  • The dl element can only contain dt or dd (and script/template) elements. You either have to place the meta inside of dt/dd, or outside of dl (but then you would have to move the itemscope).

  • The meta element must have a content attribute.

  • Using itemid for this purpose is not correct, and http://schema.org/ItemAvailability is not a type, so using itemscope+itemtype isn’t correct either.

  • However, if the itemprop value is a URI, you must use the link element instead of the meta element.

Furthermore, the price value should not contain a currency symbol, and it seems that your dt should actually be a dd (with a dt containing "Price" or something).

So you could use:

<dl itemprop="offers" itemscope itemtype="http://schema.org/Offer">
  <dt>Price</dt>
  <dd>$<span itemprop="price">1</span> <link itemprop="availability" href="http://schema.org/InStock" /></dd>
</dl>
Community
  • 1
  • 1
unor
  • 92,415
  • 26
  • 211
  • 360
  • Is it allowed to use meta in the body - but this creates a hidden element and Google don't like hidden stuff. Recently I got one alert notification inside Webmasters Tools, that spammy structured data detected. That website had just below it's
    the element - Actually it was even passing the validation with the Google Structured Data Tool - but Webmasters was insisting about hidden content within structured data. I had to remove that finally. Any ideas of what's the case with this?
    – Sbpro Sep 02 '17 at 16:49
  • @Sbpro: If that was really the only hidden element, I’d guess that Google’s Webmasters Tools are bad. There are plenty of reasons why `meta`/`link` should be used (even Google’s own examples contain these), and the `inLanguage` case is such a good reason: you don’t want "en-US" to be user-visible. Also, with JSON-LD (which Google recommends to use) *everything* is hidden anyway. The advice really means: don’t deceive by hiding content from users which you show to search engines. -- Detecting such bad cases automatically is of course not easy to do, so their tools fail. – unor Sep 02 '17 at 17:15
  • Thanks for taking the time to respond. Yes, that was the only hidden element. I do agree that there are plenty of reasons to use such elements and provide structured data that do not necessarily have to be visible. Google here is like the tough police officer. Even in the JSON-LD docs, it warns about providing info that does not exist in the html. I am developing a CMS plugin to handle microdata - searching and researching about the best practices, but yet any information I have found is vague. BTW, I have read so many of your posts on the topic and they are really helpful. – Sbpro Sep 02 '17 at 17:28
0

See under the heading Non-visible content (not sure if this helps):

Google webmaster tools - About microdata

In general, Google won't display content that is not visible to the user. In other words, don't show content to users in one way, and use hidden text to mark up information separately for search engines and web applications. You should mark up the text that actually appears to your users when they visit your web pages.

There are a few exceptions to this guideline. In some situations it can be valuable to provide search engines with more detailed information, even if you don't want that information to be seen by visitors to your page. For example, if a restaurant has a rating of 8.5, users (but not search engines) will assume that the rating is based on a scale of 1–10. In this case, you can indicate this using the meta element, like this:

<div itemprop="rating" itemscope itemtype="http://data-vocabulary.org/Rating"> Rating: <span itemprop="value">8.5</span> <meta itemprop="best" content="10" /> </div>

Ricardinho
  • 1,319
  • 13
  • 15
  • Not your fault, but in this case Google is so unhelpful lol. "Mostly don't do this, except for the exceptions, in which case, do this!" ummm… thanks. – chharvey Feb 08 '16 at 14:57
0

I made a jsfiddle here: http://jsfiddle.net/dLryX/, then put the output (http://jsfiddle.net/dLryX/show/) into the rich snippets tool.

That came back with:

enter image description here

I believe the syntax is correct, and that the Warning isn't important, as it doesn't have a property, as it's a meta tag.

Rich Bradshaw
  • 71,795
  • 44
  • 182
  • 241
  • It's not valid, check the documentation on schema.org about enumerations. Also meta tags _needs_ to have a content to be valid HTML. – Michaël Hompus Feb 26 '13 at 21:43
-2

This is an example from schema.org's getting started guide to support @Lawrence's answer.

However, I don't like the use of the link tag inside the body of the page. From MDN:

A link tag can occur only in the head element;

Isn't there a better way of specifying availability using a valid markup?

ordnungswidrig
  • 3,140
  • 1
  • 18
  • 29
idophir
  • 14,451
  • 5
  • 24
  • 21
  • `link` and `meta` are [allowed in the `body`](http://stackoverflow.com/a/18898363/1591669) if used for Microdata. – unor Oct 10 '13 at 14:38
  • While your quote is technically present on the page, you should read between the lines. Notice at the top, "**Content categories: Metadata content. If itemprop is present: flow content and phrasing content**". Since flow and phrasing content can be present in the body, the `` can be present in the body if, and only if, it has the `itemprop` attribute. – chharvey Feb 08 '16 at 15:03