This site uses cookies and other tracking technologies to make possible your usage of the website, assist with navigation and your ability to provide feedback, analyse your use of our products and services, assist with our promotional and marketing efforts, and provide better user experience.

By using the website, you agree to our Privacy policy

Accept and continue

Report a bug

Cancel
55
How-to 8 min read September 10, 2019

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

#1

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.
Linear breadcrumbs
#2

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.
Inverse breadcrumbs
#3

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).
Attribute breadcrumbs
#4

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.
Combined breadcrumbs
#5

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:
1
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.
Layout of breadcrumbs
2
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.
breadcrumbs
3
The name of the current page should not be clickable. Apply simple text to avoid circular references that are not appreciated by search systems.
Making breadcrumbs

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 at Serpstat
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
Subscribe to our newsletter
Keep up to date with our latest news, events and blog posts!

Share this article with your friends

Sign In Free Sign Up

You’ve reached your query limit.

Or email
Forgot password?
Or email
Back To Login

Don’t worry! Just fill in your email and we’ll send over your password.

Are you sure?

Awesome!

To complete your registration you need to enter your phone number

Back

We sent confirmation code to your phone number

Your phone Resend code Queries left

Something went wrong.

Contact our support team
Or confirm the registration using the Telegram bot Follow this link
Please pick the project to work on

Personal demonstration

Serpstat is all about saving time, and we want to save yours! One of our specialists will contact you and discuss options going forward.

These may include a personal demonstration, a trial period, comprehensive training articles & webinar recordings, and custom advice from a Serpstat specialist. It is our goal to make you feel comfortable while using Serpstat.

Name

Email

Phone

We are glad of your comment
Upgrade your plan

Upgrade your plan

Export is not available for your account. Please upgrade to Lite or higher to get access to the tool. Learn more

Sign Up Free

Спасибо, мы с вами свяжемся в ближайшее время

Invite
View Editing

E-mail
Message
Optional
E-mail
Message
Optional

You have run out of limits

You have reached the limit for the number of created projects. You cannot create new projects unless you increase the limits or delete existing projects.

I want more limits