I am tagging the product pages of a webshop using Schema.org. So far, I have used a hierarchical structure where the body
tag is marked as ItemPage
. Then I can use the property breadcrumb
on ItemPage
for my breadcrumbs, and another property mainEntity
which is a Product
. This does not give any warnings in the Structured Data testing Tool - the hierarchy is displayed here the way I intended.
But I wonder if Google would pick up my Product
/Offer
markup easier if it wasn't bundled within an ItemPage
. That is, should I skip ItemPage
and just have the Product
as a loose elements, along with breadcrumbs, and other ItemLists?
Which is better?
Example of my hierarchical layout:
<body itemscope itemtype="http://schema.org/ItemPage">
<div>Some other stuff...</div>
<ol itemprop="breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a href="/a" itemprop="item"><span itemprop="name">A</span></a>
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a href="/b" itemprop="item"><span itemprop="name">B</span></a>
</li>
</ol>
<div itemprop="mainEntity" itemscope itemtype="http://schema.org/Product">
<img src="/image.jpg" itemprop="image">
<h1 itemprop="name">My Product</h1>
<div itemprop="description">Example text</div>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta itemprop="price" content="129">
<meta itemprop="priceCurrency" content="SEK">
<link itemprop="availability" href="http://schema.org/InStock">
<meta itemprop="itemCondition" itemtype="http://schema.org/OfferItemCondition" content="http://schema.org/NewCondition">
</div>
</div>
</body>
Example of loose tagging: (The BreadcrumbList and the Product are not "itemprop" of anything)
<body>
<div>Some other stuff...</div>
<ol itemscope itemtype="http://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a href="/a" itemprop="item"><span itemprop="name">A</span></a>
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a href="/b" itemprop="item"><span itemprop="name">B</span></a>
</li>
</ol>
<div itemscope itemtype="http://schema.org/Product">
<img src="/image.jpg" itemprop="image">
<h1 itemprop="name">My Product</h1>
<div itemprop="description">Example text</div>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta itemprop="price" content="129">
<meta itemprop="priceCurrency" content="SEK">
<link itemprop="availability" href="http://schema.org/InStock">
<meta itemprop="itemCondition" itemtype="http://schema.org/OfferItemCondition" content="http://schema.org/NewCondition">
</div>
</div>
</body>