This tutorial will help you set up Yoast breadcrumbs on your WordPress website and also use them in your WordPress theme, the block editor, or with a page builder. It used to be more difficult to use Yoast breadcrumbs because you had to use PHP code in your theme or create a shortcode on your own.
Now it’s easy to embed Yoast’s breadcrumbs into your site which are typically more powerful than build in theme breadcrumbs. In case you’re just looking for the Yoast breadcrumb shortcode and don’t care about anything else in this tutorial, here you go.
[wpseo_breadcrumb]Just plop that bad boy anywhere on your website, and you’ll instantly have breadcrumbs on your website. In case you want a little more, like perhaps you’re even questioning the need for breadcrumbs, don’t. Yoast also has more information about the shortcode on their website.
And here’s what this post will help you do anywhere on your website.
Why Do You Need Breadcrumbs?
Breadcrumbs are important for every website and should be on pretty much every page except maybe the home page. They get helpful for visitors when they either start navigating around your website or land on an internal page such as a blog post.
It’s especially helpful when someone lands on a blog page and can quickly go to your home page, the blog page, or even the category page if you set up your breadcrumbs well.
Breadcrumbs help search engine crawlers and visitors alike. Here are some ways they can help your website be better.
- Help visitors see where they are on your website.
- Search engines know the structure of your website better.
- Google uses your breadcrumbs in search results.
I’m not sure if I could list everything but those three are good enough. Breadcrumbs have been around for a while but that’s not the reason they’re important. That’s also not a reason why you should do away with them. They’re useful in many ways, so you should insert breadcrumbs on your website.
Enable And Configure Yoast SEO Breadcrumbs First
You used to have to do this manually, but that’s changed. Yoast by default enabled the breadcrumbs, so you just have to go in and configure them.
First, head over to the Yoast SEO Search Appearance option in the WordPress menu. Now, in the Breadcrumbs tab, you can find all the settings available to you.
You can set your preferred separator, the anchor or home page label, and a number of other settings. Most of them are your preference but one that I think you should always enable is the taxonomy to show in breadcrumbs for posts. That is, when someone is on a blog post, they shouldn’t just see they’re in Home > Blog Post. They should see that they’re on Home > Blog > Category > Blog Post.
So, be sure under the Posts option you’ve selected Category. Also, be sure to turn on the show blog page option is on. Your breadcrumbs should be enabled as it is the default, but if it’s not, enable them.
Once you get everything just right, just click Save changes, and you’re done. You can now insert Yoast Breadcrumbs anywhere on your website.
How To Insert Yoast SEO Breadcrumbs Into Your Website
There are tons of different ways to insert the Yoast SEO breadcrumbs into your website. You can use any of the hundreds of page builders, or you can even insert it into your theme using some custom code that Yoast provides. I’ve never messed around with that method because I’m just not into spending the time it takes to customize a theme.
But, I have used the page builder method, and it works quite well. It’s nice to just insert the code and then take care of the breadcrumb configuration in Yoast.
Here’s how I use the breadcrumbs:
I use Beaver Builder and Beaver Themer to insert the breadcrumbs shortcode in a Part, so it’s just after the title on every page of my website. You can see how that looks below. The bar with the logo is the header which is separate but transparent. Then, below that is the header part which consists of a page title, line, paragraph of text that’s a custom field for each page, and then the breadcrumbs which I’ve placed in a text box.
The way to insert the breadcrumbs can vary depending on your page builder. But, in most of them you can either use the shortcode block or even better, just use the text block. If you use the text block instead of a shortcode block, you can typically use the formatting options. Shortcode blocks don’t usually have formatting.
Ready to take a look at how you can do this with Elementor and Beaver Builder?
Insert Yoast SEO Breadcrumb Shortcode Using A Page Builder
This is the most convenient and easiest way to insert the breadcrumb shortcode. You can place the shortcode in any block/module/element (whatever your page builder calls them) anywhere on your website. I’ll show you how to do it in Elementor because it’s popular and also Beaver Builder because it’s awesome.
Yoast SEO Breadcrumb Shortcode In Elementor
Elementor has a shortcode element but it’s not my favorite option. I think the text editor is a better option because it comes with styling options that the shortcode element doesn’t. Just plop a text editor element on your page wherever you want it and then paste the shortcode in it.
Here’s the Yoast breadcrumb shortcode again if you need it.
[wpseo_breadcrumb]See how I placed it right in the text box? Just be sure you don’t have any extra characters in there also. I like to click the Text tab also just to be sure it’s just the shortcode, nothing else.
You can see I have two in there, one is the shortcode and the other is the text box. They look the same here but not when saved. The shortcode will render when the page is saved and will look different.
The convenience of using the text element is in the Style tab where you can change colors, sizes, etc.
Very nice!
That’s it for Elementor, now it’s time for Beaver Builder.
Yoast SEO Breadcrumb Shortcode In Beaver Builder
You can do the same thing in Beaver Builder that you can in Elementor. In either case, if you’re using Elementor Pro or have Beaver Themer then you can also create the page titles that have the breadcrumb embedded in it. That’s what I’ve done here on the Exprance website.
This is the page title part that I showed above but in the editor. I have a text module that I’ve put the breadcrumb shortcode in and then used the Style tab to format it.
Now every page on my website has the same title section with a dynamically filled in title and the breadcrumbs look nice and like they belong on the website rather than are an afterthought.
You can also do the same thing with Gutenberg. The Yoast SEO breadcrumb shortcode can go anywhere in a block, and it will render the breadcrumbs.
See:
I just put a shortcode block in this blog post, and you get a dynamic breadcrumb for this post. Of course, I haven’t done any formatting of it, so it doesn’t look so nice. But, that’s for a different tutorial.
Insert The Breadcrumb Code Into Your Theme
This one is more difficult than the page builder. You have to edit your theme files or better yet, copy them to a child theme and then edit the right files there.
If you still want to do things the old way then you need to do be developing your own themes and be comfortable with the PHP code that Yoast provides.
You just need to use this code in your theme file and it will output the Yoast SEO breadcrumbs.
<?php
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}
?>Once you’ve set up your theme files the way you want, then you can use CSS to format the breadcrumbs and make them look pretty. There doesn’t seem to be much of a reason to do it this way anymore, though, given that page builders have become so powerful, and a good page builder also doesn’t have an issue with speed either (that’s why I love Beaver Builder!)