Google has dimed the data-vocabulary.org schema to be of old-style and the best type of schema to use is that from Schema.org. So, if you are getting the warning about data vocabulary schema being deprecated, you shouldn't be surprised. All you will have to do is use the new Schema.org BreadcrumbList schema.
How to fix data-vocabulary.org schema deprecated error
To fix this issue, you will have to remove the old schema from data-vocabulary.org from your blogger template code and replace it with the new breadcrumb markup from schema.org.
So, let's get started.
What to do first
Before you proceed, note that you need to have some Blogger template editing knowledge. And to avoid any errors that might mess-up your site, we advise you to take a backup of your template first.
Backup your template by simply going to theme > Backup/Restore and on the popup windows that displays, hit the download button.
Removing old data-vocabulary.org breadcrumb schema
To add the updated schema for breadcrumb list from schema.org, you will first need to remove the old one. Proceed thus;
- From your Blogger dashboard, search, go to "Theme"
- Next, click on "Edit HTML" and you will now see the XML template code of your website.
- Since there are different developers and some of the codes differ, we have different ways the breadcrumb is represented. So, you will find one of the following lines of code;
- <div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
- <b:includable id='breadcrumb' var='posts'>
If you have the fo you have the lines of code in (1) above, your breadcrumb code will look like something similar to this:
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a class='bhome' expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span> <brc>/</brc>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<span typeof='v:Breadcrumb'>
<a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
<b:if cond='data:label.isLast != "true"'><brc>/</brc></b:if>
</b:loop>
<b:else/>
Unlabelled
</b:if>
<brc>/</brc> <span><data:post.title/></span>
</b:loop>
</div>
As you can see, this breadcrumb schema is with the data-vocabulary.org. Replace it with the following code and save your template.
On the other hand, if you found the second lines of code (2). That's the <b:includable id='breadcrumb' var='posts'> ...</b:includable>
Replace all the old breadcrumb code with the one below. You should be replacing the whole block of code.
Save your template.
<div class='breadcrumbs'>
<span><a class='bhome' expr:href='data:blog.homepageUrl'>Home</a></span> <brc>/</brc>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
<span>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a></span>
</b:if>
</b:loop>
<b:else/>
Unlabelled
</b:if>
<brc>/</brc> <span><data:post.title/></span>
</div>
<script type='application/ld+json'>
{
"@context": "http://schema.org",
"@type": "BreadcrumbList",
"@id": "#Breadcrumb",
"itemListElement": [{
"@type": "ListItem",
"position": 1,
"item": {
"name": "<data:messages.home/>",
"@id": "<data:blog.homepageUrl.jsonEscaped/>"
}
},{
"@type": "ListItem",
"position": 2,
"item": {
"name": "<b:if cond='data:post.labels'><data:post.labels.last.name/></b:if>",
"@id": "<data:post.labels.last.url.jsonEscaped/>"
}
},{
"@type": "ListItem",
"position": 3,
"item": {
"name": "<data:post.title/>",
"@id": "<data:post.url.jsonEscaped/>"
}
}]
}
</script>
On the other hand, if you found the second lines of code (2). That's the <b:includable id='breadcrumb' var='posts'> ...</b:includable>
Replace all the old breadcrumb code with the one below. You should be replacing the whole block of code.
Save your template.
<b:includable id='breadcrumb' var='post'>
<div class='breadcrumbs' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'>
<div class='home-link' itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<a expr:href='data:blog.homepageUrl.canonical' itemprop='item' itemtype='https://schema.org/Thing' title='Home'>
<span itemprop='name'>Home</span>
</a><meta content='1' itemprop='position'/>
</div>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<div itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<a expr:href='data:label.url.canonical' expr:title='data:label.name' itemprop='item' itemtype='https://schema.org/Thing'><span itemprop='name'><data:label.name/></span></a><meta expr:content='data:num+2' itemprop='position'/>
</div>
</b:loop>
<b:else/>
Uncategorized
</b:if>
</div>
</b:includable>
Validating breadcrumb error fix in search console.
You will have to test the newly added breadcrumb for error using the Google structure data test tool. And once you've confirmed it shows no breadcrumbs errors or warnings, submit a validation request to Google from the search console.
You can test by using any posts URL from your blog.
0 Comments