Google, Rich Snippets, and Miva Merchant

I bet you’re looking to stand out in the search engines.

Right?

Of course, we all are. Especially e-commerce sites, whose business often is so completely tied to search engine traffic. Although we usually focus on getting our pages ranked higher, it’s also important to make those listings enticing enough that people want to click on them. Traditionally, we’ve only been able to affect changes in the page title and snippet that appears under the link to our website. But a newer technology known as Rich Snippets allows us to potentially include much more information with our page listings in the SERPs.

Rich Snippets Shown in Google SERPs

Rich Snippets Shown in Google SERPs

The results above show two sites (BestBuy and WalMart) with Rich Snippet data in their listings. BestBuy.com includes the average rating, number of reviews, price, and availability. WalMart’s listing shows price and availability, only. Compare that to the next listing down, a site named B&H Photo Video, who has no Rich Snippet data in Google’s listings.

What Are Rich Snippets? The terms applies to one of several forms of markup for small pieces of text called snippets, that provide valuable information about a web property. For e-commerce sites, this means product name, price, manufacturer, UPC, ISBN, review information, and an image. There are several methods for providing rich snippet markup, but Google is recommending that people use the microdata format outlined by schema.org.

How to Set Up Rich Snippets in Miva Merchant

Not too long ago we set up a couple of customers’ sites with Rich Snippets using the schema.org microdata formatting. We did this by logging into Miva Merchant, going to Pages, finding the Product Display page (code “PROD”) and then clicking the Product Display Layout. (See graphic below.) Make sure you’re using the Advanced Mode where you can edit the HTML directly. (If not, scroll to the bottom and click the “Advanced Mode” link.)

Miva Merchant PROD Page Product Details

When setting up Rich Snippets, it’s important to work them into the existing page structure. You can’t simply group them in a div on the page that you hide using CSS, because Google states that they won’t use information in hidden divs. Instead, put the snippet HTML within your current page HTML.

The Product Itself

To start, we put a (non-hidden!) div around the entire contents of the Product Display Layout box, by putting this as the very first line:

and at the bottom simply putting in the corresponding closing tag (</div>). This indicates that the HTML within is being used to describe a product.

The Product Name, Description, and Image

Let’s start with three simple pieces of information – the name of the product, its image, and the product description. Originally we simply had wrapped the name inside of an <h1> tag like this:

In order to specify that the text inside this <h1> tag refers to the name of the product we’re describing, we add an “itemprop” attribute to the tag (short for “item property”), like this:

This tells Google that the text inside this tag is the name of the product. The image works basically the same way; it’s already on the page and just needs the itemprop attribute added to the tag to turn it into the right format for Rich Snippets. So we started with this:

And ended up with:

Finally, we did the same thing – adding the itemprop attribute – to the description:

Became:

Breadcrumbs

Next we tackled the breadcrumbs for the product – the links at the top of a page that show the product’s position within the site hierarchy (such as Home > Apparel > Women’s > Shirts). This is a little more complex because there are multiple pieces of code being changed. Originally the code looked like this:

After adding the code for the Rich Snippets, this section now becomes:

Each entry (“crumb”) in the breadcrumbs needs to be wrapped inside a <span> tag identifying it as a breadcrumb. The opening span tag looks like this:

We also have to add an itemprop attribute with the value “url” to the anchor tag (<a>) and a span with the itemprop of “title” around the link text.

How to Use Hidden Data – The Model Information

Next, we wanted to list the contents of our custom product field with the code “MPN” as the “model” snippet. Unfortunately, the MPN isn’t displayed visually to the customer on the product detail screen. Google says we shouldn’t put the information inside hidden <div> tags. This is where the <meta> tag comes in handy – it’s for providing data via Rich Snippets that we don’t use on the page itself:

Here, we specify a <meta> tag inside our product description, give it an itemprop attribute with the value “model”, and in the content we print out the text stored in our custom product field with the code “MPN”. This tag isn’t displayed at all in the browser, but it provides the necessary information to Google about the model number of the product.

Pricing Information – The Offer

An offer is the overall pricing information regarding the product that you’re selling. We wrapped the entire set of pricing HTML/SMT code within a div that indicates the offer. This <div> tag went around our pricing information that was already in place. The site uses a custom product field to display the product’s regular price if it’s on sale. So the final code for the offer becomes:

On lines 1 and 9, we’ve added the <div> tag that indicates that this is the offer information. Inside both the “if” and “else” clauses where we’re checking for a value in the “regularprice” custom product field, we’ve added itemprop=”price” to show that this is the price. This element can include the currency symbol. We didn’t add anything to the “regular price” display because we don’t want to feed that through to Google as part of our Rich Snippets.

The other two pieces of information we need to provide are the item’s availability and the currency code, which are both parts part of the offer. We use the <meta> tag described earlier to include this information, because it doesn’t normally show on the page itself.

So that’s a brief introduction on how to set up Rich Snippets using Schema.org markup on your Miva Merchant store.

Stay tuned for Part 2 of this post which will go through ratings and reviews for products on an e-commerce site, as well as testing and notifying Google of your changes.

Tags: , , , ,

Comments

6 Comments