How to Fix data-vocabulary.org schema deprecated

Yesterday I opened Google Search Console to check my crawling and indexing one of my posts and there I was a new warning: data-vocabulary.org schema deprecated. So I thought what is this warning about? How to fix the data-vocabulary schema problem in the blogger(Blogspot)? How to fix the data-vocabulary schema problem in Wordpress? Will this affect my blog Ranking/SEO? start coming in my mind and surely such questions also come in your mind. So in this article, I tried to explain all these questions and tried to solve the problem.

The warning is to notify Google Webmasters that Google is preferring schema.org Structured Data over data-vocabulary.org Structured Data and we need to update our blogs with schema.org Structured Data.

Google announces the end of support for data-vocabulary from April 6, 2020!

With the increasing usage and popularity of https://t.co/hGrr8MSS40 we decided to focus our development on a single scheme. As of April 6, 2020, https://t.co/N98EXBIRJ6 markup will no longer be eligible for Google rich result features. Read more at https://t.co/n8qsmdLgxE pic.twitter.com/JIg9yqMxRB
— Google Webmasters (@googlewmc) January 21, 2020

Structured data schemas such as schema.org and data-vocabulary.org are used to define shared meaningful structures for markup-based applications on the Web. With the increasing usage and popularity of schema.org, we decided to focus our development on a single SD scheme. As of April 6, 2020, data-vocabulary.org markup will no longer be eligible for Google rich result features.
-Google

In brief, websites and blogs with data-vocabulary.org schema markup will not be eligible for Google rich result features in the future. and I make you sure that your SEO ranking and other essential SEO
factors won't be affected. However, it is best to go with the latest updates.

Read: How to eliminate render-blocking resources from Blogger Theme?

First of all, confirm if you're facing this issue, go to Search Console and you should be getting a warning. If not, then it is fine

How to solve data-vocabulary.org schema deprecated issue

It is quite easy to work to do. You need to change data-vocabulary.org schema with schema.org structured data. For example, Here is a sample code from my theme,

I modified data-vocabulary.org with schema.org and the problem was fixed.

Step 1: Go to Blogger.com and search for <b:includable id='breadcrumb' var='posts'>… </b:includable>. Replace this code with the code given below.

Step 2: Pate the following bode by replacing <b:includable id='breadcrumb' var='posts'>… </b:includable>

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:view.isSingleItem'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'>
<svg class='homesvg' viewBox='0 0 24 24'><path d='M12,3L20,9V21H15V14H9V21H4V9L12,3Z'/></svg>
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<a class='breadhome' expr:href='data:blog.homepageUrl' itemprop='item' title='Home'>
<span itemprop='name'>Home</span></a>
<meta content='1' itemprop='position'/>
</span>
<svg viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z'/></svg>
<b:loop index='num' values='data:post.labels' var='label'>
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<a expr:href='data:label.url + &quot;?&amp;max-results=10&quot;' expr:title='data:label.name' itemprop='item'>
<span itemprop='name'><data:label.name/></span>
</a>
<meta expr:content='data:num+2' itemprop='position'/>
</span>
<svg viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z'/></svg>
</b:loop>
<span><data:post.title/></span>
</div>
</b:if>
</b:loop>
</b:if>

Step 3:The next step is styling the new breadcrumb. Paste the below CSS code in the template. Hit Save.

/* CSS Breadcrumbs */

.breadcrumbs{line- height:1.2em;width:auto;overflow:hidden;padding:0;margin:0 auto 20px;font-size:90%;color:#888;font-weight:400;text-overflow:ellipsis;-webkit-text-overflow:ellipsis;white-space:nowrap}
.breadcrumbs a{display:inline-block;text-decoration:none;transition:all .3s ease-in-out;color:#777;font-weight:400}
.breadcrumbs a:hover{color:blue}
.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:#999}

Verify if data-vocabulary.org issue is fixed or not?

Once you have made the changes, save the theme and go back to your search console platform. Click on the warning and press Validate Fix Button. It will take some time to validate and you're all good to go.

That's all and I hope you're able to fix data-vocabulary.org schema deprecated warning from Google search console.

What others are reading: