mengatasi error Breadcrumb pada search console

Breadcrumb Navigation  adalah sebuah menu navigasi atau penunjuk di mana letak postingan yang sedang dibuka berada. Breadcrumb berupa link horisontal berurut yang diawali dengan menu Home/Beranda >> Label >> Judul Halaman Yang Sedang Dibuka. Letak dari menu Breadcrumb Navigation ini biasanya berada di atas judul postingan.

fungsi Breadcrumb

fungsi utama pada breadcrumb ini ialah agar blog kita cepat terindex pada google, dan yang paling utama ialah memiliki fungsi utama pada SEO blog. namun banyak juga dari temen-temen blogger disini tidak menyukai navigasi breadcrumb ini sehingga banyak blogger termasuk pembuat tema blog juga menghapus breadcromb navigasi ini namun sekarang google menginginkan agar breadcromb ini kembali terpasang pada blog.

mengapa terjadi ?

sebelumnya Google memberitahukan kalau link schema markup yang kita gunakan pada domain data-vocabulary.org sudah tidak digunakan lagi.

Ini juga mencangkup perubahan pemnyusunan struktur dana untuk breadcrumbs yang baru. Jika teman-teman hanya mengganti domain yang mengalami deprecated saja pada struktur breadcrumbs maka halaman tersebut tetap tidak valid struktur datanya.

membuat breadcrumb

disini kita akan belajar membuat breadcrumb schema markup namun sebelumnya anda harus tahu susunan breadcrumb yang benar untuk contoh yang benar ialah harus menggunakan Home » Link 1 » Link 2 » Link 3 » seterusnya. seperti yang saya contohkan dibawah ini :

 <div class='Kelas CSS' itemscope='itemscope' itemtype='https://schema.org/BreadCrumbList'> <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'> <meta content='1' itemprop='position'/> <a href='URL INDEX' itemprop='item' title='Home'> <span itemprop='name'>NAMA DFTAR 1</span></a> </span> » <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'> <meta content='2' itemprop='position'/> <a href='URL DAFTAR LINK 2' itemprop='item' title='NAMA DAFTAR LINK 2'> <span itemprop='name'>NAMA DAFTAR LINK 2</span></a> </span> » <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'> <meta content='3' itemprop='position'/> <a href='URL DAFTAR LINK 3' itemprop='item' title='Tips and trik'> <span itemprop='name'>NAMA DAFTAR LINK 3</span></a> </span> » <span>JUDUL ARTIKEL YANG SEDANG DIBUKA</span> </div>

bagian Kelas CSS adalah nama class yang digunakan untuk mendesain tampilan breadcrumbs kamu. Setiap template mempunyai kelas dan tampilan yang berbeda-beda.

Sedangkan bagian dalamnya terdiri dari list (daftar) link kategori atau lokasi dimana saja pengguna itu berada. Domain schema.org adalah yang digunakan saat ini sebagai pengganti vicabulary.

kode breadcrumb terbaru

dan dibawah inih adalah kode breadcrumb yang valid yang baru saja di susun sesuai dengan struktur data markup terbaru yang sekarang telah diterapkan oleh pihak google :

<b:if cond='data:blog.homepageUrl != data:blog.url'> 
      <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
        <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span><data:blog.pageName/></span>
	    </div>
      <b:else/>
        <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'>
<meta content='1' itemprop='position'/>
     <a expr:href='data:blog.homepageUrl' itemprop='item' title='Home'>
        <span itemprop='name'>Home</span></a> 
            </span> &#187; <b:loop index='num' values='data:post.labels' var='label'>
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<meta expr:content='data:num+2' itemprop='position'/>
       <a expr:href='data:label.url + &quot;?&amp;max-results=8&quot;' expr:title='data:label.name' itemprop='item'>
            <span itemprop='name'><data:label.name/></span></a>
               </span>
               <b:if cond='data:label.isLast != &quot;true&quot;'> &#187; </b:if> </b:loop> &#187; <span><data:post.title/></span>
        </div>


        <b:else/>
        <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span>Uncategories</span> &#187; <span><data:post.title/></span></div>

	    </b:if>
        </b:loop>
      <b:else/>
        <b:if cond='data:blog.pageType == &quot;archive&quot;'>
        <div class='breadcrumbs'> <span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span>Archive for <data:blog.pageName/></span> 
	    </div> 
      <b:else/>
        <b:if cond='data:blog.searchQuery'>
        <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span><data:blog.pageName/></span>
	    </div>
      <b:else/>
        <b:if cond='data:blog.pageType == &quot;index&quot;'> 
        <div class='breadcrumbs'>
	    <b:if cond='data:blog.pageName == &quot;&quot;'> <span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span>All post</span>
        <b:else/>
        <span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span><data:blog.pageName/></span> 
        </b:if>
        </div>
      </b:if>
      </b:if>
      </b:if>
      </b:if>
      </b:if>
      </b:if>


Kode breadcrumbs diatas adalah semua bagian halaman termasuk halaman archive, halaman, pencarian, label, dan semua artikel. Dan satu lagi kode diatas ada nama kelasnya, itu nama kelas template ini om, silakan dengan nama kelas template kamu sendiri.

Cara mencari kode Breadcrurmb lama

cara mencari kode breadcumb yang lama ini ialah yang pertama anda harus masuk ke halaman blogger kemudian anda masuk ke tema dan edit html  Lalu cari kode <b:includable id=’breadcrumb’ var=’posts’> kalau ketemu kamu tandai kode breadcrumbs dibawahnya hingga ketemu dengan tag penutupnya yaitu </b:includable>, tandai semua kode itu lalu ganti dengan yang saya bagikan diatas. Gambaran penyusunanya seperti ini :

<b:includable id='breadcrumb' var='posts'> <!-- Kode BreadCrumbs kamu disini --> </b:includable>

untuk keamanan sebelumnya silahkan anda backup terlebih dahulu kode yang sudah ada pada blogger anda

kesimpulan

sepertinya memang rumit yah namun silahkan anda coba sesuai langkah-langkah diatas perlu diingat bahwa setiap tema memiliki kode breadcrumb yang berbeda-beda jadi silahkan anda kreasikan sendiri

0 Shares:
Leave a Reply

Your email address will not be published.

You May Also Like