Breadcrumbs are an essential component to almost any decent website. These little navigational aids help Google figure out how your web is organized as well as remind users where they are on your site.
Read our latest guide to learn more about breadcrumbs, what they are, and how to add them to your website.
A breadcrumb is a tiny text path that appears at the top of a website to show the consumer where they are in relation to the structure of your website. This breadcrumb trail will show exactly where you are. Any page in that path, all the way back to the homepage, is clickable. An example of this is:
Home > SEO > What Are Breadcrumbs
Breadcrumbs can also appear in the Google search results, giving users a clear picture of where a page on the blog or website is located.
There are a few different formats that breadcrumbs come in, which we’ll cover below:
Hierarchy-based breadcrumbs are the most popular option used on a majority of websites. They show where you’re at in the website and offer an easy way to get back to previous pages that you may have visited. Like the last example, hierarchy-based breadcrumbs come in the following format:
Home > SEO > What Are Breadcrumbs
Breadcrumbs based on the history of your searches / navigation on the website are ordered based on what you've been doing, or the pages that you’ve been visiting, on the website. It’s like your browser's history bar, resulting in something like this: Home > Previous post > Previous Post > Previous Post > Current Post.
Attribute-based breadcrumbs are mainly used when a visitor is shopping on an ecommerce site and the breadcrumb consists of product attributes, such as Home > Category > Price > Size > Color for a product page or product category pages.
Simply put, breadcrumbs improve the UX of your website due to easier breadcrumb navigation.
They reduce bounce rates of users, therefore increasing the amount of time people are spending visiting your web pages.
They can also improve your website rankings on Google, because Google uses breadcrumbs to contextualize and categorize content. Search engine crawlers will use breadcrumbs and display them within the search results for website URLs, which can have the added benefit of increasing clickthrough rates to your web pages, thus increasing the number of organic clicks come from the search results pages.
It's easy to understand the importance of breadcrumbs: users have limited time on a computer, and if they have to go back and forth searching for the information they want, they might give up. The breadcrumbs you provide will ensure that your users can find the information they want quickly.
They make navigation easier – that's the main role of breadcrumbs and this is why users love them. They encourage people to visit more pages of a website before they exit and reduce bounce rate as a result.
They are also easy to understand – Breadcrumbs are effectively written and you don't need to spend a lot of time reading them. They often have the color scheme of your website and are easy to recognize. So no matter what you are writing on your website, a breadcrumb is almost guaranteed to make the design better.
Be sure to read our latest beginner’s guide for search engine optimization to learn more about how you can optimize your website to drive more organic traffic and leadflow.
If you have a large website that has hundreds of pages and several different categories, you should consider using breadcrumbs to aid in navigation.
The only time I would recommend against using breadcrumbs, is if all of your site pages are one click away from the homepage. In this instance, it isn’t inherently useful to have breadcrumbs because users can simply click your website logo to return to the homepage, or for certain types of e-commerce sites.
Having breadcrumbs won’t hurt your search engine optimization, but it won’t be directly beneficial either. A better alternative for this kind of situation would be history-based breadcrumbs, rather than hierarchy-based.
Now that we’ve covered the different types of breadcrumbs, we’ll dive into best practices you should follow when incorporating them on your website.
Breadcrumbs should always be placed at the top of the web page. You also want to ensure they’re a proper size for users to click on and read. Not so big that they’re an eye sore, but not so small that they’re indistinguishable from the rest of the web page.
When incorporating breadcrumbs, you still want to have a navigation bar on your website. However, you want to make sure that your breadcrumbs aren’t duplicating what’s already listed within the navigation bar on your website, otherwise they won’t serve a purpose to users on your site.
Like I mentioned, location (or hierarchy) breadcrumbs are one of the most common types of breadcrumbs that are implemented on a majority of websites. However, different types of breadcrumbs can better meet the needs of your users.
For example, history-based breadcrumbs are better suited for websites with a majority of pages that fit under only a small number of categories.
Tying back with using a proper size, you want to keep responsive design and mobile-friendliness in mind for users who are viewing your pages on their mobile devices. Make sure that your breadcrumbs aren’t pushing too much of your page content below the fold, or that the titles in your breadcrumbs aren’t overly long. It’s okay to truncate article names to offer a better mobile experience for users.
Breadcrumbs are useless if users aren’t able to click back to previous pages, based on their navigation history or site hierarchy. Make sure that all jump points within your breadcrumbs are clickable for a better user experience, kind of like a back button.
The last tip is to make sure you’re reflecting the current page the user is on, to avoid confusion as they navigate through your website. You should also reference the previous page the user visited, or was the previous one in the category hierarchy.
Now that we’ve walked through the best practices you should consider for your website, let’s explore a few common ways that you can easily include breadcrumbs in your website structure.
For WordPress users, this is very simple. There are a few different breadcrumbs plugins available that you can add to your dashboard, but for users that already have the Yoast SEO plugin, it has breadcrumbs available and ready to integrate in as little as 3 clicks.
Within your Yoast SEO settings, go to Breadcrumbs and select Enable Breadcrumbs. That’s it! Your WordPress website now has breadcrumbs added.
If you’re uncomfortable using plugins, several WordPress themes, such as Ocean WP, offer breadcrumb options that you can enable as well.
For websites that don’t utilize WordPress, such as Wix or Squarespace, manual coding may be required to add breadcrumbs to your site pages. In this case, I recommend working with a developer to automate breadcrumb creation on your pages and to work on a functional design that adheres to the breadcrumb best practices that I outlined.