Breadcrumbs make it easier for users to navigate the website. Thanks to it, visitors to your site can effortlessly determine the place they’re currently at and efficiently return to previously browsed subpages. Breadcrumb navigation is usually placed horizontally at the top of the browsed page. It’s worth mentioning that this solution works well only for properly structured websites.
Breadcrumbs – a navigation path
Breadcrumbs are intended to improve website navigation and depict the path covered by users. They’re one of the constituents of the navigation system that significantly influence the usability of the site. Breadcrumb navigation structure can be compared to browsing folders in the operating system – each individual folder contains a subfolder with subsequent sub subfolders. Opening them one by one allows you to obtain the covered path. Below you can find exemplary breadcrumb navigation:
Main Page → Category → Subcategory → Product
A well-designed and carefully thought-out website layout enable users to quickly find the information they’re looking for. The emergence of more and more complex websites led to the development of numerous usability improvements, thanks to which users don’t get lost on the browsed site. Breadcrumb navigation is deployed mainly on more expanded pages to increase their transparency.
How do breadcrumbs work?
Breadcrumb tags in the website content make it easier for the search engine robots to tailor information obtained on a given site to the search query entered by users. This element of the navigation system allows visitors to click on any page level apart from the address. However, remember that breadcrumbs won’t display for all queries and subpages. The search engine adjusts the display of the navigation path to the character of the search query.
Types of breadcrumbs
It’s possible to categorize breadcrumbs into three types:
- Location-based – the most popular type used to indicate current locations of users on the site. On the horizontal navigation bar, website visitors can see links to higher-level pages and subpages of the currently browsed site.
- Attribute-based – this type is employed mainly in online stores and is displayed after applying filters. Thanks to this type of breadcrumbs, users can easily determine the categories of given products on the site. This application can be easily observed when looking at car auction websites.
- History-based – this is the least frequently applied website navigation type. It shows the specific path taken by users before they managed to arrive at a current page. The path provides links to subpages that have been already visited. This breadcrumb type doesn’t enjoy popularity due to duplicating forward and backward arrow buttons.
What do you need to know about breadcrumbs?
While implementing breadcrumb navigation, it’s worth remembering a few basic things. Instead of using long links with keywords, go for short and quality names. Users can click on everything apart from the website address. When the path leading to a particular web page contains too many subcategories and exceeds the specified display space, then, its fragment will be replaced by an ellipsis.
Breadcrumb navigation and its importance in SEO
The main objective of breadcrumb navigation is to indicate the order of elements and subpages on the website. Due to the fact that each breadcrumb is clickable, users can also easily navigate the site. Breadcrumbs are displayed both in the search results and on the page.
Breadcrumbs indicate keywords that describe the page which makes it easier for the search engine to connect different subpages within the same website. Moreover, thanks to this solution, users can see your website after typing in diverse types of search queries.
Breadcrumbs are a great tool that facilitates internal linking. With the use of this navigation type, you can strengthen and improve the link structure of your website. Moreover, breadcrumb navigation can also help you decrease the bounce rate. If users enter a specific product page that doesn’t meet their requirements, instead of going back to the search results they can take advantage of the breadcrumb navigation to effortlessly browse through other products on your offer.
HTML separators and tags
Most web developers use the “>” or “>>” tags to separate links. Usually, the tags indicate the website’s hierarchy. If you use plug-ins for your CMS, you can also take advantage of available graphic separators. HTML is also an abundant source of symbols that can make your website design much more appealing.
While selecting appropriate separators, you should take into account the aesthetics of the website and its navigation. The size of the separator in the navigation bar should be smaller or less visible than the main navigation menu. This element is an accessory, therefore, a good rule of thumb for creating a navigation path is ensuring that it’s not the first element that catches the eye of a website visitor. Exemplary tags used for creating breadcrumbs and their application can be found on https://schema.org/BreadcrumbLis.
It’s important to mention that you can also implement breadcrumbs as an element of your website design without structured data. Just use the HTML <li> element: https://developers.google.com/search/docs/data-types/breadcrumb
Why are breadcrumbs user-friendly?
- They facilitate website navigation and make it more efficient,
- They enable correct recognition of given page sections (homepage > category > subcategory > product),
- They enable navigating across sections of the website with one click,
- They improve brand recognition and image (page name > category > subcategory).
Why are breadcrumbs Google-friendly?
- They support internal linking,
- They have a positive impact on the SEO process – Google defines breadcrumbs as a supporting tool that affects positions of the subpages in the search results,
- They make it easier to analyze the web site’s structure,
- Website indexing gets more efficient.
Implementation of breadcrumb navigation and the most common mistakes
One of the most common mistakes made when deploying breadcrumb navigation is the lack of a site’s hierarchy. The navigation path ought to describe the relevant website’s hierarchy, not the user’s browsing history. Sometimes it also happens that breadcrumb navigation replaces the main navigation. However, it’s not a beneficial solution as breadcrumbs are supposed to be an extra element and in most cases, they won’t work properly on their own. Moreover, they shouldn’t duplicate the back button in the browser. The navigation path is supposed to make it easier to navigate through closely related higher-level pages in a given category.
Not all websites require the use of breadcrumbs because sometimes the main menus and basic navigations provide users with all the functions necessary to browse the site.
Breadcrumbs in structured data
Structured data are special tags that mark different types of content on a website. They help Google robots to properly analyze what content can be found on particular subpages of the site. It’s possible to use a data marker and appropriate tags available in Google Search Console to mark many elements of the site such as product prices, availability or customer reviews. If you decide to apply this solution, the algorithm won’t have to analyze the entire website to find related elements as it’ll be able to recognize them on the basis of the structured data. That’s why it’s worth focusing on the schema.org micro-data dictionary analyzed by Google. It also provides information about the subpage hierarchy.
If you want to check whether your breadcrumb navigation has been implemented property, go to: https://search.google.com/structured-data/testing-tool/u/0/?hl=en. Below you can see a screenshot analyzing structured data used on https://www.forum.optymalizacja.com.
Why is it worth implementing breadcrumbs?
The main advantage of breadcrumbs is that they aren’t complicated. Breadcrumb navigation is just a short text written in a plain font, thanks to which it doesn’t take up much space. The small navigation path allows you to create additional content space, moreover, it doesn’t slow down users’ computers or browsers. Implementing breadcrumb navigation isn’t time- or money-consuming and it allows you to effectively encourage users to visit important parts of your website. Consequently, it helps you to increase the user engagement and number of subpages visited during one website session. This contributes to reducing your bounce rate and informs Google robots that given subpages are worthy of attention (and higher positions). That’s why using breadcrumbs can significantly improve your conversion and the effectiveness of performed SEO activities.
The importance of breadcrumbs in SEO and UX
Apart from facilitating website navigation, breadcrumbs can significantly help you create positive experiences of users visiting your website for the first time (UX). The navigation path encourages visitors to browse through new subpages and it ensures that they can easily find the way back. This element is appreciated not only by users but also by Google robots. Google stresses that breadcrumb navigation is one of the factors that can affect the site’s position in search results. When it comes to queries concerning specific subjects (such as recipes), Google ranks websites with breadcrumb navigation on top positions. This may also result from the development of mobile-friendliness. However, it needs to be remembered that the use of breadcrumbs aims mainly at improving the UX.
Breadcrumbs for mobile devices
Mobile websites should be designed in a way that enables users to quickly and easily access necessary information. There are also situations when websites offer too many functionalities and get too complicated for users. Then, it might be necessary to improve the site design and limit breadcrumbs to one link. However, mobile sites often use small navigation paths when the main bars are hidden.
A navigation path is an element that makes it easier for users to browse your page and understand its structure. As it’s been already mentioned, implementing breadcrumb navigation improves the UX and as a consequence leads not only to reduce the bounce rate but also to increasing the time spent by users on the page.