Breadcrumbs can be traced back for decades as a staple in web designs on websites large and small. Over the years, their importance have grown from a neat little feature, to a mandatory feature users not only appreciate, but expect.

Before we go any further, let’s define what exactly is a breadcrumb in web design. Breadcrumbs are contextual and navigational links usually placed at the top of the website, normally below the main menu but above the main content section.  Here is a closeup illustration we’ve made to illustrate what breadcrumbs look like:

On a larger scale, this is where breadcrumbs are usually placed within a page, in this case a blog post:

First and foremost, a breadcrumb is a navigational tool. In fact many users use the breadcrumb as a primary means to navigate within a website once they have their bearings, even though most websites don’t intend for it to be a primary navigation tool.

Breadcrumbs are particularly useful in these types of sites:

  • eCommerce and shopping websites
  • large blogs
  • knowledge bases
  • complex sites
  • sites with lots of categories
  • sites with lots of inner pages
  • web applications

Dropbox uses Breadcrumbs to show users where they are within the file system. This is helpful for our own in-house content team so we can organize our blog content for our clients.

 

Breadcrumbs in web design today

Breadcrumbs are a staple in modern day web design frameworks. Bootstrap, Foundation, and many others. They’ve made it super easy for front end designers to implement with a few keystrokes.

Bootstrap was kind enough to include it as part of their core framework and documentation:

<ol class="breadcrumb">
  <li class="breadcrumb-item active">Home</li>
</ol>
<ol class="breadcrumb">
  <li class="breadcrumb-item"><a href="#">Home</a></li>
  <li class="breadcrumb-item active">Library</li>
</ol>
<ol class="breadcrumb">
  <li class="breadcrumb-item"><a href="#">Home</a></li>
  <li class="breadcrumb-item"><a href="#">Library</a></li>
  <li class="breadcrumb-item active">Data</li>
</ol>

In 2009 Smashing Magazine did an amazing guide on implementing breadcrumbs geared more towards web designers. I’d highly recommend checking that guide out as its still relevant today.

Alibaba is one of the largest eCommerce websites in the world. Like Amazon, they are often criticized for their website design being a little dated. One area Alibaba chooses to really focus on is breadcrumbs.

If you are browsing for products on an eCommerce site like Alibaba, navigating the website via breadcrumbs makes it really easy to find what you are looking for.  For most people it comes down to preference. Some people like navigating via a side menu and using eCommerce filters, other people like using breadcrumbs, while others use both.

 

Even Windows 10 has adopted the use of breadcrumbs within Explorer.exe or Windows Explorer. Microsoft uses breadcrumbs to show users where they are within the filesystem hierarchy. They ditched the default “C:\windows\system32\folder” DOS style system in favor of a more human readable format.

You can still use the old format, but the new breadcrumbs allow less savvy users to see where they are in their file system. I even personally started preferring this new system even after using the old system for 30 years!

 

How breadcrumbs improve SEO

Like most aspects of SEO, there really aren’t too many “wrong” answers, but there are definitely best practices. One example of this is to be terse with your breadcrumb labels. This definitely isn’t the time to stuff keywords, there is plenty of opportunity for that in the rest of your content :)

One example we recently found was in our very own guide to on-page SEO. We found that it was way too long, and really wasn’t helping our users looking to learn more about SEO. So we squashed them down from (in this example) almost 160 characters, to about 40 characters.

Breadcrumbs should reflect where you are in the page, post, or product hierarchy. They should contribute to your overall navigational structure.

If you are a true SEO badass, you’ll markup your breadcrumbs with some structured data. While it isn’t really necessary, it may help search engines to get a better understanding of your websites hierarchy.

The cool thing about using structured data is you can use JSON-LD to implement breadcrumbs in your website. If you are using a CMS like WordPress, breadcrumbs are probably already implemented via your theme or plugin, but if not you can do them by hand.

Google uses breadcrumbs within the SERPs in certain instances. Using their own algorithm they assign breadcrumbs to certain listings. The odd part about this, is that Google’s breadcrumbs don’t always match up with the sites breadcrumbs. So this can get confusing.

Breadcrumbs can also help the overall internal linking structure of your website from an SEO perspective. It helps that breadcrumbs usually contain the keyword within the title of the page, that is of course if thats the way you structure your website.

A short history of breadcrumbs

If you do a little casual digging through the archives of the world wide web, you’ll quickly find that breadcrumbs have been a staple in web navigation for a very long time. In fact, some of the web’s most famous pages has used them in their design schemes.

Dmoz, a massive directory project started by the Mozilla foundation used breadcrumbs within their directory to help directory browsers find what they are looking for. Moreover it showed them where they were within their navigational structure.

Yahoo Site Explorer, a service many SEO’s will remember forever used breadcrumbs within their own FAQ section to help users find what they were looking for as well. Yahoo had, and still has a massive knowledge base of information so it is imperative that users can find what they are looking for.

 

Lastly

Don’t use breadcrumbs just because you can, or because you think they are good for SEO. Always follow this rule:

“Will adding breadcrumbs to my website help my users navigate the site better?”

If you follow these guidelines, you’ll be good to go! Any questions hit us up on Twitter or in the comments.