Cara Mengatasi Error Breadcrumbs Terbaru Pada Blogger
www.azid45.web.id - Cara Mengatasi Error Breadcrumbs Terbaru Pada Blogger. Akhir-akhir ini para blogger telah dikejutkan dengan notif error di google webmaster tools atau google console terutama bagi pengguna template viomagz dan evomagz. Hal tersebut tidak lain terjadi karena pihak google sedang update alogaritma.
Baru - baru ini google telah mengupdate alogaritma pada struktur breadcrumbs sehingga tidak heran jika template anda yang belum menggunakan schema.org maka secara otomatis akan terkena dampaknya yaitu error struktur breadcrumbs. Kurang lebih peringatan error tersebut bunyinya seperti ini
"skema data vocabulary.org tidak digunakan lagi dan tidak didukung lagi oleh google. Harap migrasikan menggunakan jenis schema.org"
Memang secara pribadi saya tidak mengalami error tersebut hanya saja dari akun teman facebook saya Erik Aristo admin dari blogger firaun memposting notif error itu. Sehingga hal ini merupakan peluang bagi saya untuk membuat tutorial terkait error breadcrumbs ini.
Sebenarnya jika anda pengguna template buatan dari Mas Sugeng maka anda jangan perlu mengkhawatirkan blog Anda karena Mas Sugeng sudah membuat tutorial terkait error breadcrumbs tersebut. Hanya saja bagi pengguna template yang bukan resmi dari Mas Sugeng tentunya was-was sebab mereka tidak ada support pembaharuan.
Dari sini saya akan membuat 3 solusi untuk mengatasi error breadcrumbs vocabulary.org agar blog Anda kembali memperoleh performa yang bagus dimata google. Simak penjelasannya dibawah ini:
.
Mengatasi Error Breadcrumbs dengan menggunakan Skema Markup LD-JSON
Solusi pertama yang saya tawarkan adalah menggunakan skema markup LD-JSON untuk breadcrumbs. Skema markup ini merupakan schema markup yang direkomendasikan oleh pihak google jadi tidak ada salahnya anda mencoba untuk membuat breadcroms dengan schema markup tersebut.
Untuk membuat breadcrumbs LD-JSON anda bisa mengikuti tutorialnya pada artikel yang sudah pernah saya buat.
Baca Juga: Cara Mengganti Breadcrumbs microdata dengan LD-JSON
Mengatasi Error Breadcrumbs Vocabulary.org
Jika anda pengguna template buatan mas sugeng maka solusi yang kedua ini sangatlah cocok untuk anda praktekkan karena cara ini saya dapatkan langsung dari blog beliau. Saya sengaja share lagi dengan tujuan utama untuk penyimpanan data dan penambahan pengalaman ilmu bagi saya secara pribadi.
Baiklah langsung saja, sejatinya google telah menyarankan kepada kita untuk menggunakan breadcrumbs dengan schema.org bukan lagi menggunakan vocabulary.org oleh karena itu solusi yang tepat tinggal ganti saja skema markup vocabulary.org dengan schema.org. Caranya bagaimana?, untuk caranya anda bisa simak berikut ini:
Pertama, login blogger
Kedua, menuju menu tema/theme kemudian pilih Edit HTML
Ketiga, setalah masuk edit HTML cari kode berikut (Untuk template Viomagz dan Evomagz)
<b:includable id='breadcrumb' var='posts'> ...sampai dengan penutup ... </b:includable>
Keempat, Jika sudah ketemu kode tersebut maka hapus saja terlebih dahulu kemudian ganti dengan kode script dibawah ini
<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'> &nbsp;›&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 + "?&max-results=8"' expr:title='data:label.name' itemprop='item' rel='nofollow'> <span itemprop='name'><data:label.name/></span> </a> </span> </b:loop> <b:else/> &nbsp;›&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> &nbsp;›&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>
Terakhir, Save Template
Bagaimana jika saya menggunakan template selain viomagz atau evomagz?, jangan khawatir anda tetap bisa menggunakan kode tersebut. Anda tinggal mencari kode breadcrumbs yang ada pada template anda dan menggantinya dengan kode diatas tadi.
Memang bagi pengguna blogger baru bisa jadi kebingunan untuk mencari kode breadcrumbs ini akan tetapi untuk latihan anda bisa mengujicobakan atau bereksperiment sendiri. Selamat bereksperiment.
PERHATIAN!
Tidak semua template memiliki kemiripan kode breadcrumbs sebagaimana diatas, karena bisa jadi jika anda salah menghapus kode atau penamaan kode berbeda maka yang terjadi adalah blog anda tidak bisa diakses alias error.
Oleh karena itu jika template anda bukan developer dari mas sugeng maka anda bisa saja mencari kode b:includable yang didalamnya terdapat kode id='breadcrumb' atau bisa jadi id='breadcrumbs'. Jika sudah ketemu hapus saja kode setelah kode tersebut hingga dengan </b:includable> kemudian ganti dengan kode script dibawah ini
<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'> &nbsp;›&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 + "?&max-results=8"' expr:title='data:label.name' itemprop='item' rel='nofollow'> <span itemprop='name'><data:label.name/></span> </a> </span> </b:loop> <b:else/> &nbsp;›&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> &nbsp;›&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>
Misalnya saja saya menggunakan template dari si-A, dengan kode breadcrumb adalah sebagai berikut
<b:includable id='breadcrumbs' var='posts'> ini kode scriptnya disini agar breadcrumbs muncul </b:includable>
maka hapus saja "ini kode scriptnya disini agar breadcrumbs muncul" sehingga tinggal menjadi kode berikut
<b:includable id='breadcrumbs' var='posts'> </b:includable>
Setelah itu, anda tinggal memasukkan kode breadcrumbs yang baru sehingga menjadi seperti ini
<b:includable id='breadcrumbs' 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'> &nbsp;›&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 + "?&max-results=8"' expr:title='data:label.name' itemprop='item' rel='nofollow'> <span itemprop='name'><data:label.name/></span> </a> </span> </b:loop> <b:else/> &nbsp;›&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> &nbsp;›&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 Breadcrumbs dengan Mengganti Skema Markup Breadcrumbs Baru Milik Kompiajaib
Solusi terakhir anda bisa mengubah breadcrumbs 100% dari breadcrumbs sebelumnya dengan menggunakan breadcrumbs milik kompiajaib. Saya merekomendasikan ini karena template saya sampai saat ini tidak pernah terkena error breadcrumbs jadi bagus buat Anda.
Untuk menggunakan schema markup breadcrumbs microdata tersebut, Anda bisa mengikuti tutorialnya dibawah ini:
Kode CSS
.breadcrumbs{background:#fff;color:#777;height:40px;line-height:40px;display:block;overflow:hidden;margin:0;padding:0 20px;font-size:80%;font-weight:400;text-overflow:ellipsis;-webkit-text-overflow:ellipsis;white-space:nowrap}
.breadcrumbs a{color:#777;display:inline-block;text-decoration:none;transition:all .3s ease-in-out;font-weight:400}
.breadcrumbs a:hover{color:#333}
.breadcrumbs,.breadcrumbs a{font-weight:400}
.breadcrumbs svg{width:16px;height:16px;vertical-align:-4px}
.breadcrumbs svg path{fill:#f2f2f2}
Kode HTML
<b:if cond='data:blog.pageType == "item"'> <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.canonicalHomepageUrl' itemprop='item' title='Home'><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' 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 != "true"'> <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>
Untuk caranya sama dengan solusi kedua. Soalnya peletakkan breadcrumbs pada setiap template letaknya berbeda-beda. Semoga berhasil.
Demikianlah artikel saya terkait Cara Mengatasi Error Breadcrumbs Terbaru Pada Blogger. Semoga bermanfaat, jika masih bingung bisa menghubungi saya melalui WA.
PERHATIAN:Jika anda ingin bertanya atau bantuan bisa kontak kami
contact atau 089677337414 - Terima kasih.
contact atau 089677337414 - Terima kasih.