Breadcrumbs or breadcrumb trail are a navigation technique that use a single line of text to show current page’s location in the site hierarchy. It is a secondary navigation scheme which increases websites usability and benefits to user-experience. It’s also great for search engine optimization purposes.
The term is taken from the trail of breadcrumbs left by Hansel and Gretel in the popular fairytale -Wikipedia.
Breadcrumbs lets users keep track of many things (from UseIt):
- Breadcrumbs show people their current location relative to higher-level concepts, helping them understand where they are in relation to the rest of the site.
- Breadcrumbs afford one-click access to higher site levels and thus rescue users who parachute into very specific but inappropriate destinations through search or deep links.
- Breadcrumbs never cause problems in user testing: people might overlook this small design element, but they never misinterpret breadcrumb trails or have trouble operating them.
- Breadcrumbs take up very little space on the page.
Example breadcrumb navigation
Creating perfect breadcrumb navigation with users and seo in mind
The typical breadcrumb looks like this:
Home > Internet > Web design > Services
A breadcrumb navigation is perfect for seo as it may contain of keywords most important for your business. Furthermore the breadcrumb navigation consist of hyper links to sub pages of your website thus breadcrumbs are anchor texts located on top of page, on the left-hand side of the website. That is the most prominent position on site and have high meaning for search engines.
Thats why, if used right way, it can benefit your users and your search engine rankings as well. To create a helpful breadcrumb navigation gather the following information:
- create a list of most important keywords for your business and for each sub page of your website
- create your websites navigation scheme (written or drawn) for better understanding of your website
Start with your home page. Do you really want to rank well in search engines for key phrase “Home page” or “Home”? Unless you really do want to rank well for those keywords use other keywords as your highest level breadcrumb. Your company name is a good start (particularly if your company name consist of valuable keywords). You may also use the most important keywords for your business that describes your business type and is general enough not to confuse users. Place that keyword into your breadcrumb navigation without a link to the home page. If you put a link to the home page while being on home page, that link will reload that page and nothing else.
Next, go to second level page of your website. It may be a category page, “about us” page, “contact us” page or any other page that is a level lower than your home page. Think of the most important keywords for this particular page that best describes that page and is not too long key phrase and put it into your breadcrumb navigation with a link and title tag. Also add the link to the home page breadcrumb and title tag.
When you reach a page that is the lowest in the hierarchy and there are no other lower pages than the current one, follow the steps above, but do not place the link to that page. If you do, that link will basically reload the current page and nothing else. You should avoid that kind of situation (the same situation with home page).
Repeat those steps with all pages of your website until you create a complete breadcrumb navigation for all pages of your website. And remember to place the breadcrumbs in the same spot on ALL pages of your website.
REMEMBER: no matter how well you think your breadcrumb navigation is when it comes to search engine optimization, always think about your end-users. Will they be able to understand it? Or will they feel confused with the keywords you use in the navigation? The perfect breadcrumb navigation combines valuable keywords for your business with users usability in mind.
The perfect breadcrumb should:
- be placed horizontally
- be located right under site’s menu navigation
- be placed on left-hand side of a website
- be separated with right arrow (”>”)
- be underlined and with different color than all other text on the website
- progress from the highest level to lowest
- start with the home page and end with current page
- have a text link to each level except for the current page (a link to current page does nothing but reload the page and therefore should not be used)
- contain self-explanatory names for level categories
- contain of keywords most important for website seo rankings
- be consistent through all pages of a website