Kode HTML Panduan Membuat Struktur Breadcrumbs SEO Sederhana di Template

Kode HTML Panduan Membuat Struktur Breadcrumbs SEO Sederhana di Blogger

Breadcrumbs Blogger merupakan salah satu elemen navigasi yang dapat membantu pengunjung memahami posisi sebuah halaman di dalam struktur website. Selain memberikan informasi navigasi yang lebih jelas, breadcrumb juga dapat membantu mesin pencari memahami hubungan antara halaman utama, kategori, dan artikel.

Bagi pemilik blog yang menggunakan Blogger atau Blogspot, breadcrumbs dapat dibuat dengan kombinasi HTML, CSS, dan JSON-LD. Dengan struktur yang tepat, breadcrumb dapat ditampilkan secara langsung di bagian atas artikel sekaligus menyediakan data terstruktur yang dapat dibaca oleh mesin pencari.

Pada tutorial ini, kita akan membahas cara membuat breadcrumbs SEO sederhana di Blogger tanpa harus mengubah terlalu banyak bagian template. Anda akan mendapatkan kode HTML, CSS, dan JSON-LD yang dapat disesuaikan dengan struktur blog masing-masing.

Apa Itu Breadcrumbs pada Website?

Breadcrumbs adalah navigasi berbentuk jejak halaman yang menunjukkan lokasi pengguna dalam hierarki sebuah website.

Contoh sederhana struktur breadcrumb:

Beranda > Teknologi > Blogger > Judul Artikel

Dengan adanya navigasi tersebut, pengunjung dapat mengetahui bahwa artikel yang sedang dibaca berada di dalam kategori tertentu.

Breadcrumb biasanya ditempatkan di atas judul artikel atau pada area yang mudah terlihat oleh pengunjung.

Manfaat Breadcrumbs untuk Blogger

Breadcrumbs dapat memberikan manfaat dari sisi navigasi maupun struktur informasi website.

Membantu pengunjung memahami posisi halaman dalam struktur blog.
Memudahkan navigasi ke kategori atau halaman sebelumnya.
Membantu mesin pencari memahami hierarki halaman ketika data terstruktur diterapkan dengan benar.
Membuat struktur artikel terlihat lebih rapi dan profesional.
Menyediakan jalur navigasi tambahan untuk pengunjung yang ingin menjelajahi topik terkait.

Breadcrumb bukan jaminan bahwa ranking artikel akan meningkat. Namun, struktur navigasi yang jelas dapat menjadi bagian dari pengelolaan website yang lebih terorganisir dan mudah dipahami.

Bagaimana Cara Kerja Breadcrumbs di Blogger?

Breadcrumb pada tutorial ini terdiri dari dua bagian utama.

1. Breadcrumb Visual

Bagian ini dibuat menggunakan HTML dan CSS. Elemen tersebut dapat dilihat langsung oleh pengunjung pada halaman artikel.

2. Breadcrumb dengan JSON-LD

Bagian kedua menggunakan data terstruktur Schema.org BreadcrumbList. Data ini memberikan informasi terstruktur mengenai susunan navigasi halaman.

Kedua bagian tersebut dapat menggunakan informasi yang sama, yaitu halaman beranda, kategori atau label, dan artikel yang sedang dibaca.

Contoh Breadcrumb pada Artikel Blogger

Misalnya Anda mempunyai artikel dengan judul Cara Merawat Bunga Anggrek dan artikel tersebut menggunakan label Tanaman Hias.

Breadcrumb dapat ditampilkan seperti berikut:

Beranda > Tanaman Hias > Cara Merawat Bunga Anggrek

Kata Beranda dapat mengarah ke halaman utama blog, sedangkan Tanaman Hias dapat diarahkan ke halaman label yang sesuai.

Kode CSS Breadcrumb Blogger

Langkah pertama adalah membuat tampilan breadcrumb menggunakan CSS. Kode berikut mengatur jarak, warna, ukuran teks, dan tampilan tautan.


<style>
.breadcrumb-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 12px 15px;
    background-color: #f8f9fa;
    border-radius: 6px;
    font-size: 14px;
    margin-bottom: 20px;
    font-family: inherit;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    line-height: 1.6;
}

.breadcrumb-nav a {
    color: #007bff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.breadcrumb-nav a:hover {
    color: #0056b3;
    text-decoration: underline;
}

.breadcrumb-separator {
    margin: 0 10px;
    color: #6c757d;
    font-weight: bold;
}

.breadcrumb-current {
    color: #495057;
    font-weight: 600;
}
</style>

Penjelasan CSS Breadcrumb

Class .breadcrumb-nav merupakan container utama breadcrumb.

Properti:

display: flex;
flex-wrap: wrap;

membantu membuat elemen breadcrumb dapat menyesuaikan ketika ruang horizontal terbatas.

Properti:

padding: 12px 15px;

digunakan untuk memberikan ruang di dalam container agar teks tidak terlalu dekat dengan batas elemen.

Sementara itu,:

font-family: inherit;

membuat breadcrumb mengikuti jenis font yang digunakan oleh template Blogger.

Kode HTML Breadcrumb Blogger

Setelah CSS tersedia, tambahkan struktur HTML berikut:


<nav class="breadcrumb-nav" aria-label="Breadcrumb">

    <a href="URL_BERANDA_BLOG_ANDA">
        Beranda
    </a>

    <span class="breadcrumb-separator">&#8250;</span>

    <a href="URL_KATEGORI_ATAU_LABEL_ANDA">
        NAMA_KATEGORI_ANDA
    </a>

    <span class="breadcrumb-separator">&#8250;</span>

    <span class="breadcrumb-current">
        JUDUL_ARTIKEL_ANDA
    </span>

</nav>

Ganti bagian URL_BERANDA_BLOG_ANDA dengan alamat halaman utama blog.

Kemudian ganti:

URL_KATEGORI_ATAU_LABEL_ANDA

dengan URL halaman label atau kategori yang sesuai.

Terakhir, ganti:

JUDUL_ARTIKEL_ANDA

dengan judul artikel yang sedang dibuat.

Kode JSON-LD Breadcrumb untuk SEO

Selain breadcrumb yang terlihat oleh pengunjung, Anda dapat menyediakan data terstruktur menggunakan BreadcrumbList.


<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Beranda",
      "item": "URL_BERANDA_BLOG_ANDA"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "NAMA_KATEGORI_ANDA",
      "item": "URL_KATEGORI_ATAU_LABEL_ANDA"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "JUDUL_ARTIKEL_ANDA"
    }
  ]
}
</script>

Perhatikan bahwa setiap posisi menggunakan nomor berurutan, yaitu 1, 2, dan 3.

Item terakhir tidak wajib memiliki URL jika halaman tersebut merupakan halaman yang sedang dibuka.

Kode Lengkap Breadcrumb Blogger

Jika ingin memasang breadcrumb sekaligus, gunakan kombinasi CSS, HTML, dan JSON-LD berikut.


<style>
.breadcrumb-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 12px 15px;
    background-color: #f8f9fa;
    border-radius: 6px;
    font-size: 14px;
    margin-bottom: 20px;
    font-family: inherit;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    line-height: 1.6;
}

.breadcrumb-nav a {
    color: #007bff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.breadcrumb-nav a:hover {
    color: #0056b3;
    text-decoration: underline;
}

.breadcrumb-separator {
    margin: 0 10px;
    color: #6c757d;
    font-weight: bold;
}

.breadcrumb-current {
    color: #495057;
    font-weight: 600;
}
</style>

<nav class="breadcrumb-nav" aria-label="Breadcrumb">
    <a href="URL_BERANDA_BLOG_ANDA">Beranda</a>
    <span class="breadcrumb-separator">&#8250;</span>
    <a href="URL_KATEGORI_ATAU_LABEL_ANDA">NAMA_KATEGORI_ANDA</a>
    <span class="breadcrumb-separator">&#8250;</span>
    <span class="breadcrumb-current">JUDUL_ARTIKEL_ANDA</span>
</nav>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Beranda",
      "item": "URL_BERANDA_BLOG_ANDA"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "NAMA_KATEGORI_ANDA",
      "item": "URL_KATEGORI_ATAU_LABEL_ANDA"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "JUDUL_ARTIKEL_ANDA"
    }
  ]
}
</script>

Cara Memasang Breadcrumb di Artikel Blogger

Salah satu kelebihan metode ini adalah Anda dapat menempatkannya langsung pada konten artikel melalui Tampilan HTML.

Langkah 1: Buka Blogger

Masuk ke dashboard Blogger kemudian pilih artikel yang ingin ditambahkan breadcrumb.

Langkah 2: Buka Editor Artikel

Buat artikel baru atau buka artikel lama yang ingin diperbarui.

Langkah 3: Pilih Tampilan HTML

Pada editor Blogger, ubah mode penulisan menjadi Tampilan HTML.

Langkah 4: Tempatkan Kode di Bagian Atas Artikel

Letakkan kode breadcrumb sebelum paragraf pembuka artikel atau pada posisi yang Anda inginkan.

Langkah 5: Ganti Data Placeholder

Pastikan seluruh placeholder telah diganti dengan informasi blog yang sebenarnya.

URL_BERANDA_BLOG_ANDA diganti dengan URL homepage.
URL_KATEGORI_ATAU_LABEL_ANDA diganti dengan URL label.
NAMA_KATEGORI_ANDA diganti dengan nama label.
JUDUL_ARTIKEL_ANDA diganti dengan judul artikel.

Langkah 6: Simpan dan Pratinjau

Simpan artikel kemudian gunakan fitur Pratinjau untuk memastikan breadcrumb tampil dengan baik.

Contoh Breadcrumb untuk Blog Blogger

Misalnya blog Anda memiliki alamat:

https://www.contohblog.com/

Artikel berada pada label Blogger:

https://www.contohblog.com/search/label/Blogger

Dan judul artikelnya adalah:

Cara Membuat Breadcrumbs SEO di Blogger

Maka struktur breadcrumb dapat menjadi:


<nav class="breadcrumb-nav" aria-label="Breadcrumb">
    <a href="https://www.contohblog.com/">Beranda</a>
    <span class="breadcrumb-separator">&#8250;</span>
    <a href="https://www.contohblog.com/search/label/Blogger">Blogger</a>
    <span class="breadcrumb-separator">&#8250;</span>
    <span class="breadcrumb-current">Cara Membuat Breadcrumbs SEO di Blogger</span>
</nav>

Cara Menguji Breadcrumb Blogger

Setelah kode dipasang, lakukan pengujian untuk memastikan breadcrumb visual dan data terstruktur dapat dibaca dengan benar.

1. Periksa Tampilan Breadcrumb

Buka halaman artikel dan pastikan breadcrumb muncul pada lokasi yang telah ditentukan.

Pastikan setiap tautan mengarah ke halaman yang benar.

2. Periksa Source HTML

Anda dapat membuka source halaman dan mencari:

BreadcrumbList

Pastikan JSON-LD yang dibuat memiliki struktur JSON yang valid.

3. Gunakan Tool Pengujian Data Terstruktur

Anda dapat menggunakan alat pengujian data terstruktur yang sesuai untuk memeriksa apakah markup BreadcrumbList dapat dibaca dengan benar.

Perlu diingat bahwa keberadaan data terstruktur yang valid tidak menjamin Google akan selalu menampilkan breadcrumb pada hasil pencarian.

Kesalahan Umum Saat Membuat Breadcrumb Blogger

1. URL Label Tidak Sesuai

Pastikan URL label yang digunakan benar-benar mengarah ke halaman label yang sesuai.

Jangan menggunakan URL artikel sebagai URL kategori jika halaman tersebut seharusnya mewakili sebuah label.

2. Nama Kategori Tidak Konsisten

Pastikan nama kategori pada breadcrumb visual sama dengan nama yang digunakan pada JSON-LD agar informasi navigasi tetap konsisten.

3. JSON-LD Tidak Valid

Kesalahan tanda kutip, koma, kurung kurawal, atau struktur JSON dapat membuat data terstruktur tidak dapat diproses.

Contohnya, jangan sampai tanda koma pada item JSON-LD terhapus secara tidak sengaja.

4. Breadcrumb Dipasang Berulang Kali

Hindari memasang beberapa breadcrumb dengan informasi yang sama pada halaman yang sama karena dapat membuat struktur halaman menjadi tidak diperlukan.

5. Mengedit Template Tanpa Backup

Jika Anda memilih memasang breadcrumb secara permanen ke template, lakukan backup terlebih dahulu sebelum mengubah kode template Blogger.

Apakah Breadcrumb Bisa Meningkatkan SEO?

Breadcrumb dapat membantu memberikan struktur navigasi yang lebih jelas kepada pengguna dan menyediakan informasi hierarki halaman melalui data terstruktur.

Namun, breadcrumb bukan jaminan sebuah artikel akan mendapatkan posisi tertentu di Google. SEO membutuhkan kombinasi berbagai faktor, seperti kualitas konten, relevansi terhadap pencarian, struktur website, internal link, performa halaman, dan pengalaman pengguna.

Karena itu, gunakan breadcrumb sebagai salah satu bagian dari optimasi struktur website, bukan sebagai satu-satunya strategi SEO.

Tips Optimasi Breadcrumb untuk Blogger

Gunakan struktur navigasi yang sederhana.
Pastikan setiap tautan mengarah ke halaman yang relevan.
Gunakan nama kategori atau label yang jelas.
Jangan memasukkan terlalu banyak tingkatan jika tidak diperlukan.
Pastikan breadcrumb mudah dibaca pada smartphone.
Gunakan data terstruktur BreadcrumbList secara valid.
Hindari duplikasi breadcrumb pada satu halaman.
Periksa kembali kode setelah melakukan perubahan.

FAQ Breadcrumb Blogger

Apa itu breadcrumb di Blogger?

Breadcrumb adalah navigasi yang menunjukkan posisi halaman dalam struktur sebuah blog, misalnya Beranda, kategori atau label, kemudian judul artikel.

Apakah breadcrumb penting untuk SEO Blogger?

Breadcrumb dapat membantu memperjelas struktur navigasi dan memberikan informasi hierarki halaman. Namun, breadcrumb bukan satu-satunya faktor yang menentukan peringkat SEO.

Apakah breadcrumb bisa dibuat tanpa mengedit template?

Dengan metode pada tutorial ini, breadcrumb dapat ditempatkan pada konten artikel melalui mode HTML. Namun, penerapan permanen pada seluruh artikel membutuhkan penyesuaian template atau sistem otomatisasi yang berbeda.

Apa fungsi JSON-LD BreadcrumbList?

BreadcrumbList merupakan data terstruktur yang memberikan informasi mengenai urutan navigasi halaman dalam format yang dapat diproses oleh mesin pencari.

Apakah Google pasti menampilkan breadcrumb di hasil pencarian?

Tidak. Markup yang valid tidak menjamin mesin pencari akan selalu menampilkan breadcrumb pada hasil pencarian.

Apakah breadcrumb bisa digunakan di smartphone?

Ya. CSS pada tutorial ini menggunakan flex-wrap sehingga elemen breadcrumb dapat menyesuaikan ketika lebar layar terbatas.

Apakah breadcrumb harus menggunakan kategori?

Breadcrumb dapat menggunakan kategori, label, atau struktur halaman yang memang relevan dengan hierarki website. Yang terpenting adalah informasi navigasinya akurat dan konsisten.

Kesimpulan

Cara membuat breadcrumbs SEO sederhana di Blogger dapat dilakukan dengan menggunakan kombinasi HTML, CSS, dan JSON-LD. HTML dan CSS digunakan untuk membuat navigasi yang dapat dilihat pengunjung, sedangkan JSON-LD digunakan untuk menyediakan struktur data BreadcrumbList.

Dengan breadcrumb, pengunjung dapat memahami posisi mereka di dalam struktur blog dan lebih mudah berpindah menuju halaman kategori atau label yang relevan.

Untuk hasil yang optimal, pastikan URL, nama kategori, dan judul artikel ditulis dengan benar. Periksa juga struktur JSON-LD agar tidak terdapat kesalahan sintaks.

Yang tidak kalah penting, breadcrumb bukan jaminan peningkatan ranking Google. Gunakan fitur ini sebagai bagian dari optimasi struktur website bersama konten berkualitas, internal link, struktur heading, optimasi gambar, performa halaman, dan pengalaman pengguna.

Dengan struktur navigasi yang rapi dan konsisten, blog Blogger Anda akan memiliki sistem navigasi yang lebih mudah dipahami baik oleh pengunjung maupun sistem yang memproses struktur halaman.

Menu Navigasi