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

Did you know that 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 workouts that can help make your content easy to find. These tools will help you 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, like this:

"@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 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. 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. 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 the block editor, you will need to insert a shortcode block and add the following code:

[wpseo_breadcrumb]

If you are using the classic editor (or if the post type does not yet support the block editor) 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 Yoast SEO → Settings → Advanced → Breadcrumbs 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?

FAQ about Yoast SEO breadcrumbs

Related articles