Example: How to use HTML5 microdata with products
Microdata gives web developers an incredible amount of precision when they’re communicating with search engines. I’d thought I’d try it out on a recent product-related blog post I did, and I was surprised to find that there wasn’t a simple and complete example of a product listing using microdata and HTML5. Here’s the code I came up with:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Microdata Test</title>
<meta charset="UTF-8">
</head>
<body>
<div itemscope itemtype="http://schema.org/Product">
<a href="http://www.amazon.com/gp/product/B002BR9GUU/" itemprop="url" target="_blank">
<h1><span itemprop="name">Acana</span></h1>
<span itemprop="image"><img src="http://www.fredmarion.com/wp-content/uploads/2013/02/arcana-dry-dog-food.png" alt="Acana Dog Food"/></span>
<span>Category: <span itemprop="category">Dry Dog Food</span></span>
<span>Weight: <span itemprop="weight">29.7 lbs</span></span>
<span>Price: <span itemprop="price">$84.95</span></span>
</a>
</div>
</body>
</html>
As you can see in the bold area above, this example validates against Schema.org’s product requirements. I also ran the full code through the W3C’s Nu validator (which supports schemas/microdata), and found that it passed. Try running it through yourself and you should see a success message from the W3C indicating that the HTML was validated against the schema in addition to normal checks. Here’s the message you’ll see:
One interesting note in the example above: I used a new HTML5 feature that allows developers to embed block-level elements inside of links. If you look carefully, you’ll see that the <h1> tag (and the rest of the product information) is wrapped in a link.
All in all, I think microdata presents a significant advancement in enriching web content. It’s still rough, though. One part of the example above that irks me is the fact that I need to use wrapper spans to associate descriptions with the actual itemprop content. Until we get some new tags to work with, though, I don’t think there’s a good way around that. You’re going to need a superfluous tag to support common layout requirements.
If you have any suggestions or ideas, please post them below, and I’ll respond as soon as possible.