Bread-crumbs system – are a kind of alternative navigation. It indicates the location of the user on the resource in general or on a separate section of the site.
In the predominantly case, crumbs are a small menu located at the top of the page and are used as navigational aid. They indicate the sequence of movement from the current point of residence of the visitor to the home page or the beginning of the section.
The title is taken from the German story of Hansel and Gretel, in which both children throw crumbs along the way to find their way home. As in history, resource breadcrumbs help visitors track their way back to their original entry point.
On resources that have many pages, categories and sections, navigation using breadcrumbs significantly increases the ease of navigation for users.
When it comes to UX, breadcrumbs reduce the number of clicks a visitor needs to make to navigate to another part of the site. That is, they improve the accessibility of sections and categories, and, accordingly, increase the speed of movement through them. This gives a positive user experience, which means that the likelihood of the visitor returning to the resource increases.
Such menus are also an effective visual solution that indicates the exact location of users of the resource hierarchy, which makes them a relevant source of contextual information for targeted pages. That is, a person immediately understands where he is and which section he can go to.
You can usually find crumbs on resources that have a large amount of content organized in a hierarchical manner. You also see them on sites that have more than one step, where they function like a progress bar.
In their simplest form, breadcrumbs are horizontal text links separated by a greater than symbol (>); The symbol indicates the level of this page in relation to the links to the page next to it.
They are hierarchical (or location-based) menus. These are typical breadcrumbs that you can find on blogs or sites with a simple hierarchical structure.
Here's an example from Amazon:
This type of crumbs is based on attributes. These breadcrumbs are used when the product has many parameters and the breadcrumb trail reflects this to make navigation easier.
Here's an example of an e-commerce site:
Note that breadcrumbs help users select different product attributes without leaving the current page.
The breadcrumb path is built based on the pages visited by the user. This is not a good SEO web design practice and is not used very often.
In this case, we are talking about an additional nested submenu. This is very convenient for the user, since when clicked, he can go to related categories.
First of all, breadcrumbs are needed by resources with a large number of sections. A typical example is e-commerce sites, where a wide variety of products are grouped into logical categories. On the other hand, the more navigation elements on the site, the better the user response.
Even if your project is ten pages in three sections, it's still better to add crumbs to improve visitor experience and search engine response.
A great way to determine if a website will benefit from breadcrumb navigation is to create a sitemap or diagram that represents the navigation architecture, and then analyze if breadcrumbs will improve the user's ability to navigate within and between categories.
There are three main groups of factors that are influenced by bread crumbs:
time spent by visitors on the site;
percentage of returning visitors;
increasing the issuance rating.
Improving the performance of any of them contributes to the growth of the resource, and therefore leads to an increase in your sales or brand awareness.
Google and Yandex emphasize the importance of breadcrumbs in all their SEO documents and guides.
The reason is simple: Breadcrumb trails are made up of words, most often of key words, and they have something to offer both search engine robots and users. Search engines use them to better understand how your resource is arranged, which significantly increases the frequency of robot visits and updating positions in the search results.
As they say in habr: feed your googly-googly bread crumbs and they will come back to you again and again.
Crumbs are an essential element of an SEO friendly website for several reasons:
They make it easier to navigate - this is the main role of breadcrumbs and that's why users love them.
They encourage people to visit more pages of the website before they leave, and in this way they reduce the bounce rate.
They are great for additional keywords in SEO.
There are two main reasons why breadcrumbs are good for optimization and ranking.
First, they help search robots at the stage of crawling and indexing. Crawling robots can identify breadcrumbs and use their markup structure to gather additional information about a web page and resource.
Secondly, Google not only displays the permalink to the page, but also displays information about the crumbs in the search results.
For example, a permalink to the page below: https://www.ukraine.com.ua/ but since there are SEO-optimized crumbs there, they show navigation subsections in the results, giving users a way to know ahead of time where they'll go.
If you choose to keep the breadcrumbs visible on mobile devices, make sure the font size is large enough for the links to be easy to click. It is common practice to either hide the crumbs on mobile phones or make them look like buttons.
Here's an example of a mobile crumb:
There are several guidelines you can apply to optimize your breadcrumbs.
Make sure breadcrumbs are enabled and visible to users. Many web designers tend to hide traces of crumbs because they feel that the lists in menus and submenus are inappropriate.
It is not always so. Take a look at the first example above and notice how useful a breadcrumb chain is. At the same time, the categories are clear, and the design is successfully implemented and fits well with the color scheme of the resource.
To improve visibility, you should register the layout of the crumbs in your resource. The reason breadcrumbs appear along with URLs in Google search results is because the website has breadcrumbs schema markup enabled and the robot fills in it in the SERP.
What is schema markup? It's a way to highlight specific areas of your website to search engine crawlers so they can better understand how the page works.
By injecting the appropriate code elements into your HTML pages (this is called structured data), you will provide search engines with more relevant information about the sections and categories of your resource.
Well-formatted crumbs improve the readings associated with getting menu snippets in SERPs.
Here's how to add a crumb outline to your site:
There is a corresponding scheme for adding bread crumbs. It has the following required properties:
Element - The page URL for a specific element.
Name - the name of the crumb.
Position - the position of this element in the crumb track.
This is what the code for a bookstore looks like:
Crumbs: Books – Author - Anna Leakey – Servants of Justice
Rich Snippets (synonymous with rich results) are regular Google SERPs displaying structural markup options. This additional data is usually taken from information received by the robot from the HTML code of the page. The most popular varieties of Rich Snippet include analytics, ratings, recipes, recommendations, and events.
Classic search results from Google or Yandex display three categories of data:
This is a typical "snippet". Rich Snippets can be obtained if you take a regular snippet and add micro-markup to it. In this case, not only crumbs in the menu are used, but also the markup of the rating and the number of votes.
Here is an example of "rich results":
Even at first glance, results with asterisks and numbers are more appealing than regular search results – and this leads to a higher CTR (number of clicks).
The most popular for this CMS is the Yoast optimization plugin. It has built-in support for breadcrumbs by the developers. Once activated on your website, breadcrumbs can be customized by going to the SEARCH APPEARANCE section > BREADCRUMBS.
As you can see above, you can customize a number of metrics related to the display of breadcrumbs.
The corresponding schema information is automatically added to all your web pages. For this, Genesis themes (WordPress) are used - themes based on the Genesis plugin.
When you use a different CMS instead of WordPress or use a different theme, it is best to first check if the breadcrumb scheme is activated on your site. Go to the Structured Data Test Plugin and enter the URL of one of the pages that have breadcrumbs enabled.
If the requests to show additional information are OK, you will see results with 0 errors and 0 warnings on the right.
In this case, the test shows the correctness of the information output.
If the test returns errors, warnings, or you do not see the breadcrumb list item, then the structured data for the breadcrumbs was entered incorrectly or is not supported by your CMS. The best way to fix this is to manually enter the required code into all valid HTML pages.
In conclusion, we can say that the trend to use breadcrumbs is firmly entrenched in almost all types of resources. The only exceptions are Landing Pages (landing pages), on which relevant information is placed in full.
We provide high-quality and inexpensive SSD hosting from 1$, VPS on SSD from 12$, Cloud (cloud) hosting from 3$, cloud VPS from 6$... Dedicated server or dedicated server.
Our 24/7 technical support will help you resolve any questions you may have.
We take care of our customers 24/7/365.