8

I want to define a Product as the main content of a webpage using Schema.org markup. My idea with the following HTML is to use the structure:

 - Webpage
 -- WebPageElement (mainContentOfPage of Webpage)
 --- Product (about of WebPageElement which is mainContentOfPage of Webpage)

However, using this markup, Google does not seem to recognize the Product properties such as the aggregateRating. The "structured markup tool" is only satisfied if I remove the "about" property on Product. But then the structure breaks into:

- Webpage
-- WebPageElement (mainContentOfPage of Webpage)
-- Product

Product is no longer a part of WebPageElement. Even if I use the property "mainContentOfPage" directly on the Product node, I get the same result: The Product is not recognized properly. It seems like the Product node cannot have any itemprops. So how should I proceed?

<body itemscope itemtype="http://schema.org/WebPage">
    <div itemscope itemtype="http://schema.org/WebPageElement" itemprop="mainContentOfPage">
        <div itemprop="about" itemscope itemtype="http://schema.org/Product">
            <h1 itemprop="name">Acme Toaster Oven</h1>
            <div itemprop="description">It toasts AND bakes.</div>
            <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">Rated <span itemprop="ratingValue">3</span>/5 based on <span itemprop="reviewCount">2</span> reviews</div>
            <div itemprop="review" itemscope itemtype="http://schema.org/Review"><span itemprop="name">A great toaster</span> - by <span itemprop="author">John</span>,
                <meta itemprop="datePublished" content="2013-10-16">October 26, 2013
                <div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating"><span itemprop="ratingValue">5</span>/5</div>
                <span itemprop="reviewBody">First I had bread.  Then I had toast.  Magic!</span>
            </div>
            <div itemprop="review" itemscope itemtype="http://schema.org/Review"><span itemprop="name">A small oven</span> - by <span itemprop="author">Mary</span>,
                <meta itemprop="datePublished" content="2013-10-16">October 26, 2013
                <div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating"><span itemprop="ratingValue">1</span>/5</div>
                <span itemprop="reviewBody">My 18-pound turkey wouldn't fit in this thing.</span>
            </div>
        </div>
    </div>
</body>

The HTML can be tested here: http://www.google.com/webmasters/tools/richsnippets

Update

After experimenting with "itemref", I got pretty good results with this code in Google's tool and Yandex and the Structured Data Linter.

<body itemscope itemtype="http://schema.org/WebPage">
    <div itemscope itemtype="http://schema.org/WebPageElement" itemprop="mainContentOfPage">
        <meta itemprop="about" itemscope itemtype="http://schema.org/Product" itemref="theProduct" />
    </div>
    <div id="theProduct">
        <h1 itemprop="name">Acme Toaster Oven</h1>
        <div itemprop="description">It toasts AND bakes.</div>
        <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">Rated <span itemprop="ratingValue">3</span>/5 based on <span itemprop="reviewCount">2</span> reviews</div>
        <div itemprop="review" itemscope itemtype="http://schema.org/Review"><span itemprop="name">A great toaster</span> - by <span itemprop="author">John</span>,
            <meta itemprop="datePublished" content="2013-10-16">October 26, 2013
            <div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating"><span itemprop="ratingValue">5</span>/5</div>
            <span itemprop="reviewBody">First I had bread.  Then I had toast.  Magic!</span>
        </div>
        <div itemprop="review" itemscope itemtype="http://schema.org/Review"><span itemprop="name">A small oven</span> - by <span itemprop="author">Mary</span>,
            <meta itemprop="datePublished" content="2013-10-16">October 26, 2013
            <div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating"><span itemprop="ratingValue">1</span>/5</div>
            <span itemprop="reviewBody">My 18-pound turkey wouldn't fit in this thing.</span>
        </div>
    </div>
    </div>
</body>

The only side effect is that the reviews and aggregateRating seem to connect to both the WebPage and the Product. I don't know if that's bad.

Improve this question
6
  • Not sure I follow your HTML structure, but in the third line of your code about is not property that's nested under Product, so you will get errors with the Structured Data Testing Tool and Google likely isn't going to display it until you fix that.
    – dan ♦
    Commented Jan 22, 2014 at 17:00
  • 1
    As far as I understand, all itemprops are properties of the parent node. So the "about" property belongs to WebPageElement in this case. And the about property is supposed to be a Thing, which Product is a subclass of.
    – Truls
    Commented Jan 23, 2014 at 9:55
  • Does that work then? ;-) The schema.org table for Product lists the Properties from Thing and the Properties from Product that can be used - about is not one of those. Just trying to help you fix the error you're seeing.
    – dan ♦
    Commented Jan 23, 2014 at 15:29
  • Sure, but please look at it this way: WebPageElement has a property called "about". It is supposed to be "The subject matter of the content" and of type Thing. The Product is a Thing. So in my case, the Product is a property of WebPageElement. Is that logic wrong?
    – Truls
    Commented Jan 23, 2014 at 18:17
  • See my update. I think I got it working...?
    – Truls
    Commented Jan 23, 2014 at 18:51

3 Answers 3

Reset to default
4

Last week’s Schema.org release (version 2.0) introduced two relevant properties:

This allows you to omit WebPageElement (which is not very useful in the first place) and use something like this:

<body itemscope itemtype="http://schema.org/WebPage">

  <!-- properties about the web page -->

  <div itemprop="mainEntity" itemscope itemtype="http://schema.org/Product">
    <!-- properties about the product, which is the primary entity -->
  </div>

</body>
Improve this answer
0

I stumbled upon an article saying one may need to declare itemprop in the html element, like this:

<html lang="sv" itemscope itemtype="http://schema.org/Product" itemprop="[canonical]">

where [canonical] is to be replaced with the actual canonical link of the page.

I am not sure if this will solve the problem. If not, there is a schema creator that may be helpful at http://schema-creator.org/product.php

Improve this answer
1
  • 1
    Sorry, this did not have any effect on the result. Also the Product needs to be a part of the page, not the page itself. Using WebPage instead of Product in your example did not help either.
    – Truls
    Commented Jan 22, 2014 at 9:39
0

I agree with googlify's answer. Also, rather than having to use schema.org/Product. You might consider using schema.org/Offer instead and then with the itemprop=offers to help you nest it inside like you want it. Although, take my advice and stop using the schema.org/WebPageElement itemtype tag all together. It;s over redundant and nit that useful. you can get away with just using the itemprop="mainContentOfPage" by itself and it will work fine. Just be sure to add the sameAs, url and about properties if you are going to use mainEntity or mainEntityOfPage.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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