How to Easily Add Breadcrumb Navigation in WordPress

How to Easily Add Breadcrumb Navigation in WordPress

Do you want to know how to easily add breadcrumb navigation in WordPress?

Adding breadcrumb navigation on your website will help both users and search engines to better navigate your site. It also offers other SEO benefits like lower bounce rates, more clicks from search results and improved rankings.

In this post, we’ll show you how to easily add breadcrumb navigation in WordPress using our Breadcrumbs feature. We’ll also cover the benefits of adding breadcrumbs to your site and how to customize them. 

Since this is a comprehensive post, feel free to use these quick links to jump straight to the section you want:

What Is Breadcrumb Navigation?

Breadcrumbs navigation, also called breadcrumb trail navigation, is a form of second navigation that can be added to your website. It helps users to know where they are on your site and easily retrace their steps back to the homepage.

Here’s an example of breadcrumb navigation:

Example of breadcrumb navigation

You can quickly see that you’re visiting a blog post in the “WP Tutorial” category on this website. And you can easily navigate back to the main blog page or homepage.

Benefits of Adding Breadcrumbs to Your Site

There are 2 main benefits to using breadcrumbs on your WordPress site, which are:

  1. Improved user experience
  2. SEO (Search Engine Optimization) boost

Let’s dig in a bit deeper into these 2 factors to better explain how they relate to using breadcrumbs on your website.

1. Breadcrumbs Improve the User Experience

You’ve probably already heard the story of Hansel and Gretel and how they used breadcrumbs to retrace their steps and get back home, which is basically how users and search engines use them as well.

In other words, breadcrumbs offer your users an alternative way of browsing your website and get back to the homepage, which improves the overall user experience.

2. Breadcrumbs Boost Your SEO

Breadcrumbs also help search engines to better navigate your website and understand how it is structured.

Adding breadcrumb navigation to your site can boost your SEO for the following reasons:

  • Lower Bounce Rate: Breadcrumbs can lower your bounce rate since they help users to stay longer on your website. For example, instead of navigating back to the search results page, they can retrace their steps back to the homepage to find more information. 
  • Increased CTR (Click-Through-Rate): Since Google may show a breadcrumb navigation trail in its search results, it’ll entice more people to click through to your website. They can easily see what your page is about straight from the search results.
  • Improved SEO Rankings: Higher click-through rates and lower bounce rates correlates with improved rankings in search engines. The more people who click through to your website and the longer they stay on it, the more Google will favor your site in search results. It’ll see that your site is providing useful information.

Now that you know what breadcrumbs are and how they can boost your SEO, we’ll show you how to easily add them to your site using the best SEO plugin for WordPress, All in One SEO (AIOSEO).

Easily Add Breadcrumb Navigation in WordPress

The best WordPress SEO plugin, All in One SEO

With AIOSEO’s breadcrumbs feature, you can add and display a WordPress breadcrumb navigation on your website in seconds. All you need to do is make sure it’s enabled and add a code snippet or shortcode to your site depending on where you want to show the breadcrumbs navigation. 

Let’s start with showing you how to add breadcrumbs using a WordPress shortcode.

Adding Breadcrumbs Using a WordPress Shortcode

To get started, you first need to install and activate AIOSEO on your WordPress website. All in One SEO is a complete WordPress SEO plugin and comes with many powerful SEO tools and features

With that said, If you’ve never installed a plugin before, please visit WPBeginner’s guide on how to install a WordPress plugin.

Once you’ve installed AIOSEO, you navigate to the All in One SEO menu » General Settings, and click on the Breadcrumbs tab.

Breadcrumbs settings in All in One SEO

Here you need to check so that the Enable Breadcrumbs button is set to blue, and you’re good to go.

Next, click on the Shortcode icon and copy the AIOSEO breadcrumbs shortcode underneath it: 

Adding breadcrumb navigation using a wordpress shortcode in All in One SEO

Then, navigate to the post or page you’re editing on your website. In this example, we’re going to use the WordPress block editor to add the breadcrumbs shortcode. 

Simply paste in the AIOSEO breadcrumbs shortcode in your post or page and click on the “Update” button.

Adding breadcrumbs using an AIOSEO shortcode in WordPress block editor

When previewing your post or page, you can see that the breadcrumb navigation is added.

Example of breadcrumb navigation when using a WordPress shortcode

As simple as that!

Adding Breadcrumbs Using a Gutenberg Block

You can also add your breadcrumb navigation using a preinstalled AIOSEO Breadcrumbs Gutenberg Block

To get started, go to the post or page you’re editing and click on the plus sign to create a new block. Next, use the search screen to search for “breadcrumbs” and the AIOSEO – Breadcrumbs block will appear.

Adding breadcrumb navigation using an AIOSEO Gutenberg block

Simply click on it, and it’ll get added to your post or page. 

That’s it!

Adding Breadcrumbs Site-Wide Using a PHP Code

You can easily add breadcrumbs site-wide using a PHP code snippet. 

Adding breadcrumbs site-wide using a PHP code in All in One SEO

All you need to do is copy the PHP code and paste it in your theme editor, and the breadcrumbs navigation will be displayed on all of your pages. 

Note: Remember to always do a backup before editing any of your theme files.

Go to Appearance in your WordPress Settings and click on the Theme Editor tab.

Adding a breadcrumb PHP code snippet to the header.php file in WordPress

Next, go to the header.php file in Theme Files, and paste in the PHP code snippet after the </head> mark. 

Now save your settings, and that’s it!

Once your header.php file is updated, the breadcrumb navigation will be added to all your pages.

Like this:

Example of site-wide breadcrumb navigation

Looks good, right?!

Adding Breadcrumbs Using a Widget

To add breadcrumbs to your site using the widget option, you need to go to Appearance » Widgets. And if your theme supports widget areas, you’ll see them on the right-hand side.

On the left-hand side, you’ll see a list of available widgets. Click on the AIOSEO – Breadcrumbs widget, and drag and drop it into the widget area where you want to place it.

Adding breadcrumbs using a widget in WordPress

For example, if you drag it to the Footer widget area, it’ll be displayed in your website’s footer. 

Adding breadcrumbs to the website footer using a widget

Like this:

Example of breadcrumb navigation in website footer

Now that you know how to add breadcrumbs navigation on your WordPress website, we’ll show you how to customize how they’ll look next. 

Customizing Your Breadcrumbs 

AIOSEO has made it super easy to customize your breadcrumb navigation. Let’s start by showing you how to change the breadcrumbs separator.

Changing the Breadcrumbs Separator

To get started, scroll down to the Breadcrumbs Settings, and you’ll first see a Preview section of your breadcrumbs navigation. Scroll down to the Separator setting and choose the one you want to use for your navigation.

Changing the breadcrumbs separator

To view all available separators, just click on the Show More link.

Adding or Removing Your Homepage Link

You can choose to add or remove your homepage link from your breadcrumb navigation by switching the Homepage Link button on or off. 

Adding or removing your breadcrumbs homepage link in All in One SEO

You can also add your own Homepage label. Simply enter the text of your choice straight into the field.

Adding a Prefix Before Your Breadcrumb Navigation

If you’d like to add a prefix before your breadcrumb navigation like “You are here”, “Navigation”, or “Index”, you can easily do that in the Breadcrumb Prefix setting.

Adding a prefix before your breadcrumb navigation in All in One SEO

Simply enter your own text into the field. This helps your website visitors to better see what page they’re viewing within your website.

Displaying Your Blog Page in the Breadcrumb Navigation

You have the option to also show your blog page in the breadcrumb navigation. This gives you another chance to promote your blog within your website. 

That way, users who enter your site organically through one of your posts can click on your main blog page and quickly get an overview of all of your blog posts. 

To show your blog page, you first need to set a post page for your website. So start by navigating to the WordPress Settings » Reading. Then, in the Posts page setting, you simply choose your post page. 

Setting a post page in WordPress

Don’t forget to save your settings when you’re finished.

And like magic, your blog page will show up in the breadcrumb navigation. 

Example of blog page in breadcrumb navigation

Setting Your Archive Format

In the Archive Format setting, you can change the label for your archives page.

Setting breadcrumbs archive format in All in One SEO

Simply enter the text of your choice before the default Post Type Name smart tag.  

Just like in archive format, you can use the search results label as is or customize it with something like “You searched for” or “Here’s what I found for” to entice people to click on your link.

So in the Search Result Format setting, you simply enter your own text before the Search String tag.

Setting breadcrumbs search result format in All in One SEO

This gives your site a better chance to stand out in search results and attract more clicks. It also gives users a quick overview of your content to see if it matches their search query (what they’re searching for). 

Formatting Your 404 Error Label

With AIOSEO, you can even format the 404 error label and tell users what action they should take if they land on a broken link on your site. This is crucial for keeping a low bounce rate since most users immediately click away from your site when landing on a 404 page. 

This is how it can look:

Example of 404 error page in breadcrumb navigation

As you can see, it tells people to call a phone number if they end up on a 404 page, which means that you can still get that sale!

To get started formatting your 404 label, just type in your own text in the 404 Error Format field and it gets added to your breadcrumb navigation.

Formatting breadcrumb navigation 404 error page in All in One SEO

Showing and Linking Breadcrumb Formats

You can choose to show or hide your post, archive, search, and 404 formats. As well as linking or not linking these.

Show and link current item in All in One SEO

Simply go to the Current Item setting and switch the Show current item and Link currents item buttons on or off.

Alright, let’s take a look at how to use and customize AIOSEO’s breadcrumb templates next.

Using Pro Breadcrumb Templates

If you upgrade to AIOSEO’s Pro breadcrumbs feature, you’ll get access to fully editable breadcrumb templates for content types, taxonomies, and archives. 

Breadcrumb templates in All in One SEO

You can use the templates as they are or edit them with a switch of a button.

That said, let’s show you how to customize the breadcrumb templates next.

Customizing Your Breadcrumb Templates

AIOSEO gives you full control to edit all breadcrumb templates by using either preinstalled smart tags or directly editing the HTML code.

To get started customizing your breadcrumbs template, you simply switch the Use a default template button to the left, and additional breadcrumbs settings will appear.

Customizing breadcrumb templates in All in One SEO

Using Smart Tags to Customize Your Breadcrumb Navigation

The easiest way to customize the breadcrumb templates is by using AIOSEO’s preinstalled smart tags with different variables.

Using smart tags to customize breadcrumb navigation in All in One SEO

All you need to do is click on the smart tag you want to use, for example Page Title, and your page’s title will be added to your breadcrumbs navigation. 

And you can find an extensive selection of variables by clicking on the View all tags link or use the # symbol.

View all breadcrumbs template smart tags in All in One SEO

As simple as that!

Editing the HTML Code to Customize Your Breadcrumbs

AIOSEO even gives you access to directly editing the HTML code of your breadcrumb navigation, so you can get full control of how it’ll look on your site.

Just use the field in the breadcrumbs template to edit and enter your own HTML code.

Editing the HTML code to customize your breadcrumbs in All in One SEO

Don’t forget to save your changes. And if you want more details, please visit our breadcrumbs documentation.

And there you have it!

We hope this post helped you understand how to add breadcrumbs navigation in WordPress. You’ll soon see that adding a breadcrumb navigation trail to your website will improve both the user experience and your SEO. You won’t regret it!

Before you go…

…don’t let 404 page not found errors hurt your rankings on Google. With AIOSEO’s Redirection Manager, you can easily track and redirect your 404 errors. You may also want to check out our beginner’s guide on how to add 301 redirects in WordPress.

Not using All in One SEO yet? What are you waiting for?

Want to Try AIOSEO for Free?

Enter the URL of your WordPress website to install AIOSEO Lite.

Please enable JavaScript in your browser to complete this form.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. We only recommend products that we believe will add value to our readers.

author avatar
Stina Pettersson

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

1 comment on “How to Easily Add Breadcrumb Navigation in WordPress

  1. This article starts off well but then there is not enough explanation for me as to why (and how) I should take certain breadcrumb-related actions on my website – the author assumes knowledge that I do not possess. So I am not confident to take any actions. Overall, this article is not sufficiently beginner-friendly.