How to Use Breadcrumb Navigation to Boost SEO & User Experience

How to Use Breadcrumb Navigation to Boost SEO & User Experience

Have you heard of website breadcrumb navigation?

I recently finished redesigning a website for one of our clients. This was a huge site with 73 web pages with a number of sub categories. On the articles page alone, there are 6 categories. Each category has a number of related articles that needed to be grouped under a main topic.

As you can imagine, organizing the navigation structure of a large website like this can be a challenge.

The Solution: Breadcrumb Navigation

Enter website breadcrumb navigation to the rescue to help organize the site, improve user experience, and boost SEO. In this post, we will take a close look at:

Not all Breadcrumbs Are Eaten

When you hear the word, breadcrumbs, what is the first picture that comes to your mind? Did you visualize the fairy tale by the Brothers Grimm, Hansel and Gretel, where Hansel leaves a trail of breadcrumbs as a navigation strategy to return home from the wandering in the forest? If you did, you are not too far off how the web design term, breadcrumbs, came to be.

The term “breadcrumb” in web design terminology is actually a metaphor for the navigation methodology that Hansel used in the popular fairy tale. The metaphor may be somewhat misleading because on a website, breadcrumbs do not always represent the path that one has taken to arrive at their current location. The catchy term caught on and became the name of this web navigation method.

Breadcrumbs are a second type of navigation technique that shows the visitor their location within a website. They can help a user understand and navigate a website’s hierarchy.

Definition of Breadcrumb Navigation

Google describes breadcrumbs as:

Breadcrumb trails on a page indicate the page’s position in the site hierarchy. A user can navigate all the way up in the site hierarchy, one level at a time, by starting from the last breadcrumb in the breadcrumb trail.

Where Should Breadcrumbs be Placed on a Web Page?

Website breadcrumbs are typically placed horizontally across the top of a web page underneath the page header and main navigation. They provide additional navigational links to the site’s page structure or hierarchy and leave a trail for the user to follow. They should not replace a site’s main navigation.

Examples of Websites Using Breadcrumbs

Yoast’s Breadcrumbs Example
Yoast breadcrumbs example

Nestle’s Breadcrumbs Example
Nestle's breadcrumb example

Stone Temple Consulting’s Breadcrumbs Example
Stone Temple Consulting breadcrumb example

Why Use Breadcrumb Navigation for Your Website?

Breadcrumbs for Usability

First and foremost, breadcrumbs are an excellent navigational aid to help your users’ experience when they visit your website. Important factors for using breadcrumbs navigation on a website include:

  • They are user friendly and are easy to understand.
  • They allow the visitor to visualize their current location in relation to the rest of the website.
  • They enable the visitor to have one-click access to higher site levels and thus help users who enter a site through search or deep links.
  • They can reduce the bounce rate of your new visitors by encouraging them to continue browsing the site.
  • They enable visitors to easily and quickly navigate to other pages.
  • They are extremely useful for the navigation of large websites with multiple categories and many pages.

Breadcrumb Navigation for SEO

Breadcrumbs not only help your visitors to easily navigate your site, they help search engines to determine the linking structure of your website.

Google Developer’s Structured Data Breadcrumbs‘ page states:

When you mark up breadcrumb information in the body of a web page, Google can identify it and use it to understand and present the information on your pages in our search results.

Joost de Valk, SEO and online marketer of the top rated Yoast SEO plugin (formerly WordPress SEO by Yoast) for WordPress states in his guide, WordPress SEO:

“You’ll want to add breadcrumbs to your single posts and pages. Breadcrumbs are the links, usually above the title post, that look like “Home > Articles > WordPress SEO.”

Breadcrumbs with Keywords

Breadcrumbs navigation links have been used as an on page optimization technique. An example of breadcrumbs with keyword text breadcrumbs is the website of Bruce Clay who is often referred to as the founding father of SEO at www.bruceclay.com.

The home page on the following example is a graphic to the home page followed by the breadcrumb links:

Internet Marketing Optimization > Search Engine Optimization > SEO Tools.

This technique does appear to have a positive effect – along with other positive organic ranking factors for the site.

Bruce Clay Inc. breadcrumb navigation example

The SEO benefit of website breadcrumb navigation is confirmed in the book, The Art of SEO by Eric Enge, Stephan Spencer, Jessie Stricchiola and Rand Fishkin.

“Verify that you CMS allows you to implement breadcrumb (drill down) navigation. This is great for SEO because it reinforces your internal hierarchical linking structure with keyword-rich text links.”

Breadcrumbs in Google’s Search Results

Google began showing breadcrumbs or site hierarchies in desktop search results for some websites in 2009 to help end users “understand the structure of the site and how the specific page fits into the site hierarchy.”

Example of Breadcrumbs in Desktop Search Results

Example of breadcrumbs in Google's Desktop search results

In April of 2015, Google announced that they would be replacing the URL in search results with the site name and breadcrumb trail in a breadcrumbs-like format.

Example of Breadcrumbs in Mobile Search Results

Example of Breadcrumbs in Mobile Search Results

Why are breadcrumbs in mobile search important? In the post for Bruce Clay, Inc., Google’s New Mobile Breadcrumb URLs: Making the Most of Your Site Name & URL Structure, author Paula Allen states:

“Showing a logical breadcrumb path on every page of your site naturally passes link juice up to your main landing pages. It also has a user-friendly benefit, since people can click there to find their way up to broader levels of content.”

How to Set up Breadcrumbs Using Yoast SEO

Now that we’ve covered the importance of website breadcrumb navigation for your users and for SEO, let’s take a look at how to set breadcrumbs up.

If you use WordPress as a CMS (Content Management System), you theme may actually have an option to use breadcrumbs. You can check your theme options to determine if it does. If not, you can harness the power of the Yoast SEO plugin.

  1. Step One:
    You will need to edit your theme’s files to use Yoast’s SEO breadcrumbs with the following code:

    if ( function_exists( 'yoast_breadcrumb' ) ) {
    	yoast_breadcrumb();
    }
    

    Two files that you may want to edit include the single.php and/or page.php. You may also choose to include the code at the bottom of your header.php file. Next, upload the edited file(s) to your theme’s child theme. This way, your edits will not be overwritten when you update the theme.

    Note: If you feel uncomfortable editing the files, please contact an experienced web developer for help.

  2. Step Two:Yoast SEO breadcrumb setup step 1
    In your WordPress admin, locate Yoast “SEO” in the left column and beneath that, locate “Advanced”.

  3. Step Three:
    Under Advanced, locate and check the box, “Enable Breadcrumbs”, make any changes you want in the other fields, and save.

    Yoast SEO enabling breadcrumbs

Take Away

Website breadcrumbs, when combined with ethical on and off page optimization techniques, will create a better navigational experience for your visitors especially in a larger site. They will also help search engines to more easily understand the structure of your site and may enhance your on page SEO efforts.

Over to You

The next time you hear the word, breadcrumbs, what picture will come to mind? Will you think of the storybook characters Hansel and Gretel, or will you think of the advantages of website breadcrumb navigation?

Do you have breadcrumb navigation on your website? If so, what are your thoughts about using them? If you haven’t, do you think you might give them a try?

Please consider sharing your experience or questions in the comments below to help others better understand website breadcrumb navigation.

Fascinated with the growing potential and power of the Internet, Robin founded R & R Web Design LLC in the Chicago area in 2000. As creative director, she is passionate about helping others reach their Internet objectives through a strategic online presence with results driven custom web design, ethical SEO, and social media marketing.

This article was published on: July 27, 2015 and was last modified July 27, 2015
26 comments on “How to Use Breadcrumb Navigation to Boost SEO & User Experience
  1. Never heard of breadcrumb navigation but from your description I have it. It pays to hire experts like yourself or Kittie who I used and it took me a long time to learn this. This is such an excellent explanation about a very technical aspect of web design. Many people think they have it handled with a few SEO plugins, but it is clear from this article, how much more needs to go into the design. So happy to always read your posts. Invaluable information.

    • Hi Roslyn,

      I do know Kittie and she is an absolute gem. She did such a fantastic job on your website.

      You are right. SEO can be a bit more technical than a few SEO plugins. I will be starting another client’s website redesign with about 100 pages, and I will be using breadcrumb navigation on it as well.

      I appreciate you stopping by and taking the time to read this.

      ~ Robin

  2. Hi Robin, what an excellent description of breadcrumb navigation and why we should use it. I do set this up for some of my clients, but do not use it on my own website. I may just have to look into it a bit deeper and see if it will work on my site without cluttering it too much. Thanks for the great explanation. Cheers, Ian

    • Hi Ian,

      Thank you for your kind words about breadcrumb navigation. I don’t use breadcrumb navigation on each site I create, but when it is logical with regards to user experience and SEO, I will. With Google showing breadcrumbs in some desktop search results and now in mobile results, I will be revisiting some websites that have grown over time…

      I appreciate you stopping by and for taking the time to read this and your comment. Have a wonderful week ahead!

      ~ Robin

  3. I will be honest with you, Robin. I did not know about breadcrumb navigation though from what I can make out, I do have some sort of breadcrumb navigation. The question for me now relates to optimization. I use All in One SEO plugin and need to check if I can use it to improve the navigation. Time to review and revise!

    • Hi Vatsala,

      I’m happy to hear that this helped post opened up a new understanding of website breadcrumb navigation. As for All in One SEO, I did use it on a number of websites before I switched over to Yoast SEO. Please let me know if it does offer the ability to use breadcrumbs as it might help other readers who are using it.

      Thank you for taking the time to read this and for your comment. Have a wonderful week ahead.

      ~ Robin

  4. Tina says:

    YOU DID IT AGAIN!! Thank you so much!! I have never heard of “breadcrumb” but evidently it’s alive and well (and we’re all making it out of the forest alive!). My first thought when I read this today was to contact Mark and make sure we have breadcrumbs on the sites. Then I’m thinking, is this something I can do myself? (I don’t have a clue how to use the and html stuff so that is simply not possible for me). Maybe I know a 12 year old who can help me? Keeping up with Google is nearly impossible, and you are always up on the top of the mountain advising us of the good, the bad and the necessary!!

    • Hi Tina,

      I thought you might like the surprise. You are so welcome.

      It does look like there is some form of breadcrumb navigation on your website for some of the pages. With a website like your site with so many categories and products, it is a great choice. If you ever need any help and Mark is not available, please give me a call.

      Keeping up with Google does seem like an uphill journey, doesn’t it. I’m happy to hear that your are gathering something from my posts. If you ever have any questions or suggestions about what you would like to see, please let me know.

      Have a wonderful week, my friend!

      ~ Robin

  5. Great article Robin! I didn’t know about breadcrumb navigation and am not sure if my theme is user friendly for it. I do have Yoast SEO, so would be able to follow steps two and three on my own with no problem. Just sent a query to my current web person, to see how easily this can be implemented on my Salient theme. Thanks for the insights, as I learned something new today. Now I have more things to consider to tweak my site. 🙂

  6. Lori Ann says:

    Ah, that is what that is called! I have found that I get frustrated on a shopping site that does not have breadcrumbs, especially if I’ve done a search for something and want to know what category it’s in. I do not currently have this, but certainly will consider it.

    • Hi Lori,

      I agree about eCommerce websites that don’t have breadcrumb navigation. It can be frustrating for the user. If you do decide to use it, please let me know how it goes.

      Thank you stopping by, taking the time to read and for your input on this. Have a wonderful week!

      ~ Robin

  7. Hi Robin,

    Many thanks for explaining Breadcrumb Navigation. This is one thing I haven’t heard about. I do have Yoast for SEO and as long as those green lights go on in my back office, I publish my blog.

    This post is a keeper because now I can set up my Yoast for breadcrumbs. When it comes to things like this I’m all thumbs. I’m a block head when it comes to SEO he he he. But the good thing is my husband is my partner and he does all of that for me.

    Which is so great is that you have explained this so well that even I can do it myself and I will. Once done..I’ll be doing a happy dance.

    Thanks so much!

    -Donna

    • Hi Donna,

      You are very welcome! Yoast SEO brings so much value to the table. The breadcrumb navigation feature is one that many do not realize is there. I do understand about those green lights!

      I’m happy to hear that you have found this helpful. It is great that you husband and partner is able to help you with. I would love to hear how it goes if you do decide to include breadcrumb navigation on your site.

      ~ Robin

  8. Deb Nelson says:

    Thanks for this explanation, Robin. I must admit I wasn’t familiar with breadcrumbs but now have a reasonable understanding thanks to your post. Always lots going on behind the scenes with SEO. Valuable informative post – look forward to reading more of your blog.

    • Hi Deb,

      Welcome to our blog! You are so welcome! It is great to hear that you found this helpful, not only using breadcrumb navigation for user experience, but for SEO as well.

      Thank you for visiting and for your comment. I hope you have a wonderful weekend ahead.

      ~ Robin

  9. Wow. You are awesome. Thank you for sharing the different ways to implement the “breadcrumb” feature, so I could go check if I had it on my site (which was a waste of time, since apparently I have it automatically and still don’t know what it looks like, lol). One day I will be great at technology; until then, I’m glad I have you. 🙂

  10. Kaz says:

    I didn’t know about breadcrumb navigation…but, it sounds very interesting and I would love to try! Internet or computer is not my strength, so these kind of information helps me understand or at least get familiar with words used for internet marketing. Thanks for sharing!

    • Hi Kaz,

      It is great to hear that this post helped introduce you to breadcrumb navigation. I appreciate you taking the time to read this post and you taking the time to comment!

      ~ Robin

  11. Hi Robin,

    What a great post on breadcrumb navigation 🙂 If I did not know, as I am a blogger, what “breadcrumbs” meant, I would definitely be thinking about the story of Hansel and Gretel lol

    I know how important they are to SEO. Thank you for sharing this very informative post!!

  12. Hi Robin~Your articles are always timely. Breadcrumbs was on my search yesterday.
    I found it on my theme options and wondered if I should enable it. I always search the net first to find out if I should~ but could not find anything to tell me so.
    Your article was perfect and so I did. I have a page that I am tweaking right now and one of the pages was leading to it. The arrows are also at the spot where my currency switcher tab is. So a few things to change before I enable it.
    Thank you again. Cheers Cindy

    • Hi Cindy,

      I’m so happy to hear that you found this helpful! Breadcrumbs will be a great addition to your website help for navigation and SEO. Have you tried enabling breadcrumbs through Yoast’s SEO plugin?

  13. Sophia says:

    Hello there Robin,

    What an incredible post on breadcrumb route 🙂 If I didn’t have the foggiest idea, as I am a blogger, what “breadcrumbs” implied, I would be thinking about the tale of Hansel and Gretel lol

    I know that they are so vital to SEO. Much obliged to you for sharing this extremely useful post!!

Leave a Reply

You have to agree to the comment policy.

*