How to implement Yoast SEO breadcrumbsTable of contentsWhat are breadcrumbs? Why are they important?What do the Yoast SEO breadcrumbs do?How to use the Yoast breadcrumbs block to add breadcrumbs to single posts and pages What do the Yoast SEO breadcrumbs look like?How do I implement Yoast SEO breadcrumbs site-wide?How can I add breadcrumbs with a shortcode? How do I enable and set-up the Yoast breadcrumbs?I』m a theme developer, how do I integrate Yoast breadcrumbs in my non-WooTheme?How do I configure breadcrumbs on posts and pages?How does it work with the WooThemes breadcrumbs?How do I edit the breadcrumbs pathway?
What are breadcrumbs? Why are they important?
Breadcrumbs are a way to help your users better navigate your site and its structure. Additionally, they can appear on Google and provide a better user experience. If you want to know more about breadcrumbs please visit our: What are Breadcrumbs and Why are they Important for SEO guide.
To make it easy for users and search engines to navigate your site, you need more than breadcrumbs. Yoast SEO Premium comes with an internal linking feature, as well as content filters. With those tools, you can keep your content structured, findable, and up-to-date.
What do the Yoast SEO breadcrumbs do?
The Yoast SEO breadcrumbs will output JSON-LD data in the source code. We have found this to be the most reliable method of implementing breadcrumbs for rich snippets.
How to use the Yoast breadcrumbs block to add breadcrumbs to single posts and pages
With Yoast SEO, it is possible to add breadcrumbs to single posts and pages. You can do that with the breadcrumbs block. All you need to do is add the block to the post or the page, and that』s it! Note that the breadcrumbs you add with the block are only visible on the individual page you added the block to. You will need to use the steps we mention below if you want to have site-wide breadcrumbs. To learn how to use the block, watch the video below.
What do the Yoast SEO breadcrumbs look like?
Once configured, Yoast will show the JSON-LD in the source code.
Yoast SEO Breadcrumbs as JSON+LD as they appear in the Source code for the plugin sales page.
Eventually, Google will replace the link that appears beneath your blue SEO Title with one that shows the breadcrumb pathway.
Yoast SEO Breadcrumb pathway as shown in Google.
How do I implement Yoast SEO breadcrumbs site-wide?
The steps below are a temporary solution as manual edits made to theme files may be overwritten with future theme updates. Please contact the theme developer for a permanent solution.
We』ve written an article about the importance of breadcrumbs for SEO. To implement the breadcrumbs function in Yoast SEO, you will have to edit your theme. If you are not sure how to edit the theme files, your theme developer may be able to help. Alternatively, you may use a Yoast Partner. We recommend that prior to any editing of the theme files, a backup is taken. Your host provider can help you take a backup.
Copy the following code into your theme where you want the breadcrumbs to be. If you are not sure, you will need to experiment with placement:
<?php
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb( '
','
' );
}
?>
NOTE: Depending on your theme you may or may not need to add in the beginning PHP tags. If you are not sure, your theme developer can help.
Common places where you could place your breadcrumbs are inside your single.php and/or page.php file just above the page』s title. Moreover, another option that makes it really easy in some themes is by just pasting the code in header.php at the very end.
In most non-WooTheme themes, this code snippet should not be added to your functions.php file. If you have trouble locating the correct place to add the code, please contact the theme developer for assistance.
How can I add breadcrumbs with a shortcode?
Yoast can output breadcrumbs with a shortcode on a site』s posts, pages, and taxonomies. If you are using Gutenberg, you will need to insert a shortcode block and add the following code:
首頁 » 第 8 頁
If you are using the Classic editor (or if the post type does not yet support Gutenberg) you will need to click on the Text editor and add in the shortcode (see image below).
This will output the breadcrumb pathway into that part of the page. The only way to remove the breadcrumb from the page is to delete the shortcode. It cannot be disabled in the SEO-Search Appearance-Breadcrumb section. If you use the breadcrumb shortcode you do not need to add the breadcrumb code snippet described here to your theme』s files.
Note that the shortcode works only on the page that has them, it is not a global solution. If you want to add breadcrumbs to all your post types efficiently, you will need to use that code snippet.
How do I enable and set-up the Yoast breadcrumbs?
Yoast SEO offers a breadcrumb feature. This feature is disabled by default as you or your theme developer must add code to your theme files. After that, go to SEO → Search Appearance → Breadcrumbs and enable the breadcrumb feature. Log in to your WordPress website. When you』re logged in, you will be in your 『Dashboard』. Click on 『SEO』. On the left-hand side, you will see a menu. In that menu, click on 『SEO』. Click on 『Search Appearance』. The 『SEO』 settings will expand providing you with additional options. Click on 『Search Appearance』. Click on the 『Breadcrumbs』 tab. Scroll down to the bottom of the screen and toggle the 『Breadcrumbs』 switch. To add Yoast breadcrumbs, toggle the switch to 『Enabled』.To remove Yoast breadcrumbs, toggle the switch to 『Disabled』. If you enabled the breadcrumbs, configure the settings to your preference. Note that Pages do not get a Taxonomy to Show option and therefore are not shown. Instead, a shortcode must be used to display them. Click 『 Save changes』. Show Blog Page Feature If you want to use the feature, you will need to set-up a static page for your Posts Page in the Settings-Reading section of your WordPress site.
I』m a theme developer, how do I integrate Yoast breadcrumbs in my non-WooTheme?
If you are a theme developer you may need to take one additional step to complete the integration with Yoast SEO Breadcrumbs by adding our breadcrumbs filter.
Once this filter has been added to your theme, the Yoast breadcrumbs will take over all the non-Yoast ones.
How do I configure breadcrumbs on posts and pages?
To configure the breadcrumbs please use this guide. Note, that the Taxonomy to Show does not appear in the Breadcrumb section. Instead, you will need to use a shortcode.
How does it work with the WooThemes breadcrumbs?
If you have a WooTheme you may need to add some different code. If you are not sure if you have a WooTheme, your theme developer can help. You can also replace WooThemes Breadcrumbs.
How do I edit the breadcrumbs pathway?
Change the category in the breadcrumb pathway on posts by selecting the primary category
You can change the breadcrumb pathway on posts by selecting the primary category. For example, if you select a Subcategory as primary, Yoast will output the Parent Category and also the Subcategory. You may need to experiment with selecting categories in order to get the right pathway to appear.
Select Category and be sure to mark it as primary. In the example image below, the subcategory (also called a child category was selected)
2. See parent (also called Primary or Main) and child category appear.
Change the title of a post or page or taxonomy in the breadcrumb pathway by adding in a custom title
You can add a custom breadcrumb title for a post or page or taxonomy. As a result, the default title will be replaced. Check out our help article on how to customize your breadcrumb titles to learn how!
Change the full breadcrumb pathway using a filter
To edit the breadcrumbs pathway use the filter below and place it in your child theme』s functions.php file:
wpseo_breadcrumb_links
We also have some examples of how to edit and remove breadcrumbs. If you are not sure how to use them, where your functions.php file is, or what a child theme is please contact your theme developer for more information. Alternatively, consider a Yoast Partner who can help.
Change the breadcrumb separator
If you need to change the breadcrumb separator you can do so by going to SEO-Search Appearance-Breadcrumb Pathway and locate the Separator Between Breadcrumbs field. Then, you can add whatever character you want here.
If you want to further customize the separator you can do so using the filter below. It would go into your functions.php file. We recommend using a child theme to preserve changes. If you are not sure how to use the filter, where your functions.php file is, or what a child theme is please contact your theme developer for more information. Alternatively, consider a Yoast Partner who can help.
wpseo_breadcrumb_separator
Change single items in the breadcrumb pathway using a filter
To edit individual items/links in the breadcrumb pathway use the filter below and place it in your child theme』s functions.php file:
wpseo_breadcrumb_single_link
We also have some examples of how to edit and remove individual breadcrumbs.
If you are not sure how to use them, where your functions.php file is, or what a child theme is please contact your theme developer for more information. Alternatively, consider a Yoast Partner who can help.
How do I change the breadcrumbs on a WooCommerce shop page?
You can edit the shop page by using some of these filters and code snippets. It would go in your functions.php file. The code can also be used to make the Shop page appear elsewhere on your site such as on a Product Category page.
If you are not sure how to use them, where your functions.php file is, or what a child theme is please contact your theme developer for more information. Alternatively, consider a Yoast Partner who can help.
