Cara Memperbaiki Error Breadcrumb Data-Vocabulary.org Di Blog

Cara Memperbaiki Error Breadcrumb Data-Vocabulary.org Di Blog. Google Webmaster Tools alias Google Search Console terus saja selalu melakukan update untuk meningkatkan kualitas pada hasil pencarian agar mampu menyaring informasi yang tepat untuk penggunanya.

Karena alasan tersebut, maka google dan bing webmaster juga mendeteksi website atau blog melalui struktur data pada website tersebut menggunakan markup schema.org. Maka tak heran jika kalian pernah mendapatkan email dari google webmaster yang menyatakan bahwa Breadcrumb Data-Vocabulary.org mengalami eror sehingga perayapan blog kalian mengalami gangguan.

Untuk memperbaiki masalah tersebut saya akan menunjukkan solusinya untuk mengatasi breadcrumb yang error tersebut dengan mudah.

Contoh schema markup Breadcrumb yang valid tanpa error

Cara Mudah Untuk Memperbaiki Breadcrumb Data-Vocabulary.org Yang Error Di Blog

1. Buka blog kalian, dan masuk ke menu "Tema > Edit HTML".
2. Setelah itu cari kode .breadcrumb atau .breadcrumbs lalu hapus semua kode CSS tersebut ganti dengan kode berikut.

/* Breadcrumbs */
.breadcrumbs{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%}
.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}

3. Selanjutnya kalian cari kode <b:includable id='breadcrumb' var='post'> atau <b:includable id='breadcrumbs' var='post'> lalu hapus semua kode tadi dan ganti dengan kode yang baru ini.
Jika kode tersebut tidak ada, maka letakkan kode berikut berada di bawah penutup kode <b:includable id='comment-form' var='post'>...</b:includable>

<b:includable id='breadcrumb' var='post'>
<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' 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 + &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>

4. Kemudian kalian cari kode <b:includable id='main' var='top'> dan letakkan kode berikut tepat berada di bawah kode itu.

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

5. Jangan lupa klik tombol "Simpan Tema" untuk menyimpan perubahan tersebut.

Setelah semuanya sudah kalian terapkan, maka silahkan tunggu beberapa hari dan lihat perubahanya di situs Google Search Console. Maka semua error tersebut akan segera hilang.

Baca juga:

• Cara Ampuh Memperbaiki Error Pada Struktur Data Blogger (Lengkap)
• 4 Cara Ampuh Mencegah Dan Solusi Mengatasi Blog Dari Plagiat Konten
• Cara Mengatasi Error Pada Jumlah Postingan Di Homepage

Demikian panduan untuk Cara Memperbaiki Error Breadcrumb Data-Vocabulary.org Di Blog yang dapat saya tunjukkan. Semoga bermanfaat dan terima kasih.

Cara Mudah Memasang Widget Push Notification Di Blog

Cara Mudah Memasang Widget Push Notification Di Blog. Widget Push Notification merupakan sebuah fitur pada suatu website ataupun blog yang berfungsi untuk memberikan notifikasi mengenai informasi artikel terbaru kepada para pengungjung blog meskipun mereka sedang tidak membuka situs kita.

Dengan memanfaatkan widget ini maka tentunya hal itu bisa menjangkau para pengunjung yang pernah membuka blog kita, sehingga dapat terus meningkatkan visitor tetap (pengunjung lama).

Bahkan situs-situs besar juga menggunakan widget push notification untuk terus memberikan pengalaman yang terbaik kepada para pengunjungnya, seperti Facebook, Instagram, Pinterest, Twitter dan masih banyak lagi.

Lalu bagaimana caranya untuk memasang widget Push Notification pada blog kita?
Untuk itu kita dapat menggunakan layanan dari situs OneSignal. Dan untuk pemasangnya kalian dapat mengikuti tutorial berikut.

Cara Membuat Dan Memasang Widget Push Notification Di Blog Menggunakan OneSignal

1. Kunjungi situs OneSignal terlebih dahulu, kemudian klik tombol Sign Up untuk membuat akun dan login di OneSignal.

2. Setelah itu isi semua data form pendaftaran yang ada di situs OneSignal tersebut.

• Email Address: Isikan alamat email anda.
• Password: Buat password baru untuk akun OneSignal kalian.
• Company or Organization Name: Isi saja dengan nama blog atau nama kalian sendiri.

Jika semua sudah lengkap maka silahkan klik "Create Account".

3. Setelah kalian menekan tombol "Create Account" maka kalian harus melakukan verifikasi akun melalui kotak masuk di alamat email yang telah kalian daftarkan tadi.

4. Selanjutnya isi nama website kalian dan pilih opsi "Web Push" lalu pilih tombol "Next Configuration Your Platform".

5. Kemudian silahkan kalian isi semua data form konfigurasi yang ada pada widget Web Push tersebut.

Choose Intergration
Jika kalian pengguna website yang memakai platform Wordpress atau Blogspot, maka kalian harus pilih opsi "Wordpress Plugin or Website Builder" lalu pilih CMS kalian yang sesuai, jika menggunakan blogspot maka pilih blogger, jika menggunakan Wordpress maka pilihlah Wordpress.

Blogger Site Setup

• Site Nama: Nama situs kalian.
• Site Url: Url atau link untuk menuju halaman blog kalian.
• Icon Url: Silahkan upload logo atau favicon blog kalian.
• Label: Gunakan saja nama domainmu (tanpa ekstensi).

6. Untuk melihat dan mengedit tampilan widget Push Notification kita bisa mengklik tombol "Opens Slide Prompt".

Maka setelah itu akan muncul sebuah pop up pratinjau untuk mengedit widget tersebut.
Silahkan kalian sesuaikan isi pesan dan tombol pada Push Notification Blog tersebut, jika semuanya sudah sesuai maka silahkan kalian klik "Save".

7. Selanjutnya silahkan kalian scroll ke halaman yang paling bawah, kemudian klik tombol "Save", lalu akan muncul script untuk membuat widget Push Notification yang berisi kode JavaScript (JS) tersebut.

Silahkan kalian pasang di blog kalian, letakkan kode tersebut di dalam tag ... jika sudah selesai maka kalian klik tombol "Finish".

Baca juga:

• 2 Cara Memasang Lazy Load Gambar Di Blogger Untuk Meningkatkan Kecepatan Blog
• Cara Membuat Halaman Partner Blog Yang Keren Dan Responsive
• 2 Cara Membuat Dan Memasang Widget Live Chat WhatsApp Di Website

Oke, itulah tutorial mengenai Cara Memasang Widget Push Notification Di Blog yang dapat saya tunjukkan. Untuk melihat hasilnya, kalian bisa mengunjungi situs ini dan tunggu beberapa detik agar Push Notification bisa tampil.

Demo