Mobile app version of vmapp.org
Login or Join
RJPawlick198

: Link child product to parent product when not contained in child element I'm trying to indicate multiple related products on a product page using Microdata (with Schema.org). But the child products

@RJPawlick198

Posted in: #Html5 #Microdata

I'm trying to indicate multiple related products on a product page using Microdata (with Schema.org). But the child products are orphaned because they are not contained in the parent div. I tried using itemref but I must be using it incorrectly or it must be the wrong solution.

Also, I cannot easily create a wrapper div or use the body element to create the parent.

My ideal solution would be one that leaves the page structure as-is, and somehow links the "child product" divs to the parent. I thought itemref would do that, but it doesn't appear to be working.

Here is example HTML.

<div id="main-product" itemscope itemtype="http://schema.org/Product">

<div class="product-name">
<h1 itemprop="name">Main Product</h1>
</div>
</div>
<!-- END main-product div -->
<!-- START related-products div -->
<div class="related-products">
<ol class="products-list" id="related-products-list">
<li class="item">
<div class="product" itemprop="isRelatedTo" itemscope itemtype="http://schema.org/Product" itemref="main-product">
<p class="product-name"><a itemprop="url" href="/some_product1.php"><span itemprop="name">Some Product 1</span></a></p>
</div>
</li>
<li class="item">
<div class="product" itemprop="isRelatedTo" itemscope itemtype="http://schema.org/Product" itemref="main-product">
<p class="product-name"><a itemprop="url" href="/some_product2.php"><span itemprop="name">Some Product 2</span></a></p>
</div>
</li>
</ol>
</div>


The above HTML is simplified, but similar in structure to what's on my site and gives similar errors when submitted to validators.

E.g. webmaster.yandex.com/microtest.xml gives:

microdata
ERROR: unable to determine affiliation of these fields. There are two possible reasons: this fields are incorrectly placed or an orphan itemprop attribute is indicated
itemType = orphans
isrelatedto
product
itemType = schema.org/Product url
href = /some_product1.php
text = Some Product 1
name = Some Product 1
isrelatedto
product
itemType = schema.org/Product url
href = /some_product2.php
text = Some Product 2
name = Some Product 2

product
itemType = schema.org/Product name = Main Product


The Google validator does not seem to show any errors, but the child products are not related to the parent product.

10.02% popularity Vote Up Vote Down


Login to follow query

More posts by @RJPawlick198

2 Comments

Sorted by latest first Latest Oldest Best

 

@Ann8826881

Yes, itemref can do this, but it has to be used on the element to which the properties should be added to.

So instead of this

<div id="main-product" itemscope itemtype="http://schema.org/Product">
</div>

<div itemref="main-product" itemprop="isRelatedTo" itemscope itemtype="http://schema.org/Product">
</div>


you have to use this

<div itemref="related-product-1" itemscope itemtype="http://schema.org/Product">
</div>

<div id="related-product-1" itemprop="isRelatedTo" itemscope itemtype="http://schema.org/Product">
</div>

10% popularity Vote Up Vote Down


 

@Turnbaugh106

It may pass Google but there is still problems with the code. To resolve the issue with Yandex, W3C and to be sure that it works well on all engines, all platforms and browsers then you should resolve this problem. The problem is that you are closing the product div early which results in The itemprop attribute was specified, but the element is not a property of any item.

Simply add a wrapper, or attach it too the body or html for example:

<div class="product-wrapper" itemscope itemtype="http://schema.org/Product">
<div id="main-product">


OR

<body itemscope itemtype="http://schema.org/Product">
<div id="main-product">


So your going to need to change your HTML code to make it validate, simples.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme