5

According to Google’s documentation about the Product Rich Snippet, when I want to mark product’s availability in my shop, I should do the following (using Microdata):

<span itemprop="availability" content="in_stock">In stock! Order now!</span>

And I do similar:

<p class="centered" itemprop="availability" content="in_stock">Produkt dostępny</p>

Unfortunately the W3C validator reports an error on this:

Line 569, Column 73: Attribute content not allowed on element p at this point.

So, what is wrong with my code or with Google?

EDIT: I also have warnings:

RDFa Core attribute content is not allowed on the p element in HTML5 + RDFa 1.1 Lite documents. Consider checking against the HTML5 + RDFa 1.1 schema instead.

But if I understand specs correctly, HTML5 implies RDFa 1.1, not 1.1 Lite? My DOCTYPE is <!DOCTYPE HTML>.

EDIT2: I got the solution now

Despite my code in question not being correct HTML5 code, it was correctly recognized by Google’s tool for testing Rich Snippets. It did not satisfy me, so I decided that if content attribute was only allowed on <meta> tags, let’s go with <meta>:

<p class="centered">Produkt dostępny</p>
<meta itemprop="availability" content="in_stock"/>

This way the code is:

  • unambiguous - the meta element is a child of the itemscope element,
  • accepted by HTML5 validation tool,
  • still recognized properly by Google’s tool.
Improve this question
2
  • Have you tried changing the <p> tag to a <span>?
    – nathangiesbrecht
    Mar 3, 2013 at 18:33
  • @nathangiesbrecht, no, although I have a very similar problem with span: Attribute content not allowed on element span at this point. - that was for a span with itemprop="identifier" and content="sku:foobar".
    – Al W
    Mar 3, 2013 at 18:36

2 Answers 2

Reset to default
2

In HTML5+Microdata, only the meta element can have the content attribute.

(In HTML5+RDFa, every element may have the content attribute.)

So if you want to add the string value "in_stock", and it should not be visible on the page, using the meta element is the correct choice:

<meta itemprop="availability" content="in_stock" />

You were probably using the vocabulary Data-Vocabulary.org, but for those that use Schema.org: Note that Schema.org’s availability property expects a URI as value, so the link element must be used instead:

<link itemprop="availability" href="http://schema.org/InStock" />
Improve this answer
0

Micro data has strict rules regarding the tags that you can use, you can open an itemprop with using the p tag and specify the data-vocabulary but nested elements must not be in a p tag.

For example you can use:

 <p itemprop="address" itemscope
     itemtype="http://data-vocabulary.org/Address">
    <span itemprop="street-address">123 Road Name</span><br>
    <span itemprop="locality">Bournemouth</span>,
    <span itemprop="region">Dorset</span>
    <span itemprop="postal-code">BH1 3DD</span><br>
    <span itemprop="country-name">UK</span>
  </p>

And say you want to add another element such as a telephone in a p tag you need to have another span nested within the <p> like so:

  <p>
    US customers: <span itemprop="tel">01202 666999</span><br>
    UK customers: <span itemprop="tel">01202 666888</span>
  </p>

So this would look like:

 <p itemprop="address" itemscope
     itemtype="http://data-vocabulary.org/Address">
    <span itemprop="street-address">123 Road Name</span><br>
    <span itemprop="locality">Bournemouth</span>,
    <span itemprop="region">Dorset</span>
    <span itemprop="postal-code">BH1 3DD</span><br>
    <span itemprop="country-name">UK</span>
  </p>
  <p>
    US customers: <span itemprop="tel">01202 666999</span><br>
    UK customers: <span itemprop="tel">01202 666888</span>
  </p>

So in your case you want to use something like: 

<div itemscope itemtype="http://data-vocabulary.org/Product">
    <span itemprop="brand">Brand Name</span> <span itemprop="name">Item Name</span>
    <span itemprop="availability" content="in_stock">In stock! Order now!</span>
</div>
<p class="centered">
    <span itemprop="availability" content="in_stock">Produkt dostępny</p>
</p>

So you can use DIV and P's but most of the time you will need to use spans as these are nested and the first is closed. It's pretty complicated to understand never mind explaining it. I strongly recommend you take a look at 'diving into html5 microdata'

Improve this answer
6
  • 1
    Still no: Attribute content not allowed on element span at this point. - this is span with itemprop "availability", nested in div itemprop="offerDetails" itemscope itemtype="data-vocabulary.org/Offer", which is nested in div itemscope itemtype="data-vocabulary.org/Product". But thank you for pointing the microdata tutorial, let's see what I can learn from it ;)
    – Al W
    Mar 3, 2013 at 18:47
  • whats the url in question so I can take a look.
    – Simon Hayter
    Mar 3, 2013 at 18:56
  • the code was not yet uploaded to the production server, but it will be in a few days, even if I can't get it working (if it will not break chrome, opera and ff display).
    – Al W
    Mar 3, 2013 at 19:27
  • 1
    I've updated the code and have the P class="centered"outside the div element, this should work and passes on my test. I believe p can't be nested at all within a itemscope.
    – Simon Hayter
    Mar 3, 2013 at 20:33
  • But then if I have more than one product on the page, how will google know which availability status is for which product? I'm going to test my solution today or tomorrow with google's tool for testing rich snippets, heard that there's something like that in google webmaster's tools. We'll see what will it say.
    – Al W
    Mar 4, 2013 at 19:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.