Schema.org Markup of a SERP / Product Listing

Share Button

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:

Schema.org Logo

W3C CSS Validator

W3C Validator

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>
Share Button

One thought on “Schema.org Markup of a SERP / Product Listing

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>