– 8 min read

How to create good breadcrumbs and add them to a website

A web resource that has an inconvenient navigation or resetting filters while searching is the ideal client provider for competitor sites. Let us sort out the ways to improve navigation quality and increase site's position in search results with the help of "breadcrumbs".

What is a breadcrumb navigation

Breadcrumb trail is a type of site navigation. It makes a resource convenient and allows a one-click transfer to the parent page. Breadcrumb navigation is a chain of actions that a user takes starting from the main page and proceeding to the currently viewed one.

Generally, a navigation panel is implied in sites that contain three or more levels of nesting. Middle-sized blogs and online business cards that contain only several pages do not require breadcrumbs; although the decision depends on the peculiarities of a certain site and the targets it aims.

Breadcrumbs allow users to understand their recent location on a website clearly and make it easy to return to one of the previously viewed categories. Using breadcrumbs for interlinking increases the level of navigation and inner optimization of your site.

High-quality breadcrumbs fully match site design and make all page names clickable except the recently viewed one.

Types of breadcrumbs

Location-based breadcrumbs

This type traces a user's path from the homepage to the current one. Navigation is included into the description which reveals the site structure in the search results. This is the most frequently used kind of crumbs that everybody knows.

Use of location-based crumbs is especially convenient while viewing a catalog: they allow taking a step back from a product card to bigger categories and proceeding to browse. This approach helps to keep potential clients on your site and to ensure a deep site examination. These advantages improve behavior factors and result in high positions in search results.

Backward-pointed breadcrumbs

This type of crumbs is actually a "Back to" button which is a more convenient and differentiated copy of a similar browser function allowing users to return to the previously visited page.

This button goes well for online shop owners and multi-filter sites. Clicking "Back" button usually resets the applied filters that oblige to go through filter selection again. As a result, a client-to-be may prefer a more convenient website. The"Back" button should be implied to solve this problem and provide an opportunity to step back.

Attribute-based breadcrumbs

Attribute-based crumbs are formed using tags, categories, and subsections that may classify a page. This kind is generally applied to internet stores with a wide range of products (giving a possibility to pick all ballpens of a certain color or brand) and information websites (allowing filtering data by a person's name, country or thematic area).

Combined breadcrumbs

Baymard Institute that profoundly studies web-usability delivered a special research. The conclusion is as follows: In order to make your site more convenient and increase behavior factors of internet shops users, it is recommended to use a combination of at least two kinds of breadcrumbs. UX-designers analyzed 50 major internet shops to find out that 45% of sites imply only one type of crumbs, and 23% of shops do not use any breadcrumb navigation at all which actually means they are losing potential clients.

Combined breadcrumbs are undeniably useful because every type of crumbs has a certain function: one aims site structure and another one - browsing history. Thus, combined, they provide convenient navigation and make users happy which brings the site to the TOP and guarantees good sales.

Path-based breadcrumbs

This navigation type traces a sequence of previously visited pages. It works well while surfing a resource for a long time (saving a list of viewed pages preserved in the original order). Still, it is none of any use in case a user is transferred from search results to a certain web page (no history available).

Important points to remember while creating breadcrumbs

Remember that breadcrumbs are user-focused. They are targeted for making site navigation easier. Here is a list of criteria you should refer to while creating crumbs:

Navigation panel looks best on the top of a webpage. It should perfectly match site design and be a part of it. Develop the appearance of the navigation panel accordingly.

Do not imply crumbs to the main page as it is the starting point of site structure. In addition, circular references that actually transfer a user to the same page influence site arrangement negatively.

The name of the current page should not be clickable. Apply simple text to avoid circular references that are not appreciated by search systems.

How to create breadcrumbs in WordPress

There are several ways to create breadcrumbs available for CMS users: code editing, plugin use, and intuitive setup using internal functionality. Let us overview breadcrumbs setup for WordPress.

This system of content management requires manual implementation of breadcrumbs or plugin installation.

Breadcrumb NavXT is one of the most convenient plugins which can be downloaded in WordPress administration panel. To make it function you should write in the plugin code into the required WordPress templates:

<div class="breadcrumb"> 
<?php 
if(function_exists('bcn_display')) 
{ 
bcn_display(); 
} 
?> 
</div>

Proceed with managing plugin parameters in settings. "General Settings" tab allows changing separator sign, adding a link to the main page and the current page or deleting it, formatting panels using templates.

Article templates and static pages samples can be managed in "Posts and pages" tab. In addition, here you can manage the hierarchy in details. Thematic area, tag, and entry format settings are available in "Taxonomies" section.

Another option is to imply HTML-breadcrumbs that do not require any special plugins. The major advantage of this method is a minimum overhead, shorter code size and an opportunity to adjust navigation panel for the tariffs that do not include plugin use.

This variant is ideal for small and middle-sized sites; however, it is not quite suitable to write in breadcrumbs manually for major resources. The reason for this relies on rather complicated and hardly-visualized coding; codes that can be found on the Internet may be out-of-date and incorrect.

Conclusion

Breadcrumbs navigation is not compulsory, still highly useful and convenient. Increased usability has a significantly positive influence on behaviour factors and facilitates site promotion. Breadcrumb trail is essential for the sites that contain three or more levels of nesting. Microdata allows navigation panel implementation into Google search result.

Recommendations:

● use location-based and backward-pointed breadcrumbs;
● ensure perfect matching of the navigation panel and site design;
● use simple text instead of a link for the mainpage;
● avoid use of breadcrumbs on the homepage.

Create breadcrumbs yourself or use special plugins. If you use CMS, the second variant is more preferable as managing WordPress without plugin requires profound knowledge.

This article is a part of Serpstat's Checklist tool

Checklist is a ready-to-do list that helps to keep reporting of the work progress on a specific project. The tool contains templates with an extensive list of project development parameters where you can also add your own items and plans.

Try Checklist now

Learn how to get the most out of Serpstat

Want to get a personal demo, trial period or bunch of successful use cases?

Send a request and our expert will contact you ;)

Rate the article on a five-point scale

The article has already been rated by 0 people on average out of 5

Found an error? Select it and press Ctrl + Enter to tell us