0
Now, most of the blogger hosted blogs getting breadcrumbs issue in Google Webmasters. No need to worry anymore just follow this article and fix the data-vocabulary.org schema deprecated error.

I noticed a lot of developers and bloggers are facing this issue for their bogs which are hosted on the blogger platform. Check the below image to know the issue clearly. That's why I have researched a lot about the solution to fix the issue.

Finally, I found the proper solution and fixed the problem successfully.

breadcrumbs issue

But first, we need to know the details of breadcrumbs and its importance. Breadcrumbs are nothing but these are navigational elements for any type of website. Commonly breadcrumbs arrange the links horizontally on top of the website or main page with help of greater than (>) symbol as shown in the below image.

Breadcrumbs in blogger blog post

Visitors will find the type or category of the blog posts with the help of the breadcrumbs. And 

What are Breadcrumbs? 
A breadcrumb or breadcrumb trail is a graphical control element frequently used as a navigational aid in user interfaces and on web pages. It allows users to keep track and maintain awareness of their locations within programs, documents, or websites.

Google said, "As a preparation for the change and starting today, Search Console will issue warnings for pages using the data-vocabulary.org schema so that you can prepare for the sunset in time."

Why we are getting this error?

According to Google's recent announcement (Check attached image), they confirmed that they no longer support the data-vocabulary.org schema for rich snippet results. Means we need to implement new schema.org structured data markup.

You can use the official structured data testing tool to find the full details of the issue. Pick any link from the list of breadcrumbs warning URLs at Google Search Console. Then it will provide your post link related markup details.
data testing

Best Way to Fix data-vocabulary.org Schema Deprecated Breadcrumbs Issue in Blogger

Follow the below-mentioned steps to fix the breadcrumbs error search console. These are very easy to implement on any blogger blog.

First, you will get the result like the "page is not eligible for rich results". But you can easily fix the issue completely after doing the necessary steps on your blog. Check the below image for full clarification.

Before the issue:

page is not eligible

Steps to migrate deprecated data-vocabulary.org to schema.org structured data markup:


Step 1: First of all login to your blogger blog then go to the Theme Section. Make sure you need to take the backup of your blog before making changes to your theme.

Step 2: Then click on edit HTML, you will get the theme editing section. Here you need to search for the

<b:includable id='breadcrumb' var='posts'>

breadcrumbs search term

Step 3: Here you need to replace the between section from <b:includable id='breadcrumb' var='posts'> to </b:includabletags with the below mentioned code. Then save your theme and exit from that section. 

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:view.isPost'>
 <b:loop values='data:posts' var='post'>
  <div class='breadcrumbs' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'>
   <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
   <a expr:href='data:blog.homepageUrl' itemprop='item' title='Home'>
   <meta content='1' itemprop='position'/>
   <span itemprop='name'><b:switch var='data:blog.locale'><b:case value='id'/>Beranda<b:default/>Home</b:switch></span></a>
   </span>
   <b:if cond='data:post.labels'>
   <b:loop index='nomor' 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:nomor+2' itemprop='position'/>
    <a expr:href='data:label.url + &quot;?&amp;max-results=8&quot;' expr:title='data:label.name' itemprop='item' rel='nofollow'>
      <span itemprop='name'><data:label.name/></span>
    </a>
     </span>
   </b:loop>
   <b:else/>
   &amp;nbsp;&#8250;&amp;nbsp; <span itemprop='name'><data:blog.pageName/></span>
   </b:if>
  </div>
 </b:loop>
<b:elseif cond='data:view.isPage'/>
 <div class='breadcrumbs' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'>
  <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
  <a expr:href='data:blog.homepageUrl' itemprop='item' title='Home'>
  <meta content='1' itemprop='position'/>
  <span itemprop='name'><b:switch var='data:blog.locale'><b:case value='id'/>Beranda<b:default/>Home</b:switch></span></a>
  </span> &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:blog.url' expr:title='data:post.url' itemprop='item'>
    <span itemprop='name'><data:blog.pageName/></span>
  </a>
  </span>
 </div>
</b:if>
</b:includable>

Step 4: Also you need to replace the existing breadcrumbs CSS with the below code. Because we need to add the CSS code for the above newly generated breadcrumbs. Again go to Theme Section, after that click on the Customize button.

Adjust widths >> Add CSS >> In the CSS code box add the following piece of code and then click on Apply to Blog button at the top right corner.

/* Breadcrumbs */
.breadcrumbs{font-size:20px;padding:10px;color:#223c88;position:relative;margin-bottom:15px;margin-right:0px;font-family:'Roboto',sans-serif;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16);background:#fff}
.breadcrumbs a span{color:#223c88;text-decoration:none;font-weight:700;padding:0 2px;font-size:13px}
.breadcrumbs a{color:#223c88;padding:5px 2px;font-size:12px}
.breadcrumbs span{font-weight:Bold;font-size:13px}
.breadcrumbs span a:hover{color:#ff0097}
.breadcrumbs svg{width:20px;height:20px;vertical-align:-5px;margin:0 -3px}
.breadcrumbs svg.homesvg{width:22px;height:22px;margin-right:0}
.breadcrumbs svg path{fill:#c8c8c8}
.breadcrumbs svg.homesvg path{fill:#223c88}

Step 5: In the end, you will get the result like this after following the above steps. This means now the issue is almost fixed.

After the issue fixed:

eligible for rich results

Step 6: In order to fix the issue completely you need to click the Validate Fix button in the Google Search Console. This button is available in the Breadcrumbs section on the left side of the console as seen in the below image. Just click on it so that the validation process will be started.

fix datavocabulary error

Later you will get an email from google like, "We're validating your Breadcrumbs issue fixes for the site". And it will take up to 7 days to migration process of deprecated data-vocabulary.org to schema.org structured data markup.

In this way, you can make your blog contents eligible for the google rich results. Also, you will get the email after the completion of the process.

Conclusion: 

Now you have learned the "Best Way to Fix data-vocabulary.org Schema Deprecated Breadcrumbs Issue in Blogger". If you face any issues or need any support then simply comment below. 
Next
This is the most recent post.
Previous
Older Post

Post a Comment

 
Top