Schema.org microdata & rich snippets… two topics that keep coming up in news feeds I subscribe to.  If you’re unfamiliar with microdata then you can read more about it at Google or Schema.org. As described by Google: “.. a new initiative from Google, Bing and Yahoo! to create and support a common set of schemas for structured data markup on web pages. Schema.org aims to be a one stop resource for webmasters looking to add markup to their pages to help search engines better understand their websites.”

Basically, microdata uses simple tags which help Google, Bing and Yahoo read your pages, understand the content on your pages, and in turn deliver better search results and rich snippets.

The other day I thought I would dive in and implement Schema.org microdata on my eCommerce site. Many blogs I’ve read mention how people are hesitant to implement these tags because of the potential amount of work involved. Thankfully since my eCommerce site runs off Miva Merchant these changes are fairly easy to make. All of the tags are placed in the PROD (Product Display) page templates. Some on the Page template and some on the Product Display Layout template.

Before I go any further on how to add the Schema.org microdata to a Miva Merchant product page, I’d like to give a disclaimer. I’ve just implemented these tags on my site. While everything appears to be working correctly, I can’t say for sure that everything was done exactly right. Make these additions to your site at your own risk. Microtags are suppose to be helpful to search engines, but I can’t say how it will effect your search results, rich snippets or rankings in the search engines. With that said, read on if you want to add the tags to your Miva product page templates.

Since almost every Miva Merchant site that I’ve personally looked at it slightly different, the placement of these tags will be different. I’m only going to provide general directions and locations for tags. You’ll have to read through your template code and find the exact place to put everything. Place the code, test the page to make sure it renders correctly and then use Google’s Rich Snippet tool to see if everything is getting picked up correctly.

ItemScope:

To start with, you have to surround your product area with this tag:

<div itemscope itemtype=”http://schema.org/Product”></div>

This tells the search engines that the item is a product. This code will go on your PROD, Page template. The first part <div itemscope itemtype=”http://schema.org/Product”> will be placed right before your product display tag <mvt:item name=”product_display” />

The closing </div> need to be placed at the bottom of the PROD, Page template. I placed mine right above the footer code.

Most of, if not all of the remaining microdata will be placed on the Product Display Layout template, which all falls in-between the code above. The code above is like the container for the rest of the microdata (see properties of the Product) .

Product description:

Your description section could be on your Page template or your Product Display Layout template. Find yours and wrap the description section with this:

<span itemprop=”description”></span>

Product Image (URL):

The product image URL is where I had some trouble. My site is running the latest Miva Merchant version, PR8 update 3 at the time I wrote this article. I was using the product image machine code, which had this code:

<img id=”productFull” src=”graphics/en-US/mmui/dot.gif” alt=”&mvt:product:name;” title=”&mvt:product:name;”>

Typically you would add the microdata tag (itemprop=”image”) like this:

<img id=”productFull” itemprop=”image” src=”graphics/en-US/mmui/dot.gif” alt=”&mvt:product:name;” title=”&mvt:product:name;”>

However, this won’t work because of the dot.gif that the code contains. After looking around, I found this post at the Miva forums. The post discusses replacing a PR8 blank.gif with the legacy code. I did this and it appears to work correctly… meaning the Rich snippet tool is pulling in the product image.

My img code is now the following:

<img id=”productFull” itemprop=”image” src=”http://&mvt:global:domain:name;/mm5/&mvt:product:image;” alt=”&mvt:product:name;” title=”&mvt:product:name;”>

If anyone sees why this change would cause a problem, please let me know.

Now, move over to your Product Display Layout template.

Along with each itemtype=Product (above), each product has to have an Offer. This tag will contain the “Offer” information about the product… (see properties of the Offer).

In your template find where the properties of the offer reside (price, availability, etc), and wrap it with this tag:

<div itemprop=”offers” itemscope itemtype=”http://schema.org/Offer”></div>

The rest of these tags don’t all have to be used. It’s beneficial to use as many as possible, but you have to decide what you want to add. Some you won’t be able to add because the information may not even be shown on your product pages.

Product name:

<span itemprop=”name”></span>

My site has a heading 1 tag wrapped around the product name, so the microdata tags looks like this:

<span itemprop=”name”><h1>&mvt:product:name;</h1></span>

Product price:

<span itemprop=”price”></span>

Find your price section and wrap it with the tag above. Mine looks like this:

<span itemprop=”price”><span id=”price-value”>&mvt:product:formatted_price;</span></span>

Product availability:

<span itemprop=”availability”>In Stock</span>

Product brand:

<span itemprop=”brand”>YOUR BRAND NAME</span>

Product manufacturer:

<span itemprop=”manufacturer”>MANUFACTURER NAME</span>

Product ID:

<span itemprop=”productID”>PRODUCT ID</span>

The tags above (as shown with the product name and product price) can be filled in automatically if your product page shows the information such as availability, brand name, manufacturer, product ID, etc. My site doesn’t show some of this information, but all you need to do is find the correct miva tag which pulls in the information and place it in the appropriate <span> microtag above.

For sites like mine which don’t show certain visible information, Google allows a few machine readable values for product pages. These available values are category, priceValidUntil, currency, price, identifier, condition.

I used four of these values which do not show visibly on my product pages.

<meta itemprop=”currency” content=”USD” />
<meta itemprop=”condition” content=”New” />
<meta itemprop=”identifier” content=”&mvt:product:code;” />
<meta itemprop=”category” content=”YOUR CATEGORY” />

For the category, I selected the category from Google’s product category taxonomy.

I placed these machine readable tags within my Offers container (explained above).

The Schema.org microtags above are only a portion of the tags available. You may want to add more (reviews, ratings, etc.) or less of what I have shown. If you want to add other microtags, you can read the documentation for them at Schema.org.