How to implement Yoast SEO breadcrumbs

Yoast SEO comes with a breadcrumbs functionality. In this article, we’ll explain what Yoast SEO breadcrumbs are, why they are important, and how you can add them to your site.

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 guide on What are breadcrumbs and why are they important for SEO.

What do the Yoast SEO breadcrumbs do and what do they look like?

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.

Once configured, Yoast will show the JSON-LD in the source code as follows:

"@type": "BreadcrumbList",
"@id": "https://yoast.com/wordpress/plugins/seo/#breadcrumb",
"itemListElement": [
  {
    "@type": "ListItem",
    "position": 1,
    "item": {
      "@type": "WebPage",
      "@id": "https://yoast.com/",
      "url": "https://yoast.com/",
      "name": "Home"
    }
  },
  {
    "@type": "ListItem",
    "position": 2,
    "item": {
      "@type": "WebPage",
      "@id": "https://yoast.com/wordpress/plugins/",
      "url": "https://yoast.com/wordpress/plugins/",
      "name": "WordPress plugins"
    }
  },
  {
    "@type": "ListItem",
    "position": 3,
    "item": {
      "@id": "https://yoast.com/wordpress/plugins/seo/#webpage"
    }
  }
]

Eventually, Google will replace the link that appears above your blue SEO title with one that shows the breadcrumb pathway.

How to 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. If you are not sure how to edit the theme files, your theme developer may be able to help. We recommend that prior to any editing of the theme files, you back up your site. 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. 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 to enable and set up Yoast SEO breadcrumbs

How to use the Yoast breadcrumbs block for single posts and pages

With the breadcrumbs block, you can add breadcrumbs to single posts and pages. Note that the breadcrumbs are only visible on the individual page.

1. In your WordPress Dashboard, go to your Posts or Pages
   
   
2. Choose the post or page where you want to add the breadcrumbs block
3. In the editor, click the blue plus in the top left corner
   
   
4. Search for the Yoast Breadcrumbs block and add it
   
   

How to add breadcrumbs with a shortcode in the block editor

Yoast SEO can also add breadcrumbs with a shortcode to Posts, Pages, Categories and Tags. Note that the breadcrumbs are only visible on the individual page. Follow the instructions below to add breadcrumbs if you’re using the block editor.

1. In your WordPress Dashboard, go to your Posts, Pages, Categories or Tags
2. Choose the content item where you want to add the breadcrumbs
3. In the editor, click the blue plus in the top left corner
   
   
4. Search for the Shortcode block and add it
   
   
5. In the Shortcode block, add the follwing code:

[wpseo_breadcrumb]

How to add breadcrumbs with a shortcode in the classic editor

Yoast SEO can also add breadcrumbs with a shortcode to Posts, Pages, Categories and Tags. Note that the breadcrumbs are only visible on the individual page. Follow the instructions below to add breadcrumbs if you’re using the block editor.

1. In your WordPress Dashboard, go to your Posts, Pages, Categories or Tags
2. Choose the content item where you want to add the breadcrumbs
3. In the text editor, add the following code:

[wpseo_breadcrumb]

Yoast SEO breadcrumbs FAQ

Related articles