Breadcrumbs to Help With User Navigation

As your web site begins to grow, you may find you start dividing it in to “sections”, and as it grows further, those sections may expand further in to “sections” of their own.

There is nothing wrong with this at all, but as a site gets bigger, the ability for the user to know where they are within your site becomes trickier.

Granted, not all users will care where they are, but others will find such information useful to them.

This is something that a “breadcrumb” can help your users with.

A breadcrumb (sometimes called the breadcrumb trail) is a popular form of secondary navigation on web sites that enable an easier understanding for the site visitor to see where they are within your web site. For example, a “location-based breadcrumb” might look like this:

Home > Section > web page

Home > Section > Sub-section > web page

… which hopefully will seem familiar to you, having seen it used elsewhere on many a web site.

It allows a webmaster to break down the sections of the site into a manageable chunk of information for the user, and present that information to the site visitor in a familiar fashion.

By providing a breadcrumb trail to show your visitors how the site hierarchy is structured, they can find their way further up the ladder for more information.

As sites get bigger, they can become more of a challenge to use. Visitors may navigate to a page that’s quite deep within your web site hierarchy, but then find they’re not quite sure how it relates to your web site.

A breadcrumb trail can indicate to the user which section of the web site they are in, and more importantly allow them to navigate back up through your site to find other parts of your web site that they might be interested in.

If you have a review site, for example, you might have sections for “Videos”, “Games”, “Music”, “TV”, “Films”, etc, and within each of those sections you might have albums, series, box sets, etc, and if a user were to find one your of pages from a search engine, rather than just appearing on a page for a particular album, you can show them you have a section for the artist, and that they are currently browsing within that section, and possibly increase that visitors interest and use of your site.

Often a breadcrumb is included near the top of the page, usually under the main heading or sub heading of a page. It’ll often be smaller in size, but not so small that it isn’t usable.

Most breadcrumbs begin with the common “Home” link, the starting point of the web site. After this, the main section of the web site would be listed, and then subsequent lower level sections will be shown.

Typical breadcrumbs take the form of the name of each segment of the breadcrumb, followed by a visual separator, such as the greater than sigh (>), or a colon, such as shown in the three examples blow:

Home > Music > Marina and the Diamonds > Electra Heart

Home : Music : Marina and the Diamonds : Electra Heart

Home >> Music >> Marina and the Diamonds >> Electra Heart

The breadcrumb “Home” would represent and link back to the home page of your site, while the “Music” breadcrumb would represent and link to your main music section page, that might lists many artists, most popular, up and coming releases, etc.

The artist “Marina and the Diamonds” would represent and link to the artist page, that may include links to other albums, tour date, etc while “Electra Heart” would represent the current page about the album, which might contain a review, sample tracks photos, release date, price, etc.

By making the upper levels of the breadcrumb links, the visitor to your site can not only see where they are within your site, but a single click can take them to more useful information that you offer.

A breadcrumb doesn’t use any special HTML, they can be written out like any other text on your pages, such as:

<p id="breadcrumb">
<a href="http://example.com">Home</a> >
<a href="http://example.com/music">Music</a> >
<a href="http://example.com/music/marina-and-the-diamonds">Marina and the Diamonds</a> >
<strong>Electra Heart</strong>
</p>

That single line of links and separators can represents a handy little navigational tool to your users, and it’s one that is relatively simple to include.

As with most things, methods and designs are updated and altered, and the breadcrumb design is no different. For example, rather than using a simple great than sign (>), sites sometimes choose to use different colours , fonts or images to create the visual separation of each breadcrumb.

For example, the articles under Freeola’s Support Pages use a breadcrumb trail that highlights the home page of Freeola Support with a dark background and a picture of a house, followed by the section in which the article resides with a lighter background colour and a picture of a folder:

And there you have it, a simple method of secondary navigation to assist your web visitors in navigating around your web site, although it doesn’t have to stop at your web site.

When your web pages are listed in Google, usually your web address is included in the search result snippet. However, at time Google may choose to instead replace the link with your site breadcrumbs, if you have any. These can look more appealing to search engine users, and provide a little more information as to what you offer on your site.

Google may also make these breadcrumbs into hyperlinks, based on the link data it finds on your web pages.

For example, if you look at the below example of a search engine result for an “iPod” search, the Tesco listing doesn’t show a web address, but instead shows the breadcrumbs that lead to the iPod page:

If you click the actual result page, you’ll see the breadcrumb listed on the iPod Tesco page:

However, if you click on the breadcrumb “Technology & Gaming” or “iPod & MP3 Players”, you get taken to those sections of the site. Thus, you can get three links in a single search result.

If you were to search for “Electra Heart”, you will see that the Amazon result also lists breadcrumbs that link to different sections of Amazon’s Web site:

Google can be quite good at detecting where and how your breadcrumbs are set out, but not always. To help you tell Google about your breadcrumbs, Google allow you to include some additional mark-up in your HTML to let the Googlebot know exactly where your breadcrumbs are leading.

Marking out your breadcrumbs might seem a little bit daunting, so don’t feel that it is necessary. Breadcrumbs are more for your users, not search engines, but if you feel confident with HTML, and want Google to show your breadcrumbs exist, you’ll need to mark them out.

Using the “Marina and the Diamonds” example, you might have that type of breadcrumb marked out like this:

<p id="breadcrumb">
<a href="http://example.com">Home</a> >
<a href="http://example.com/music">Music</a> >
<a href="http://example.com/music/marina-and-the-diamonds">Marina and the Diamonds</a> >
<strong>Electra Heart</strong>
</p>

Each breadcrumb is linked to the section it represents, with the last one (the album page) being unlinked by bolded. Or, you might be using a list, marked out like so:

<ol id="breadcrumb">
<li><a href="http://example.com">Home</a></li>
<li><a href="http://example.com/music">Music</a></li>
<li><a href="http://example.com/music/marina-and-the-diamonds">Marina and the Diamonds</a></li>
<li><strong>Electra Heart</strong></li> 
</ol>

… or perhaps a different way again, it doesn’t matter. What matters is being able to surround the right breadcrumb with the correct mark-up.

Google accepts two methods for marking up a breadcrumb, using either “microdata” or “RDFa”. Both result in Google being able to see your breadcrumbs clearly, so whichever you choose is up to you. In this example, we’ll go for “RDFa”.

First, you need to tell Google you’re marking out a section for a breadcrumb, and you can do that by adding “xmlns:v="http://rdf.data-vocabulary.org/#"” to your <p> element, like so:

<p id="breadcrumb" xmlns:v="http://rdf.data-vocabulary.org/#">
<a href="http://example.com">Home</a> >
<a href="http://example.com/music">Music</a> >
<a href="http://example.com/music/marina-and-the-diamonds">Marina and the Diamonds</a> >
<strong>Electra Heart</strong>
</p>

… or, if using a list, something like this would also work:

<ol id="breadcrumb" xmlns:v="http://rdf.data-vocabulary.org/#">
<li><a href="http://example.com">Home</a></li>
<li><a href="http://example.com/music">Music</a></li>
<li><a href="http://example.com/music/marina-and-the-diamonds">Marina and the Diamonds</a></li>
<li><strong>Electra Heart</strong></li> 
</ol>

Next, you’ll need to mark out your breadcrumbs, using the “typeof="v:Breadcrumb"” attribute. This needs to be placed around each breadcrumb, outside of the hyperlink. If you’re using the list method, you can place “typeof="v:Breadcrumb"” within each <li> element, like so:

<ol id="breadcrumb" xmlns:v="http://rdf.data-vocabulary.org/#">
<li typeof="v:Breadcrumb"><a href="http://example.com">Home</a></li>
<li typeof="v:Breadcrumb"><a href="http://example.com/music">Music</a></li>
<li typeof="v:Breadcrumb"><a href="http://example.com/music/marina-and-the-diamonds">Marina and the Diamonds</a></li>
<li><strong>Electra Heart</strong></li> 
</ol>

If you’re using the first method, you’ll need to surround each breadcrumb with another element, such as the <span> element, and include the attribute within that, like so:

<p id="breadcrumb" xmlns:v="http://rdf.data-vocabulary.org/#">
<span typeof="v:Breadcrumb"><a href="http://example.com">Home</a></span> >
<span typeof="v:Breadcrumb"><a href="http://example.com/music">Music</a></span> >
<span typeof="v:Breadcrumb"><a href="http://example.com/music/marina-and-the-diamonds">Marina and the Diamonds</a></span> >
<strong>Electra Heart</strong>
</p>

And finally, you’ll need to include the two attributes “rel="v:url" property="v:title"” in the <a> hyperlink element, such as:

<p id="breadcrumb" xmlns:v="http://rdf.data-vocabulary.org/#">
<span typeof="v:Breadcrumb"><a rel="v:url" property="v:title" href="http://example.com">Home</a></span> >
<span typeof="v:Breadcrumb"><a rel="v:url" property="v:title" href="http://example.com/music">Music</a></span> >
<span typeof="v:Breadcrumb"><a rel="v:url" property="v:title" href="http://example.com/music/marina-and-the-diamonds">Marina and the Diamonds</a></span> >
<strong>Electra Heart</strong>
</p>

… or …

<ol id="breadcrumb" xmlns:v="http://rdf.data-vocabulary.org/#">
<li typeof="v:Breadcrumb"><a rel="v:url" property="v:title" href="http://example.com">Home</a></li>
<li typeof="v:Breadcrumb"><a rel="v:url" property="v:title" href="http://example.com/music">Music</a></li>
<li typeof="v:Breadcrumb"><a rel="v:url" property="v:title" href="http://example.com/music/marina-and-the-diamonds">Marina and the Diamonds</a></li>
<li><strong>Electra Heart</strong></li> 
</ol>

Having breadcrumbs for your users can be handy when your site is large. Having them marked out for Google is optional, but it can make your listing seem a little more polished, and possibly become more visible to search engines users.