Implement Yoast SEO breadcrumbs

The following information is written for advanced users and developers.

Table of Contents

What are Breadcrumbs?
What do the Yoast SEO Breadcrumbs do?
What do the Yoast SEO Breadcrumbs look like?
How do I Implement the Yoast SEO Breadcrumbs?
How do I enable and set-up the Yoast Breadcrumbs?
How do I Configure Breadcrumbs on Posts and Pages?
How does it work with the WooThemes Breadcrumbs?
How do I Edit the Breadcrumbs Pathway?
I'm a theme developer, How do I integrate Yoast Breadcrumbs in My theme?

What are Breadcrumbs? Why are they important?

Breadcrumbs are a way to help your users better navigate your site. They can also be shown in Google for 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.

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.

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?

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( '<p id="breadcrumbs">','</p>' );
}
?>

NOTE: Depending on your theme you may or may not need to add in the beginning <php and ending ?> 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. Another option that makes it really easy in some themes is by just pasting the code in header.php at the very end.

Get access to our kick-ass support team with Yoast SEO Premium

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.

Alternatively, you can manually add the breadcrumb shortcode to individual posts or pages.

[wpseo_breadcrumb]

How do I Enable and Set-up the Yoast BreadCrumbs?

After that, go to SEO → Search Appearance → Breadcrumbs and enable the 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.

  1. Log in to your WordPress website.

    When you're logged in, you will be in your 'Dashboard'.

  2. Click on 'SEO'.

    On the left-hand side, you will see a menu. In that menu, click on 'SEO'.

  3. Click on 'Search Appearance'.

    The ‘SEO’ settings will expand providing you additional options. Click on 'Search Appearance'.

  4. Click on the 'Breadcrumbs' tab.

  5. Toggle the 'Breadcrumbs' switch.

    To add Yoast breadcrumbs, toggle the switch to 'Enabled'.
    To remove Yoast breadcrumbs, toggle the switch to 'Disabled'.

  6. If enabling, configure the settings to your preference.

  7. Click ' Save changes'.

  8. 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 theme?

If you are a theme developer you may need to take one additional step to complete the integration with Yoast SEO Breadcrumbs by adding the filter explained here.

How do I Configure Breadcrumbs on Posts and Pages?

To configure the breadcrumbs please use this guide

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. To replace WooThemes Breadcrumbs use this guide.

How do I Edit the Breadcrumbs Pathway?

Change the Category in the Breadcrumb Pathway on Posts By Selecting 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.

  1. Select Category and be sure to mark it as primary. In the example image below, the subcategory (also called a child category was selected)
Subcategory Selected as Primary

2. See parent (also called Primary or Main) and child category appear.

Breadcrumb Pathway with Parent Category and Subcategory

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. This will replace the default title. Learn more about how to add custom breadcrumb titles here.

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 on how to edit and remove breadcrumbs here. 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. You can then 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 on how to edit and remove individual breadcrumbs here.

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 the filters and code snippets here. 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.

Was this article helpful? ·