Breadcrumbs & Their Importance To SEO & User Experience
Contents
What Are Breadcrumbs In SEO?
Breadcrumbs are simple little navigational links that help users and search engines understand your content better. When a user lands on a page with breadcrumbs, it lets them easily understand what related content your website offers by seeing the specific page they are on and the more generalized categories that come before it.
Using breadcrumb navigation is a great way to improve user experience and communicate with search engines. It communicates that your website is a quality and organized resource in your niche and helps search engines crawl and discover your content. You don't always need to use breadcrumbs, though, so it is important to understand when they should be used and when you should avoid them.
7 Best Practices For Breadcrumbs In SEO
While these best practices aren't an "end-all-be-all" list, they will give you a great idea of what can be used to maximize the benefits breadcrumbs will give your website.
Hierarchy-Based Breadcrumbs
Make sure that your breadcrumbs make the structure of your content very obvious, as that is the main benefit of breadcrumbs from a user's perspective. Highlighting your URL structure with the use of breadcrumbs will not only help users stay on your pages for a longer period but will also help search engines understand more clearly how everything fits together.
Consistency
When creating breadcrumbs for your entire website, ensure that the styles, structure, and wording are all consistent across the entire website. It is a good idea to always remain consistent with everything site-wide in a website, but especially with breadcrumbs, as any deviation may confuse the user, which will lead to a lack of credibility and potentially a higher bounce rate. Pick a style, and stick with it for each breadcrumb you make.
Use Keywords
Breadcrumbs are a great way to improve usability and indexability, but when using keywords, make sure it enhances the content and that the keywords aren't forced. You can use exact-match keywords in breadcrumb links, but only if it makes sense and helps to make your content easier to understand. Never force a keyword into a breadcrumb that doesn't seem natural.
In the image above, you can see some examples of both natural and unnatural breadcrumbs. Knowing the difference is very simple. All you need to keep in mind is that your breadcrumbs, in as few words as possible, should accurately describe the page they represent.
If you have a page for "cheese pizza," but the primary keyword you're targeting is "best cheese pizza near me," it makes more sense to use "cheese pizza" for your breadcrumb. Using the "best ... near me" variation is very unnatural and will seem like spam to everyone, including search engines.
Use The '>' Separator
Using the ">" to help visually separate each category in the URL path is a universal way to communicate that what the user is seeing are breadcrumbs. This point is more for the user than anything because search engines have little need for the visual aid that this separator gives.
However, because of the familiarity with the convention of the greater-than sign, you will help users feel confident and comfortable navigating their way around your website. This small convention might seem like it isn't a big deal, but these little touches are great ways to improve your bounce rates and increase overall time spent on your pages.
The Last Item Should Be The Current Page
You always want the very last item in your breadcrumb navigation to be text that represents the page the user is currently on. There is no need for this to be a link, and it can be a simple paragraph tag.
Keep Them Short
When it comes to breadcrumb navigation, you want it to fit on all devices, so keep it concise. The shorter, the better, especially because your breadcrumb might include 3, 4, or even five pages, including the current page.
Use Schema
You should be doing this for all of your pages, but a great way to help search engines crawl, discover, and understand your content is to create a relevant schema that you can add to your HTML code. We'll have content detailing this in the future, so subscribe to our newsletter to be notified when we release that content.
Schema is semi-structured data that helps your pages communicate even more thoroughly with search engines, and among the various data-types you can include in Schema, breadcrumbs are a data-type to include in your code to help search engines understand your URL structure.
The 3 Types of Breadcrumbs
Breadcrumbs can be broken down into three different types of organizational structures. Below, we'll detail each of the most common methods for organizing URLs via breadcrumbs.
Hierarchy-Based Breadcrumbs
Hierarchy-based breadcrumbs are by far the most common type of breadcrumb. They help users understand the structure of your website, and will often improve your bounce rates by helping them to navigate their way to other content they might find useful or interesting.
Attribute-Based Breadcrumbs
Attribute-based breadcrumbs are typically used on e-commerce websites and help e-commerce stores organize many products into certain categories. These types of breadcrumbs will take certain characteristics of many products and lump them all together according to those specific attributes.
For example, you could have something like: "Home > Shoes > Mens > Running > Nike." Attribute-based breadcrumbs will help users clearly understand what each link will contain.
At first glance, attribute-based breadcrumbs might appear to be the same as hierarchy-based breadcrumbs, but the benefit of attribute-based breadcrumbs comes in when products have multiple attributes.
Breaking the breadcrumb navigation down into attributes helps certain products appear in multiple areas or even limit what products appear in certain areas, whereas hierarchy-based breadcrumbs are more linear.
History-Based Breadcrumbs
History-based breadcrumbs are very specific to the user's personal journey. These are typically used in e-commerce or large complex websites, as they help users understand their journey and even help them get back to pages they recently left.
While history-based breadcrumbs are great for certain types of websites, like the ones we've discussed above, they are typically bad choices for the average website, as they will not help the user discover pages other than ones they have already been on.
If your website isn't an educational, large e-commerce website, a research/database website, or a forum, you will want to avoid these types of breadcrumbs. If your website isn't any of the above types of websites, hierarchy-based or attribute-based breadcrumbs will be a better fit.
What Are Some Examples of Breadcrumbs on a Website?
Below, we'll share some images of websites that currently use breadcrumbs to help you get an understanding for what they look like, and where they are often located.
The North Face
Here is an example of The North Face and their use of breadcrumbs. Their breadcrumbs use the standard hierarchal structure to display other more generalized content related to the current page of women's insulated & down jackets.
Nordstrom Rack
Nordstrom Rack is using a hierarchal structure as well to make searching for other men's items easier for their users.
Macy's
Macy's is using a very simplified hierarchal structure to categorize the various items for their users. Breadcrumb navigation this concise can be good and bad depending on the specific website, but in this case it is very simple and provides the user with very simple choices.
Dick's Sporting Goods
Dick's Sporting Goods is also using a hierarchal structure for their breadcrumb organization, however, their structure is much more lengthy and complex than the Macy's example we've just seen. Breadcrumb navigation like this can be a double-edged sword as it is good for navigating, but this structure is also somewhat confusing, and might actually hurt the user experience.