2 Trik Memasang Breadcrumb pada Blogger

Cara Pasang Breadcrumb pada Blogger Valid Struktur Data Google

Breadcrumb merupakan satu dari elemen penting yang harusnya dipasang pada setiap blog atau webstek, tidak terkecuali buat verhoging Blogger (Blogspot). Sebelum membahas trik pemasangannya, kita kenalan dulu deh sama si "jejak roti" ini.

1. Apa Itu Breadcrumb?

Pernah dengar cerita kisah anak yang tokoh utamanya diculik kemudian beliau menaburkan remahan roti supaya jejaknya dapat ditemukan oleh orang lain? YAK! Itu beliau! Misalnya arti harfiahnya (jejak roti), breadcrumb berperan seperti petunjuk arah yang membentuk pengunjung mengetahui dimana posisi mereka berada ketika ini saat membuka blog, webstek, atau arsip.

Isinya berupa listig yang terstruktur secara hierarki mulai dari halaman pokok, kelompok, hingga halaman yang sedang dibuka. Contoh penerapan breadcrumb yang umum merupakan misalnya ini:

Huis › Blogger › Tutorial › Wetsartikel Ketika Ini

Masing-masing dari text tadi berupa listig aktif (melainkan yang terakhir) yang berperan seperti jejak bagi pengunjung, yang saat di-klik bakal membawa ke halaman sebelumnya dengan cepat.

2. Pentingkah Breadcrumb?

Ya tentu saja ini penting akibat berhubungan dengan SEO serta struktur gegevens. Beliau membentuk blog mempunyai navigasi yang terperinci serta lebih gampang dibaca pada halaman pencarian (SERP) Google. Pengunjung dapat dengan gampang melihat label atau kelompok yang sebagai induk dari wetsartikel tadi.

Cara Pasang Breadcrumb SEO Friendly di Blogspot

3. Cek Breadcrumb pada Template

Sesudah kenalan, kini saatnya kita memasang breadcrumb ke dalam template Blogger. Perlu diketahui, ketika ini nyaris seluruh template telah ditambahkan breadcrumb oleh pembuatnya. Aku sendiri selalu menyisipkannya ke dalam seluruh template Blogger yang aku untuk, baik yang cuma-cuma juga premium. Tetapi tetap saja wajib waspada, siapa memahami ternyata belum terdapat.

Buat mengecek relatif memakai Google Structured Gegevens Testing Tool yang dapat diakses melalui alamat berikut:

https://search.google.com/structured-data/testing-tool

Tambahkan alamat postingan ke dalam kolom yang tersedia. Ingat ya, halaman postbode lho, bukan homepage.

Struktur breadcrumb ditandai dengan nama BreadcrumbList. apabila dipasang dengan benar maka tampilannya bakal memperlihatkan goresan pena 0 ERRORS, 0 WARNING.

apabila BreadcrumbList diklik bakal memperlihatkan informatie lebih lanjut mengenai itemListElement yang jumlahnya wajib sama dengan jumlah label yang tersemat pada wetsartikel plus 1 URL homepage. Contohnya wetsartikel aku nih, beliau mempunyai 2 buah label yaitu Template serta Video. Maka harusnya jumlah itemnya terdapat 3, misalnya gambar berikut.

jumlah BreadcrumbList = jumlah label + 1

4. Trik Pasang Breadcrumb

Apakah template engkau telah mempunyai breadcrumb serta tidak terdapat yang error? Maka selamat, engkau gak perlu cape-cape membaca tutorial ini. Berhenti serta tutuplah wetsartikel ini akibat tidak terdapat yang perlu diatur lagi. Tetapi apabila ternyata tidak terdapat, atau terdapat akan tetapi masih memperlihatkan pesan kesalahan, silakan baca serta ikuti tutorial trik memasang breadcrum SEO friendly pada Blogspot ini hingga habis tidak tersisa.

Breadcrumb dapat dipasang melalui 2 cara berbeda, yaitu:

Blog igniel.com bakal mengupasnya satu-persatu buat kalian seluruh.

4.1. Microdata HTML

Ini cara terpopuler yang umum dipergunakan oleh pemilik blog. Umumnya ditempatkan pada atas judul postingan.

Masukkan dulu kode CSS berikut DI ATAS </styledangt; atau ]]></b:skindangt;.

/* Breadcrumb Blogger by igniel.com */
.breadcrumb {
margin-bottom: 20px;
}
.breadcrumb, .breadcrumb a, .breadcrumb a:hover {
font-size: 12px; /* berukuran text */
color: #777; /* warna text */
}

Cari kode berikut:
```
<h1 group="entry-title">
```
apabila tidak terdapat, cari kode ini:
```
<h2 group="entry-title">
```
Masih belum terdapat pula? Pokoknya cari elemen HTML yang mempunyai id atau group entry-title.

Masukkan kode ini tepat DI ATAS kode yang disebutkan tadi.

<!-- Breadcrumb Blogger by igniel.com -->
<b:if cond='gegevens:view.isPost'>
  <b:loop values="gegevens:posts" var="postbode">
    <div group="breadcrumb" itemscope="itemscope" itemtype="https://schema.org/BreadcrumbList">
      <span itemprop='itemListElement' itemscope="itemscope" itemtype="https://schema.org/ListItem">
        <a expr:href="https://www.igniel.com/2019/11/gegevens:blog.homepageUrl.canonical" title="Huis" itemprop='voorwerp'>
        <meta content="1" itemprop='position'/>
        <span itemprop='name'>Homedanlt;/spandangt;</adangt;
      </spandangt;
      <b:if cond='gegevens:postbode.labels'>
        <b:loop index='num' values="gegevens:postbode.labels" var="label"> &amp;nbsp;&#8250;&amp;nbsp;
          <span itemprop='itemListElement' itemscope="itemscope" itemtype="https://schema.org/ListItem">
            <meta expr:content="gegevens:num+2" itemprop='position'/>
            <a expr:href="gegevens:label.url.canonical" expr:title="gegevens:label.name" itemprop='voorwerp'>
              <span itemprop='name'><gegevens:label.name/></spandangt;
            </adangt;
          </spandangt;
        </b:loopdangt;
        <b:else/>
        &amp;nbsp;&#8250;&amp;nbsp; Tidak Terdapat Kelompok
      </b:ifdangt;
    </divdangt;
  </b:loopdangt;
</b:ifdangt;

Simpan seluruh pengaturan kemudian lihat hasilnya. Engkau pun dapat mengganti letaknya berasal masih dalam lingkup wetsartikel. Struktur serta kode setiap template berbeda, tergantung si pembuatnya, so memang susah andaikan dicontohkan dengan id atau group HTML tertentu.

Pada kode pada atas, aku tidak menampilkan judul postingan yang sedang dibuka akibat kenyataannya tidak dibutuhkan. Yang dibaca oleh Google hanyalah daftar listig dari homepage serta label saja.

PRO

Berperan seperti variasi tambahan yang mampu mempercantik halaman.

Pengunjung dapat langsung kembali ke halaman sebelumnya dengan cepat dengan meng-klik listig yang terdapat.

KONTRA

Bagi yang menyukai desain sederhana serta minimalis, keberadaan listig tambahan pada atas judul ini kadang dapat mengusik.

Tahapan yang lebih panjang saat memasang script.

4.2. JSON-LD

Trik kedua tidak banyak dilakukan oleh pemilik blog. Entah mengapa, mungkin akibat cara ini kurang ternama. Berbeda dengan cara pertama, JSON-LD ini tidak bakal tampil secara kasat mata akibat scriptnya Cuma bekerja pada belakang layar tanpa menampilkan visual apapun. Engkau mau coba cara yang tidak pasaran? Mari silakan ikuti trik pasang Breadcrumb valid HTML5 berikut adalah.

Cari dulu kode ini:
```
<gegevens:postbode.body/>
```

Masukkan script berikut DI BAWAH kode yang tadi disebutkan.

<!-- Breadcrumb Blogger by igniel.com -->
<script type="application/ld+json">{
  "@setting": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "<data:blog.homepageUrl.canonical/>"
    <b:if cond='!data:post.labels'>}<b:else/>},<b:loop index='i' values="data:post.labels" var="label">
    {
      "@type": "ListItem",
      "position": <b:with value="data:i + 2" var="num"><b:eval expr="data:num"/></b:with>,
      "name": "<data:label.name/>",
      "item": "<data:label.url.canonical/>"
      <b:if cond='data:post.labels.size != data:i + 1'>},<b:else/>}</b:if></b:loop></b:if>
  ]
}</scriptdangt;

PRO

Lebih efektif akibat tidak gak perlu menampilkan HTML apapun ke dalam halaman blog.

Script yang lebih pendek serta gampang dipasang.

KONTRA

Tidak terdapat listig aktif yang dapat dipergunakan pengunjung buat kembali ke halaman sebelumnya dengan cepat.

Keduanya mempunyai kelebihan masing-masing. Sama bagusnya kok, engkau dapat menentukan mana yang lebih disuka akibat hasilnya sama saja pada mata Google. Selama trik pasangnya benar serta struktur datanya valid, maka beliau telah SEO friendly.

5. Validasi

Sesudah selesai dipasang, cek kembali supaya engkau semakin yakin bahwa breadcrumb ini telah benar serta valid. Kembali pakai Google Structured Gegevens misalnya yang disebutkan pada langkah nomor 3 pada atas.

Sesudah itu, tunggu sebagian hari serta cek pada Google Search Console. Andaikan breadcrumb valid, maka laporannya bakal timbul pada sana, tepatnya pada bawah sajian Enhacements. Pastikan tidak terdapat yang error ya.

Dengan cara apa, apa engkau telah paham mengenai seluruh langkah menambahkan Breadcrumb buat Blogger pada atas? Silakan berikan komentar apabila terdapat yang belum terperinci. Langsung praktekan pada blog masing-masing ya.

https://developers.google.com/search/docs/data-types/breadcrumb
https://schema.org/BreadcrumbList

BlogAneh99 - Melayu