What is It, and How Does it Help SEO?
Breadcrumb navigation may seem like such a small thing, barely worth spending time on when doing a website audit. But these little bits of code can do a great deal of good for your user experience, site structure and how well search engines crawl your site.
Once upon a time, all you needed to get eyes on your web pages was to insert a few good keywords and keep the quality content coming. Those were the good old days, when SEO and marketing were easy to understand and slightly simpler to implement.
Times and best practices change. Algorithms are more granular and complicated, and customers are somewhat fickle and more demanding. If you don’t give them what they want, and do it quickly, they’ll find another website that does. Keywords have stretched into key phrases, and algorithms measure much more than just your ability to optimize wording and hit KPIs.
The focus is shifting toward finding and ranking sites that offer superior levels of quality, UX, and customer engagement. It’s not enough to get traffic to your page. You also have to keep visitors there longer and provide incentive for them to return.
Web design is more complicated, too. Not in terms of building and launching websites, but in how those sites are structured and used by visitors. In fact, the latest Google update focuses almost entirely on user experience (UX). It’s set to launch sometime in May, 2021, so now’s a great time to update your SEO practices.
This brings us back to breadcrumbs, the one simple tweak that can improve the user experience and boost your place in the search engine page ranks (SERPs) without a complete design overhaul or the need to bring in consultants.
Done right, it won’t cost you a thing. It will, however, support more favorable indexing and brand perception while improving overall ROI.
What is Breadcrumb Navigation?
The concept comes to us from the fairy tale, Hansel and Gretel, siblings who were lost in the forest and left for dead. Much like the titular tots in the children’s story, you’re going to leave a trail of breadcrumbs your visitors and web crawlers can use to find their way around your website.
You may have noticed this type of in-site navigation as a string of words at the top of a web page, drilling down from parent to child pages in the order of navigation. These words are usually in the form of clickable links that allow you to easily go back to a specific page and find your way around.
There are three main types of breadcrumbs, history-, attribute-, and hierarchy-based. Each type serves a specific purpose and should be used according to your goals and content type. Just as you wouldn’t use panko to make your Parmesan or weigh down your tempura batter with coarse, heavy meal, using the right breadcrumb type is essential for a tasty experience.
- Hierarchy-based breadcrumbs are the most common. They let a visitor know where they are within the website architecture and how to get back home. Most look something like this:
Home>Resources>Web guides
- Attribute-based breadcrumbs use attributes to allow visitors to quickly determine which pages they’ve already visited by attribute. They’re most commonly used on eCommerce sites to help shoppers find products within a certain demographic or product type, such as:
Home>shoes>women>trainers
- History-based breadcrumbs are like a snapshot of your browser history at the top of a specific web page. Rather than looking at a drop-down menu of where you’ve been since you started browsing a site, you can just view the trail of breadcrumbs at the top of the page. History-based breadcrumbs often look like this:
Home>Article 1>Article 2>Current page
How Breadcrumb Navigation Improves User Experience and SEO
Unlike the children in the Grimm’s fairy tail, your objective is not to lead visitors out of your site. You want to draw them in further and keep them there longer. Depending on the size and purpose of your website, it will also keep them from getting lost by providing an easy-to-read means of backtracking through your website’s many pages.
It’s like a map that says “You are here” while keeping track of where they’ve been.
This improves usability and user experience (UX), which is good for repeat business and increasingly essential for site evaluation and ranking. When factored into metrics regarding user activity and behavior, it will provide you with insight into what pages people visited, how long they stayed on a particular page, and where they ventured from there.
For example, a shopper might navigate from your home page to women’s apparel, and then want a closer look at a specific pair of shoes. They click under that product to find the detail page, look at the shoes, but decide to shop around some more. Clicking on the previous breadcrumb will take them back to the product gallery so they can continue browsing without a lot of hassle or misdirection.
Now, they could have just hit the back button on their browser or used the drop down menu. However, that would take extra effort and a few more steps, which eats into their day. No one has time for that.
In addition to encouraging visitors to stay longer and check out other pages on your website, leaving a trail of breadcrumbs will:
- Encourage visitors to learn more about your company
- Help web crawlers contextualize and index your content
- Reduce website bounce rates
- Improve site quality and usability
- Increase keyword density in an organic, natural way
- Provide a higher degree of customer satisfaction
- Better utilize and structure page space
Breadcrumb Best Practices and Mistakes to Avoid
While leaving a trail of breadcrumbs doesn’t impact your SERPs directly, and lack of them won’t hurt you, the practice does support those elements that Google uses to determine how to index and rank your page.
They’re easy to implement, too. WordPress and eCommerce platforms offer several ways to structure and add breadcrumbs, including plugins and themes that do it for you.
Now that you know the why and how of using breadcrumbs to aid site navigation, here are some basic best practices and things to avoid.
- Prioritize hierarchy-based over history-based breadcrumbs. People already have a means of backtracking, so this is redundant.
- Make breadcrumbs a secondary rather than primary means of site navigation. In other words, don’t replace your drop-down menu with breadcrumbs. Use them to supplement menu-based navigation. People like options, but they also feel more comfortable with the familiar.
- Position the breadcrumbs at the top of each page, right under the main header and traditional menus. Use a smaller type and/or different colored font to differentiate the breadcrumbs from the main menu items.
- Structure breadcrumbs so that the hierarchy flows from highest to lowest, moving traffic from main pages to more detailed content deeper into the website. For instance, start it at the Homepage and end with the current page without skipping elements. The trail should be complete and include every link in that particular chain.
- Use only one or two words to identify each crumb and add it in the form of a clickable link to the page represented by that word. Separate each breadcrumb with a simple character, such as the “>” symbol. The point is to make navigation more effortless and elegant without cluttering up the page layout.
As one checkmark in the list of website audit basics, breadcrumb navigation isn’t a huge one, but again, don’t underestimate the power of this little bit of code. Done correctly and with best practices in mind, breadcrumbs can help make your site easier to crawl for search engine, navigate for visitors, and convert for customers.
