Please consider the following code marked up with attributes to provide microdata:
<!DOCTYPE html>
<html>
<head>
<title>Micro data test - Normal version</title>
</head>
<body>
<div itemscope itemtype="http://schema.org/Product">
<h1 itemprop="name">Product name</h1>
<img alt="" itemprop="image" src="http://placehold.it/200x200" />
<div itemprop="description">This is the product description.</div>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta content="in_stock" itemprop="availability" />
<span content="GBP" itemprop="priceCurrency">£</span><span itemprop="price">100.00</span>
</div>
</div>
</body>
</html>
Using Google's Structured Data Testing Tool gives positive results.
This is fine in the test example, however, we want to implement microdata on a variety of sites whose HTML structure vary greatly. To implement the attributes in this way will require someone to manually edit the HTML markup on each of the sites individually.
Preferably, we would like to be able to call a single function that packages all the microdata in one place; technically this is possible by using meta tags in the following way:
<!DOCTYPE html>
<html>
<head>
<title>Micro data test - Meta tag version</title>
</head>
<body>
<meta itemscope itemtype="http://schema.org/Product" itemref="microName microImage microDescription microOffer" />
<meta id="microName" itemprop="name" content="Product name" />
<link id="microImage" itemprop="image" href="http://placehold.it/200x200" />
<meta id="microDescription" itemprop="description" content="This is the product description." />
<meta id="microOffer" itemprop="offers" itemscope itemtype="http://schema.org/Offer" itemref="microCurrency microPrice microAvail" />
<meta id="microAvail" itemprop="availability" content="in_stock" />
<meta id="microCurrency" itemprop="priceCurrency" content="GBP" />
<meta id="microPrice" itemprop="price" content="100.00" />
<div>
<h1>Product name</h1>
<img alt="" src="http://placehold.it/200x200" />
<div>This is the product description.</div>
<div>£100.00</div>
</div>
</body>
</html>
Using Google's Structured Data Testing Tool gives the same positive results as the first test.
For reference (we would never do this on an actual site) Google's Structured Data Testing Tool returns an error if you try to pass microdata hidden by CSS.
So, both the normal and meta tag markup produce the same results, however, I have some concerns due to the following statements from Google and Schema.org:
https://support.google.com/webmasters/answer/146750 states:
In general, Google will use only marked-up data that is visible to the user. Hidden data will be ignored. However, in a few circumstances, it can be useful to provide both a machine-readable and a human-readable version of your content. For example, while the text string "Elvis's birthday" is significant to a great many human readers, it's not as meaningful to search engines as 1935-01-08. Similarly, human readers can infer the meaning of the $ symbol, but it can be useful to specifically tell search engines whether your prices are in pesos or dollars.
http://schema.org/docs/gs.html states (in relation to using meta tags):
This technique should be used sparingly. Only use meta with content for information that cannot otherwise be marked up.
http://schema.org/docs/faq.html#13 states:
As a general rule, you should mark up only the content that is visible to people who visit the web page and not content in hidden div's or other hidden page elements.
My questions are:
- While no errors are returned, would we be penalized by search engines for using meta tags in this way (i.e. duplicate content, hiding information etc)?
- If this isn't suitable can you suggest any way of splitting the microdata from the actual data or will we have to bite the bullet and implement this in HTML on a case by case basis?
