What are the breadcrumbs and a few tips about how to show them in your pages

October 4. 2019

How can a word such as breadcrumbs have anything to do with your website and landing pages? But have you ever been told the Hensel and Gretel fairytale when you were a child? Do you remember how they used breadcrumbs to mark the path they were taking so that they could find their way back home? If you have heard about the story, then it will be easier for you to understand what are the breadcrumbs we will be talking about today. And once you learn the meaning behind the term, it won’t be as hard to incorporate them in your pages. As WordPress experts, we are here to share our knowledge.

First things first – what are the breadcrumbs?

Breadcrumb navigation is a useful way for your website’s visitors to visualize their location on your website and it makes it easier for them to find high-impact landing pages. It makes it simpler for your readers to move around your website, which is especially useful if your website has a complex structure. Taking into account the fact that breadcrumbs take up only one line in design, it’s clear that their contribution to your website can be immense.

Usually, the breadcrumb navigation bar appears as text links which are horizontal. As such, it helps users find answers to many questions, such as what position are they on considering the entire site, how to find different sections and pages, and which products/services might be of interest for them (this is especially true if you have an online store on your WP website or have an e-commerce site.)

To give you an example of how this works, imagine typing in the name of a book on Amazon. You are not completely satisfied with the result you got, but instead of closing the page, you can follow the link to another book or entire genre which is offered in the breadcrumbs. This way, you can explore related items by simply following the suggestions given in the breadcrumbs. Knowing what are the breadcrumbs isn’t enough – not if you don’t know the three types which exist.

The three types of breadcrumbs

• Location-based breadcrumbs. These breadcrumbs are by far the most common ones. They are also called hierarchy-based breadcrumbs since their purpose is to represent the structure of the page, as well as help users understand your site’s hierarchy so that they could navigate it with added ease.
• Attribute-based breadcrumbs. These breadcrumbs serve as a link between different products by explaining their relationship. They will show results based on the list of attributes that a person selects. This happens when you use filters on a website, for example.
• History-based breadcrumbs. These breadcrumbs are by far the least popular ones as their purpose and function can be replaced by clicking the ‘Back’ button. Their purpose is to show you the path you’ve taken from the moment you opened the site.

Know that it’s not so rare to see websites that combine two or more types of breadcrumbs. This is a practice that even the most successful companies that have WP websites often follow. Okay, now you are thoroughly familiar with the notion of breadcrumbs. It’s the right time for a few good tips about how you can and should show them in your pages.

Is there a need for you to use breadcrumbs?

At the beginning of the text, we posed a very simple question – what are the breadcrumbs? Now we know the answer, but some people might not be sure whether they absolutely need them. Let us put it this way – if your site is simple and without a complex hierarchy, it makes no sense for you to use breadcrumbs. Why would you need them if all your site contains is the homepage, contact us page and a few landing pages? Breadcrumbs are also unnecessary if you have lower-level pages that can be accessed from different landing pages. You should always keep it in mind that the goal of breadcrumbs is to help your users – not confuse them.

Breadcrumbs shouldn’t be too obvious

You should always keep in mind the fact that breadcrumb navigation is there to help your users. Therefore, it shouldn’t be noticeable unless a user is looking for it. That’s why you should never add any unnecessary text in your breadcrumb navigation. That would just create a cluttered look which is the complete opposite of what you are aiming for. You want to achieve a clean and attractive look.

A good design is also mandatory

Were you to follow the traditional breadcrumb path, which looks something like this Home > About Us > Careers, you could be making either a good or a bad decision – it depends on your site. But there is absolutely no need to follow the traditional design if you think another one will better suit your website’s style. You can use different symbols, different text, different colors. You just have to choose!

Watch the size of breadcrumbs

Usually, websites have a main navigation bar and breadcrumbs. And one of the biggest mistakes website owners make is making the breadcrumbs as prominent as the main navigation bar. That’s why it’s very important to watch not only the design and look of the breadcrumbs but also their size. You have to remember that modesty is the key here!

How can you add this navigation tool to your WordPress website?

• Yoast SEO Plugin.

It might sound like adding breadcrumbs to your website will be a very difficult thing to do. But that’s not usually the case. For starters, all of you who are already using the Yoast SEO plugin needn’t worry about a thing – the breadcrumbs functionality comes with this super useful plugin. Besides, once people opt for this navigation tool, they usually add it through Yoast. It’s one of the more preferable methods out there because it brings a load of different functionality options, all of which you can benefit from greatly!

To add breadcrumb functionality through Yoast, the first thing you need to do is install and activate the plugin. Then proceed to add the breadcrumbs code snippet to your theme and then configure breadcrumbs in the plugin settings. Just toggle the ‘enabled’ option and configure the settings and appearance according to your needs. As simple as that.

• Breadcrumb NavXT.

There is another great yet simple plugin that can be used for adding breadcrumbs – Breadcrumb NavXT. The first step is, of course, installation and activation. But to make this navigation tool appear on your website, you can use the built-in widget in the widget settings. Go to the Dashboard and then to Appearance > Widgets. Drag and drop the widget to the widget area you choose and update the settings.

And why exactly should you choose Breadcrumb NavXT? Because it has some advanced options for configuration. You can customize an entire template for different taxonomies, and there’s almost no telling what else you can do. And, of course, because it’s super simple to install and activate which is always a plus.

Have you learned everything you needed to know?

As long as you remember what are the breadcrumbs and what’s their purpose, you are ready to incorporate them into your website. Just be careful! The way you show them in your pages matter as you don’t want them to be too obvious or poorly-designed. Instead, feel free to be creative and fit them on your website in a way that will look nice and allow your visitors to have an easier time maneuvering your website. Good luck!