Resolve Breadcrumb issue In Blogger easily

Breadcrumb issue data.vocabulary resolved

At the start of the year, Google made some changes to their accepted schema markups among other things. Which caused issues to be precise ( data-vocabulary.org schema deprecated ) in all sites that used breadcrumbs in their site blogger blogs included.


While this may seem like a  simple issue it may have affected many blogs SERP as Google reads these schema markups to crawl and rank a website. And in the near future if this breadcrumb issue isn't resolved it will show an error instead of an issue that can drastically affect SERP negatively.

So, how to resolve this breadcrumb issue aka data-vocabulary.org schema deprecated?

Well, I will show you the necessary steps to fix the breadcrumb issue. But first, let me tell you...

What is breadcrumb schema and why breadcrumb issue occurring?

Breadcrumb is a markup which is a graphical control element frequently used as a navigational aid in user interfaces. For example, the breadcrumb of this post is the below picture and is situated above the title.
breadcrumb picture
Breadcrumb


Anyway, the breadcrumb issue occurred because Google changed the breadcrumb schema rule to follow their own schema.org one instead of previous data-vocabulary.org one.

Steps to fix breadcrumb issue data-vocabulary.org schema deprecated issue

Note: This portion is technical and needs editing your template. So, create a backup of your template before proceeding

Since you have come to fix data-vocabulary.org schema deprecated issue I can assume you are using custom blogger templates with breadcrumb markup as default themes don't support breadcrumb.
So, we have to first find where your breadcrumb code is in your template to fix the issue.

  1. Go-to blogger dashboard > themes > edit HTML
  2. Now in the opened window after putting the cursor in your template code click ctrl + f and search for vocabulary.org. 
  3. If you indeed have an old breadcrumb tag blogger will find the start of the code like below. There will be obviously some changes in the code of your template. But where you found vocabulary.org word is obviously the start of breadcrumb.
    Breadcrumb issue data.vocabulary fix steps
  4. Now that you have found the start of the old breadcrumb tag we have to find the last part. To find the last part of the code change the start tag ( marked blue in above pick ) to xxx or anything else. Start tag can be <span> or <ul> or any other tag depending on your template. 
  5. Whenever you edited the start tag blogger's default syntax will show the end tag as red like the below picture.
    Breadcrumb issue fix blogger
  6. Now that we have found the whole code of old breadcrumb select it from the found start to end and replace it with the code snippet below and Hit save.
  7.  That's it! You have successfully resolved the blogger breadcrumb issue. You can now check-in google rich snippet test to see the breadcrumb issue is resolved.

Code to fix Blogspot breadcrumb issue/ Code for schema.org breadcrumb blogger



<div itemscope='' itemtype='https://schema.org/BreadcrumbList'>                  
  <span itemprop='itemListElement' itemscope='' itemtype='https://schema.org/ListItem'>
<a class='bhome' expr:href='data:blog.homepageUrl' itemprop='item'>
<span itemprop='name'>Home</span></a> <span> >> </span>
<meta content='1' itemprop='position'/>
</span>     
   <b:loop values='data:posts' var='post'>
     <b:if cond='data:post.labels'>
       <b:loop index='labelcount' values='data:post.labels' var='label'>                    
  <span itemprop='itemListElement' itemscope='' itemtype='https://schema.org/ListItem'>
<a expr:href='data:label.url' itemprop='item'>
<span itemprop='name'> <data:label.name/> </span></a>
<meta expr:content='data:labelcount + 2' itemprop='position'/>
</span>
<b:if cond='data:label.isLast != "true"'> <span> >> </span></b:if>
           </b:loop>
      <b:else/>
      Unlabelled
    </b:if>
     <span> >> </span><span><data:post.title/></span>
  </b:loop>                         
</div>

I hope This post helped you to resolve the breadcrumb issue you are facing in bloggers in recent times.
Don't forget to hit the appropriate reaction at the end of the post.
And as always if you have any queries feel free to comment below.

1 comment:

  1. Thank you sir. after trying everything my blog breadcrumbs problem solve

    ReplyDelete

Powered by Blogger.