One of the website elements that Google loves is breadcrumbs. Google emphasizes the importance of breadcrumbs in all its SEO-related documents and guides.
The reason is simple: breadcrumb trails have something to offer both search engines and users.
Search engines use them to get a better idea about how is your website structured and help users navigate a website more easily.
In this post you will learn everything you need to know about breadcrumbs, why they are important, how to optimize them and how they help SEO.
What are breadcrumbs?
A breadcrumb trail is a small menu usually located at the top of a page, used as a navigation aid. Shows the path to go from the current page to the home page.
Here’s an example of a breadcrumb route menu:
Example of a breadcrumb trail
As you can see in the example above, the breadcrumb trail starts from the home page, then displays the category name, and then the current page. Each step of the path is clickable.
Different types of breadcrumbs
Breadcrumbs can take different forms, but all types have the same goal, that is, to help users understand the relationship between the current page and the rest of the site.
For example, if you take a closer look at the breadcrumb menu in this article, you’ll see that it’s part of the SEO Articles category.
The most common types of breadcrumbs are:
Hierarchy-based breadcrumbs
The example above was a typical hierarchical (or location-based) breadcrumb menu. It is the typical navigation path that you can find on blogs or websites that have a simple hierarchical structure.
Here’s another example from Amazon:
Route of the breadcrumb – Amazon
dynamic breadcrumbs
Attribute-based or dynamic breadcrumbs are used in cases where a product has many attributes and the breadcrumb trail reflects this for easy navigation.
Here is an example of an eCommerce website:
Attribute-based breadcrumbs
Notice how the breadcrumb helps users select different product attributes without leaving the current page.
Story Based Breadcrumbs
The breadcrumb trail is created based on the pages a user has visited. this is not good seo web design practical and not used very often.
Why are breadcrumbs important?
Breadcrumbs are an essential element of a SEO friendly website because:
- They make it easy to navigate – that’s the main function of breadcrumbs and that’s why users love them.
- They encourage people to visit more pages of a website before leaving and therefore reduce bounce rate.
- They are good for SEO.
There are two main reasons why breadcrumbs are good for SEO.
First of all, they help search engine bots during the crawling and indexing phase. Crawlers can identify breadcrumbs and can use the breadcrumb structure to gather more information about a web page and site.
Second, Google shows breadcrumb information in the SERPS, instead of showing the permalink one page
For example, the permalink for the page below is but because I have SEO optimized breadcrumbs, they show up like this in the results, which is a better version.
SEO optimized breadcrumbs
Breadcrumb SEO Best Practices
To optimize the SEO of your breadcrumbs, you must follow these simple rules:
Make sure breadcrumbs are enabled and visible to users.
This may seem obvious, but many web designers tend to hide the trail of breadcrumbs because they feel it doesn’t match the design.
This is not true. Take a look at the first example above and see how useful the breadcrumb trail is on the Rolex website (and it looks great, too).
Make sure breadcrumbs are mobile friendly.
If you decide to keep the breadcrumbs viewable on mobile devices, make sure the font size is large enough so that the links are easily clickable. It is common practice to hide breadcrumbs on mobiles or make them look like buttons.
This is an example of a mobile-friendly breadcrumb trail.
Mobile-friendly breadcrumb trail
Add Breadcrumb Scheme
The reason my breadcrumbs are showing up instead of URLs in Google search results is because I have breadcrumb schema markup enabled on my website.
What is schema markup? It is a way of highlighting certain areas of your website for search engine crawlers so they can better understand how a page is structured.
By adding code snippets into your HTML (this is called structured data), you can give search engines more information about your page and content.
This can increase your gain changes rich snippets in search results and also well-formatted breadcrumbs.
Here’s how to add a breadcrumb scheme on your website:
For breadcrumbs, the relevant schema is the breadcrumb list. It has the following required properties:
Breadcrumb schema properties
- Article: URL of the specific article page
- Name: The title of the breadcrumb.
- Position: The position of this item in the breadcrumb trail.
This is what the code looks like:
Breadcrumb Structured Data Example
If you’re confused, don’t worry, in most cases you don’t have to write the code manually.
There are tools that can do this for you automatically.
Yoast SEO Plugin (WordPress) – The Yoast SEO plugin has added support for breadcrumbs.
Once activated on your website, breadcrumbs can be configured by going to SEARCH APPEARANCE > BREAD CRUMBS.
Breadcrumb Settings in Yoast SEO
As you can see above, you can configure a number of things that have to do with the appearance of the breadcrumbs.
Related schema information is automatically added to your web pages.
Genesis Themes (WordPress) – Genesis based themes (like the one I’m using on my website, they have built-in support for schematics).
If you are not on WordPress or using a different theme, the best way is to first check if the breadcrumb scheme is already activated on your website.
Go to the structured data testing tool and enter the URL of one of your pages that has breadcrumbs enabled.
If all is well with your structured data implementation, you will see on the right the results with 0 errors and 0 warnings.
breadcrumb outline
This means that your implementation is correct.
If you have errors, warnings, or don’t see a breadcrumb list item, it means that breadcrumb structured data is not implemented on your website.
The best way to fix this is to hire a developer to add the necessary code to all valid pages.
Key learnings
Breadcrumb trails are good for user experience, they make your search snippets look better, and Google loves them.
These 3 reasons are enough to convince you that you need to enable breadcrumbs on all your pages.
If your designer is against it because it ‘breaks’ the visual design, show them the Rolex examples to convince them that there is a way to incorporate breadcrumbs into any design.
Finally, you need to implement the breadcrumb list schema and have the correct structured data for Google and other search engines to correctly interpret the breadcrumb implementation.