Breadcrumbs di Blogger adalah elemen navigasi yang menunjukkan posisi sebuah halaman atau artikel dalam struktur blog. Biasanya breadcrumbs berada di bagian atas judul atau konten artikel dan menampilkan jalur seperti Home > Label > Judul Artikel.
Selain membantu pengunjung memahami posisi mereka ketika menjelajahi blog, breadcrumbs juga dapat membantu mesin pencari memahami hubungan antara halaman, kategori atau label, dan artikel. Agar struktur tersebut dapat dikenali dengan lebih baik, breadcrumbs dapat dilengkapi dengan Schema Markup BreadcrumbList.
Pada beberapa template Blogger, fitur breadcrumbs mungkin belum tersedia atau implementasinya belum sesuai dengan kebutuhan blog. Karena itu, pada tutorial ini kita akan membahas cara membuat breadcrumbs di Blogger menggunakan HTML, CSS, dan Schema Markup.
Apa Itu Breadcrumbs pada Blogger?
Breadcrumbs merupakan navigasi hierarkis yang menunjukkan lokasi suatu halaman dalam struktur sebuah website. Pada blog, elemen ini dapat membantu pengunjung mengetahui dari bagian mana sebuah artikel berasal.
Contoh sederhana breadcrumbs pada artikel Blogger:
Home > Tutorial Blogger > Cara Membuat BreadcrumbsDengan adanya navigasi tersebut, pengunjung dapat memahami struktur halaman tanpa harus kembali ke halaman sebelumnya menggunakan tombol browser.
Apa Itu Schema Markup BreadcrumbList?
Schema Markup BreadcrumbList merupakan struktur data yang digunakan untuk memberikan informasi breadcrumbs kepada mesin pencari dengan format yang lebih terstruktur. Pada kode yang digunakan dalam tutorial ini, Schema.org digunakan melalui atribut seperti itemscope, itemtype, itemprop, dan position.
Implementasi yang tepat dapat membantu mesin pencari memahami hubungan setiap bagian dalam jalur breadcrumbs. Namun, penggunaan Schema Markup tidak menjamin halaman akan selalu menampilkan rich result tertentu di Google, karena tampilan hasil pencarian ditentukan oleh sistem Google.
Keuntungan Menggunakan Breadcrumbs di Blogger
Memasang breadcrumbs bukan hanya berkaitan dengan tampilan. Navigasi ini juga dapat memberikan beberapa manfaat dari sisi struktur dan pengalaman pengguna.
- Memperjelas struktur navigasi blog sehingga pengunjung dapat mengetahui posisi artikel.
- Membantu pengalaman pengguna ketika menjelajahi artikel berdasarkan label atau kategori.
- Membantu mesin pencari memahami struktur halaman melalui data terstruktur BreadcrumbList.
- Membuat tampilan artikel lebih profesional dengan navigasi yang berada di bagian atas konten.
- Mendukung struktur SEO teknis apabila implementasi Schema Markup dilakukan dengan benar.
Cara Memasang Breadcrumbs Schema Markup di Blogger
Berikut langkah-langkah yang dapat Anda ikuti untuk memasang breadcrumbs custom pada template Blogger.
Langkah 1: Buka Menu Edit HTML Blogger
Masuk ke dashboard Blogger, pilih blog yang ingin Anda ubah, kemudian buka menu Tema. Klik tanda panah di samping tombol Sesuaikan, lalu pilih Edit HTML.
Sebelum melakukan perubahan pada template, sebaiknya simpan atau cadangkan template terlebih dahulu. Hal ini berguna apabila terjadi kesalahan ketika mengedit kode.
Langkah 2: Tambahkan CSS Breadcrumbs
Setelah berada di halaman Edit HTML, cari kode </b:skin> atau </style>. Letakkan CSS berikut tepat sebelum kode penutup tersebut.
/* CSS Breadcrumbs */
.breadcrumbs {
padding: 10px 0;
margin-bottom: 20px;
font-size: 13px;
color: #666;
border-bottom: 1px solid #eee;
}
.breadcrumbs a {
color: #2c3e50;
text-decoration: none;
transition: color .3s ease;
}
.breadcrumbs a:hover {
color: #e67e22;
}
.breadcrumbs span {
margin: 0 5px;
}CSS tersebut mengatur jarak, ukuran teks, warna, garis pembatas, serta efek hover pada tautan breadcrumbs. Anda dapat menyesuaikan warna dan ukuran sesuai dengan desain template Blogger.
Langkah 3: Tambahkan Struktur Breadcrumbs HTML
Setelah CSS ditambahkan, langkah berikutnya adalah memasukkan struktur HTML breadcrumbs. Masih di halaman Edit HTML, cari kode:
<data:post.body/>
Pada beberapa template Blogger, kode <data:post.body/> dapat muncul lebih dari satu kali. Pastikan kode breadcrumbs ditempatkan pada bagian yang berada dalam struktur postingan agar dapat tampil pada halaman artikel.
Anda juga dapat menempatkannya di sekitar area judul postingan, tergantung struktur template yang digunakan. Letakkan kode berikut sebelum area konten artikel.
<b:if cond='data:view.isPost'>
<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'>
<span itemprop='name'>Home</span>
</a>
<meta content='1' itemprop='position'/>
</span>
<span> » </span>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<span itemprop='itemListElement'
itemscope='itemscope'
itemtype='https://schema.org/ListItem'>
<a expr:href='data:label.url'
itemprop='item'
expr:title='data:label.name'>
<span itemprop='name'>
<data:label.name/>
</span>
</a>
<meta content='2' itemprop='position'/>
</span>
<b:if cond='data:label.isLast != "true"'>
<span> , </span>
</b:if>
</b:loop>
<span> » </span>
</b:if>
<span>
<data:post.title/>
</span>
</div>
</b:if>Penjelasan Struktur Kode Breadcrumbs
Kode tersebut menggunakan beberapa elemen penting yang bekerja bersama untuk membuat navigasi breadcrumbs pada halaman posting Blogger.
1. Kondisi Halaman Postingan
<b:if cond='data:view.isPost'>Kondisi tersebut digunakan agar breadcrumbs hanya ditampilkan pada halaman posting atau artikel. Dengan demikian, navigasi tidak perlu muncul pada semua halaman blog.
2. BreadcrumbList
itemtype='https://schema.org/BreadcrumbList'Bagian tersebut mendefinisikan bahwa container breadcrumbs menggunakan vocabulary Schema.org dengan tipe BreadcrumbList.
3. ListItem
Setiap bagian dalam breadcrumbs menggunakan ListItem. Dalam contoh ini, halaman beranda menggunakan posisi pertama dan label menggunakan posisi berikutnya.
4. Nama Label Blogger
Kode <data:label.name/> mengambil nama label yang digunakan pada posting. Sementara itu, <data:label.url/> digunakan untuk menghasilkan URL menuju halaman label tersebut.
5. Judul Artikel
Bagian <data:post.title/> digunakan untuk menampilkan judul posting sebagai bagian terakhir dari jalur breadcrumbs.
Contoh Tampilan Breadcrumbs
Setelah kode berhasil diterapkan, kurang lebih struktur navigasinya akan terlihat seperti berikut:
Home » Tutorial Blogger » Cara Memasang Breadcrumbs di BloggerNama label akan mengikuti label yang digunakan pada artikel Anda. Karena itu, hasilnya dapat berbeda antara satu artikel dengan artikel lainnya.
Langkah 4: Simpan Perubahan Template
Setelah seluruh kode ditempatkan pada lokasi yang sesuai, periksa kembali struktur template. Jika tidak terdapat kesalahan, klik tombol Simpan pada halaman Edit HTML Blogger.
Kemudian buka salah satu artikel di blog Anda. Periksa bagian atas artikel dan pastikan breadcrumbs telah muncul sesuai dengan desain yang diinginkan.
Cara Mengecek Breadcrumbs dengan Google Rich Results Test
Setelah breadcrumbs muncul di halaman artikel, Anda dapat melakukan pemeriksaan menggunakan Google Rich Results Test. Pengujian ini dapat membantu mengetahui apakah data terstruktur pada halaman dapat dikenali oleh alat pengujian Google.
Masukkan URL artikel yang sudah dipasang breadcrumbs ke alat pengujian tersebut, kemudian jalankan pemeriksaan. Jika terdapat masalah pada markup, periksa kembali struktur HTML dan atribut Schema yang digunakan.
Hal yang Perlu Diperhatikan Saat Memasang Breadcrumbs
Setiap template Blogger memiliki struktur HTML yang berbeda. Karena itu, posisi <data:post.body/> dan struktur judul posting dapat berbeda antara satu template dengan template lainnya.
- Cadangkan template sebelum mengedit kode HTML.
- Pastikan kode ditempatkan di dalam struktur template yang benar.
- Jangan menambahkan CSS yang menggunakan selector terlalu umum.
- Periksa kembali tanda kutip dan tag Blogger setelah memasukkan kode.
- Uji breadcrumbs pada halaman artikel setelah menyimpan template.
- Gunakan alat pengujian data terstruktur untuk memeriksa markup.
Apakah Breadcrumbs Bisa Meningkatkan SEO Blogger?
Breadcrumbs dapat membantu memberikan struktur navigasi yang lebih jelas kepada pengguna dan membantu mesin pencari memahami hierarki halaman. Penggunaan BreadcrumbList Schema Markup juga memberikan informasi terstruktur mengenai jalur breadcrumbs pada sebuah halaman.
Namun, breadcrumbs sebaiknya tidak dianggap sebagai cara instan untuk menaikkan peringkat artikel. SEO dipengaruhi oleh banyak faktor, termasuk kualitas konten, relevansi, struktur website, performa halaman, internal linking, dan berbagai sinyal lainnya.
Oleh karena itu, gunakan breadcrumbs sebagai salah satu bagian dari optimasi SEO teknis Blogger sekaligus sebagai elemen navigasi yang membantu pengunjung.
Kesimpulan
Memasang breadcrumbs valid Schema Markup di Blogger dapat menjadi salah satu langkah untuk memperbaiki struktur navigasi dan data terstruktur pada blog. Dengan HTML, CSS, serta markup Schema.org BreadcrumbList, Anda dapat membuat navigasi artikel yang lebih jelas dan profesional.
Setelah memasangnya, jangan lupa melakukan pengujian pada beberapa artikel untuk memastikan breadcrumbs tampil dengan benar. Perhatikan juga struktur template karena setiap template Blogger dapat memiliki susunan kode yang berbeda.
Dengan struktur navigasi yang baik dan konten yang berkualitas, breadcrumbs dapat menjadi bagian yang berguna dalam membangun pengalaman pengguna serta struktur SEO blog yang lebih terorganisir.
FAQ Breadcrumbs Blogger dan Schema Markup
1. Apa itu breadcrumbs di Blogger?
Breadcrumbs adalah navigasi yang menunjukkan posisi sebuah artikel dalam struktur blog, misalnya Home, Label, dan Judul Artikel.
2. Apa fungsi Schema Markup pada breadcrumbs?
Schema Markup memberikan informasi terstruktur kepada mesin pencari mengenai susunan atau jalur breadcrumbs pada sebuah halaman.
3. Apakah semua template Blogger mendukung breadcrumbs?
Tidak semua template Blogger memiliki fitur breadcrumbs secara bawaan. Jika belum tersedia, breadcrumbs dapat ditambahkan secara manual melalui kode HTML, CSS, dan markup Schema.org.
4. Di mana kode breadcrumbs dipasang pada template Blogger?
Kode breadcrumbs dapat ditempatkan di area struktur posting, misalnya sebelum <data:post.body/> atau di sekitar bagian judul posting, tergantung struktur template yang digunakan.
5. Apakah breadcrumbs otomatis membuat artikel mendapatkan rich result?
Tidak. Implementasi Schema Markup tidak menjamin sebuah halaman akan mendapatkan tampilan rich result tertentu di Google. Mesin pencari menentukan tampilan hasil pencarian berdasarkan berbagai faktor.
6. Bagaimana cara mengecek Schema Breadcrumbs?
Anda dapat menggunakan Google Rich Results Test untuk melakukan pengujian terhadap URL artikel dan memeriksa apakah markup yang digunakan dapat dikenali oleh alat pengujian tersebut.