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:

How to Enable Breadcrumbs on Your Website with Rank Math SEO? Rank Math SEO

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

From the above image, you can notice several editing options available under Breadcrumbs settings. Now, let us look at each option one by one.

2.1 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

2.3 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

For the current KB that you’re reading right now, the Homepage Label has been set to “Home”. So the breadcrumb appears as:

Home / Knowledge Base / SEO Suite / How to Enable Breadcrumbs on Your Website with Rank Math SEO

You can use this option to configure where the homepage link will take the visitor to. 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.

2.5 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

For instance, if we add the Prefix Breadcrumb as “You are here: ” then our breadcrumbs would appear as:

You are here: Home / Knowledge Base / SEO Suite / How to Enable Breadcrumbs on Your Website with Rank Math SEO

2.6 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

2.7 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

2.8 404 Label

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

Breadcrumbs - 404 Label

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

When the Hide Post Title option is enabled, our breadcrumb would appear as:

Home / Knowledge Base / SEO Suite

Breadcrumbs - Hide Post Title

If you wish to display the post title in the breadcrumb, but the post title looks lengthier, then in that case you can change the breadcrumbs label alone without making any changes to the title of the post.

To do so, make sure the Hide Post Title option is disabled. Then open the post with the lengthier title and navigate to Rank Math Meta Box > Advanced Tab > Breadcrumb Title, and here you can give a shorter title for your post that would appear only on breadcrumb.

2.10 Show Category

Show Category(s) will show the categories of your post in the breadcrumb. We recommend that you keep this disabled so that your breadcrumb will look small and precise. When the show category(s) option is disabled, our breadcrumbs would appear as:

Home / Knowledge Base / How to Enable Breadcrumbs on Your Website with Rank Math SEO

Breadcrumbs - Show Category(s)

Show Category Is Enabled

But, in case, if your categories are important navigational elements on your website, then enabling this option should be preferred.

When the Show Category(s) option is enabled, the category would be included just before the name of the post. If your post includes multiple categories then the primary category would be used here. In case, if you wish to change the primary category for your post, here is a dedicated tutorial. The breadcrumb would now appear as:

Home / Knowledge Base / SEO Suite / How to Enable Breadcrumbs on Your Website with Rank Math SEO

Now the Show Category(s) option is enabled and we’ve selected a category as the primary category (say “Technical SEO”), but it includes a parent category (say “SEO Suite”), then the breadcrumb will appear as:

Home / Knowledge Base / SEO Suite / Technical SEO / How to Enable Breadcrumbs on Your Website with Rank Math SEO

Changing Primary Taxonomy: If you wish to change the taxonomy used for the breadcrumbs, then you can set the Primary Taxonomy for your post type under WordPress Dashboard > Rank Math > Titles & Meta > Posts.

Changing Breadcrumb Label for Categories: To change the label of any of your categories appearing in breadcrumbs, you can open the category page, and in the Rank Math’s Meta Box, navigate to the Advanced tab and enter the label in the Breadcrumb Title field.

2.11 Hide Taxonomy Name

When you enable this option, Rank Math would remove the taxonomy name from the breadcrumbs of archive pages. The recommended setting is “Off”.

Breadcrumbs - Hide Taxonomy Name

For instance, when the Hide Taxonomy Name option is disabled, the archive page of a term (say “Schema Markup”) associated with a custom taxonomy (say “Custom Categories”) would have a breadcrumb as:

Home / Custom Categories / Schema Markup /

When you enable the Hide Taxonomy Name option, the taxonomy name would now disappear and the archive page of the term would have a breadcrumb as:

Home / Schema Markup /

2.12 Show Blog Page

When you enable this option, your blog page will be included next to the home page in the breadcrumb. Rank Math would include the title of your Blog Page in the breadcrumb next to the Home page (if you’ve configured breadcrumbs to display the Home page).

Rank Math will show the Blog page in the breadcrumbs only on your posts and not to pages or any other custom post types.

Show Blog Page - Breadcrumbs setting

For instance, when the Show Blog Page option is enabled, the breadcrumb for our blog post would appear as:

Home / Blog / Understanding Canonical URLs: The Definitive Guide

Note: The option to Show Blog Page will be visible in your Breadcrumbs settings only if you had set a Posts Page under WordPress Dashboard > Settings > Reading > Your Homepage Displays.

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.

Note: Before adding breadcrumbs to your website, ensure that Rank Math is the only plugin adding the breadcrumbs. In case, if your theme or any other plugin installed on your website is already adding Breadcrumbs, then you may need to disable/remove their Breadcrumbs at first, to avoid any conflicts.

3.1 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 difficult 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

Next, you should add the following code to the appropriate location in your theme’s template file to display the breadcrumbs.

/**
 * Use the following code in your theme template files to display breadcrumbs:
 */
<?php if (function_exists('rank_math_the_breadcrumbs')) rank_math_the_breadcrumbs(); ?>

Note: Depending upon the theme you use, the theme file where you should add the breadcrumbs function would vary. In most themes, it would be either the single.php file or the header.php file. But in case, if you’re unable to figure it out, you can check with your theme developer or reach out to Rank Math’s support team directly from here and we’re available 24×7 to help you out.

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.

3.2 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 then Rank Math will pull the breadcrumb for that specific post/page.

[rank_math_breadcrumb]

3.3 Native Theme Support

Theme authors can ensure that their themes come with native support for Rank Math’s breadcrumbs feature. To register theme support, theme authors should include the following code to their theme’s functions.php file or attach it to the hook 'after_setup_theme'.

/**
 * Register theme support for Rank Math breadcrumbs
 */
add_theme_support( 'rank-math-breadcrumbs' );

Once the theme support for our breadcrumbs feature is registered, include the following code inside the theme at a desirable location to display the breadcrumbs on the front-end.

/**
 * Use the following code in your theme template files to display breadcrumbs:
 */
<?php if (function_exists('rank_math_the_breadcrumbs')) rank_math_the_breadcrumbs(); ?>

When a theme comes with native support for our breadcrumbs feature, end-users don’t have to make changes to their theme’s files, to get the breadcrumbs to show up on the front-end, as the theme already includes the code. It also means that users will not be able to disable the breadcrumbs function under WordPress Dashboard > Rank Math > General Settings > Breadcrumbs.

Only the option to enable/disable the breadcrumbs function will not be available for users, while they can still take advantage of all the other editing options that Rank Math offers for breadcrumbs.

3.4 Adding Breadcrumbs with Elementor PRO

If you’re using the Elementor page builder, you can easily include Rank Math’s Breadcrumbs widget in 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

Note: Rank Math Free users can still make use of Breadcrumbs in Elementor using this shortcode. Simply add this shortcode in the editing screen of the page builder and now you can take advantage of the same styling and customizations that Elementor offers for the Breadcrumbs widget.

Styling Options

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

Typography 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 done with styling the page, click the Update button to save the changes. Following the same method as adding the Breadcrumbs widget to any post/page with the Elementor page builder, you can add breadcrumbs to Elementor templates as well to use it on all your pages.

And, that’s it! If you still have any questions about using our Breadcrumbs feature, feel free to reach our support forum — we’re always here to help.

Still not using Rank Math?

Setup takes less than 5 minutes including the import from your old SEO Plugin!

Know more about the PRO Version

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