I recently got an email from Google Search Console about a Breadcrumb error warning. The core of the message is about the deprecated data-vocabulary.org schema which will be stopped in April 2020 to come.
To solve this problem, you only need to replace the breadcrumb markup from data-vocabulary.org with the schema.org type. Following is How to Overcome Breadcrumb Warning in Google Search Console .
How to Overcome Breadcrumb Warning in Google Search Console
Open the Blogger page > Click the Themes menu and click the Edit HTML button > find the code like the following image
Or you can use the search feature in the theme editor by pressing the button CTRL+Fand then find code like this
<b:includable id='breadcrumb' var='posts'>… </b:includable>Next replace the breadcrumb code with this latest version
<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 + "?&max-results=10"' 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>
</b:includable>After that, also replace the CSS code from the old breadcrumb with this version
/* 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;color:#888;font-weight:400;transition:all .3s ease-in-out}
.breadcrumbs a:hover{color:#0984e3}
.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:#888}
.breadcrumbs svg.homesvg path{fill:#888}For CSS code you can edit it according to the theme used.
After that, click the Save theme button to save the changes.
Thus tips from Reva for How to Overcome Breadcrumb Warning in Google Search Console . Thank you for visiting and hopefully useful.
