Cara Mengatasi Error Breadcrumb di Search Console Blogger - Arlina Design
Beberapa waktu lalu di salah satu blog demo dari template yang saya buat muncul pesan peringatan error khususnya pada bagian Breadcrumb yang terpasang di template. Mungkin untuk beberapa template lain tidak mengalami masalah ini termasuk template blog yang blog ini dan Idntheme gunakan, namun masalah ini muncul pada template Nubie Fast yang saya share di Idntheme.

Cara Mengatasi Error Breadcrumb di Search Console Blogger

Breadcrumb yang akan saya share ini sudah menggunakan markup breadcrumb versi terbaru yaitu schema.org yang direkomendasikan mesin pencari seperti Google dan Bing.

Bagi sobat yang mengalami masalah error pada breadcrumb, silakan ikuti tips Cara Mengatasi Error Breadcrumb di Search Console Blogger berikut ini.

Cara Mengatasi Error Breadcrumb di Search Console Blogger


Jika di template sobat sebelumnya sudah terdapat Breadcrumb, silakan ganti dengan versi ini

Pertama buka halaman Blogger > Klik menu Tema dan klik tombol Edit HTML > Tambahkan kode di bawah ini tepat di atas kode <b:includable id='comment-form' var='post'>

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

Kemudian tambahkan kode CSS berikut sebelum kode </head>

<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:#888;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:#666;font-weight:400}
.breadcrumbs a:hover{color:#11589D}
.breadcrumbs svg{width:16px;height:16px;vertical-align:-4px}
.breadcrumbs svg path{fill:#666}
</style>

Selanjutnya, tambahkan kode ini tepat di bawah kode <b:includable id='main' var='top'>

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

Setelah itu, klik Simpan tema dan selesai.

Langkah selanjutnya cek kembali di https://search.google.com/search-console blog sobat dan klik menu Breadcrumb.

Cara Mengatasi Error Breadcrumb di Search Console Blogger

Klik pada bagian tulisan Error, setelah itu klik pada tombol Validate Fix

Cara Mengatasi Error Breadcrumb di Search Console Blogger

Selanjutnya sobat tinggal menunggu pesan perbaikan yang akan dikirmkan lewat email setelah divalidasi.

Sekian dari Arlina Design, semoga bermanfaat dan wassalam.

Cara Mengatasi Error Breadcrumb di Search Console Blogger

Beberapa waktu lalu di salah satu blog demo dari template yang saya buat muncul pesan peringatan error khususnya pada bagian Breadcrumb yang terpasang di template. Mungkin untuk beberapa template lain tidak mengalami masalah ini termasuk template blog yang blog ini dan Idntheme gunakan, namun masalah ini muncul pada template Nubie Fast yang saya share di Idntheme.

Cara Mengatasi Error Breadcrumb di Search Console Blogger

Breadcrumb yang akan saya share ini sudah menggunakan markup breadcrumb versi terbaru yaitu schema.org yang direkomendasikan mesin pencari seperti Google dan Bing.

Bagi sobat yang mengalami masalah error pada breadcrumb, silakan ikuti tips Cara Mengatasi Error Breadcrumb di Search Console Blogger berikut ini.

Cara Mengatasi Error Breadcrumb di Search Console Blogger


Jika di template sobat sebelumnya sudah terdapat Breadcrumb, silakan ganti dengan versi ini

Pertama buka halaman Blogger > Klik menu Tema dan klik tombol Edit HTML > Tambahkan kode di bawah ini tepat di atas kode <b:includable id='comment-form' var='post'>

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

Kemudian tambahkan kode CSS berikut sebelum kode </head>

<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:#888;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:#666;font-weight:400}
.breadcrumbs a:hover{color:#11589D}
.breadcrumbs svg{width:16px;height:16px;vertical-align:-4px}
.breadcrumbs svg path{fill:#666}
</style>

Selanjutnya, tambahkan kode ini tepat di bawah kode <b:includable id='main' var='top'>

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

Setelah itu, klik Simpan tema dan selesai.

Langkah selanjutnya cek kembali di https://search.google.com/search-console blog sobat dan klik menu Breadcrumb.

Cara Mengatasi Error Breadcrumb di Search Console Blogger

Klik pada bagian tulisan Error, setelah itu klik pada tombol Validate Fix

Cara Mengatasi Error Breadcrumb di Search Console Blogger

Selanjutnya sobat tinggal menunggu pesan perbaikan yang akan dikirmkan lewat email setelah divalidasi.

Sekian dari Arlina Design, semoga bermanfaat dan wassalam.

Related Post

Disqus Codes
  • To write a bold letter please use <strong></strong> or <b></b>
  • To write a italic letter please use <em></em> or <i></i>
  • To write a underline letter please use <u></u>
  • To write a strikethrought letter please use <strike></strike>
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>
    And use parse tool below to easy get the style.
Show Parser Box

strong em u strike
pre code pre code spoiler
embed

Subscribe Our Newsletter

Notifications

Disqus Logo