[TERBARU] Cara Memasang Breadcrumb di Blog (Microdata HTML)

Posted by at

Apa itu Breadcrumb?



Breadcrumb merupakan sistem navigasi menu yang dapat mempermudah pengunjung website atau blog agar mudah dalam melacak kembali lokasi dimana dan dari mana saja pengunjung melakukan perjalanan di website atau blog.


Fungsi Breadcrumb



Breadcrumb ini sebenarnya adalah sebuah fitur pada sebauh website atau blog untuk menunjukkan lokasi dari halaman web yang sedang kita kunjungi. Breadcrumb menyediakan link penghubung yang menghubungkan halaman yang sedang dibuka dengan halaman yang dibuka sebelumnya oleh pengguna.

Breadcrumb juga berfungsi untuk menyediakan fitur on-click access ke level halaman website diatasnya, sekaligus menghindari user tersesat karena terlalu dalam menjelajahi website. Dengan menggunakan breadcrumb, kita dapat memudahkan pengunjung dalam menjelajahi website kita. karena struktur website yang kita punya memiliki tingkatan yang baik. Google pun sudah dapat membaca dan memahami data dari breadcrumb ini.


Cara Memasang Breadcrumb



1. Di bagian dashboard blogger, klik Tema >> Edit Tema

2. Copy kode CSS di bawah ini dan paste tepat di atas </style> atau ]]></b:skin>

/* Breadcrumb */

.breadcrumb {
 margin-bottom: 20px;
}

.breadcrumb,
.breadcrumb a,
.breadcrumb a:hover {
 font-size: 12px;
 /* ukuran text */
 color: #777;
 /* warna text */
}


3. Cari kode di bawah ini

<h1 class='entry-title'>

4. Setelah ketemu, copy kode di bawah ini lalu paste di atas kode <h1 class='entry-title'>

<b:if cond='data:view.isPost'>
  <b:loop values='data:posts' var='post'>
    <div class='breadcrumb' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'>
      <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
        <a expr:href='data:blog.homepageUrl.canonical' title='Home' itemprop='item'>
        <meta content='1' itemprop='position'/>
        <span itemprop='name'>Home</span></a>
      </span>
      <b:if cond='data:post.labels'>
        <b:loop index='num' values='data:post.labels' var='label'> &amp;nbsp;&#8250;&amp;nbsp;
          <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
            <meta expr:content='data:num+2' itemprop='position'/>
            <a expr:href='data:label.url.canonical' expr:title='data:label.name' itemprop='item'>
              <span itemprop='name'><data:label.name/></span>
            </a>
          </span>
        </b:loop>
        <b:else/>
        &amp;nbsp;&#8250;&amp;nbsp; Tidak Ada Kategori
      </b:if>
    </div>
  </b:loop>
</b:if>

5. Klik Simpan Tema

Sampai disini, proses memasang breadcrumb sudah selesai, tapi apakah pemasangannya sudah benar?

Mari kita cek hasilnya..


Cara Cek Breadcrumb!



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

2. Masukkan URL postingan (BUKAN HOMEPAGE) dalam kolom

Perhatikan gambar di bawah ini, tepat di bagian BreadcrumbList, Jika pemasangan Breadcrumb nya sudah benar maka tampilannya akan menunjukkan tulisan 0 ERRORS (Tidak Ada Kesalahan), 0 WARNING (Tidak Ada Peringatan)


Ok. Itulah tadi sedikit tutorial [TERBARU] Cara Memasang Breadcrumb di Blog dari saya. Semoga artikel ini bermanfaat untuk blog anda.
Labels:

Popular Posts