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

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.)

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:

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

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:

<h1>&mvt:product:name;</h1>

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:

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

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:

<img src="/path/to/image.jpg" alt="&mvte:product:name;" />

And ended up with:

<img itemprop="image" src="/path/to/image.jpg" alt="&mvte:product:name;" />

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

<span>&mvt:product:descrip;</span>

Became:

<span itemprop="description">&mvt:product:descrip;</span>

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:

<div id="breadcrumbs">
	<mvt:foreach iterator="path" array="breadcrumbs:trails">
		<a href="&mvt:global:basedomain;">Home</a>
		<mvt:foreach iterator="atrail" array="path:trail">
			&raquo; <a href="&mvt:global:basedomain;/&mvt:atrail:code;.html">&mvt:atrail:name;</a>
		</mvt:foreach>
		<br />
	</mvt:foreach>
</div>

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

<div id="breadcrumbs">
	<mvt:foreach iterator="path" array="breadcrumbs:trails">
		<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
			<a href="&mvt:global:basedomain;" itemprop="url">
				<span itemprop="title">Home</span>
			</a>
		</span>
		<mvt:foreach iterator="atrail" array="path:trail">
			&raquo;
			<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
				<a href="&mvt:global:basedomain;/&mvt:atrail:code;.html" itemprop="url">
					<span itemprop="title">&mvt:atrail:name;</span>
				</a>
			</span>
		</mvt:foreach>
		<br />
	</mvt:foreach>
</div>

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:

<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">

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:

<meta itemprop="model" content="&mvt:product:customfield_values:customfields:MPN;" />

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:

<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
	<mvt:if expr="l.settings:product:customfield_values:customfields:regularprice GT 0">
		<span id="prodsaleprice">SALE <span itemprop="price">&mvt:product:formatted_price;</span> </span> 
		<span id="prodregprice">reg. $&mvt:product:customfield_values:customfields:regularprice;</span><br />
	<mvt:else>
		<span id="prodpricelabel">Price</span> <span id="prodprice"><span itemprop="price">&mvt:product:formatted_price;</span></span><br />
	</mvt:if>
	<meta itemprop="availability" content="in_stock" />
	<meta itemprop="priceCurrency" content="USD" />
</div>

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.

No MMUI Please!

Miva Merchant ships with a default look-and-feel called MMUI – the Miva Merchant User Interface. It’s there because it HAS to have SOMETHING, right? But it was never meant for public consumption…the developers always assumed people would replace it with an actual design. But many retailers didn’t replace it – either they didn’t have the skills, they were cheap, they were lazy, they didn’t know better, or whatever – but lots of stores used it. And have been since year 19-whatever. Miva Merchant has since released a built-in CSS skin that is better, but still very basic, and yet this MMUI (see image, right, under the big red X) is still around on the web. You’ve probably seen it and groaned.

So I wanted to take this chance and showcase a bit of what CAN be done with Miva Merchant. Although I’d been planning this for a couple of weeks, in a timely coincidence, Chuck over at Merchant Tutorials posted about common Miva Merchant myths and the very first one is that the cart is limited in it’s look and feel. Let’s debunk that right now.

1. Green Tree Coffee & Tea

Green Tree Coffee & Tea

2. smallfri.com Birth Announcements

smallfri.com Birth Announcements

3. DJ Shadow

DJ Shadow

4. California Caviar

California Caviar

5. Mad Cat Toys

Mad Cat Toys

6. Bee Global

Bee Global Candle Studio

7. Mezzetta

Mezzetta Mediterranean Food

8. Rusty’s Off-Road Products

Rusty's Off Road Products

9. Arcadia Publishing

Arcadia Publishing

10. Michael’s Finer Meats and Seafoods

Michael's Finer Meats and Seafoods

One small caveat just for the sake of transparency: Mad Cat Toys is out of our clients at NetBlazon. But the design is completely the work of the owner, Dale Carlson of Propaganza…we just did the backend programming. So I’m not sneaking in a self-backpat or anything. Also, thanks to Scott from Sebenza for pointing us in the direction of Michael’s Meats, a site I hadn’t seen before.

Got any other examples of truly beautifully-designed Miva Merchant websites? Post them in the comments below!

Many Miva Merchant users are familiar with Chuck Lasker and the various ways he’s been involved in the Miva community over the past several years. We caught up with him at the 2009 Miva Merchant conference to ask him ten questions about his new endeavor, MerchantTutorials.com. Find out how he got started with Miva Merchant, what MerchantTutorials.com is all about, and how you can subscribe to the service to learn how to do more things with your online store.

Because we do a lot of redesigns and offline development, our customers usually have at least two stores operational at one time – the live store and a development platform. Sometimes that makes it hard to test, though, if links from the development site link back to the live site half of the time. You don’t always notice when you navigate away from the development site.

The sessionurl and secure_sessionurl variables in Miva Merchant will automatically pick up the right domain. But any hardcoded URLs, if they are using absolute paths (and in most cases, they should) will not be as easy to manage. And if you use shortened SEO-friendly urls, you may have even more widespread URLs to manage.

Here’s an easy tip for Miva Merchant users who have more than one environment: set a variable in your store that references your domain name, and then build your URLs around that. This is easy if you use the Toolkit module from Emporium Plus. Go into Miva Merchant, click the name of your store within the left frame, and then on the right side, click HTML Profile. The great thing about this field is that it’s usually the first field referenced by the store’s page templates. (If your site doesn’t use the HTML profile, or if you are running Miva Merchant 5.0 instead of 5.5, use the head tag insert field.)

At the bottom of this box, enter the following code:

<mvt:item name="toolkit" param="sassign|basedomain|http://www.yoursite.com" />
<mvt:item name="toolkit" param="sassign|secure_basedomain|https://www.yoursite.com" />

Then to change the variables for a particular environment, you just have two variables to change. Still too much work? You can use the toolkit to extract the url from your domain settlings instead:

<mvt:item name="toolkit" param="gettoken|g.domain:MM_URL,/,3|mydomain" />
<mvt:item name="toolkit" param="sassign|httpprotocol|http://" />
<mvt:item name="toolkit" param="sassign|httpsprotocol|https://" />
<mvt:item name="toolkit" param="concat|basedomain|httpprotocol|mydomain" />
<mvt:item name="toolkit" param="concat|secure_basedomain|httpsprotocol|mydomain" />

After that, you can build your URLs using this “basedomain” global variable, and when you copy code from one site to the other, the links should still work. Here’s an example link to the shopping cart page:

<a href="&mvt:global:basedomain;/mm5/merchant.mvc?Screen=BASK">View Your Cart</a>

This little bit of work can make your life much simpler down the road!

The great thing about having a blog for your business is that it gives customers and search engines new content to view. It can increase sales by convincing customers of your product’s benefits, or teaching them how to use it, or giving them ideas for incorporating the product into the lives.

But it’s essential to integrate the weblog with your storefront. If customers can’t go back-and-forth between your store and your weblog, the impact of your blog is going to be less than optimal. If you are using Miva Merchant 5 and WordPress, however, one of the simplest ways to integrate the two is to include recent blog posts right on your homepage.

To start out, you need a template that can display a very simple HTML page – one that, in this example, is no more than the title of each post, linked to the full post itself. This can be done by modifying the index.php file within your WordPress template (located in wp-content/themes/your-theme-name). Just add this code at the top of your index.php file:

<?php if ($_REQUEST['pull'] == 1) : ?>

<?php if (have_posts()) : ?>
<?php while (have_posts() && $ctr < 3) : the_post(); ?>
<a href="<?php the_permalink() ?>"><?php the_title(); ?></a><br /><br />
<?php $ctr=$ctr+1; ?>
<?php endwhile; ?>
<?php endif; ?>

<?php else : ?>

The rest of your original index.php should follow this code. Then at the very bottom, close your “if” statement like this:

<?php endif; ?>

At this point, you should be able to see your recent posts by going to the following URL. Be sure to replace “domain.com” with your website domain name, and replace “weblog” with the correct directory for your WordPress installation:

http://www.domain.com/weblog/?pull=1

At this point, you’re ready to begin working in Miva Merchant. You’ll need Emporium Plus’s Toolkit module installed. Then, inside Miva Merchant, go to Pages and edit your Storefront (SFNT) page or your Storefront Welcome Message (under Messages). Add the following code (again, replacing the appropriate parts of the URL as specific to your site):

<mvt:item name="toolkit" param="callurl|weblog|http://www.domain.com/weblog/?pull=1|POST|nhour,nminute,nsecond" />
&mvt:global:weblog;

This will print out the list of recent posts from your weblog right on your Miva Merchant storefront.

For web development purists, the holy grail of coding an ecommerce site using an off-the-shelf package is the ability to write a fully standards-compliant site. The upcoming Miva Merchant 5.5 release brings this desire into full reality for Miva Merchant developers. Version 5.5 offers a completely-open page templating system, where all aspects of the site are fully customizable at the HTML and CSS code level.

Historically it was much more difficult to code a Miva Merchant site with XHTML and CSS. We pioneered the effort, using a variety of add-on modules such as OpenUI and OpenUI Supermod templates to provide access to the code around the page elements. But the method also involved a couple of hacks of the core Miva Merchant files, to add a doctype declaration and to change the <HTML> tags from upper-case to lower-case. OpenUI Supermod templates were slow, so we often added Merchant Optimizer to speed up the site. It worked well, but building a site in this manner was akin to applying band-aid upon band-aid to force a system, never intended to allow standards-compliant code, to produce the desired effect.

The release of Miva Merchant 5.0 provided a huge step forward. With the addition of pages that can be templatized nearly from start to finish using Miva Merchant’s Store Morph Technology, developers now had the ability to code almost the entire site according to modern standards for markup and layout. A few third-party modules were still needed, to gain access to “black box” code areas such as the category tree. But Miva Merchant 5.0 was already much faster, thanks to the ability to run the shopping cart on a MySQL database (instead of the older DBF files). And with native templating support, which renders quickly due to its compiled nature, several layers of complexity (and those “band-aids”) were removed.

Miva Merchant 5.5 brings this all into fruition, as developers can now access all of the code that builds the site. To get started, the first thing to do is to make sure every page in the site conforms to the proper doctype. I prefer XHTML 1.0 Strict, though we’ve sometimes used Transitional for various reasons. A doctype paves the way for CSS positioning by bringing Internet Explorer out of quirks mode, allowing the site to look very similar in all modern browsers, when designed properly.

Next, all the tables should be removed from the pages, except when used to display actual tabular data. XHTML and CSS websites rely on CSS positioning to define their layouts, instead of putting images and content within the cells of HTML tables. Typically the only table we use on a CSS-based Miva Merchant site is the layout of the basket contents, since that is tabular data by nature. Instead of using tables, content is placed within other elements according to the nature of the content – <div> tags for block-level elements; <span> tags for inline content, <p> tags for paragraphs, etc. Elements can be assigned a class or an id so that they can be styled via the CSS stylesheet.

Larger Miva Merchant sites often need to consider the fact that the site may also include other packages or custom-coded sections that reside outside of the Miva Merchant framework. To reduce the load on the filesystem and to keep the assets organized – as well as to make it easy to switch between one client and another – we try to standardize the location of the site’s assets. For example, all site-wide graphic files are stored in a /images/ path, just off the document root, and not within the /mm5/ directory tree created by Miva Merchant. (This /images/ folder may be further subdivided into subfolders such as /images/buttons/ as needed.) JavaScript code is placed in external .js files located in a /js/ directory. And the stylesheet(s) are stored in /style/, with the main site stylesheet being named style.css. Additional CSS files may be added for popup windows, printing a page, or page-specific elements, but are almost always stored in the same directory.

Once the CSS file has been created, it can be linked into Miva Merchant by adding a <style> tag into the head section of the site. This can be done on each individual page, but for a site-wide stylesheet, the easiest way to manage it is to add the style tag into the HEAD Tag Content found in the Miva Merchant administration by clicking the name of the store on the left side. The tag looks like this:

Probably the most difficult part of building a Miva Merchant website using XHTML and CSS is the addition of features from third-party modules that don’t support XHTML and/or CSS. This can be hard to ascertain while shopping for modules, so one often has to ask the developer whether it can be done. If not, certain sections of the site may simply not conform to the standards in use, which occasionally causes rendering problems in some browsers, but often has no effect other than generating errors when validating a site against the doctype. However, some developers are now starting to see the benefit in allowing this, and offer more granular components that allow developers to include the data within their own HTML – for example, by providing the price breaks in a volume pricing module in an array, for display in any manner desired.

The benefits of using XHTML and CSS, and moving away from using tables for layout, is reduced code bloat and, arguably, better on-site optimization for SEO purposes. It also allows site changes to be applied to the site globally, by updating the stylesheet – one file – instead of hundreds of table and font tags across multiple pages. Although the transition to CSS-based design involves a sizeable learning curve, it’s one well worth the effort.

URL Rewriting is a way of changing the URLs within a website to a more logical and/or more search engine-friendly format. The default URLs within a Miva Merchant site are long and full of querystring variables, and can easily be rewritten to cleaner formats, as described below. To find out if this is available for your website, check with your web host.

History

URL Rewriting first became popular among Miva Merchant sites when Copernicus released their Search Friendly Links module, long before the advent of Miva Merchant 5.0. At the time, Google favored URL structures that had, at most, a single name-value pair in the querystring. To understand this, one must look at the structure of a URL. A URL begins with either http:// or https://, followed by the domain name (such as www.google.com). After that comes another slash, zero or more directories separated by slashes, and a filename. For example:

http://www.site.com/mm5/merchant.mvc

In this example, www.site.com is the domain name, mm5 is a directory, and merchant.mvc is the name of the file within the mm5 directory that is being called. A querystring is appended to the URL by adding a question mark, and then one or more name-value pairs separated by ampersands. This can be seen throughout Miva Merchant, such as the URLs that define a product page:

http://www.site.com/mm5/merchant.mvc?Screen=PROD&Product_Code=ABC123&Category_Code=flowers

In the above example, the querystring contains three name-value pairs: Screen=PROD, Product_Code=ABC123, and Category_Code=flowers. At the time that the Search Friendly Links module was released, since Google was devaluing links with more than one name-value pair, this type of URL clearly did a disservice to Miva Merchant site owners. Search Friendly Links changed the above URL to a directory structure:

http://www.site.com/page/PROD/ABC123/flowers/

Mod_rewrite

The mechanism that allows this to work is built into Apache, the webserver commonly used on *nix servers, and is called mod_rewrite. To turn on mod_rewrite for your site, you need to edit (or add) the .htaccess file in your root directory. Note that on *nix servers, files that begin with a period (“dot files”) are hidden by default, so you may need to set your FTP client to show hidden files or dot files in order to see the .htaccess file in the list. Within the .htaccess file, add this command above any rewrite rules:

RewriteEngine On

This command turns on the rewriting engine. Specific rewrite rules can be added based on the format chosen below.

“Supershort” or “Jedi-style” Links

Although Search Friendly Links is no longer needed with Miva Merchant 5.0 and above, mod_rewrite can still be used to generate shorter URLs that offer an advantage among the search engines, and offer the customer a more logical set of URLs for the website.

One common URL format is to add a “c-” to designate category page URLs, and a “p-” to distinguish product page URLs. Using our example above, these URLs would become:

http://www.site.com/c-flowers.html
http://www.site.com/p-ABC123.html

The URLs within the pages inside of Miva Merchant 5 can be changed to this format in the following manner:

http://www.site.com/c-&mvt:category:code.html
http://www.site.com/p-&mvt:product:code.html

And to allow these URLs to work, the following Rewrite Rules should be added to the .htaccess file below the “RewriteEngine On” line:

RewriteRule ^c-([^.]+).*$ /mm5/merchant.mvc?Screen=CTGY&Category_Code=$1&%{QUERY_STRING} [T=application/x-httpd-mv,L]
RewriteRule ^p-([^.]+).*$ /mm5/merchant.mvc?Screen=PROD&Product_Code=$1&%{QUERY_STRING} [T=application/x-httpd-mv,L]

“Store” directory – Miva Merchant within a larger site

Sites that include a Miva Merchant store within a larger framework of pages or applications might want all shopping cart pages to appear in the /store/ directory, for example. Using this in combination with the “supershort” link format above produces:

http://www.site.com/store/c-flowers.html
http://www.site.com/store/p-ABC123.html

The SMT code looks like this:

http://www.site.com/store/c-&mvt:category:code.html
http://www.site.com/store/p-&mvt:product:code.html

And the rewrite rules might look something like this:

RewriteCond %{QUERY_STRING} Screen=CTGY [NC]
RewriteCond %{QUERY_STRING} Category_Code=(.*)& [NC]
RewriteRule ^(.*) http://www.site.com/store/%1.html? [R=301,L]

RewriteCond %{QUERY_STRING} Screen=CTGY [NC]
RewriteCond %{QUERY_STRING} Category_Code=(.*)$ [NC]
RewriteRule ^(.*) http://www.site.com/store/%1.html? [R=301,L]

RewriteCond %{QUERY_STRING} Screen=PROD [NC]
RewriteCond %{QUERY_STRING} Product_Code=(.*)& [NC]
RewriteRule ^(.*) http://www.site.com/store/%1.html? [R=301,L]

RewriteCond %{QUERY_STRING} Screen=PROD [NC]
RewriteCond %{QUERY_STRING} Product_Code=(.*)$ [NC]
RewriteRule ^(.*) http://www.site.com/store/%1.html? [R=301,L]

Smart Links – The Shortest Possible Links

By adding the Smart Links for SEO™ module, it is also possible to create even shorter links. This module takes the string after the domain name, and looks within the Miva Merchant database to determine whether the string represents a category code, a product code, or a page code. (Note that when using this module, a store should NOT have product codes, category codes, and screen codes that overlap each other; they should all be unique.) This module allows a store to display these type of URLs:

http://www.site.com/flowers.html
http://www.site.com/ABC123.html
http://www.site.com/aboutus.html

In the first URL, “flowers” refers to a category code. In the second one, “ABC123″ refers to a product, and in the final URL, “aboutus” is the code for a custom page. The rewrite rule for this format is simple, as it redirects the user to a single URL controlled by the Smart Links for SEO module. The rule looks like this:

RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^([^.]+)\.html$ /mm5/merchant.mvc?Screen=NBSEOLINK&thecode=$1 [L]

Summary

No matter which rewriting method you choose, be consistent with your URLs. Google in particular frowns on duplicate content, and although they are great at determining canonical URLs (the primary URL to reach a given page), you don’t want to take any chances. And just in case, it might be a good idea to block robots from your /mm5/ directory using your robots.txt file. Do your planning up front, so you don’t have to change your URL format down the road (which might cause your search engine rankings to drop). Figure out how you intend to optimize your URLs, formulate a plan, and stick with it, for ultimate success.