1

I am trying to use Microdata to define my website using the Schema.org definitions.

Below is my current HTML markup:

<body itemscope itemtype="http://schema.org/ItemPage">
<link itemprop="url" href="https://example.com/i/10" />

<main role="main">

    <!-- Show the main product of the page -->           
    <div itemprop="mainEntity" itemtype="http://schema.org/Product" itemscope>
        <meta itemprop="name" content="My Main Product 10 Name" />
        <!-- ... more properties that describes current product -->   
    </div>


    <!-- List of 10 similar product the current product being viewed -->
    <div class="list-related-products">

        <div itemtype="http://schema.org/Product" itemscope>
            <meta itemprop="name" content="Related Product 20 Name" />
            <meta itemprop="url" content="https://example.com/i/20" />
            <div itemprop="isSimilarTo" itemscope itemtype="http://schema.org/Product">
                <link itemprop="url" href="https://example.com/i/10" />
            </div>
            <!-- ... more properties -->   
        </div>

        <!-- ... more products -->   
    </div>
</main>

</body>

When I validate the code using Structured Data Testing Tool, the similar products section shows up as a separate nodes and not part of the ItemPage.

How can I list the related similar products correctly under the current product being defined?

unor
  • 92,415
  • 26
  • 211
  • 360
Junior
  • 11,602
  • 27
  • 106
  • 212
  • 1) Is there a reason for using `isSimilarTo` inside the related product to reference the URL of the primary product? Or aren’t the first and third `Product` items supposed to be the same? 2) Instead of posting the full HTML document, please [edit] your question to make it a minimal example that only shows the relevant parts (e.g., here you could exclude the header, the footer, and the website; and you could use a `div` for the `ItemPage` so you don’t have to include the `html`/`head`/`body` elements). – unor Oct 06 '19 at 21:52
  • @unor The example above is showing full product details for a product with the id of 10 (example.com/i/10). At the bottom of the page, I am listing similar products, in this case, its a product with the id of 10 (example.com/i/20). I have updated the question as per your instructions. – Junior Oct 06 '19 at 23:49

1 Answers1

1

Solution 1: nesting

You can add isSimilarTo inside the primary product:

<article itemprop="mainEntity" itemscope itemtype="http://schema.org/Product">
  <h2 itemprop="name">Product 10</h2>

  <aside>
    <article itemprop="isSimilarTo" itemscope itemtype="http://schema.org/Product">
      <h3 itemprop="name">Product 20</h3>
    </article>

    <article itemprop="isSimilarTo" itemscope itemtype="http://schema.org/Product">
      <h3 itemprop="name">Product 30</h3>
    </article>
  </aside>

</article>

Solution 2: itemref

If you can’t nest the similar products under the HTML element for the primary product, you could use Microdata’s itemref (example).

Solution 3: ID

(You should only go this way if solutions 1 or 2 aren’t possible, as not all consumers will support this solution 3.)

Similar to what you’re currently using, you can give the primary product an URI as identifier (with Microdata’s itemid attribute) and reference this URI as value for the isSimilarTo inside the similar products.

<article itemprop="mainEntity" itemscope itemtype="http://schema.org/Product" itemid="https://example.com/i/10#this">
  <h2 itemprop="name">Product 10</h2>
</article>

<aside>
  <article itemscope itemtype="http://schema.org/Product">
      <h3 itemprop="name">Product 20</h3>
      <link itemprop="isSimilarTo" href="https://example.com/i/10#this" />
  </article>

  <article itemscope itemtype="http://schema.org/Product">
      <h3 itemprop="name">Product 30</h3>
      <link itemprop="isSimilarTo" href="https://example.com/i/10#this" />
  </article>
</aside>
unor
  • 92,415
  • 26
  • 211
  • 360
  • Of course, this is the right answer :) Thank you. I want to list products on a WebPage what property do I use? I can't find a property that I can use. That would be a list of a featured items not related to the current product. – Junior Oct 07 '19 at 00:59
  • 1
    @Junior: You mean for something like a category page? See [What is the Schema.org markup for a group of Things?](https://stackoverflow.com/q/53266384/1591669) – unor Oct 07 '19 at 06:17
  • I actually can't seem to get solution 2 to work. I initially got solution 1 to work, then found out that the related items must be placed outside of the Product scope. I updated my question with the attempt to use the `itemref` which does not seems to make the related items part of the product as "similar" items – Junior Oct 07 '19 at 15:28
  • 1
    @Junior: I rolled back [your edit](https://stackoverflow.com/revisions/58261093/5), as the scope of questions shouldn’t be changed. Please create a separate question about the `itemref` issue. – unor Oct 07 '19 at 16:37
  • As per your suggestion, a new question was added https://stackoverflow.com/questions/58273988/how-to-use-microdata-to-to-reference-similar-product-that-are-listed-outside-of – Junior Oct 07 '19 at 16:55