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?
• Benefits of Adding Breadcrumbs to Your Site
• Easily Add Breadcrumb Navigation in WordPress
• Customizing Your Breadcrumbs 
• Using Pro Breadcrumb Templates

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:

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

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.

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: 

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.

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

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.

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. 

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.

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:

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.

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

Like this:

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.

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. 

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.

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. 

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

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

Setting Your Archive Format

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

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.

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:

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.

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.

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. 

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.

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.

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.

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.

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?