Type something and hit enter

author photo
By On
advertise here

Cara memperbaiki Error Breadcrumb pada Blogspot template

teyeng.com ,Ini merupakan artikel pertama saya tentang blogging yang akandi post pada situs ini,beberapa hari belakangan terkait update algoritma google rupanya cukup banyak koreksi.

Dan salah salah stunya terkait dengan struktur template,ya.. terdapat beberapa error breadcrumb yang harus di perbaiki.

So,kalau tidak di perbaiki apakah akan berpengaruh terhadap SEO?

Jelas berpengaruh ,tetapi untuk persentasenya sendiri tidak dapat kita ketetapkan bahkan dari pihak searh engine sendiri tidak ada ketentuan besaran point atau nila SEO dari struktur breadcrumbs.

Tetapi ya sudah,mungkin buat pemula seperti saya tidak terlalu paham dengan pemahaman struktur template yang di inginkan dari mesin pencari,tetapi yang jelas adalah konten atau isi dari artikel adalah poin inti sebuah situs yang akan mempengaruhi SERP.
Error breadcrumbs


Apa sih saja yang harus kita ubah dari struktur Breadcrumb sesuai dengan jenis template?


Mungkin ribuan template blogger yang sudah tersebar,sedangkan struktur pembuatnya berbeda antara developer 1 dan yang lainnya.

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

Atau sebaliknya,anda pengguna viomags namun membaca mengaplikasikan dari perbaikan dari permasalahan struktur dari mba igniel.

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

serius deh,,mungkin bukan cuma anda .. bahkan saya juga bingung kok,tetapi saya belajar memahami sebenarnya apa saja sih yang perlu di ubah?

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

Jika anda pengguna Viomags atau template dari mas sugeng lainya cara memperbaiki Breadcrumb yang error seperti di bawah.


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>



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

Cukup bingung,mungkin akan tetap work tetapi ada perubahan tempat,atau berantakan templatenya.

disinilah kita harus paham,sebenarnya apa saja sih yang harusnya di perbaiki,jika perlu kita dapat memperbaiki sendiri.


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.

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

<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 di perhatikan 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.

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

Click to comment