: Schema.org - Hierarchical or loose layout? 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.
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>
More posts by @Gretchen104
1 Comments
Sorted by latest first Latest Oldest Best
Your example of the hierarchical layout is very close to the suggested usage of the mainEntity property suggested by the official protocol documentation:
As mainEntity definition "indicates the primary entity described in some page", this is a perfect fit for your case, so my suggestion is that you choose this well structured code, Google should understand it perfectly.
This is the relevant code for this example used in schema.org main property:
<body itemscope itemtype="http://schema.org/WebPage">
...
<div itemprop="breadcrumb">
<a href="category/books.html">Books</a> >
<a href="category/books-literature.html">Literature & Fiction</a> >
<a href="category/books-classics">Classics</a>
</div>
<div itemprop="mainEntity" itemscope itemtype="http://schema.org/Book">
<img itemprop="image" src="catcher-in-the-rye-book-cover.jpg"
alt="cover art: red horse, city in background"/>
<span itemprop="name">The Catcher in the Rye</span> -
<link itemprop="bookFormat" href="http://schema.org/Paperback">Mass Market Paperback
by <a itemprop="author" href="/author/jd_salinger.html">J.D. Salinger</a>
<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<span itemprop="ratingValue">4</span> stars -
<span itemprop="reviewCount">3077</span> reviews
</div>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
Price: $<span itemprop="price">6.99</span>
<meta itemprop="priceCurrency" content="USD" />
<link itemprop="availability" href="http://schema.org/InStock">In Stock
</div>
Product details
<span itemprop="numberOfPages">224</span> pages
Publisher: <span itemprop="publisher">Little, Brown, and Company</span> -
<meta itemprop="datePublished" content="1991-05-01">May 1, 1991
Language: <span itemprop="inLanguage">English</span>
ISBN-10: <span itemprop="isbn">0316769487</span>
</div>
...
</body>
The above example and yours, both are being fully processed by search.google.com/structured-data/testing-tool with very similar results.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.