Breadcrumbs make it easy for visitors to navigate your website. Enabling breadcrumbs – especially for eCommerce stores – has enormous benefits such as good user experience, reduces the bounce rate, helps the search engines to crawl the website easily, ultimately improving the rankings.
Fortunately, the Rank Math SEO plugin makes it extremely easy to add the Breadcrumb Schema that search engines require to show breadcrumbs in search results. Now let’s take a look at how to enable breadcrumbs with Rank Math:
1 Activate Breadcrumbs
You can activate the breadcrumbs setting in Rank Math from Rank Math > General Settings > Breadcrumbs.
In the Breadcrumbs settings, you can notice only one setting available at the moment, because the Breadcrumbs feature is turned off.
But, once you enable the breadcrumbs function, all the other settings will appear on the screen.
2 Editing Options of Breadcrumbs
From the above image, you can notice several editing options available under Breadcrumbs settings. Now, let us look at each option one by one.
The separator character lets you set a separator character for your breadcrumb items. You can choose one from the different characters available in this list, or you can type your own separator character in the last field.
Show Homepage Link
You can enable this option if you want your homepage to be included in the breadcrumbs. When you enable this option, two new options, ‘Homepage Label‘ and ‘Homepage Link‘ will pop on your screen.
You can use this option to set a label for the homepage of your website. By default, the label is set as Home, but you can type your own label, which would be more relevant to denote your website’s homepage.
You can use this option to configure where will the homepage link will take the visitor. This option is useful if your website has multiple sections like blog, store, etc., and you can enter the link where you want to send your visitor.
You can add a prefix to your breadcrumb path with the help of the Prefix Breadcrumb option. Some of the popular prefix for breadcrumbs include “You are here”, “Navigation”, “Index”, etc
This option lets you set a breadcrumb format for the archive pages.
%s represents the taxonomy, and we recommend that you do not remove it.
Search Result Format
This option lets you set a breadcrumb format for search result pages.
%s represents the search query, and we recommend you not to remove it. Some of the popular formats include “You searched for”, “Here’s what I found for”, etc
With this option, you can set a breadcrumb label for your 404 pages.
Hide Post Title
You can enable this option if you do not want the current post’s title to be included in the breadcrumb. Usually, the title of the page you’re currently viewing is included as the last element to the breadcrumb. When you enable this option, the breadcrumb will not include the post title.
Show Category(s) will show the categories of your post in the breadcrumb. If your current post is part of a child category, then the breadcrumb will include the parent categories as well. We recommend that you keep this disabled so that your breadcrumb will look small and precise.
Hide Taxonomy Name
If your website uses any other taxonomy other than the categories, then you can enable or disable these taxonomy names in your breadcrumbs with this option. The recommended setting is “Off”.
Show Blog Page
When you enable this option your blog page will be included next to the home page in the breadcrumb.
3 Adding Breadcrumbs to Website
Now that you’ve configured breadcrumbs settings, you need to add the breadcrumbs code to your website so that it displays on the front-end. There are a few ways to add the breadcrumbs to your website and we’ll look at them one by one.
Adding Breadcrumbs to Theme Template Files
You can add the Rank Math’s breadcrumbs code to your theme’s template files, and the breadcrumbs will appear on your website’s front-end accordingly. Editing the theme files directly could be tedious for beginners and might cause adverse effects if not handled correctly. Hence, we always recommend using a child theme.
To edit your child theme, navigate to WordPress Dashboard > Appearance > Theme Editor.
In your theme’s template files, add the following code to the appropriate location.
Use the following code in your theme template files to display breadcrumbs:
<?php if (function_exists('rank_math_the_breadcrumbs')) rank_math_the_breadcrumbs(); ?>
Once you have made the changes then click on the Update File button to save your changes. Besides this, if you wish to use a theme that is compatible with Rank Math’s Breadcrumbs feature out of the box, you can refer to our compatibility page here.
Adding Breadcrumbs with Shortcode
You can also add the breadcrumb anywhere you want with the help of a shortcode. Just copy and paste this shortcode to the text editor of any post/page, and the Rank Math will pull the breadcrumb for that specific post/page.
Adding Breadcrumbs with Elementor PRO
If you’re using the Elementor page builder, you can easily include Rank Math’s Breadcrumbs widget to any page or template.
To use breadcrumbs with Elementor, open any page with Elementor page builder, and under the Elements tab, search for the Breadcrumbs widget.
You can drag and drop this Breadcrumbs widget to the editing screen. And Rank Math would automatically populate the Breadcrumbs for the current page.
The Breadcrumbs widget has also got some styling options to change the Typography, Text Color, and Link Color. Now let us go through the styling options available.
When you click the edit icon next to the Typography option, the complete set of styling options related to Typography will be available for you to edit.
The different styling options available under Typography are:
- Family: There are various font families available to choose one from
- Size: To change the size of the font in the breadcrumb
- Weight: You can use this option to change the font weight in the breadcrumb that will make the font look bolder
- Transform: The transform option lets you change the text to uppercase, lowercase, capital letters, or keep it normal
- Style: You can choose from the different style options available like Italic, Oblique or keep the style as normal
- Decoration: You can choose between underline, overline, line-through, or leave it none to decorate your text
- Line Height: This option helps to increase or decrease the line-height
- Letter Spacing: The letter-spacing option lets you change the spacing between two letters
With the help of the Text Color option, you can pick a color for the text from the color picker. And with the Link Color option, you can choose a different color for the normal link and when the visitor hovers the link.
After you’re doing styling the page, click the Update button for the changes to be saved. Like adding the Breadcrumbs widget to any post/page with the Elementor page builder, you can add Breadcrumb to Elementor templates to use it on all your pages.
And, that’s it! If you still have any questions on using our Breadcrumbs feature, feel free to reach our support forum — we’re always here to help.
Was this article helpful?
Still need help?
Submit Your Question
Please give us the details, our support team will get back to you.