Cara Memperbaiki Masalah Breadcrumb di Search Console Pada Template Blogger

Cara Memperbaiki Masalah Error Breadcrumb di Search Console Pada Template Blogger

Baru-baru ini blog saya, muchammadlutfihakim.com mendapati peringatan yang dikirim dari google webmaster tool / google search console. Peringatannya adalah tentang masalah breadcrumb. Masalah ini muncul sejak saya mengganti template / tema blog minggu lalu, namun masalah ini muncul baru-baru ini. Sempet kaget dan bingung tentang masalah yang baru saya dapati pertama kali ini, akhirnya saya cari-cari apa itu breadcrumb serta cara memperbaikinya.

Apa itu Breadcrumb ?

Breadcrumb adalah navigasi pada blog yang membantu pengunjung untuk memahami lokasi mereka saat berada dalam sebuah website. Dengan kata lain, breadcrumb ini menyempurnakan navigasi seperti homepage, kategori, tag, dan arsip website. Memang menurut saya breadcrumbs ini tidak terlalu penting karena sudah ada kategori, tag, dan arsip yang sudah sangat bisa membantu pengunjung.

Breadcrumb

Apa Fungsi Breadcrumbs Pada Blog?

Breadcrumb berfungsi sebagai navigasi website yang memudahkan mesin pencari melakukan crawl sehingga dapat menemukan website kita dengan mudah. Dilihat dari SEO, cara ini cuku bagus mendongkrak sedikit skor SEO blog kita.

Pada mesin pencari google, blog yang menggunakan breadcrumb akan terlihat seperti gambar berikut.

Breadcrumb pada Mesin Pencari Google

Cara Mengatasi Masalah Error Breadcrumb Pada Template Blogger

Pertama buka halaman blogger, kemudian klik menu tema, dan klik edit HTML

Kemudian cari kode berikut, untuk memudahkan pencarian gunakan ctrl + f pada keyboard,

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

Setelah ketemu kode yang dicari, hapus kode breadcrumb yang lama,
(Kode breadcrumb lama seperti contoh kode dibawah ini)

<b:includable id='breadcrumb' var='posts'>
...sampai dengan penutup ...
....
</b:includable>

Kemudian copy kode Breadcrumb baru dibawah ini, lalu tempel tepat diatas kode <b:includable id='comment-form' var='post'> (yang sudah kita cari sebelumnya)

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:view.isPost'>
    <b:loop values='data:posts' var='post'>
        <div class='breadcrumbs' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'>
            <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
            <a expr:href='data:blog.homepageUrl' itemprop='item' title='Home'>
            <meta content='1' itemprop='position'/>
            <span itemprop='name'><b:switch var='data:blog.locale'><b:case value='id'/>Beranda<b:default/>Home</b:switch></span></a>
            </span>
            <b:if cond='data:post.labels'>
            <b:loop index='nomor' 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:nomor+2' itemprop='position'/>
                <a expr:href='data:label.url + &quot;?&amp;max-results=8&quot;' expr:title='data:label.name' itemprop='item' rel='nofollow'>
                  <span itemprop='name'><data:label.name/></span>
                </a>
              </span>
            </b:loop>
            <b:else/>
            &amp;nbsp;&#8250;&amp;nbsp; <span itemprop='name'><data:blog.pageName/></span>
            </b:if>
        </div>
    </b:loop>
<b:elseif cond='data:view.isPage'/>
    <div class='breadcrumbs' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'>
        <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
        <a expr:href='data:blog.homepageUrl' itemprop='item' title='Home'>
        <meta content='1' itemprop='position'/>
        <span itemprop='name'><b:switch var='data:blog.locale'><b:case value='id'/>Beranda<b:default/>Home</b:switch></span></a>
        </span> &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:blog.url' expr:title='data:post.url' itemprop='item'>
          <span itemprop='name'><data:blog.pageName/></span>
        </a>
        </span>
    </div>
</b:if>
</b:includable>

Setelah itu, cari copy kode dibawah ini, kemudian paste-kan diatas 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 berikut tepat dibawah kode <b:includable id='main' var='top'> 

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

(Catatan: Jika sudah terdapat kode yang mirip dengan kode dibawah ini, langkah ini dilewati saja)

Selanjutnya klik simpan tema dan selesai deh. :D

Untuk memastikan bahwa langkah diatas sudah benar, cek kembali blog kita di google webmaster tool dengan cara pastekan url postingan yang terjangkit masalah ke link uji berikut ini https://search.google.com/structured-data/testing-tool/u/0/

Langkah terakhir yang harus dilakukan adalah kembali pada halaman Google Webmaster Tool di https://search.google.com/search-console dan klik pada bagian breadcrumb dan klik validasi perbaikan.

Validasi Perbaikan Breadcrumb pada Search Console

Jika sudah, tahap terakhir adalah menunggu validasi perbaikan selesai. Sekian tutorial dari saya tentang Cara Memperbaiki Masalah Error Breadcrumb di Search Console Pada Template Blogger. Walaupun sedikit semoga dapat membantu teman-teman sekalian. Semoga bermanfaat, :D

Share this post