while browsing a website, you felt distracted or unable to determine which page you were on; Until you go to the first page. In this case, you will have to return again to the home page and then start browsing the sections on the site. You will also be vulnerable to getting lost in the future.
As a website owner, you can solve this problem by using what is known as Breadcrumb to improve the user experience on your website and improve the site’s navigability. Through this article, we will learn about Breadcrumb, its role in improving the user experience, and how to add it to the WordPress site.
Breadcrumb concept
Breadcrumbs are links that allow users to identify the page they are on now, as well as to return to previous pages or sections.
Therefore, it has a close relationship with improving the user experience and also works on improving search engines by increasing search engines’ understanding of the pages and sections of the site. They are generated in JSON-LD, RDFa, or Microdata. You will always find it in the upper right part of the page, as this example of one of the articles published on the WordPress website in Arabic:
It is also used in Windows, to facilitate file browsing:
The role of breadcrumb in improving the user experience
There is no doubt that there are many benefits to the user experience by adding breadcrumbs to your site. In many cases, the user is busy browsing the site sections and articles. But there will come a moment when he will want to get to know the section he is browsing.
Perhaps he wants to focus on the content of this section or wants to return to a specific category. In this case, you will find the navigation path at the top of the screen, displaying all the sections. In addition, it is similar to an internal link, as it is possible to click on it to facilitate the process of navigating within the site. This will reduce the bounce rate.
In addition to improving the user experience, it works to familiarize search engines with the pages and sections within the site. This will increase the site’s ranking by understanding the site’s content better. As for displaying results, Google previously relied on displaying links on the results page, but now it has switched to displaying navigation paths.
Types of breadcrumb
Breadcrumb paths have many types that vary depending on the type of site and the content it provides. A blog is certainly not like an online store. Therefore, we find that there are different types that improve the user experience in various aspects. These types are:
Hierarchical breadcrumbs
This type is one of the most common types of breadcrumbs, and is used in blogs more than commercial websites, as it allows users to know where they are on the site and the sections they have passed through, such as WordPress in Arabic < Selected Articles < How to add breadcrumbs to your site. If you now look at the top of the page, you will find it located on the upper right side of the page.
Attribute-based breadcrumbs
In online stores, there will be no point in reminding the user of the sections and pages they have passed through; Because he does not want the same section or page, but rather he is looking for a specific product according to the specifications he wants, whether according to size, color, gender, etc. To make it easier, attribute-based breadcrumbs are used.
Add breadcrumbs to your site
If you want to add Breadcrumb to your site. It is easy and does not require these steps or complicated details. There are many add-ons that allow you to do this. Especially adding Yoast SEO and Rank Math. So, in this article we will learn how to add breadcrumbs through both plugins:
Add breadcrumbs using Yoast SEO plugin
Yoast SEO is a search engine optimization plugin that comes with many features and functions, including adding breadcrumbs. If the plugin is installed on your site, you can directly start adding breadcrumbs.
If it is not installed, you must go to the WordPress control panel, then click on Plugins > Add New and enter the name of the plugin in the search field. It will appear at the bottom, click Install and then Activate.
You may be interested in: Yoast SEO explained to improve your site’s SEO (a comprehensive guide)
After installing the add-on, copy the following code and paste it:
- In the single.php file if you want to show the navigation path on articles.
- In the page.php file if you prefer to add the navigation path to the pages.
- Or a header.php file to add to the entire site.
This is done by clicking on Appearance, then Template Editor, and selecting the file to which you want to add the code. In this article, I will add it to the header.php file so that it appears throughout the site. After that paste it at the bottom of the file and click Update File.
Now, you have to go to the Yoast SEO add-on by clicking on the SEO option on the right menu of the screen. Click Search Appearance. From the top menu select On Breadcrumbs.
Scroll down and toggle Enable Breadcrumbs for your template to On. Click Save Changes.
After that, the navigation bar will be added to your site, looking like this:
You can customize the navigation path very simply. All you have to do is go to the Yoast SEO settings through the previous steps, and then scroll down, and you will find a group of settings represented in:
- Breadcrumb Separator : Through this option, you will be able to specify the shape of the separator that separates sections, categories, or articles.
- Anchor text : This is the text that refers to the home page so that you can select the text you want instead of the keyword.
- Breadcrumb Prefix : This option enables you to add text before the home page in the breadcrumb.
- Breadcrumb prefix for archive : Provides the same functionality as the previous option, but for the archive.
- Search page breadcrumb prefix : It also enables you to prefix search paths.
- 404 Error Page Navigation Path : Adds paths to error pages.
- Option to make the font bold for the last page : to control the font width of the last section or page.
- Categories to be shown in the navigation path : From here you can specify the articles that will be shown in the navigation bar, whether according to categories, tags, or article structure.
- Content type archive to show in category breadcrumbs : Specifies tags, categories, and content structure options to be shown in the breadcrumb.
After you finish customizing the navigation path, do not forget to click on the Save Changes option below.
Add breadcrumbs using RankMath
The Rank Math plugin also allows you to add breadcrumbs, and in order to do that you will have to install the plugin by going to the WordPress control panel and then clicking on: Plugins > Add New and enter the name of the plugin in the search field, then install and activate it.
After installing the add-on, you must complete the setup steps, then go to the add-on settings by clicking on General Settings and then click on the Breadcrumb option.
In the window in the middle, you must toggle the Enable breadcrumb function option.
You’ll then see a bunch of settings, scroll down and click Save Changes
After that, the Breadcrumb will appear on your website as follows
The add-on provides you with a set of customization options, which are:
- Separator Character : Allows you to specify the shape of the line separating breadcrumb elements.
- Show Homepage Link : This option is for adding the homepage link to the breadcrumb.
- Homepage Label : To change the home page text from Home to any name you want.
- Homepage Link : To specify the home page link.
- Prefix Breadcrumb : Adds a prefix to the breadcrumb.
- Search Result Format : Specifies the breadcrumb format for searches.
- 404 Label : To customize the breadcrumb of missing pages.
- Hide Post Title : To hide the article title from the breadcrumb.
- Show Category : To show categories of articles or pages.
- Hide Taxonomy Name : To show the taxonomy name on the navigation path.
Note : You can use this code rank_math_breadcrumb to add the breadcrumb to anywhere you want on the site by adding it to the component editor.
It may be useful to you: A comprehensive explanation of adding RankMath | Rank math SEO
Tips for adding a breadcrumb path to your site
Yes, the navigation path is a strong contributor to the process of improving the user experience, but it is not in all cases appropriate and there are some errors that make it lose its effectiveness, including:
Breadcrumbs should be used if it really benefits the user
There are some sites that have a lot of pages, sections, and articles in which case it would be helpful to add a breadcrumb. At the same time, there are sites that do not contain a large number of pages, perhaps two or three pages, and in this case it will not benefit the user.
The breadcrumb doesn’t have to be large
When adding the navigation path, it must be medium or small in size compared to the main navigation bar on the site, so as not to mislead visitors into thinking that it is the primary navigation bar, and in addition to improving the user experience and displaying the content without confusing them.
The navigation path should be hierarchical
The navigation bar must be read from right to left if the site is in Arabic, but if it is in English, the opposite is true. It begins with the home page and ends with the user’s current page.
Finally, breadcrumbs have become very important for user experience and also for search engines. Google added a dedicated section to it on Webmaster Tools.
