I'm busy adding microdata (schema.org) to a website about a software application.
Instead of repeating myself in terms of duplicate code I try to add metadata one time (where possible) and reference to it.
This is where I still having questions:
How do you properly reference to other metadata without the metadata being added to the page itself? Let me give an example: first I tried this:
<!DOCTYPE html>
<html itemscope itemtype="http://schema.org/WebSite" lang="en">
<body itemprop="mainEntity" itemscope itemtype="http://schema.org/WebPage">
<div class="main">
<div class="container">
<div class="row">
<div class="col-md-12">
<!-- info about product and reference to the metadata -->
<div itemscope itemtype="http://schema.org/SoftwareApplication" itemref="microdataMyProduct1">
<!-- product info on website -->
</div>
</div>
</div>
</div>
</div>
<!-- this metadata gets also added to the WebPage -->
<div id="microdataMyProduct1">
<meta itemprop="name" content="My Product 1" />
</div>
</body>
</html>
But this code above adds also the microdata itemprop's of the product to the scope of the "WebPage". (where google testing tool complains about, because some itemprop's from 'SoftwareApplication' are not valid for 'WebPage')
So I thought to add an item scope and replace these lines:
<div itemscope itemtype="http://schema.org/SoftwareApplication" itemref="microdataMyProduct1">
<!-- ... -->
<div id="microdataMyProduct1">
<!-- ... -->
with these lines:
<div itemscope itemtype="http://schema.org/SoftwareApplication" itemref="microdataMyProduct1">
<!-- ... -->
<div itemscope itemtype="http://schema.org/SoftwareApplication" id="microdataMyProduct1">
<!-- ... -->
The problem is that I now have two itemscopes/itemtypes. Is this correct? On another stackoverflow post I've read that you should not use itemref in combination with ID's but reference to an external url. I'm confused.
Here is an example I have now (referencing to several other metadata using itemref (from inside the head and in microdata itself):
<!DOCTYPE html>
<html itemscope itemtype="http://schema.org/WebSite" lang="en">
<head>
<meta name="author" content="Company 1">
<meta itemprop="author" itemscope itemtype="http://schema.org/LocalBusiness" itemref="microdataCompany1">
<meta itemprop="about" itemscope itemtype="http://schema.org/SoftwareApplication" itemref="microdataMyProduct1">
<!-- ... -->
</head>
<body itemprop="mainEntity" itemscope itemtype="http://schema.org/WebPage">
<div itemprop="hasPart" itemscope itemtype="http://schema.org/WPHeader">
<nav class="navbar" itemprop="hasPart" itemscope itemtype="http://schema.org/SiteNavigationElement">
<!-- ... -->
</nav>
</div>
<div class="main">
<div class="container">
<div class="row">
<div class="col-md-12">
<!-- another second product on the page -->
<div itemscope itemtype="http://schema.org/SoftwareApplication">
<h3 itemprop="name">Second Product</h3>
<meta itemprop="applicationCategory" content="BusinessApplication" />
<meta itemprop="creator" itemscope itemtype="http://schema.org/LocalBusiness" itemref="microdataCompany1" />
<meta itemprop="producer" itemscope itemtype="http://schema.org/LocalBusiness" itemref="microdataCompany1" />
<meta itemprop="provider" itemscope itemtype="http://schema.org/LocalBusiness" itemref="microdataOtherCompany" />
<!-- ... -->
</div>
</div>
</div>
</div>
</div>
<div class="footer" itemprop="hasPart" itemscope itemtype="http://schema.org/WPFooter">
</div>
<!-- Product 1 microdata -->
<!-- ##################### -->
<div hidden class="hidden" itemscope itemtype="http://schema.org/SoftwareApplication" id="microdataMyProduct1">
<meta itemprop="name" content="My Product 1" />
<meta itemprop="applicationCategory" content="BusinessApplication" />
<meta itemprop="creator" itemscope itemtype="http://schema.org/LocalBusiness" itemref="microdataCompany1" />
<meta itemprop="producer" itemscope itemtype="http://schema.org/LocalBusiness" itemref="microdataCompany1" />
<meta itemprop="provider" itemscope itemtype="http://schema.org/LocalBusiness" itemref="microdataOtherCompany" />
</div>
<!-- Company 1 microdata -->
<!-- ################### -->
<div hidden class="hidden" itemscope itemtype="http://schema.org/LocalBusiness" id="microdataCompany1">
<meta itemprop="name" content="Company 1">
<!-- ... -->
<div itemprop="openingHoursSpecification" itemscope itemtype="http://schema.org/OpeningHoursSpecification">
<link itemprop="dayOfWeek" href="http://schema.org/Monday" />
<time itemprop="opens" content="8:00:00" />
<time itemprop="closes" content="12:30:00" />
<time itemprop="opens" content="13:30:00" />
<time itemprop="closes" content="18:00:00" />
</div>
<div itemprop="openingHoursSpecification" itemscope itemtype="http://schema.org/OpeningHoursSpecification">
<link itemprop="dayOfWeek" href="http://schema.org/Tuesday" />
<time itemprop="opens" content="8:00:00" />
<time itemprop="closes" content="12:30:00" />
<time itemprop="opens" content="13:30:00" />
<time itemprop="closes" content="18:0:00" />
</div>
</div>
<!-- Other Company microdata -->
<!-- ######################## -->
<div hidden class="hidden" itemscope itemtype="http://schema.org/LocalBusiness" id="microdataOtherCompany">
<meta itemprop="name" content="Other Company">
<meta itemprop="legalName" content="Other Company Ltd.">
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<meta itemprop="streetAddress" content="FooStreet">
<!-- ... -->
</div>
</div>
</body>
</html>
Is this correct usage of microdata for a page on a website about a product? Are itemref="" attributes correctly used?
