1. Home
  2. Knowledge Base
  3. SEO Suite
  4. How to Enable Breadcrumbs on Your Website with Rank Math SEO

How to Enable Breadcrumbs on Your Website with Rank Math SEO

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.

Activate Breadcrumbs

In the Breadcrumbs settings, you can notice only one setting available at the moment, because the Breadcrumbs feature is turned off.

Enable breadcrumbs function

But, once you enable the breadcrumbs function, all the other settings will appear on the screen.

Rank Math Breadcrumbs settings

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.

Separator Character

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.

Breadcrumbs - Separator Character

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.

Breadcrumbs - Show Homepage Link

Homepage Label

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.

Breadcrumbs - Homepage Label

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.

Prefix Breadcrumb

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

Breadcrumbs - Prefix Breadcrumb

Archive Format

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.

Breadcrumbs - Archive Format

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

Breadcrumbs - Search Results Format

404 Label

With this option, you can set a breadcrumb label for your 404 pages.

Breadcrumbs - 404 Label

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.

Breadcrumbs - Hide Post Title

Show Category

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.

Breadcrumbs - Show Category(s)

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”.

Breadcrumbs - Hide Taxonomy Name

Show Blog Page

When you enable this option your blog page will be included next to the home page in the breadcrumb.

Show Blog Page - Breadcrumbs setting

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.

Add Breadcrumbs code to your theme's template file

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.

Elementor - Search for 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.

Rank Math - Breadcrumbs widget for Elementor

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.

Rank Math Breadcrumbs - Elementor - styling options

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.

Edit Breadcrumbs Typography

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.

Edit Breadcrumbs Link Color

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.

Open Ticket

Related Articles