Useful Info

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
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. 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-ALYOQOzdNqI/XlKYaGzsc0I/AAAAAAAABtY/C-Ju9oRhecEx_rTBY9ozTL7NxaSsZCdRQCLcBGAsYHQ/s1600/breadcrumbs%2Bissue%2Bdetected.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="breadcrumbs issue" border="0" data-original-height="698" data-original-width="920" height="484" src="https://1.bp.blogspot.com/-ALYOQOzdNqI/XlKYaGzsc0I/AAAAAAAABtY/C-Ju9oRhecEx_rTBY9ozTL7NxaSsZCdRQCLcBGAsYHQ/s1600/breadcrumbs%2Bissue%2Bdetected.png" title="breadcrumbs issue" width="640" /></a></div>
 
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. 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-Wes2r1WUw5Y/XlKWVfLUfVI/AAAAAAAABtM/bfHjKDrmTwsbU_GUT9eXJpBxaO4zren6QCLcBGAsYHQ/s1600/Breadcrumbs%2Bin%2Bblogger%2Bblog%2Bpost.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Breadcrumbs in blogger blog post" border="0" data-original-height="321" data-original-width="1083" height="188" src="https://1.bp.blogspot.com/-Wes2r1WUw5Y/XlKWVfLUfVI/AAAAAAAABtM/bfHjKDrmTwsbU_GUT9eXJpBxaO4zren6QCLcBGAsYHQ/s1600/Breadcrumbs%2Bin%2Bblogger%2Bblog%2Bpost.png" title="Breadcrumbs in blogger blog post" width="640" /></a></div>
 
Visitors will find the type or category of the blog posts with the help of the breadcrumbs. And  
 
What are Breadcrumbs?  
<blockquote class="tr_bq">
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.
</blockquote>
 
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 <a href="https://webmasters.googleblog.com/2020/01/data-vocabulary.html" rel="nofollow" target="_blank">Google's recent announcement</a> (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 <a href="https://search.google.com/structured-data/testing-tool" rel="nofollow" target="_blank">structured data testing tool</a> 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. 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-yWFtUl-m8Z8/Xl0SguBp4uI/AAAAAAAABto/bMsEujzV6WkKEUbtc5Mp557_zN4PnAOygCLcBGAsYHQ/s1600/Data%2Btesting%2Btool.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="data testing" border="0" data-original-height="651" data-original-width="1600" height="260" src="https://1.bp.blogspot.com/-yWFtUl-m8Z8/Xl0SguBp4uI/AAAAAAAABto/bMsEujzV6WkKEUbtc5Mp557_zN4PnAOygCLcBGAsYHQ/s1600/Data%2Btesting%2Btool.png" title="data testing" width="640" /></a></div>
<h3 style="text-align: left;">
Best Way to Fix data-vocabulary.org Schema Deprecated Breadcrumbs Issue in Blogger
</h3>
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: 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-U9avGyQlAds/Xl0TwHdJXDI/AAAAAAAABt0/Suxe9Uylyk4CAna7iyyRPj13Bg_gdeewQCLcBGAsYHQ/s1600/page%2Bis%2Bnot%2Beligible.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="page is not eligible" border="0" data-original-height="423" data-original-width="934" height="288" src="https://1.bp.blogspot.com/-U9avGyQlAds/Xl0TwHdJXDI/AAAAAAAABt0/Suxe9Uylyk4CAna7iyyRPj13Bg_gdeewQCLcBGAsYHQ/s1600/page%2Bis%2Bnot%2Beligible.png" title="page is not eligible" width="640" /></a></div>
<h4 style="text-align: left;">
Steps to migrate deprecated data-vocabulary.org to schema.org structured data markup:</h4>
 
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 
 
<div style="background: #ffffff; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<pre style="line-height: 125%; margin: 0;"><b:includable id='breadcrumb' var='posts'>
</pre>
</div>
 </div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-y2WRhCSMw3Q/Xl0Wn0ZWsjI/AAAAAAAABuI/y30Rqw9F-tA8G5a4PAd2cM1O5Ui8WEfkACLcBGAsYHQ/s1600/search%2Bterm%2Bfor%2Bbreadcrumbs.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="breadcrumbs search term" border="0" data-original-height="405" data-original-width="1481" height="174" src="https://1.bp.blogspot.com/-y2WRhCSMw3Q/Xl0Wn0ZWsjI/AAAAAAAABuI/y30Rqw9F-tA8G5a4PAd2cM1O5Ui8WEfkACLcBGAsYHQ/s1600/search%2Bterm%2Bfor%2Bbreadcrumbs.png" title="breadcrumbs search term" width="640" /></a></div>
 
Step 3: Here you need to replace the between section from <b:includable id='breadcrumb' var='posts'> to </b:includable> tags with the below mentioned code. Then save your theme and exit from that section. 
 
 
<div style="background: #ffffff; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<pre style="line-height: 125%; margin: 0;"><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; <data:blog.pageName/>
 </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>
</pre>
</div>
 
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. 
 
<div style="background: #ffffff; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<pre style="line-height: 125%; margin: 0;">/* 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}
</pre>
</div>
<div>
 
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: 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-hFcGK_mLCAo/Xl0USo1ifkI/AAAAAAAABt8/wvXYKnpdAucGgOBdTYozirVQHr0uenllgCLcBGAsYHQ/s1600/eligible%2Bfor%2Brich%2Bresults.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="eligible for rich results" border="0" data-original-height="435" data-original-width="1108" height="250" src="https://1.bp.blogspot.com/-hFcGK_mLCAo/Xl0USo1ifkI/AAAAAAAABt8/wvXYKnpdAucGgOBdTYozirVQHr0uenllgCLcBGAsYHQ/s1600/eligible%2Bfor%2Brich%2Bresults.png" title="eligible for rich results" width="640" /></a></div>
 
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. 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-THyd-yZ4TRo/XmY3xeaz5wI/AAAAAAAABuk/H8pB8P1mXpMoeeqccnFi0FZQoDDn1U2sACLcBGAsYHQ/s1600/Fix%2Bdatavocabulary%2Berror.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="fix datavocabulary error" border="0" data-original-height="657" data-original-width="1600" height="262" src="https://1.bp.blogspot.com/-THyd-yZ4TRo/XmY3xeaz5wI/AAAAAAAABuk/H8pB8P1mXpMoeeqccnFi0FZQoDDn1U2sACLcBGAsYHQ/s1600/Fix%2Bdatavocabulary%2Berror.png" title="fix datavocabulary error" width="640" /></a></div>
 
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. </div>
</div>