How to Add Breadcrumb Markup to Website for SEO

Breadcrumb Navigation: Breadcrumbs or breadcrumb trail displays the hierarchy of the current page in horizontal form for understanding the site structure both by users and search engine. Your website visitor can navigate all the way up in the site hierarchy, one level at a time, by starting from the last breadcrumb in the breadcrumb trail.

In 2024, users have no time to waste online. Thus, you have to build a website that describe itself on the very first visit by any user. Users may not understand your site navigation very well, especially if they are not too clear what they are looking for. In this case, the Breadcrumb navigation helps them to find out information relevant for them navigating each categories and tags listed in breadcrumb.

Did you know? why is this navigation help called Breadcrumb Navigation? Breadcrumb named from famous German fairy tale of Hansel and Gretel. They are taken deep into the forest in the hope they will not find their way out. But, clever Hansel dropped pieces of bread onto the ground so they could find their way home.

In this tutorial, you will find step-by-step complete guide to add breadcrumb navigation to your site using WordPress Plugins or without plugin for best SEO results.

Table of Contents

Breadcrumb Structured Data

Breadcrumb structured data is used by Google search engine to know the structure of your site. On the other hand, a small text appears on the top of a page indicating where the website visitor are currently on the site.

On SuperWebTricks.com, you will see the path to this tutorial guide located as given below:

Home > WordPress > SEO > How to Add Breadcrumbs in WordPress Site for SEO.

The best thing is that you can navigate back from current page to the home page of a site following every clickable path in Breadcrumb item list.

What are breadcrumbs?

A breadcrumb indicates the position of current page in the site hierarchy. It is very helpful for site users to understand and explore your website by navigating BreadcrumbList.

Meaning of Breadcrumb Structure Data

A BreadcrumbList is an ItemList consisting of a chain of linked Web pages, generally described using their URL (ID), name and Position, and typically ending with the current page.

Breadcrumb for SEO

Breadcrumb structured data help Google learn the structure of your website and also visitor of your site know where they are on your site.

Breadcrumb appears on Google SERPs (Search Engine Results Pages) and therefore you may add correct breadcrumb structure data to boost ranking of your site.

Format of Breadcrumb

Google Search supports breadcrumb structured data in the following three formats:

JSON-LD
Microdata
RDFa

JSON-LD: JSON for Linking Data (JSON-LD) organizes and connects it, creating a better Web. It helps to create a network of standards-based, machine-readable data across Web sites.

JSON-LD breadcrumb format is recommended by Google. Google can read JSON-LD data to be inserted in the webpage by JavaScript code or embedded widgets in CMS (Content Management System). That is embedded in a <script> tag in the <head> and <body> elements of an HTML page. We have discussed how you may insert breadcrumb in JSON-LD format to your site.

Example: Here’s an example of breadcrumb of this web page in JSON-LD format:- Click here for Rich Results Test – JSON-LD

<html>
  <head>
    <title>How to Add Breadcrumbs in WordPress Site for SEO</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [{
        "@type": "ListItem",
        "position": 1,
        "name": "WordPress",
        "item": "https://www.superwebtricks.com/tutorials/wordpress/"
      },{
        "@type": "ListItem",
        "position": 2,
        "name": "SEO",
        "item": "https://www.superwebtricks.com/topics/search-engine-optimization/"
      },{
        "@type": "ListItem",
        "position": 3,
        "name": "How to Add Breadcrumbs in WordPress Site for SEO"
      }]
    }
    </script>
  </head>
  <body>
  </body>
</html>

Microdata: It uses HTML tag ‘itemscope’ and ‘itemprop’ attribute in the <body> element. However, it can also be used in the <head> element.

Example: Here’s an example of breadcrumb of this web page in Microdata format:- Click here for Rich Results Test – Microdata

<html>
  <head>
    <title>How to Add Breadcrumbs in WordPress Site for SEO</title>
  </head>
  <body>
    <ol itemscope itemtype="https://schema.org/BreadcrumbList">
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="https://www.superwebtricks.com/tutorials/wordpress/">
            <span itemprop="name">WordPress</span></a>
        <meta itemprop="position" content="1" />
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemscope itemtype="https://schema.org/WebPage"
           itemprop="item" itemid="https://www.superwebtricks.com/topics/search-engine-optimization/"
           href="https://www.superwebtricks.com/topics/search-engine-optimization/">
          <span itemprop="name">SEO</span></a>
        <meta itemprop="position" content="2" />
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <span itemprop="name">How to Add Breadcrumbs in WordPress Site for SEO</span>
        <meta itemprop="position" content="3" />
      </li>
    </ol>
  </body>
</html>

RDFa: Resource Description Framework in Attributes (RDFa) is an HTML5 extension that uses HTML tag attributes to markup things like People, Places, Events, Recipes and Reviews.

RDFa is commonly used in both the <head> and <body> sections of the HTML page. However, if you are using Blogger BlogSpot Blog then we have separately discussed how to add Breadcrumbs in Blogger Blog Post.

Example: Here’s an example of breadcrumb of this web page in RDFa format:- Click here for Rich Results Test – RDFa

<html>
  <head>
    <title>How to Add Breadcrumbs in WordPress Site for SEO</title>
  </head>
  <body>
    <ol vocab="https://schema.org/" typeof="BreadcrumbList">
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://www.superwebtricks.com/tutorials/wordpress/">
          <span property="name">WordPress</span></a>
        <meta property="position" content="1">
      </li>
      ›
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://www.superwebtricks.com/topics/search-engine-optimization/">
          <span property="name">SEO</span></a>
        <meta property="position" content="2">
      </li>
      ›
      <li property="itemListElement" typeof="ListItem">
        <span property="name">How to Add Breadcrumbs in WordPress Site for SEO</span>
        <meta property="position" content="3">
      </li>
    </ol>
  </body>
</html>

Required properties for Breadcrumbs

The Google supports the following required properties in BreadcrumbList (@type ListItem):

item (URL or a subtype of Thing)
name (Text)
position (Integer)

Adding Breadcrumb to WordPress Site

You may add breadcrumbs to your site using mainly two methods viz. Plugins or Manual inserting code into your website them/ template. However, you may check that whether your theme itself has breadrumb built-in feature and there is no need to insert breadcrumb either using a plugin or manual.

WordPress Themes with Breadcrumb Feature

Here is the list of themes comes with build in features to show breadcrumb navigation links to your site without plugins:

ASTRA (https://wpastra.com/)
OceanWP (https://oceanwp.org/)
Page Builder Framework (https://wp-pagebuilderframework.com/)

WordPress Plugins to add Breadcrumbs

Following top plugins helps to insert breadcrumb to your WordPress (WP) site:

These are top 10 plugins that helps you to add breadcrumb trail to your website. Please let us know which one is best for your site.

Create Breadcrumbs with Function Code

Add Breadcrumbs Manually: You may easily add breadcrumbs to your WP site inserting code to functions.php file.

As we know Google recommends breadcrumbs in JSON-LD format, here is the function code SuperWebTricks.com uses to add breadcrumb to Showeblogin.

To add breadcrumbs trail to your site without plugin, insert these function code in functions.php file:-

// Add breadcrumb trails START.
/**
 * Free Breadcrumbs Updated Code
 * @author Showeblogin
 * @authorURL www.SuperWebTricks.com
 */
if ( ! function_exists( 'swt_breadcrumbs' ) ) :    
	function swt_breadcrumbs() {	
		if ( is_single()) {?>
<script type="application/ld+json"> 
      {
        "@context": "https://schema.org",
        "@type": "BreadcrumbList",
        "@id": "<?php echo get_permalink(); ?>#breadcrumb",
        "itemListElement": [{ 
          "@type": "ListItem", 
          "position": 1, 
          "name": "<?php bloginfo('name'); ?>", 
          "item": "<?php bloginfo('url'); ?>" 
        }, {
          "@type": "ListItem", 
          "position": 2, 
          "name": "<?php $categories=get_the_category(); if ( ! empty( $categories ) ){echo esc_html( $categories[0]->name );}?>", "item": "<?php $categories=get_the_category();if ( ! empty( $categories ) ){echo esc_url( get_category_link( $categories[0]->term_id ) );}?>"
        }, {
          "@type": "ListItem",
          "position": 3, 
          "name": "<?php $post_tags=get_the_tags();if ( ! empty( $post_tags ) ){echo $post_tags[0]->name;}?>", "item": "<?php $post_tags=get_the_tags();if ( ! empty( $post_tags ) ){echo esc_url( get_tag_link( $post_tags[0]->term_id ) );}?>" 
        }, {
          "@type": "ListItem", 
          "position": 4, 
          "name": "<?php the_title(); ?>" 
        }]
      } </script>
<?php }		
	}
endif;
add_action( 'wp_head', 'swt_breadcrumbs', 2 );
// Breadcrumb added by Showeblogin END.

Save functions.php file and enjoy!

After adding these codes in your functions.php file, you may check any post URL with the help of Google Rich Results Test.