Quick Tip: Setting a Fallback Image

Nothing looks less professional than an ecommerce site full of broken images! However, if you're running a site with a lot of products, it's bound to happen every now and then. Here's how to stop it from happening.

Most ecommerce sites use images to provide a visual representation of their product line. Product images are usually set in one of two ways - either specified in a database field provided by the shopping cart package, or specified in a template by using a file naming convention (for example, /images/PRODUCTCODE.jpg where PRODUCTCODE is replaced with the actual code for each product). Either is a convenient way for specifying product images. However, because the HTML code produced is always dependent on the existance of an image on the filesystem. there is a possibility that your site will display the dreaded "red X" or broken image icons - or in some browsers, such as Firefox, the image's alternate text.

Although it's always best to have images for every single product, it's also a good practice to configure fallback images. These are images that display whenever the specified image in the HTML output cannot be found on the server. We do this by using mod_rewrite rules in our .htaccess file.

A .htaccess file (note the dot in the front) is a method offered by Apache for setting up configuration parameters for the web site. We start by adding the following line to enable mod_rewrite if it does not already exist:

The next set of code looks for any requested files that do not exist, and if the URL has the extension .jpg and resides in the images directory, it is replaced with the image "comingsoon.jpg" located in the images directory. The browser still sees the URL specified in the HTML, but the server delivers the comingsoon.jpg image instead:

Of course, make sure you actually have an image named "comingsoon.jpg" in your /images/ directory!

This method will deliver a fallback image, one that might say "Photo Coming Soon", in place of any missing images. No more broken image links.

If your site uses multiple-sized images, such as thumbnails and full-sized images, you can have multiple copies of this code in your .htaccess file, with the appropriate changes to manipulate files in different directories or with different naming structures. Below is an example from one of our clients, whose site displays 4 sizes of images, with each size residing in a different directory:

Advanced URL Rewriting with Miva Merchant

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:

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:

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:

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:

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:

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

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

"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:

The SMT code looks like this:

And the rewrite rules might look something like this:

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:

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:

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.