How to Add a Schema.org Breadcrumb List: Easy Copy Paste Guide

Although support for the data-vocabulary.org format has ended, we still see many websites using the outdated data-vocabulary.org formatted breadcrumb list. While it functions visually as a breadcrumb trail, search engines do not recognize it as a rich result. This means installing a wrongly formatted breadcrumb list could potentially have a negative impact on both SEO and usability. The current standard is the schema.org format. My breadcrumb list is a fully schema.org formatted type, and it is a one-of-a-kind code that has been meticulously customized for every page type. It is truly the most powerful and effective solution available.

Breadcrumb List Code for Blogger

  <ul class="best-breadcrumb" typeof='BreadcrumbList' vocab='https://schema.org'>
    <li property='itemListElement' typeof='ListItem'>
      <a expr:href='data:blog.homepageUrl' property='item' typeof='WebPage'>
        <span property='name'>home</span>
      </a>
      <meta content='1' property='position'/>
    </li>
    <b:if cond='data:blog.pageType == "item"'>
      <!-- Post page -->
      <b:loop index='i' values='data:posts.first.labels' var='label'>
        <li property='itemListElement' typeof='ListItem'>
          <a expr:href='data:label.url' property='item' typeof='WebPage'>
            <span property='name'><data:label.name/></span>
          </a>
          <meta expr:content='data:i + 2' property='position'/>
        </li>
      </b:loop>
      <li property='itemListElement' typeof='ListItem'>
        <span property='name'></span>
        <meta expr:content='data:posts.first.labels.size + 2' property='position'/>
      </li>
    <b:else/>
      <!-- Previous Page, Archieve or Searched Post list (isLabelSearch)  -->
      <b:if cond='data:blog.url != data:blog.homepageUrl'>
        <li property='itemListElement' typeof='ListItem'>
          <span property='name'>
            <b:if cond='data:blog.searchLabel'>
              <data:blog.searchLabel/>
            <b:else/>
              <b:if cond='data:blog.pageName'><data:blog.pageName/><b:else/>Older posts</b:if>
            </b:if>
          </span>
          <meta content='2' property='position'/>
        </li>
      </b:if>
    </b:if>
  </ul>

This ultimate breadcrumb list works perfectly without any errors. It displays only 'Home' on the homepage, while post pages include linked labels and the post title. For static, archive, and search pages, it correctly shows the page name, date, or label name.

Installation of Breadcrumb List in Blogger Templates

go to the edit HTML page and then Find <b:includable id="main">, create a blank space bellow that line, and copy and paste the code there. It should look like the image shown below.

If there are no mistakes, please save it. That's it. now you have the best breadcrumb in the world.

Adjusting the design with CSS to make it look like a breadcrumb list

Since it is a list using tags, a bullet point appears before each label name. To remove this and use '>' instead, you need to edit the CSS. I will show you an example.

.best-breadcrumb{
list-style:none;
display:flex;
gap:8px;
}
.best-breadcrumb li::after{
content:">"
}
.best-breadcrumb li:last-child::after{
display:none
}

that is it simply.

Check at Google's Rich Result Test

To make sure your breadcrumb is not occuring any errors visit https://search.google.com/test/rich-results and enter your post url.

Since breadcrumbs with data-vocabulary.org is not supported anymore you need Schema.org type, and now we got it here.