I am adding Microdata on a site, and wondering on which level the itemprop
property should appear.
For example, I have the following markup:
<div itemscope itemtype="http://schema.org/Article">
<div class="author">
<a href="http://www.author.com">Author's Name</a>
</div>
</div>
Where should itemprop
go, in the a
element directly or it is possible to add it to <div class="author">
and it would be parsed correctly?
Can I have the following:
<div itemscope itemtype="http://schema.org/Article">
<div class="author" itemprop="author">
<a href="http://www.author.com">Author's Name</a>
</div>
</div>
instead of
<div itemscope itemtype="http://schema.org/Article">
<div class="author">
<a href="http://www.author.com" itemprop="author">Author's Name</a>
</div>
</div>
In other words, does the itemprop
property have to be defined on the element directly (such as an a
or img
tag) or it's possible to define it on a wrapper div
with the content actually being in a child element?
It depends on the property (what value it should have).
An itemprop
on an element with href
or src
attribute (e.g., a
or img
) creates a URI value: it takes the value of the href
/src
attribute, not the element’s content.
Here the author
property has the string value "Author's Name
":
<div itemprop="author">
<a href="http://example.com/">Author's Name</a>
</div>
Here the author
property has the URI value "http://example.com/
":
<div>
<a href="http://example.com/" itemprop="author">Author's Name</a>
</div>
There are some more exceptions, like the meter
element or the time
element. You can refer to a summary in my answer about datatypes in Microdata.
Leaving these exceptions aside, if the value should be a string, and you have, let’s say, only div
elements, it doesn’t matter on which element you specify the itemprop
, so these three snippets all have the string "bar
" as value for the foo
property:
<div itemprop="foo">
bar
</div>
<div itemprop="foo">
<div>
bar
</div>
</div>
<div itemprop="foo">
<div>
<div>
bar
</div>
</div>
</div>