Data-vocabulary.org Schema Deprecated

Yesterday I got an email notification from Google Search Console about the breadcrumb problem data-vocabulary.org schema deprecated with the contents of the message as in the picture below.

Data-vocabulary.org Schema Deprecated

How to fix it? Before you overcome this breadcrumb problem, it's good to know what it is data-vocabulary.org.

What is data-vocabulary.org?

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

Schema.org's structured data is Open Source structured data that is 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.


What is a structured data scheme?

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 this data-vocabulary.org starting April 2020.

This is the announcement from Google explaining the changes from this structured data:

As of April 6, 2020, data-vocabulary.org markup will no longer be eligible for Google rich result features.

So if your blog still uses data-vocabulary.org please switch now to the data structure Schema.org.

For example the breadcrumb markup attached to your template like this

<div class='breadcrumbs'>
<span itemscope='' itemtype='https://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url' title='Home'><span itemprop='title'>Home</span></a></span>
<b:loop values='data:post.labels' var='label'>
<i aria-hidden='true' class='fa fa-angle-right'/> 
<span itemscope='' itemtype='https://data-vocabulary.org/Breadcrumb'>
<a expr:href='data:label.url + &quot;?max-results=7&quot;' expr:title='data:label.name' itemprop='url'>
<span itemprop='title'>
<data:label.name/>
</span>
</a>
</span>
</b:loop>
<i aria-hidden='true' class='fa fa-angle-right'/> 
<span>
<data:post.title/>
</span>
</div>

If you already have Breadcrumb in your template, please replace it with this version

How to Fix Breadcrumb Error in Blogger Search Console

First open the Blogger page > Click the menu Themes and click the button Edit HTML > Add the code below right above the code <b:includable id='comment-form' var='post'>

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'>
<svg viewBox='0 0 24 24'><path d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z' fill='#000000'/></svg>
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<a expr:href='data:blog.homepageUrl' title='Home' itemprop='item'>
<span itemprop='name'>Home</span></a>
<meta content='1' itemprop='position'/>
</span>
<svg viewBox='0 0 24 24'><path d='M5.5,9A1.5,1.5 0 0,0 7,7.5A1.5,1.5 0 0,0 5.5,6A1.5,1.5 0 0,0 4,7.5A1.5,1.5 0 0,0 5.5,9M17.41,11.58C17.77,11.94 18,12.44 18,13C18,13.55 17.78,14.05 17.41,14.41L12.41,19.41C12.05,19.77 11.55,20 11,20C10.45,20 9.95,19.78 9.58,19.41L2.59,12.42C2.22,12.05 2,11.55 2,11V6C2,4.89 2.89,4 4,4H9C9.55,4 10.05,4.22 10.41,4.58L17.41,11.58M13.54,5.71L14.54,4.71L21.41,11.58C21.78,11.94 22,12.45 22,13C22,13.55 21.78,14.05 21.42,14.41L16.04,19.79L15.04,18.79L20.75,13L13.54,5.71Z' fill='#000000'/></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=16&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>
<b:if cond='data:label.isLast != &quot;true&quot;'>
<svg viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='#000000'/></svg>
</b:if>
</b:loop>
<svg viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='#000000'/></svg>
<span><data:post.title/></span>
</div>
</b:if>
</b:loop>
</b:if>
</b:includable>

Then add the following CSS code before the code </head>

<style type='text/css'>
/* Breadcrumb */
.breadcrumbs{background:#fff;line-height:1.2em;width:auto;overflow:hidden;margin:0;padding:10px 0;border-top:1px solid #dedede;border-bottom:1px solid #dedede;font-size:80%;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:#666;font-weight:400}
.breadcrumbs a:hover{color:#11589D}
.breadcrumbs svg{width:16px;height:16px;vertical-align:-4px}
.breadcrumbs svg path{fill:#666}
</style>

Next, add this code directly below the code <b:includable id='main' var='top'>

<b:include data='posts' name='breadcrumb'/>

After that, click Save Theme and finish.


That's a little information that I can give for this opportunity, hopefully useful and respectful.