Cara Mengatasi Warning Breadcrumds di Blogger Terbaru

Diposting pada

Pernah kah mendapatkan peringatan seperti ini dari Google Webmaster Tool, yang isinya :

Search Console telah mengidentifikasi bahwa situs Anda terpengaruh oleh 1 Breadcrumb masalah:

Peringatan Teratas

Peringatan merupakan saran untuk penyempurnaan. Sebagian peringatan dapat meningkatkan tampilan Anda di Penelusuran; sebagian lagi dapat menjadi error di masa mendatang. Peringatan berikut ditemukan di situs Anda:

data-vocabulary.org schema deprecated

Sebaiknya perbaiki masalah tersebut jika memungkinkan agar situs Anda dapat memberikan cakupan dan pengalaman terbaik di Google Penelusuran.

Ada yang tau itu sebabnya kenapa!

Dengan adanya peringatan itu maka blogger sudah tidak mau menggunakan data-vocabulary.org. Dengan hal ini skema Breadcrumd HTML harus diganti sesuai yang disarankan oleh Blogger.

Dengan hal ini tentu kalian harus menggantikan nya dengan HTML yang baru. Agar peringatan tersebut tidak muncul lagi dan lagi dari Google Search.

Apa ini berdapak bagi SEO Pada Blog ?

Tentu kalian bertanya apa peringatan Breadcrumb ini berpengaruh pada SEO jawabnya : Selama ini masih belum mengetahui nya karena selama ada notifikasi seperti diatas langsung di perbaiki.

Cara Memperbaiki Notifikasi Warning Breadcrumbs di Search Console dan Struktur Data Test Tool

Kalian yang masih ada peringatan seperti yang ada diatas bisa ikuti langkah – langkah berikut ini agar tidak ada yang error lagi.

Langakah Pertama : Kalian masuk ke Akun Blogger Kalian, kemudian masuk ke Template > Edit HTML

Langkah Kedua : Cari Kode Breadcrumds yang lama bila susah carinya bisa langsung aja CTRL + F aja lalu cari kode seperti ini

<b:includable id='breadcrumb' var='posts'>… </b:includable>

Selanjutnya kalian ganti kode HTML Breadcrumds yang lama dengan yang baru seperti di bawah ini

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:view.isSingleItem'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'>
<svg class='homesvg' viewBox='0 0 24 24'><path d='M12,3L20,9V21H15V14H9V21H4V9L12,3Z'/></svg>
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<a class='breadhome' expr:href='data:blog.homepageUrl' itemprop='item' title='Home'>
<span itemprop='name'>Home</span></a>
<meta content='1' itemprop='position'/>
</span>
<svg viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z'/></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=10&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>
<svg viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z'/></svg>
</b:loop>
<span><data:post.title/></span>
</div>
</b:if>
</b:loop>
</b:if>
</b:includable>

Kemudian jangan lupa masukkan kode CSS berikut ini diatas kode </style> atau ]]></b:skin> pada template kalian

/* CSS Breadcrumbs */
.breadcrumbs{line-height:1.2em;width:auto;overflow:hidden;padding:0;margin:0 auto 20px;font-size:90%;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:#777;font-weight:400} .breadcrumbs a:hover{color:blue} .breadcrumbs svg{width:20px;height:20px;vertical-align:-5px;margin:0 -3px} .breadcrumbs svg.homesvg{width:22px;height:22px;margin-right:0} .breadcrumbs svg path{fill:#c8c8c8} .breadcrumbs svg.homesvg path{fill:#999}

Kemudian Save Tema. Sekarang kalian bisa cek apakah masih ada peringatan error atau tidak pada Google Search.

Tambahan

Bila ada yang error pada Search Console atau Uji Coba Struktur Data Test maka kalian bisa gunakan Breadcrumds di bawah ini

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs' id='breadcrumbs'><span class='breadlabel'><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' id='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span class='breadhome' typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
  <span class='breadlabel' typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span></b:loop>
</div>
<b:else/>
<div class='breadcrumbs'><span class='breadhome'><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span><span class='breadlabel'>Unlabelled</span><span class='breadlabel'><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' id='breadcrumbs'>
  <span class='breadhome'><a expr:href='data:blog.homepageUrl'>Home</a></span><span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs' id='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
  <span class='breadhome'><a expr:href='data:blog.homepageUrl'>Home</a></span><span class='breadlabel'>All posts </span>
<b:else/>
  <span class='breadhome'><a expr:href='data:blog.homepageUrl'>Home</a></span><span class='breadlabel'>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

Yang saya tandai itu adalah susunan data-vocabulary.org yang sudah tidak valid di blogger maka kalian bisa ganti dengan ada kode diatas.

Bila ada pertanyaan kalian bisa langsung di kolom komentar aja, itulah sedikit tutorial kali ini yang bisa saya berikan semoga bermanfaat.

Source : https://www.bungfrangki.com/2020/01/cara-mengatasi-warning-pada-breadcrumbs.html?m=1

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *