Menu
homePrograms

Breadcrumbs menu. Breadcrumbs - what are they? Examples of using bread crumbs

Good navigation is extremely important for a site. And here bread crumbs will come to your aid. Let's see what they are and how to use them.

Breadcrumbs are a type of secondary site navigation that shows a user's location on a website or web application.

Typically, breadcrumbs can be found on large sites, where all pages are organized according to a strict hierarchy. In their simplest form, breadcrumbs are horizontally positioned text links separated by a greater than symbol - ">" . This symbol indicates the level of this page relative to other pages on the site.

When should you use bread crumbs?

In fact, there is not always a need to use this navigation element. But let's look at when you still need to use them.

Use breadcrumb navigation for large websites and websites that have hierarchically organized pages. An excellent scenario is e-commerce sites where a wide variety of products are grouped into logical categories.

You should not use breadcrumbs for single-level websites that have no logical hierarchy or grouping. A great way to determine whether a website would benefit from breadcrumb navigation is to build a sitemap or diagram representing the website's navigation architecture and then analyze whether breadcrumbs will improve a user's ability to navigate within and between categories.

Breadcrumb navigation should be considered an optional feature only and should not replace effective primary navigation menus. This is a handy feature; a secondary navigation scheme that allows users to determine where they are; and an alternative way to navigate your site.

Types of bread crumbs

There are three main types of bread crumbs. Let's take a closer look at them.

1.Location based.

This is probably the most recognizable type of bread crumb. It shows the user where they are in the website hierarchy. This type is typically used for navigation designs that have multiple levels (usually more than two levels). In the example of an online store below, you can see the levels in the hierarchy.

Let's first figure out what it is - breadcrumbs on the site and why they are needed.

Breadcrumbs were originally used to make navigation easier for users. Essentially, this is a block of links at the top of the page that displays the site hierarchy. Those. the user can return, for example, to the previous catalog page in an online store.
Here's a clear example:

The Impact of Breadcrumbs on SEO

Over time, SEO optimizers noticed that this block of links has a positive effect on the promotion of the resource. And this is why it works:

1. Internal linking

According to the hierarchy of almost any site, the lower the level of nesting of a section, the more important it is. Therefore, it is necessary to ensure that the site structure is such that links from deeper pages lead to shallower ones. It's easier to explain with an example.

As you can see in the image, each product links to a category, and each category links to the main page of the site.
Such linking has become a kind of standard in the field of promotion and therefore search engines even began to use it directly in their own results. This is done using Schema markup, but more on that later.

2. Behavioral factors

Several years ago, search engines began to analyze user behavior on the site and, depending on it, place pages in one position or another for queries. As you can imagine, one of these behavioral factors is the number of internal clicks on the site. Breadcrumbs can seriously improve this indicator in some cases.

Schema markup for breadcrumbs

Micro markup allows search engines to more accurately identify breadcrumbs and even add them to their results as a bonus. It will look something like this:

And while breadcrumbs themselves are most often installed by default on websites, micro-markup most often has to be added manually. Therefore, we will write a short instruction on how to implement this.

home

Now let's look at what it is.

The first thing we need to do is wrap each link in a tag and write in the tag itself
itemscope="" itemprop="itemListElement" itemtype="http://schema.org/ListItem"

LINK

This tag remains the default. In it we tell search engines that this is schema markup and the element of this markup is called itemListElement. This construction is used in all references.

home

Accordingly, if we had a second level of nesting, we would have to write content=”2″.

Reading time: 6 minute(s)


Remember the Brothers Grimm fairy tale “Hansel and Gretel”? There they threw bread crumbs on the road to find their way home. Of course, in the fairy tale, the birds pecked them, and they could not return, they ended up with the evil witch. What does this have to do with a fairy tale and an article about Internet marketing? It’s very simple, the term “breadcrumbs” is used by experts. And on the site no one will eat these crumbs; they will show the right path to the visitor.

bread crumbs- This is one of the types of site navigation. The simplest example of this navigation can be seen on a computer. Take a look at the picture:


To go back to the sys(C) section, you don’t have to press the “Back” button several times; you can simply click on the name of the folder itself, and you will find yourself there.

Why do you need such navigation on a website if you can click “Back” a couple of times and end up where you need to be? If you are on an online store website, for example, to go back a few positions, you will waste a lot of time and your search results will most likely not be saved. The browser's navigation tools prove to be awkward.

Below is an example of “breadcrumbs” on the BonPrix website:



Pros of breadcrumbs:

  1. Simplify site navigation for the user.
  2. Search engines rank a site better with navigation.
  3. You will initially correctly link the pages together (internal linking).
  4. Create easy-to-read snippets in search engines. Snippet is text that is used as a description of links in search results.
  5. Create the correct anchor weight for the link.

In this article, you'll learn what you need to pay attention to when creating breadcrumb navigation.

Page weight– this is a conditional value that shows the “significance” of the site.

Static page weight is the number of links on it. The main page of the site will have the greatest weight, since links from all pages of the site lead to the main page.

But it also happens that you are promoted based on competitive requests. In this case, it is better to use not the word “Home”, but the entire phrase or query, for example: Technology > Accessories > Keyboards

2. User behavior

Proper website navigation helps users quickly find the information they need. And from the side of search engines, such a site is ranked better for promoted queries.

Metrics such as browsing depth and user engagement also improve. And this, in turn, has a positive effect not only on site positions, but also on conversion rates.

3. Snippet

Snippet– this is a piece of text that is displayed next to the link in the search results.

Using the Google search engine, you can transmit structured data and improve your site's ranking in search results. Yandex is a little behind Google and does not yet know how to support this type of markup. But Yandex itself creates a navigation chain that can be seen in the search.


Breadcrumbs formatted and unformatted using structured data in Google results:


Google uses three formats for transmitting structured data - JSON-LD, Microdata, RDFa. Microdata and RDFa formats are suitable for breadcrumbs. Below is an example of code formatting in Microdata format:



After completing the code, you need to make sure there are no errors. There is a validator tool from Google for this.



The tool will help you make sure that structured data is processed and displayed correctly.



4. Remember

  • It's good practice not to make the last navigation element a link, for example: home > Blog> Article
  • If you use too many keywords in your navigation chain, you increase the likelihood that your site will be filtered by search engines.
  • Whether or not to implement breadcrumbs depends on what kind of resource you have. If you have a business card site or there are few sections on the site, then you do not need this navigation. But if you have a large online store, you obviously need such a navigation chain.

Breadcrumb navigation is an indispensable and necessary design. Even before launching the site, it is necessary to think through the navigation to the smallest detail. It is also vital for multi-page sites with a complex structure. Take a look at the largest resources and online stores, where a well-thought-out system will allow you to understand all the subtleties of navigation and its features.

“Breadcrumbs” (from the English “breadcrumbs”) is a navigation chain on a website that reflects the path from the main page to the current one. They were first used in file managers like Norton Commander or Volkov Commander and showed the path to the root folder.

Why use this duplicate navigation on the site? How does it affect usability and SEO? How to implement it? Find answers to the most popular questions about breadcrumbs in our new post.

What are breadcrumbs used for?

Back in 1995, Jakob Nielsen formulated 10 usability principles, the first of which was “Visibility of system status.” Its essence is that the user should always know in which part of the site he is. It is to implement this principle that “breadcrumbs” are needed. The famous designer Artemy Lebedev writes in Kovodstvo that duplicate navigation is appropriate when there is logical nesting of content, that is, on almost all information sites. Let us add that the navigation chain is also necessary for online stores and corporate websites.

From a usability point of view, breadcrumbs solve three problems:

  • inform the user about his current location on the site;
  • clearly demonstrate the structure of the resource;
  • allow you to quickly move to a higher nesting level, bypassing the browser’s “Back” button.

In addition to the positive impact on usability, duplicate navigation has an SEO effect:

  • is a natural element of page linking;
  • improves behavioral metrics (time on site and browsing depth) by simplifying navigation;
  • provided that micro-markup is configured, it improves the appearance of the snippet in search, namely, it forms a navigation chain, and increases its clickability (supported only in Google).

What are “breadcrumbs”?

The breadcrumb trail can be organized according to different principles:

    Linear principle. This is the most common option - the full path from the main page to the current one is indicated. An example is in the figure below:

    The following nesting structure is shown here: the main page is “Furniture Center”, then the product catalog page follows, then the “Kitchens” section, then “Kitchen Sets” and, finally, the name of a specific set.

    If the site structure is very complex, there is a stripped-down version of “breadcrumbs”:

    In the Amazon store, “crumbs” begin not with the main page, but with the name of the catalog section. The screenshot shows that the “start of reference” is the “Home & Kitchen” section of the store.

    "Back" principle. The essence of the method is that instead of a navigation chain, a link “To previous page”, “Back to catalog”, etc. is placed, which actually duplicates the browser’s “Back” button. This approach is convenient if the site uses a search function.

    In the screenshot, the “Results” button leads from the product card to a page with search results for the query “Shoes”.

    Combination of the two previous options. In this case, both a linear breadcrumb and a Back button are available. When done correctly, this combination is suitable for pages that users found through the search function on the site. But there is also an unsuccessful execution when the “Back” button is present on all cards, regardless of whether they were searched for through a search or not:

    Attributive principle. Used by online stores and online catalogues. The content and path of the page is formed based on user-specified properties and filters.

    By deleting and adding properties, the user each time creates a unique “path” to the product page.

How to create the right breadcrumbs?

You can create a breadcrumb trail in different ways: using PHP, CSS, plugins for popular CMS WordPress, Joomla! and other engines - you can find a lot of solutions on the Internet. Whichever method you choose, follow these tips:

  • “breadcrumbs” are created primarily for site visitors, for their convenience, so use them when they are really useful; you are not obliged to add them to every site - for example, one-page websites live just fine without breadcrumbs;
  • “breadcrumbs” are not a replacement for the main menu, but only an auxiliary navigation tool;
  • You should not specifically adjust text anchors in navigation links to key phrases; exception - if key phrases fit harmoniously into the navigation logic;

    • if you use linear navigation, write the path to the very end so as not to confuse visitors:

A clear and uncomplicated website structure is what you should strive for when developing and subsequently maintaining it. It is necessary to optimize the structure not only for the convenience of users, but also to avoid problems with its indexing by search robots.

Components of the site structure

The structure of a site is the hierarchy of sections, subsections and pages on which the content posted on it is located. The structure should be clear, convenient and consistent with the type of information that is on the resource.

There are several types of structures, in each of which the elements are arranged in a certain way:

  • Linear structure – sequential presentation of information. The user opens one page after another, gradually becoming familiar with the information presented on them. The standard navigation for such book sites is to go to the main, previous or next pages. A linear structure can have several branches from the main page.
  • Tree structure - in this case, a hierarchy is built in which the user moves from the main page to sections. Subsections can be opened for any section, and their own subdivisions of the next level, as well as final internal pages, can be opened for them.
  • Lattice structure - similar to the previous one, but is a more complex option, when from any section, from any page you can go to any part of the site, to completely different branches.

Most often, a tree structure is found as the most optimal and convenient - it does not complicate the work of searches, if everything is done correctly, and helps to make navigation comfortable and understandable for visitors.

How to optimize the site structure?

So that neither visitors nor search engine bots spend a lot of time searching the site for the necessary information, the structure must be built according to certain rules. You should avoid the most common mistakes that arise when developing a sitemap and how to navigate it.

Home page requirements

The home page is the face of the site and the brand to which it belongs. It is very important to work out every little detail here and make sure that the visitor continues to get acquainted with the site and the information on it. As far as SEO is concerned, the requirements for this element of the structure are as follows:

  • It is necessary to exclude the presence of duplicates of the main page, available at different addresses. To find duplicates, you can enter the main title in quotes in the Yandex or Google search bar.
  • The home page is used as a starting point for navigation, a presentation of the resource with brief information on it. It’s better not to post requests here and not promote her through them.
  • The phone number and address of the organization should be in a visible place (if its activities require the client to be able to come to its location), the name written in text (not a picture or not just a picture). Typically, such information is placed at the top, in the header of the site.
  • The main page should have a convenient navigation directory for moving to other sections and individual pages.
  • Elements such as meta tags should contain the name of the organization. They should be made short, concise, without signs that do not carry any information.

Partition optimization

Sections on the site allow you to divide information into groups corresponding to different areas, topics, uniting homogeneous goods or services.

In sections, it is advisable to start promoting high-frequency queries on relevant topics. They should be included both in the text and in the meta tags and URL.

Even commercial portals should create sections with informational content on the topic of the site to attract more visitors. For example, on the website of a mobile device store you can publish reviews and news about new products coming out on the market.

System sections and sections not intended for visitors should be hidden from indexing by setting a ban on their visibility in “robots.txt”. This does not apply to sections responsible for adaptive design (if adaptive layout was used when creating the site). Periodically, you should monitor whether these sections have been deleted or renamed to update the information in the file.

Working with circular references

Adding links to them on pages raises doubts among SEO specialists. You can leave a circular link in the navigation menu, but using it in the text is not justified and does not bring any effect.

Dynamic site map

Using a dynamic sitemap in XML format can significantly increase the speed and efficiency of resource indexing by search robots. To set up such a map, you can use the All in One SEO Pack plugin.

Controlling the nesting level of pages

A large degree of nesting of pages makes the structure of the site heavier. Pages with a lot of nesting are indexed worse by search engines. To identify highly nested pages, you can use the Xenu Link Sleuth resource.

What are breadcrumbs in SEO?

Breadcrumbs are a navigation element that is displayed on each page and represents a description of the path to a given page from the main page, or a hierarchy of levels that lead from the main page to the one on which the visitor is located. For example: Home/Cars/Toyota/Toyota Land Cruiser 200.

This allows the user to better navigate the site and be able to return to the desired level in the hierarchy at any time.

Use of the copyright symbol

To show that the site is protected from copying, you can install the copyright icon - ©. This is a stylized letter "c" from the English word copyright, which means "copyright".

This symbol is usually placed on the site at the very bottom, in the “footer” element. In order for its use to bring the desired effect, and in the future you can use the fact of its existence to protect your exclusive property rights to the site, it is necessary to formalize it in accordance with the law. The standards for sign design are regulated in the document GOST R 7.0.1-2003 and Article 1271 of the Civil Code of the Russian Federation.

To comply with all requirements, the following information must be placed on the site:

  • The icon itself in the form required by GOST (the Latin letter “c” placed in a circle);
  • Data of the owner of the rights to the object (in this case, the website) - last name, first name, patronymic if it is an individual, and the name indicated as in official registration documents for organizations;
  • The year the site was posted on the Internet.

The correct type of copyright notice: © Kisel LLC, 2000-2017. Everything is important here - even punctuation marks. The date range is indicated if new data and materials appear on the site periodically. If there are no updates, you can only indicate the year the site was posted. Indicating copyright will add credibility to the site and, if it does not scare away scammers, its presence can increase trust in the portal of clients and partners.