Nov 02

Firstly I would like to make sure we are all singing from the same page. What is a breadcrumb?

Home > Blog > Post

Breadcrumbs are a navigational trail. It shows users what category or section of your site they are in as well as an easy way to traverse your site.

The usefulness of breadcrumbs can vary. On a small site with 5 pages I would argue that they are not particularly useful. On a site with many sections or areas of information they can be invaluable.

Why are they useful?

From an SEO point of view they can be extremely useful for ensuring that your category areas are listed as well as the actual page. From the point of view of an accessible user with sight difficulties they can give context to your page where images are not available (likewise for users with text-only browsers). Additionally they are often preferred over static menu bars.

The simplest way to implement a breadcrumb system is from the ground up. All sections of your site are within their own directory. For a car sales site this would be similar to the following:

index.html
/carsales/
/carsales/index.html
/carsales/carsforsale.html
/carsales/carssold.html
/servicing/
/servicing/index.html
/servicing/prices.html
/servicing/booking.html

etc etc.

In this example our breadcrumb would look like this if we were on the servicing page:
Home > Servicing
If we then looked at the prices page it would look as follows::
Home > Servicing > Prices
If our user then wanted to navigate from the prices page back to the main serving page they would simply click the “servicing” link between Home and Prices.

Doing this manually can take some time……my next post will be a way of automating this so that the links are created dynamically. For a huge site, automating it can make a big difference. If your site is fairly small you may wish to just manually create the breadcrumb trail. To see an example of breadcrumbs you can view our main site: Hungerford Web Design

Share and Enjoy:
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Technorati
  • BlinkList
  • Live
  • Reddit
  • Slashdot
  • StumbleUpon

Technorati Tags: , , , , , , , , , ,