12 Effective Guidelines For Breadcrumb Usability and SEO

12 Effective Guidelines For Breadcrumb Usability and SEO
The term “breadcrumb” in web terminology is a metaphor for the way-finding technique employed by Hansel in the Brothers Grimm fairy tale Hansel and Gretel. Although the metaphor is slightly misleading since within a web context, breadcrumbs do not always represent the path from which one has arrived at their current location, the term is clever, catchy and has caught on as the agreed upon name for this type of web navigational aid.


Whilst the breadcrumbs in the tale were not particularly useful, since they were eaten by the birds, breadcrumb navigation is very useful in web sites and software. Additionally, breadcrumbs present an SEO opportunity to make your site more search engine friendly. The objective of this article is to highlight the importance of breadcrumbs whilst providing guidelines for ensuring they are optimized for usability and SEO.

Importance of breadcrumbs for Usability

Web site usability guru Jakob Nielsen stated in 2007 that, not only have breadcrumbs retained their usefulness since 1995 but they are actually becoming more useful as time passes. There are various pro-breadcrumb arguments by Nielsen and other usability experts such as the fact that breadcrumbs:

  • Help users visualize their current location in relation to the rest of the web site.
  • Enable one-click access to higher site levels and thus help users who enter a site through search or deep links
  • Never cause problems in user testing. Although some users may overlook them, those who use them never have problems with doing so.
  • Take up very little space on the page.
  • Reduce the bounce rate. In fact, breadcrumbs can be an excellent way to entice first-time visitors to continue browsing through a web site after having viewed the landing page.
  • Enable users to reach pages and complete tasks faster.
  • Are easily understood by users. This is because of the relatively consistent way they are rendered in web sites and software. This consistency means that people know a breadcrumb trail when they see one, and immediately know how to use it. In the words of Jakob Nielsen, “consistency breeds familiarity and predictability, which breed usability”.
  • 12 Effective Guidelines For Breadcrumb Usability and SEO - Microsoft Windows 7 Breadcrumbs

    Breadcrumbs are also commonly used in software. Microsoft Windows 7's Windows Explorer is one such example.

Importance of breadcrumbs for SEO

Breadcrumbs present an important opportunity to make your site more search engine optimized. This is because breadcrumbs:

  • Enable an excellent and natural way to get keywords on to a page which then helps with Keyword Density.
  • Inform and define to search engines what the pages on the site are about. They achieve this through the internal links within the breadcrumb trail.
  • Are given a lot of importance by Google. A few years ago, Google started incorporating breadcrumb trails into search results. The Google Webmaster Tools help offers guidance on how to assign different properties which you can label using Schemas. Using schemas will make the pages recognizable by Bing, Yahoo! and Yandex. Interestingly enough, last month, Google published a patent on displaying breadcrumb links in search results, which amongst other things indicates that they intend to augment the search experience by displaying breadcrumb trails in results. Whilst the patent seems to indicate that such trails will be displayed even for those sites that do not have breadcrumbs, it states that having a breadcrumb trail will make it easier for the search engine to understand the structure of a site and to include that kind of navigation within search results.
  • 12 Effective Guidelines For Breadcrumb Usability and SEO - Google Patent for Breadcrumb Search

    Mockup accompanying the Google Patent (Source: SEO by the Sea)

Probably the only arguments against the use of breadcrumbs is that they take up space on all pages and users may not see them. With regards to space, breadcrumbs take very little space. As for the possibility of users not seeing them, their added usability and SEO benefits makes it more beneficial to have them rather than not.

Guidelines for Breadcrumb Usability and SEO

Whilst there exist several UI techniques that are used to render breadcrumbs, there are generally-agreed upon usability and SEO guidelines for breadcrumbs. Breadcrumbs should:

  1. Never replace primary navigation. They have been devised as a secondary navigation aid and should always be used as such.
  2. Not be used if all the pages are on the same level. Breadcrumbs are intended to show hierarchy.
  3. Show hierarchy and not history. To go back, users use the browser’s back button. Replicating this facility defies the purpose of having breadcrumbs.
  4. Be located in the top half of your web page. It can be placed above everything on the top of the page, just below the main navigation bar or just above the headline of the current page.
  5. 12 Effective Guidelines For Breadcrumb Usability and SEO - Google

    Breadcrumbs can be nice - Google recently changed its breadcrumb trail to adopt a more visually appealing breadcrumb design. Note that the trail still adheres to the majority of the breadcrumb guidelines listed here.

  6. Not be too large. The breadcrumb trail is a secondary navigation aid and hence its size and prominence should be less than that of the primary navigation.
  7. Progress from the highest level to the lowest, one step at a time.
  8. Start with the homepage and end with the current page.
  9. Have a simple link for each level (except for the current page). If the trail includes non clickable elements such as page titles then include them but clearly differentiate which parts are clickable.
  10. Have a simple, one-character separator between each level (usually “>”).
  11. Not be cluttered with unnecessary text such as “You are here” or “Navigation”.
  12. 12 Effective Guidelines For Breadcrumb Usability and SEO - Eionet Cluttered Breadcrumbs

    Eionet's web site adds unnecessary clutter to its breadcrumb trail by adding the words "You are Here". Also note another bad breadcrumb usability practice - that of cropping the current page title and replacing it with ellipses

  13. Include the full navigational path from the homepage to the current page. Not displaying certain levels will confuse users.
  14. Include the full page title in the breadcrumb trail. Also ensure consistency between the page address and the breadcrumb. If the page titles include keywords, then this will make your breadcrumbs both human and search engine friendly.
  15. 12 Effective Guidelines For Breadcrumb Usability and SEO - Office Depot

    Office Depot offer an excellent implementation of breadcrumbs on their site (although if the links were underlined they would have looked more clickable)

Resources and Inspiration for this Post

  • Brenda

    Do you have any guidelines for using breadcrumbs in web applications as opposed to content rich e-commerce or informational sites? Same or different principles here?

    Thanks,

    Brenda

    • http://usabilitygeek.com Justin

      Hi Brenda,

      The principles explained here are the same. Remember that breadcrumbs are navigation aids. Where I work we do develop web-based applications and we use the same principles.

      Moreover with the way web-based applications look like, they are resembling web sites more than ever. It’s an issue of familiarity more than anything else so web application users will already know how to use breadcrumbs since they are also web users.

      Cheers,

      Justin

      • http://www.ianua.be Gino Lardon

        Hi Justin, Brenda

        Tnx for the fine article.

        In a complex web application we are currently designing, we slightly refined these common guidelines for this project:

        03. Show hierarchy and not history -> For some screens that can be opened from different locations and cannot be reached via the hierarchy, we do show the history since it is important to know from which location the user is coming.

        08. Simple link for each level -> The links are not clickable on pages with forms in edit mode to avoid the users are leaving the form without explicitly submitting or canceling the form.

        10. Not be cluttered -> To improve accessibility, the ‘You are here’ label is available in the HTML but hidden via CSS-positioning.

        Feedback welcome!
        Gino Lardon

  • http://dynamical.biz/blog/ Ani Lopez

    Besides all the nice advice you added to this post for the SEO part of it, what makes Search Engines, Google mostly, show breadcrumbs in SERPs is having URLs properly organized in folders or directories.

    Following your example, something like:
    mylibraries.com/music/led-zeppelin/phisical-graffiti.html
    better than
    mylibraries.com/music-led-zeppelin-phisical-graffiti.html

    • http://usabilitygeek.com Justin

      Hi Ani,

      That is true and I totally agree with your point. Thanks for mentioning it.

      Cheers,

      Justin

  • http://www.technoexam.com/programs Dinesh@VB6 Programs

    Hello, Using breadcrumbs can lead to lose ranking in Google ?

    Without using it we have benefits like when user searches for a query then Google also matches keywords in URL as well i.e. important URL structure that may get disabled due to use of breadcrumbs.. Please reply… Thanks in advance..

  • Pingback: [转载]Can User Experience Be Beautiful? An Analysis Of Navigation In Portfolio Websites | Taylor Zhao

  • mohanj

    I am also planning to use breadcrumb for my blog.Above points cleared my doubts.Thanks for the informative post.

  • Pingback: BlueNovaConsulting.com | The Anatomy of a Perfect Web Page

  • Jacques LaCombe

    If it doesn’t link to anything, then it shows up incorrectly in google.

  • Pingback: Web Design: Is breadcrumbs outdated in website design? - Quora

  • Pingback: Google AdWords? Usability Guidelines For Paid Search Campaigns - Part 1 - Usability Geek