Fixed breadcrumb: data-vocabulary.org schema deprecated

Hello everyone, I recently received an email from the Google Search Console team, they said that my current blog has a problem with breadcrumbs. Specifically, structured data using schema data-vocabulary will be discontinued. In this article we will learn more about this problem and how to fix it.

Google will officially end data-vocabulary support from April 6, 2020 . So we need to update the interface to avoid affecting the website.

Official announcement here: https://webmasters.googleblog.com/2020/01/data-vocabulary.html

Quick view

Structured data
How to fix data-vocabulary.org schema deprecated
Check the result

Structured data

What is structured data?

Structured data is a common standard format intended to provide meaningful information about an object and related properties such as Website, owner, release date, etc. Below is an example of an object. structured data in JSON-LD format on the Contact page.

<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"url": "http://www.cydiaguide.app",
"name": "Vietrick.",
"contactPoint": {
"@type": "ContactPoint",
"telephone": "+1-012-345-6789",
"contactType": "Customer service"
}
}
</script>

Google and other search engines will use structured data to easily crawl and capture content. Specifically, the following two purposes:

Easily grasp and understand the content the website offers.
Use and enhance the special search results display feature.

Structured data formats

Structured data formats (format/syntax) such as JSON-LD, RDFa, and Microdata use a small number of fixed structured data to encode descriptive data. These formats are built on top of JSON or HTML. Since Blogger only allows us to interact via HTML, usually templates use the Microdata format in the template.

Google says they currently only support 3 formats: JSON_LD, Microdata and RDFa. Among them, Google recommends using JSON-LD .

Structured data schema

In addition to format types, for structured data use diagrams to define and describe an object (e.g. Person, event, Organization) along with associated attributes and relationships to that object. The separation of format and diagram, allows us to use structured data in the most convenient way.

Here, Schema.org or data-vocabulary is like a dictionary, gathering definitions and descriptions of objects in a structured data format.

How to fix data-vocabulary.org schema deprecated

To edit, we convert the schema from data-vocabulary.org to schema.org. Depending on the format you are using, please convert to the corresponding format. Usually blogger templates use Microdata format . Example schema below:

<ol itemscope="" itemtype="http://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
<a itemprop="item" href="https://example.com/dresses">
<span itemprop="name">Dresses</span></a>
<meta itemprop="position" content="1">
</li>
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
<a itemprop="item" href="https://example.com/dresses/real">
<span itemprop="name">Real Dresses</span></a>
<meta itemprop="position" content="2">
</li>
</ol>

Template backup

Before proceeding to edit the blogger template, go to Theme > Menu > Backup to backup.

Download the .xml template file to backup before making any edits.

Edit template

You go to Theme > Menu > Edit HTML to proceed with editing. You press Ctrl + F to open the search box, enter the keyword: data-vocabulary to go to the breadcrumb section to edit. Example data-vocabulary schema:

<div class='breadcrumbs' xmlns:v='https://rdf.data-vocabulary.org/#'>
<span class='breadhome' typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a> <i class='fa fa-angle-right'/></span>
<b:loop values='data:post.labels' var='label'>
<span class='breadlabel' typeof='v:Breadcrumb'><a expr:href='data:label.url + "?&max-results=8"' property='v:title' rel='v:url'><data:label.name/></a> <i class='fa fa-angle-right'/></span>
</b:loop>
<span class='breadlabel'><data:post.title/></span>
</div>

After finding the item to be edited, depending on the template you are using, you proceed to change the schema from data-vocabulary.org to schema.org according to the structure specified at: https://schema.org/ BreadcrumbList

Below is the result after editing to schema.org:

<div class='breadcrumbs' itemscope='itemscope' itemtype='http://schema.org/BreadcrumbList'>
<span class='breadhome' itemprop='itemListElement' itemscope='itemscope' itemtype='http://schema.org/ListItem'>
<a expr:href='data:blog.homepageUrl' itemprop='item'><span itemprop='name'>Home</span><meta itemprop='position' content='1' /></a> <i class='fa fa-angle-right'/>
</span>
<b:loop values='data:post.labels' var='label'>
<span class='breadhome' itemprop='itemListElement' itemscope='itemscope' itemtype='http://schema.org/ListItem'>
<a expr:href='data:label.url + "?&max-results=8"' itemprop='item'><span itemprop='name'><data:label.name/></span><meta itemprop='position' content='2' /></a> <i class='fa fa-angle-right'/>
</span>
</b:loop>
<span class='breadlabel'><data:post.title/></span>
</div>