Cara memperbaiki Error Breadcrumb pada Blogspot template

Konten [Tampil]

Masih Seputar SEO , Namun pada pembahasan kali ini yakni terkait dengan Optimsi On Pages Yakin Perbaikan struktur Breadcrumb Templete Blogger Erorr. Beberapa hari belakangan terkait update algoritma google rupanya cukup banyak koreksi terkait dengan Struktur Breadcrumb.

Saat dalam Search Console anda melihat terdapat beberapa error breadcrumb yang harus di perbaiki, Maka Tidak perlu Pusing. 

Permasalahannya ,kalau tidak diperbaiki apakah akan berpengaruh terhadap SEO Dan Rangking Website?

Jelas berpengaruh Baik Secara Langsung maupun tidak langsung ,tetapi untuk persentasenya sendiri tidak dapat kita ketetapkan bahkan dari pihak search engine sendiri tidak ada ketentuan besaran point atau nila SEO dari struktur breadcrumbs. Artinya struktur data yang ada dalam Website Tetap menjadi pertimbangan salah satu Rangking Faktor.

Tetapi ya sudah, mungkin buat pemula belum terlalu paham dengan pemahaman struktur template yang diinginkan dari mesin pencari, tetapi yang jelas adalah konten atau isi dari artikel adalah poin inti sebuah situs yang akan mempengaruhi SERP.

Baca Juga: Algoritma Google Dan Fungsinya

Error Breadcrumb Template Blogger Dan Cara Mengatasi

Mungkin ribuan template blogger yang sudah tersebar di Internet, sedangkan struktur tema disesuaikan dengan pembuatnya antara developer 1 dan yang lainnya.

Terang saja anda akan bingung jika, membaca solusi mengatasi masalah breadcumb pada artikel yang dibuat oleh arlina design sedangkan anda adalah pengguna template buatan mas sugeng.

Atau sebaliknya, anda pengguna viomagz namun membaca mengaplikasikan dari perbaikan dari permasalahan struktur tema Blogger dari mba igniel.

Mungkin secara teknis mengatasinya caranya sama, tetapi apabila kita tidak bergitu paham terkait pemprograman akan bingung.

Ini cukup membingungkan, tetapi santai saja gamblangnya seperti ini ,..

Jika anda pengguna Viomagz, atau template dari mas sugeng lainya cara memperbaiki Breadcrumb yang error Breadcrum Dapat mengikuti langkah dibawah:

Cara Memperbaiki Error data-vocabulary.org schema deprecated Template Mas Sugeng

• Pertama Login ,Klik menu Tema kemudian Edit HTML
• Berikutnya silahkan cari kode seperti di bawah,agar lebih mudah klik bebas di area script template kemudian klik "CTRL dan  F"  lalu paste kode di bawah. 

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

Setelah ketemu,silahkan hapus seluruh kode tersebut dari pembuka hingga penutup <b:includable> hingga </b:includable>,kemudain ganti dengan kode di bawah.

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

• Kemudian simpan.
• Selanjutnya silahkan bisa cek hasilnya di https://search.google.com/structured-data/testing-tool

Baca Juga:  Cara Membuat daftar isi Artikel Blog

Mengatasi Error Breadcrumb Search console Versi Arlina.

Dan sekali lagi,mungkin anda akan kebingunan jika tidak paham terkait dengan pemprograman pada blogspot,karena meskipun tujuanya sama ini akan terlihat tampak berbeda dari cara memperbaiki warning atau error breadcrumbs versi Arilina.

Begini caranya..

• Pertama silahkan masuk ke silahkan login dan masuk ke blog anda seperti biasa,Tema dan pilih edit html.
• Lalu cari kode di " <b:includable id='comment-form' var='post'>"  lalu paste diatasnya kode di bawah ini.

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

• Paste kode CSS nya di bawah ini 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>

• Dan cari kode <b:includable id="main" var="top"> kode dan pastekan tepat diatasnya kode dibawah:

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

• Setelah selesai ,klik simpan dan silahkan cek hasilnya.

Dan pastinya akan berhasil, dengan catatan anda adalah pengguna dari template tersebut. Tetapi masalahnya jika kita bukan pengguna dari keduanya...

Mungkin akan tetap work tetapi ada perubahan tempat, atau berantakan templatenya.

Disinilah kita harus paham. Sebenarnya apa saja sih yang harusnya diperbaiki, ? Jika perlu kita dapat memperbaiki sendiri.

Baca Juga: Mengatasi Blog Tidak di Index Google

Perubahan data struktur dan cara memperbaiki sendiri semua jenis template.

Google sepertinya menginginkan pembaharuan dari penulisan skema markup data yang lama, apabila sebelumnya menggunakan Data-vocabulary.org maka perubahan yang terbaru mengacu pada Schema.org

Cukup penting pastinya,..

Berfungsi menginformasikan pada mesin perayap mengenai struktur data pada halaman website yang anda miliki agar lebih di kenali.Tentunya ini bagian dari Optimasi SEO bukan.?

Dan keputusan Google untuk menghapus secara keseluruhan penggunaan markup data-vocabulary.org pada 6 April 2020 dengan fokus pada sturktur data tunggal.

Terlepas dari kopi paste perbaikan diatas untuk pengguna dari template ma sugeng dan mbak arlina  adalah point pentingnya pengetahuan perbubahannya itu apa?

Kita pahami satu persatu,

Pengertian dan Fungsi Format Data Terstruktur (Structured Data).

Mesin pencari google menggunakan format data tersetruktur dan skema secara bersamaan sebagai sumber mencari infromasi terkandung pada halaman web anda.

Tujuannya adalah mesin pencari dapat memahami ini sebuah kontent dan meningkatkan hasil penelusuran khusus

Pengertian format data terstruktur itu apa?

Skema data di terapkan pada tag JSON serta HTML , Srtuktur data Seperti JSON,RDFaa dan Microdata di buat berfungsi mendefinisikan struktur tetap yang dapat di gunakan search engine menyipan info yang sifatnya deskriftif.

Dengan adanya struktur tersebut mesin pencari akan lebih mudah dalam mendefinisikan sebuah website sesuai dengan jenis artikel,penulisnya ,waktunya,dan kategorinya.

Dengan adanya info tersebut mesin pencari akan lebih mudah dalam menyeleksi dan menayangkan hasil pencarian lebih relevan.

Dan kembali ke perubahan skema,..

Agar website kita dapat memenuhi syarat untuk di tampilkan pada fitur "Google Rich Result" maka di sarankan untuk mengubah skema lama ke yang baru yakni dari data-vocabulary.org ke schema.org

Itu dia point pentingya,jadi apapun template yang di gunakan blog anda maka perbaikanya sudah jelas bukan.

Jadi berikut cara memperbaiki pada blog yang tidak menggunakan kedua template diata masih bingung.

• Pertama silahkan masuk ke blog anda,pilih tema dan edit html.
• Berikutnya Silahkan cari kode brikut "<b:if cond='data:post.labels'>" lalu,silahkan cek kode di bawah.
• Saya mengubah dari https://data-vocabulary.org Ke Schema.org.

Sebelumnya:

<div class='breadcrumbs' id='breadcrumbs'>
<span itemscope='' itemtype='https://data-vocabulary.org/Breadcrumb'>
<a expr:href='data:blog.homepageUrl' itemprop='url' title='Home'>
<span itemprop='title'>Home</span></a></span>

<b:loop values='data:post.labels' var='label'>
&#8250; <span class='bclabel' itemscope='ItemList' itemtype='https://data-vocabulary.org/ItemList'><a expr:href='data:label.url' expr:title='data:label.name' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span>
</b:loop>
&#8250; <span itemprop='name'><data:post.title/></span> 

Dan sesudah saya perbaharui maka akan menjadi Seperti dibawah:

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<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="http://schema.org/BreadcrumbList">
<span><a expr:href='data:blog.homepageUrl' title='Home'><i class='fa fa-home'/> Home&amp;nbsp;</a><i class='fa fa-angle-right'/>&amp;nbsp;</span>
<b:loop values='data:post.labels' var='label' index='num'>
<span itemscope="itemscope" itemprop="itemListElement" itemtype="http://schema.org/ListItem"><a itemid="" expr:href='data:label.url + &quot;?max-results=6&quot;' expr:title='data:label.name' itemtype="http://schema.org/Thing" itemprop="item"><span itemprop='name'><data:label.name/></span></a>&amp;nbsp;<i class='fa fa-angle-right'/>&amp;nbsp;
<meta itemprop="position" expr:content="data:num+1" />
</span>
</b:loop>
<span><data:post.title/></span>
</div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span class='breadhome'><a expr:href='data:blog.homepageUrl'>Home </a> &#8250; </span><span>Archives for <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 class='breadhome'><a expr:href='data:blog.homepageUrl'>Home</a> - </span><span class='breadlabel'>Next to See All Posts </span>
<b:else/>
<span class='breadhome'> <a expr:href='data:blog.homepageUrl'>Home</a> - </span><span class='breadlabel'>Currently Browsing: <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable> 

Dari perubahan diatas apabila kita lihat dan diperhatikan hanya mengubah dari data vocabulary menjadi Scema org ,ya jika tidak mau repot cukup copy saja script diatas dan ganti Markup sekema yang ada di Blog anda.

Baca Juga: Cara Membuat Halaman Sitemap Blogger dan Wordpress

Mudah kok,jangan bikin sulit ya,,cara memperbaiki error breadcrumbs pada template blogspot ,selamat mencoba dan semoga berhasil mengatasi error breadcrumbs ya..

Bagikan Artikel ini