Fix Data-Vocabulary Schema Deprecated Breadcrumbs Error in Blogger

Google usually come up with new updates and this time they came up with an update of breadcrumbs. Data-Vocabulary Schema Deprecated Breadcrumbs Error is the recent problem which is faced by those people who are having websites.

It is not too much difficult to remove Data-Vocabulary Schema Deprecated Breadcrumbs Error from any website as google is providing us the solution but no one knows how to remove it that's why I need to published this article for you.

I have seen many of the bloggers and those people who are having websites searching for solution how to solve Data-Vocabulary Schema Deprecated Breadcrumbs Error in their website but they didn't find the exact solution that can help them and work perfectly fine. I also came up with this solution after visiting more than 100 web pages.

I am not a wordpress user so that's why I cannot provide you the solution for wordpress but as you know that I am a blogger user in this article I will tell you how you can remove this breadcrumbs error in blogger website or blogs.

This was also faced by me that's why after the solution I have written this article so that you will not have any kind of issues while fixing this error.

Recently Google webmasters tweeted on twitter and emailed the website users. Their tweet is as under.

what are breadcrumbs?

If you don't know, first of all let me tell you what are breadcrumbs. Breadcrumb is an list consisting of chain of linked web pages typically described using at least URL and name and typically breadcrumb list ends up with the current page title.

It usually looks something like this in websites.

But in Google search results it is also shown and have appearance similar to this.

Advantage of breadcrumbs:

Breadcrumbs have no advantages accept it helps to categorise your content on your website and in Google.

Highlight Breadcrumbs Error:

If you use to see your your email inbox daily then you don't need to know how to highlight this error but if you don't use to check your emails daily then you can see your issue highlighted in Google Structured Data Testing Tool and it looks something like this.

You can also highlight this error in your Google Search Console as shown.

Steps to Fix Breadcrumbs Error in Blogger:

Now Let's start with actual process to fix the deprecated breadcrumbs error or migrate data-vocabulary.org to schema.org in blogger or blogspot websites.

1. Go to Blogger Dashboard
2. Go to Theme/Template Section
3. Click Edit HTML
4. Now Search for <b:includable id='breadcrumb' var='posts'> or <b:includable id='breadcrumb' var='post'> or <b:includable id='breadcrumb'

To search anything in blogger template section press Ctrl+F and then type term to search and press enter.

You will find the above code if you already have breadcrumbs implemented in your blogger site if you don't have implemented breadcrumbs before in your website then you will not find the code provided above, in that case comment below.

5. Now click the arrow icon at the left side of the code which you searched in your Blogger HTML Editor as Shown.


6. Now simply select and delete this code you have to select this line from start to end and click backspace.
7. Now copy the code provided below and add it in place of the above deleted code.

<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>

If you face error while saving the above code simply replace & in

<a expr:href='data:label.url + "?&max-results=10"' expr:title='data:label.name' itemprop='item'>

with &amp;.
8. Now copy the code provided below and paste it just before </head> Tag.

<style>
/* Breadcrumbs */
.breadcrumbs{font-size:20px;padding:10px;color:#223c88;position:relative;margin-bottom:15px;margin-right:0px;font-family:'Roboto',sans-serif;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16);background:#fff}
.breadcrumbs a span{color:#223c88;text-decoration:none;font-weight:700;padding:0 2px;font-size:13px}
.breadcrumbs a{color:#223c88;padding:5px 2px;font-size:12px}
.breadcrumbs span{font-weight:Bold;font-size:13px}
.breadcrumbs span a:hover{color:#ff0097}
.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:#c8c8c8}
.breadcrumbs svg.homesvg path{fill:#223c88}
</style>

9. Now find the correct place to show breadcrumbs and after that copy the code provided below and paste it where you want to show this breadcrumbs.

<b:include name='breadcrumb'/>

10. You are all done Save Theme/Template

Final Words:

Now we have Fixed Data-Vocabulary Schema Deprecated Breadcrumbs Error in Blogger if you want to test the fix go and perform Rich Results Test or go to structured data testing tool and test the fix and after testing the fix go into your Google webmaster admin panel and click on validate fix button to validate this fix.

I think that I have sketched all the things that you people may face to resolve or Fix Data-Vocabulary Schema Deprecated Breadcrumbs Error in Blogger but if you still have any issue you can comment your issue that you are facing below.