FIX! How to Overcome Breadcrumbs Issues data-vocabulary.org on Blog

Some of these days there may be among all of you blog owners who get email messages from the Google console stating that the breadcumb you are using is an error and should be corrected immediately. The message explained that the error occurred because of the data-vocabulary.org schema deprecated problem. A little review that breadcrumbs themselves have a function that is quite important for a blog. Breadcrumb on a web page serves to show the position of the page in the site hierarchy.

In addition, another function of breadcrumbs is to categorize information from search results pages, so that users can see the same categories as those pages. In general, there are two breadcrumbs that are widely used by blog owners namely using data-vocabulary.org which is an old version and uses schema.org, the version that is widely used today. As for the writing format used there are three namely RDFA, Micordata and LD-JSON.

If by chance the breadcrumbs used by your blog are still an old version of data-vocabulary.org, then it is very likely that you will get a message that the breadcrumbs you are using are errors that must be corrected immediately. Here's the message I received:

Why does something like this happen? There are certain reasons why we have a problem with breadcumb data-vocabulary.org schema deprecated. The allegations are possible because Google no longer supports this old markup, so we are required to immediately switch to using the latest markup, schema.org. This problem is reportedly also appearing globally, so that all blog platform users, whether bloggers, wordpress or others who still use breadcrumbs with vocabulary.org, are affected in the google search console.

The use of the latest markup from schema.org is already recommended for those who install breadcrumb on a blog. Therefore, for all users of the old version of breadcrumbs, if this problem arises and you don't fix it immediately, then the effect when we use the Search console for new content will have a warning in its index section. This can also cause all articles to be hit by a warning both old content and new content that was recently published.

How to handle it? The solution is to replace your old breadcrumbs with new ones using schema.org. As for the implementation steps, you can follow the steps below.

1. Open your blogger account.

2. Select the theme menu and click edit html.

3. Look for the breadcrumbs code that you have installed. For simplicity, usually the code line is above the code <b: includable id = 'comment-form' var = 'post'>

4. If you have found it, delete the code that starts with the code <b: includable id = 'breadcrumb' var = 'posts'>

up to code

......

</ b: includable>.

Also delete the CSS settings, if any.

5. Instead, you can use the breadcrumbs code from schema.org below and place it in the place you deleted earlier. Here is the 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'><svg viewBox='0 0 24 24'><path d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z' fill='#000000'/></svg><span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'><a expr:href='data:blog.homepageUrl' title='Home' itemprop='item'><span itemprop='name'>Home</span></a><meta content='1' itemprop='position'/></span>
<svg viewBox='0 0 24 24'><path d='M5.5,9A1.5,1.5 0 0,0 7,7.5A1.5,1.5 0 0,0 5.5,6A1.5,1.5 0 0,0 4,7.5A1.5,1.5 0 0,0 5.5,9M17.41,11.58C17.77,11.94 18,12.44 18,13C18,13.55 17.78,14.05 17.41,14.41L12.41,19.41C12.05,19.77 11.55,20 11,20C10.45,20 9.95,19.78 9.58,19.41L2.59,12.42C2.22,12.05 2,11.55 2,11V6C2,4.89 2.89,4 4,4H9C9.55,4 10.05,4.22 10.41,4.58L17.41,11.58M13.54,5.71L14.54,4.71L21.41,11.58C21.78,11.94 22,12.45 22,13C22,13.55 21.78,14.05 21.42,14.41L16.04,19.79L15.04,18.79L20.75,13L13.54,5.71Z' 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>

6. To make it neater, copy the following code for the CSS settings.

.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:#000;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:#000;font-weight:400}.breadcrumbs a:hover{color:#089416}.breadcrumbs svg{width:16px;height:16px;vertical-align:-4px}.breadcrumbs svg path{fill:#000}

7. Please save your template again.

If you want a simpler look of breadcrumbs, you can use the following code:

<b:includable id='breadcrumb' var='posts'>
<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>
</b:includable>

CSS settings code:

.breadcrumb { margin-bottom: 20px; } .breadcrumb, .breadcrumb a, .breadcrumb a:hover { font-size: 12px; /* ukuran text */ color: #777; /* warna text */ }

8. If it's already saved, the next step is to reopen the e-mail message from the search console and click on fix breadcrumbs issues.

9. If the google search console is open, please select validate fix to notify you that the problem has been fixed.

10. Finally let's wait together and pray that this problem has been successfully and successfully corrected.

Thus How to Overcome Breadcrumbs Error because data-vocabulary.org schema deprecated. May be useful.

Bagikan Artikel ini