Breadcrumbs are a navigational element found on websites that help search engines to crawl them, while helping visitors to navigate them more easily. Breadcrumbs allow visitors and crawlers to easily navigate to higher levels of the site architecture, providing a clear picture of how the site is structured through links.
Breadcrumbs provide structured data that allow users to see exactly where they are on a website and the path between their current page and the homepage. You can usually see breadcrumb links at the top of your current page, or in the search engine results (see below).
Adding breadcrumbs to your site allows the search engine results to provide users with more accurate search results based on their needs and lets users navigate to different pages on a site more easily.
Here is an example of a breadcrumb trail that we pulled from our website:
Like all breadcrumb trails, this one starts at our homepage (sagapixel.com), then shows the category the page can be found under (local SEO) and then the name of the specific page you’ll be clicking on (location pages).
What Are The Three Main Types of Breadcrumbs?
While all breadcrumb navigation exists to help users and search engines better understand site content, there are a few different types of breadcrumb trails based on the kind of site you’re on.
The three most common types of breadcrumbs are:
Hierarchy-Based Breadcrumbs
Hierarchy-based breadcrumbs are also referred to as location breadcrumbs and are like the example shown above. These let you know where you are in a site structure and how far you are from the homepage.
Attribute-Based Breadcrumbs
Attribute-based breadcrumbs are commonly seen on e-commerce sites. These are made of the attributes of a specific product you are searching for. For example, if you’re looking for pink sneakers for women, your trail might look like: Women > Shoes > Athletic Shoes > Pink.
History-Based Breadcrumbs
A history-based breadcrumb trail is pretty self-explanatory: they show you a history of the pages you were on before you reached your current site. They’ll look like this: Homepage > Previous Page > Previous Page > Current Page. You may also want to include a back button right in the breadcrumb navigation bar, so users can easily return to the previous page.
What Are The SEO Benefits of Using Breadcrumbs?
Now that we’ve explained what breadcrumbs are, you may be wondering how they help your website, and whether they can increase website traffic. Breadcrumbs have multiple benefits for search engine optimization and user experience.
Helps Google Determine Your Website Structure
Breadcrumbs can help Google figure out the structure of your website, to give more accurate search results. When Google crawls and indexes your website among the millions of others out there, adding a breadcrumb trail makes it easier to gather information about your page. Often this will rank your site above those that don’t use them.
Google Displays Breadcrumbs in the Search Engine Results
Google also shows breadcrumbs directly on their search engine results, which is more attractive to users as opposed to a lengthy and messy permalink. Depending on how far down a user’s search is on a site, a permalink can get so long that it looks spammy. When you add breadcrumbs, you streamline the way your site appears on Google search results.
What Are the UX Benefits of Using Breadcrumbs?
While it’s important to optimize your site, the thing that you should focus on most is user experience. After all, the search engines just rank and categorize websites, but it’s people who are actually using them. Breadcrumbs offer some unique benefits to enhance user experience.
They Lower Bounce Rates
High bounce rates occur when site visitors quickly leave a site, usually because they didn’t find what they were looking for. Breadcrumbs provide alternative ways to browse your site, meaning users are more likely to stay on one site for longer than starting their search completely over.
They Help Visitors Navigate Your Website More Efficiently
It’s important that new visitors to your site feel familiar and comfortable with what they’re being shown. People will quickly abort mission if they sense any friction or poor user interface on a website they’ve never used before. Breadcrumbs are a recognizable tool that gives visitors a way to get around your site, making them more inclined to browse different pages.
SEO Mistakes To Avoid When Using Breadcrumbs
While breadcrumb trails are a pretty simple navigational tool, there are a few common mistakes we see web designers make when building them into websites:
Don’t Make Breadcrumbs Too Big or Too Small
Breadcrumbs are familiar to most users, but it’s important to put them somewhere that people know where to find them. We usually recommend placing a breadcrumb trail beneath the hero image at the top of your page but above the H1 title. Make sure the font size you select isn’t obtrusive but is large enough to easily click on and see.
Make Sure You Keep Your Navigation Bar
Breadcrumbs might not be helpful in every situation. If you find that your breadcrumb trail is just duplicating what is in your navigation bar, it might not serve any real purpose. Don’t opt for breadcrumbs over your navigation bar, either – the breadcrumbs should be supplemental to other navigational tools on your site, not a replacement.
Use the Right Kind of Breadcrumb For the Situation
As we mentioned earlier, there are a few different kinds of breadcrumbs that you can choose from for your site. If you are building an e-commerce site, attribute-based breadcrumbs are usually best, while most other sites use hierarchy-based trails. History-based breadcrumbs are typically used by more informative and interactive sites.
Make Sure Your Breadcrumbs Are Mobile-Friendly
When creating websites for mobile, it is a common mistake to neglect your breadcrumbs, leaving them too small to be easily seen or tapped on. To create. a mobile-friendly breadcrumb trail, we recommend either hiding breadcrumbs on mobile, or making them look like buttons to let users know they are clickable.
How To Add Breadcrumbs on WordPress, Wix, and Shopify
Depending on the CMS you use to develop your website, there will be a slightly different way to add breadcrumbs. If you use WordPress, there are several plug-ins you can use, including Yoast SEO. If you are using Wix or Shopify, they each have unique coding methods for adding breadcrumbs.
Summary
A breadcrumb trail is an SEO element that can help users navigate your web page, boost your site to the top of search results, and keep visitors on your website longer. They are a relatively easy tool to implement, especially using plug-ins and CMS guides.
There are a few different kinds of breadcrumb trails you can use depending on the type of website you have, but all of them help search engines like Google better understand the content on your site.
