Schema.org Markup of a SERP / Product Listing

Microdata is great but, how do you use Google rich snippets to add multiple products to a single page?  Schema.org recently released their product example markup.  This gave me a chance to create the ideal markup of a SERP using schema.org markup.  Check it out here. Microdata is evolving with the support of major companies. Things are converging around microdata and schema.org with the support of Bing, Yahoo, and Google. This gives us web developers an opportunity to utilize this standard, but also presents the challenge of trying to piece together how it should be used on each page, and how often. With this in mind I put together a sample SERP (search engine result page.)

This page does the following:

• Utilizes Schema.org / Microdata / Rich Snippets
• Demonstrates a solid document outline
• Validates via W3C HTML5 Validator
• Validates the CSS3

Here is the sample code for a schema.org item listing:

<div class='results' itemscope itemtype="http://schema.org/ItemList">
	<meta itemprop="itemListOrder" content="Descending" />
	<!-- this could be an h2 if you want to affect the outline -->
	<strong itemprop="name">Name of Items</strong>
	<div class='item' itemprop="itemListElement">
			Item 1 information, description of the item.  Includes some basic comparison details.
	</div>
	<div class='item' itemprop="itemListElement">
			Item 1 information, description of the item.  Includes some basic comparison details.
	</div>
</div>

Here is sample product markup:

<div itemscope itemtype="http://schema.org/Product">
	<h3 itemprop="name">Item 2 Title</h3>
	<img itemprop='image' src="bmw2.jpg" alt='Item 2 Description' />
	<span itemprop="description">
		Item 2 description of the item.  Includes some basic comparison details.
	</span>
	<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
		<span itemprop="price">$44,550.00</span>
		<link itemprop="availability" href="http://schema.org/InStock"/>
	</div>
</div>

And here is the code for putting it all together:

<div class='results' itemscope itemtype="http://schema.org/ItemList">
	<meta itemprop="itemListOrder" content="Descending" />
	<strong itemprop="name">2 Items</strong>
	<div class='item' itemprop="itemListElement" itemscope itemtype="http://schema.org/Product">
		<h3 itemprop="name">Item 1 Title</h3>
		<img itemprop='image' src="bmw1.jpg" alt='Item 1 Description' />
		<span class='description' itemprop="description">
			Item 1 description of the item.  Includes some basic comparison details.
		</span>
		<div class='pricing' itemprop="offers" itemscope itemtype="http://schema.org/Offer">
			<span itemprop="price">$45,500.00</span>
			<link itemprop="availability" href="http://schema.org/InStock"/>
		</div>
	</div>
	<div class='item' itemprop="itemListElement" itemscope itemtype="http://schema.org/Product">
		<h3 itemprop="name">Item 2 Title</h3>
		<img itemprop='image' src="bmw2.jpg" alt='Item 2 Description' />
		<span class='description' itemprop="description">
			Item 2 description of the item.  Includes some basic comparison details.
		</span>
		<div class='pricing' itemprop="offers" itemscope itemtype="http://schema.org/Offer">
			<span itemprop="price">$44,550.00</span>
			<link itemprop="availability" href="http://schema.org/InStock"/>
		</div>
	</div>
</div>