Tell me more ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.
up vote 4 down vote favorite

According to Google's documentation about product microdata, when I want to mark product's availability in my internet shop, I should do the following:

<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:

Blockquote 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 descriptions. 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.
share|improve this question
Have you tried changing the <p> tag to a <span>? – nathangiesbrecht Mar 3 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 at 18:36

1 Answer

up vote 1 down vote

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'

share|improve this answer
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 at 18:47
whats the url in question so I can take a look. – bybe♦ Mar 3 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 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. – bybe♦ Mar 3 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 at 19:22
show 1 more comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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