How To Fix A Problematic Breadcrumb On The Google Search Console

Reporting from a social media account owned by google search console which says that,

"With the increasing use and popularity of schema.org we have decided to focus our development on one single scheme. Data-vocabulary.org markup is no longer eligible for Google-rich results feature (will be permanently deleted) on 6 April 2020". Read more on the Google blog .
You need to know that, "Google uses the structured data structure format and a shared scheme to provide information about the page and things described by the page".

Remember! As Google said, the old Breadcrumb from Data-Vocabulary was eligible for search results on SERP.

Therefore, immediately to quickly improve the breadcrumb of your website/blog. Because if not this will be very influential for your site going forward. And to overcome your anxiety, here I will share a little tutorial to install the latest HTML Breadcrumb markup.

What should you do?

Here we will use Microdata HTML as in this blog.

Okay, let's just fix it for blogger.

1. Add CSS below and place it above <style> or ]]></b:skin>

.breadcrumbs {
 margin: 0 0 10px 0;
}
.breadcrumbs, .breadcrumbz a, .breadcrumbs a: hover {
font-size: 12px;
color: #555;
}

Note:
If your blog template already has a CSS breadcrumb code, it's up to you to change it or not.

2. Look for the code as below:

<h1 class = 'entry-title'>

Or, if you use first image (the image is above the title) in the blog post. So I suggest to place it directly above the firstimage markup.

3. If you have found, please add the following code and place it as I mentioned before.

<b:if cond='data:view.isPost'>
  <b:loop values='data:posts' var='post'>
    <div class='breadcrumb' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'>
      <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
        <a expr:href='data:blog.homepageUrl.canonical' title='Home' itemprop='item'>
        <meta content='1' itemprop='position'/>
        <span itemprop='name'>Home</span></a>
      </span>
      <b:if cond='data:post.labels'>
        <b:loop index='num' values='data:post.labels' var='label'> &amp;nbsp;&#8250;&amp;nbsp;
          <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
            <meta expr:content='data:num+2' itemprop='position'/>
            <a expr:href='data:label.url.canonical' expr:title='data:label.name' itemprop='item'>
              <span itemprop='name'><data:label.name/></span>
            </a>
          </span>
        </b:loop>
        <b:else/>
        &amp;nbsp;&#8250;&amp;nbsp; Tidak Ada Kategori
      </b:if>
    </div>
  </b:loop>
</b:if>

4. Finally, save all the code above. Keep in mind, placement can be anywhere as long as it is still within the scope of the article/posting page.

To check, please visit the Google Structured Data Testing Tool. Enter the address or Url of your blog post then click the "run test" button, and you will see the results later.

Well, that's how to fix a problematic breadcrumb on the google search console. If you think this article is useful, please share with other friends so they also know what you know.

Tags: Blogging Tutorials

Share this: