Thursday, August 6, 2009

How to Use Simple Breadcrumb

Breadcrumbs are a nice little addition to a website that largely goes ignored but can be a significant help to those that like to use them. They make both usability and navigation easier. The primary purpose of breadcrumbs is to provide a visual indicator to your visitor where they are in the site and give them an easy link "back" to higher up categories.

Home >> Battery Chargers >> 12 Volt >> Solar

The breadcrumb above tells the visitor they are looking at 12 volt solar battery chargers. If the visitor wants to look at all 12 volt battery chargers she can click the "12 Volt" link in the breadcrumb trail to take her there. If she wants to see 24 volt, or 36 volt, or even all the battery chargers offered, she can click the "Battery Chargers" link in the breadcrumb trail and navigate from there.

Simple enough. Now let's talk about implementation.

I've seen enough content and product management systems to know that very few systems create breadcrumb trails properly. I'm working with some sites now that have it all wrong.

On one site the breadcrumbs are an exact duplicate of the Title tag. On another the breadcrumb is an exact duplicate of the page heading. It looked something like this:

Home >> Battery Chargers for Motorcycles, ATVs and Jet Ski's >> Durable 12 Volt Battery Chargers for all Makes and Models >> Solar Battery Chargers | Recharge Your Battery Using the Power of the Sun

This makes for a very long and convoluted breadcrumb trail and IMO is extremely poor implementation of a breadcrumb trail. The purpose of the page title (title tag) or the page heading (hx tag) are completely different than the purpose of the breadcrumb trail.

The Title tag is typically needed to provide a compelling reason to click into the site from the search results. The page heading is a quick, compelling overview of the page. Actually, in some instances it makes sense for the title tag and heading tag to duplicate each other. However it rarely, if ever, makes the same sense with the breadcrumb.

The breadcrumb is, for all intents and purposes, navigation. Its a visual indicator of where the visitor is and a quick link back to higher level categories. If the breadcrumb trail is going to be a duplicate of anything, it should be a duplicate of your navigation links.

This makes the most sense. If a visitor clicks on the "Battery Charger" link in the main navigation, then follows that by clicking on "12 Volt", then narrows even further by clicking "Solar", it makes logical sense that the breadcrumb trail mimics this precisely. This creates a much more succinct and organized breadcrumb trail that is readily recognizable to the visitor.

Home >> Battery Chargers >> 12 Volt >> Solar

For usability purposes, I would avoid trying to "SEO" the breadcrumbs. Use your titles and headings for this and let the breadcrumbs serve their purpose for usability unhindered by additional keyword bloat that is typically done for SEO purposes. If your navigation is built correctly, SEOing the breadcrumbs won't be an issue as it will have already been correctly implemented into the navigation.

No comments:

Post a Comment