[How to Fix] Blogger Breadcrumb Error | Data-vocabulary.org Schema Deprecated

Fix Blogger Breadcrumb Error on search console. Are you facing blogger breadcrumbs error? Here is your solution. A few days ago I got an email notification from Google Search Console about the problem of breadcrumb data-vocabulary.org schema deprecated.

How to handle it? Before you solving this breadcrumb problem, at first good to know what data-vocabulary.org is?

Also read: Most Useful Blogger Widgets and Plugins

Fix Blogger Breadcrumb Error

In this post, I show you how to Fix Blogger Breadcrumb Error. Breadcrumb is one important element that should be installed on every blog or website, no exception for the Blogger platform (Blogspot).

In addition to structured data formats, structured data schemes function like a kind of dictionary, defining terms for types of things (for example "People", "Events"), and for properties and relationships (for example "names"). By maintaining this separation between formats and schemes, it is possible for users of different formats to take advantage of the same scheme and be widely shared. Even so, Google still supports this structured data version until Google will stop using data-vocabulary.org starting in April 2020.

What is data-vocabulary.org?

Blogger Structured data Data-Vocabulary.org is Google's implementation of structured data that was introduced in 2009. The data was monitored by structured data Schema.org two years later in 2011.

Structured data Schema.org is Open Source structured data supported by Google and other organizations. In 2011 Google updated the Data-Vocabulary.org site to add links to other pages to encourage the move to Schema.org's structured data.

Is Breadcrumb Important for the blogger template?

Yes, of course, this is important because it deals with SEO and data structure. He made the blog have clear navigation and easier to read on the Google search page (SERP). Visitors can easily see the label or category that is the parent of the article.

Also read: 10 Premium Looking Magazine Blogger Templates

How to Install Breadcrumb for Blogger

Does your template already have breadcrumbs with no errors? So congratulations, you don't need to be tired of reading this tutorial. Stop and close this article because there is nothing to adjust anymore. But if it turns out there isn't, or there is but still shows an error message, please read and follow the tutorial on how to install SEO friendly breadcrumb on this Blogspot until it runs out.

Note: Before starting this tutorial, backup your template file.

Step 1:

Go to Theme > Customize > Advanced > Add CSS and paste the below code on the CSS box and save the template.

 .breadcrumb { margin-bottom: 20px; }
.breadcrumb, .breadcrumb a, .breadcrumb a:hover { font-size: 12px; color: #777; } 

Check the below screenshot

Step 2

Go to Theme > Edit HTML and Look for the following code <b:includable id='breadcrumb' var='posts'> (use Ctrl+F find shortcut).

Now copy and paste below code between <b:includable id='breadcrumb' var='posts'>...</b:includable>

 <b:if cond='data:view.isPost'>
  <b:loop values='data:posts' var='post'>
    <div class='breadcrumb' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'>
      <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
        <a expr:href='data:blog.homepageUrl.canonical' itemprop='item' title='Home'>
        <meta content='1' itemprop='position'/>
        <span itemprop='name'>Home</span></a>
      </span>
      <b:if cond='data:post.labels'>
        <b:loop index='num' values='data:post.labels' var='label'> &amp;nbsp;&#8250;&amp;nbsp;
          <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
            <meta expr:content='data:num+2' itemprop='position'/>
            <a expr:href='data:label.url + &quot;?&amp;max-results=8&quot;' expr:title='data:label.name' itemprop='item'>
              <span itemprop='name'><data:label.name/></span>
            </a>
          </span>
        </b:loop>
        <b:else/>
        &amp;nbsp;&#8250;&amp;nbsp; There are no categories
      </b:if>
    </div>
  </b:loop>
</b:if> 

See below screenshot

Now save the template and check the result on Google Structured data testing tool.

Validation on Search Console

After installation, check again to make you more sure that this breadcrumb is correct and valid. Return to using Google Structured Data as mentioned above. After that, wait a few days and check in Google Search Console. If the breadcrumb is valid, the report will appear there, precisely under the menu Enhancements. Make sure nothing is wrong.

How do you understand all the steps to Fix Blogger Breadcrumb Error above? Please provide comments if there is anything unclear. Immediately practice it on each other's blog.