Once upon a time there were two little children named Hansel and Gretel. Living hard times back then, their parents decided to take them in the woods and abandon them because they simply could not watch them die of hunger in their own home....Fast Forward...The boy hears his parents talking about this and fills up his pockets with breadcrumbs so he can drop them on the ground and leave a trail behind so he can follow the path back home.
In this story the breadcrumbs failed to meet their purpose, but it`s just fantasy. We live in the real world where breadcrumbs actually work
On websites that have a lot of pages, breadcrumb navigation can greatly enhance the way users find their way around.
A “breadcrumb” (or “breadcrumb trail”) is a type of secondary navigation scheme that reveals the user’s location in a website or Web application.
Breadcrumb navigation should be regarded as an extra feature and shouldn’t replace effective primary navigation menus. It’s a convenience feature; a secondary navigation scheme that allows users to establish where they are; and an alternative way to navigate around your website.
Breadcrumbs usually appear in a horizontal format pointing from the highest level (home) to the lowest level of hierarchy (current page).
Some guidelines to follow when using breadcrumbs:
- Show the whole itinerary - this is essentially the point in using them so no need for to many details
- Always start with the home page - it gives the user an easy way to go "home" from any page
- Use ">" symbol as a separator - this is a comparison operator showing the relation between elements. The one on the left being higher in hierarchy than the one on the right, thus explaining the order of the pages
- Place breadcrumbs above the content - Right above the content and bellow your header and main navigation is the optimal place to show them. By doing so the user will se them when needed and on the plus side it will be visible in full for mobile users while the main nav will be shown as a hamburger icon
- Use small fonts - using a smaller font than for your main nav sends the correct message: that breadcrumbs are a form of secondary navigation.
- Do not link to the current page - If you link to the current page you may create confusion for your users
- Do not show breadcrumbs on your homepage - There is no point in showing breadcrumb navigation on your homepage since it is the first element and as I said before, do not link to the current page.
- Use the whole title of the pages - when displaying the itinerary use the whole name of the previous pages so you do not create any confusion
Why should I use breadcrumbs on my website?
- They improve the overall webpage design
- It makes it easier to navigate from page to page
- Lower bounce rate
- Positively influences SEO
- There is absolutely no reason not to
But this does not mean that only users can see these breadcrumbs.
Breadcrumbs are equally beneficial to the search engines as they are to users. They provide logical access to all the inner and outer pages of your site, a practice highly favoured by search engines.
This is how they affect SEO of your website:
-
They point keywords to certain pages
This helps the search engines understand how different pages are inter-related. -
They improve the internal linking structure of your site
Breadcrumbs can provide additional benefits if paired with contextual linking to their related pages. -
Schemas with structured data can be used to describe breadcrumbs
This makes search engine bots to understand that they are looking at a breadcrumb. Thus, the breadcrumb has chances of appearing in the SERPs to facilitate users more.
Schema? Structured data? What is that?
According to moz, Schema.org (often called Schema) is a semantic vocabulary of tags (or microdata) that you can add to your HTML to improve the way search engines read and represent your page in SERPs.
To be more efficient, breadcrumb navigation and schema markup can go hand in hand and you could implement everything in one go.
Schema.org is the result of collaboration between Google, Bing, Yandex, and Yahoo! to help you provide the information their search engines need to understand your content and provide the best search results possible at this time. Adding Schema markup to your HTML improves the way your page displays in SERPs by enhancing the rich snippets that are displayed beneath the page title.
How do I add this to my website.
This depends mainly on the type of your website and how it is built.
For Shopify users you can use an app to make it super easy. Here you can find an app, currently still in development, but it works, free of charge that adds both schema markup and breadcrumbs navigation with one click.
For users that do not use Shopify, you can find more information on this article and Google offers a helpfull tool called Structured Data Markup Helper. It is somehow a bit of work, but you only have to do it once and it may be worth it.
A usefull tool for anyone working with structured data is Google`s Structured data testing tool. After adding any markup on your website, it is best to test it right after to avoid any mistakes you may have made