How to solve Blogger breadcrumbs error

Often when bloggers want to index articles on Google search console, they get error notifications. The error turned out to be caused by breadcrumb.

You need to know, breadcrumbs play an important role in SEO. Breadcrumbs will display the order of the labels when your post is found in a google search. So, if the keywords match your label, the blog posts will be easier to find.

Causes of Breadcrumb Error

Breadcrumbs errors are usually due to a code error in the template you are using. Often encountered by bloggers who use free templates. Can a paid template avoid the breadcrumbs error? Of course not, it all depends on the html code, because now there are many updates that are updated by Google, so maybe many will find this, including myself.

The main problem is that you are still using the data-vocabulary.org breadcrumb. Because now Google has announced that data-vocabulary.org is no longer enforced. So, you need to change it to Schema.org.

How to Fix Blogger Breadcrumb Error

To solve the error breadcrumb, you have to replace it with the latest breadcrumb, namely schema.org.

The main problem is that you are still using the data-vocabulary.org breadcrumb. Because now Google has announced that data-vocabulary.org is no longer enforced. So, you need to change it to Schema.org.

• Open the blogspot dashboard, then select Themes > Edit HTML.

• Press CTRL + F keys to bring up the search box.

• Find Code <b:includable id='comment-form' var='post'>

• Copy the breadcrumb code below, and place it right above the <b:includable id='comment-form' var='post'> code.

<b:includable id='breadcrumb' var='posts'>
   <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <b:loop values='data:posts' var='post'>
         <b:if cond='data:post.labels'>
            <div class='breadcrumbs' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'>
               <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
                  <a class='homebread' 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' fill='#000000'/>
               </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 + &quot;?&amp;max-results=16&quot;' expr:title='data:label.name' itemprop='item'>
                        <span itemprop='name'>
                           <data:label.name/>
                        </span>
                     </a>
                     <meta expr:content='data:num+2' itemprop='position'/>
                  </span>
                  <b:if cond='data:label.isLast != &quot;true&quot;'>
                     <svg viewBox='0 0 24 24'>
                        <path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='#000000'/>
                     </svg>
                  </b:if>
               </b:loop>
               <svg viewBox='0 0 24 24'>
                  <path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='#000000'/>
               </svg>
               <span>
                  <data:post.title/>
               </span>
            </div>
         </b:if>
      </b:loop>
   </b:if>
</b:includable>

Don't just select save, preview first to find out if there is an error in the template code or not. If not, continue with the next code below.

• Still in the HTML template, look for the </head> code.

• Copy the code below, then paste it above the </head> code.

<style type='text/css'>
/* Breadcrumb */
.breadcrumbs{background:#fff;line-height:1.2em;width:auto;overflow:hidden;margin:0;padding:10px 0;border-top:1px solid #dedede;border-bottom:1px solid #dedede;font-size:80%;color:#222;font-weight:400;text-overflow:ellipsis;-webkit-text-overflow:ellipsis;white-space:nowrap}
.breadcrumbs a{display:inline-block;text-decoration:none;transition:all .3s ease-in-out;color:#222}
.breadcrumbs a:hover{color:#11589D}
.breadcrumbs svg{width:16px;height:16px;vertical-align:-4px}
.breadcrumbs svg path{fill:#222}
.homebread{margin:0 2px 0 0}
</style>

• the last step, find the code <b:includable id='main' var='top'>

• Simpan kode di area yang sudah saya tandai, tepat di bawah kode langkah terakhir, cari kode <b:includable id='main' var='top'>

<b:include data='posts' name='breadcrumb'/>

• Then, save the theme & done.

If you have done everything, then go to Google Search Console. Go to Breadcrumb options, then select "Validate Fix". Just wait for the email to come from the google search console that informs you that the breadcrumb has been fixed.

Location:

Share :