Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Blogging

Cara Memasang Breadcrumb Seo Friendly di Blogger

Posting Komentar

Cara memasang breadcrumb Seo Friendly di blogger - Kalau kalian baru atau sudah lama dalam dunia blogging pasti sudah tidak merasa asing lagi dengan yang namanya breadcrumb.Namun bagi kalian yang tidak tahu tentu akan merasa asing dengan itilah breadcrumb,kalau di artikan breadcrumb bisa berarti remahan roti.Namun bukan itu arti breadcrumb sebenarnya yang terdapat dalam sebuah blog.

Cara Memasang Breadcrumb Seo Friendly di Blogger

Breadcrumb sendiri merupakan element yang ada pada setiap blog atau website yang sangat mudah di pahami.Gambaranya begini jika kalian menjelajah kedalam hutan belantara agar kalian tidak kehilangan jejak pastinya kalian akan meninggalkan sesuatu sebagai tanda bahwa kalian pernah melewati jalan itu,alhasil jika kalian merasa tersesat maka kalian bisa menggunakan petunjuk itu untuk menemukan jalan keluarnya.


Baiklah di sini Systemauni akan membahas tentang Breadcrumb.


1.Apa yang di maksud Breadcrumb ?

Breadcrumb merupakan element penting yang letaknya ada di atas sebuah judul artikel.Dengan adanya breadcrumb maka menjadikan kalian mengetahui letak spesifik dari artikel atau sebuah halaman yang sedang kalian baca.


Singkatnya yaitu breadcrumb berfungsi untuk menunjukan letak halaman atau artikel yang terdapat dalam blog atau web yang sedang kalian baca.Dengan danya breadcrumb dapat membantu kalian untuk kembali ke alamat atau home page dari postingan tersebut.


2.Fungsi Breadcrumb

Breadcrumb berfungsi mirip seperti menu navigasi pada blog.namun bedanya breadcrumb ini bisa di katakan sebagai menu navigasi kedua yang dapat memudahkan kalian untuk menjelajah isi blog tanpa harus kembali dan membuka dari halaman perhalaman.


Sehingga untu menjelajah dan menemukan artikel lain yang tersedia tidak perlu mengulangi dari navigasi awal lagi.Karena dengan adanya breadcrumb dapat mempermudah Navigasi halaman selain dari navigasi utama.


3.Apa Breadcrumb penting,Mengapa?

Ya pastinya breadcrumb sangat penting untuk struktur data blog kalian.Selain itu dengan adanya breadcrumb maka blog atau kalian akan berguna untuk pengoptimalan SEO agar Blog kalian lebih Seo Friendly.Tahunkan kalau suatu hal yang berhubungan dengan SEO pastinya juga berhubungan dengan Rangking blog di mesin pencarian atau search engine.


Karena dengan adanya breadcrumb ini dapat memudahkan pengunjung bahkan bot google untuk merayapi dan memahami data struktur blog kalian sehingga google bisa menampilkan blog kalian sebagai hasil pencarian yang relevan di halaman awal hasil penelusuran google.


Selain itu dengan adanya breadcrumb juga bisa mengurangi nilai Bounce Rate atau yang biasa di sebut dengan nilai presentase pengunjung,seperti seberapa lama pengunjung mengunjungi blog kalian dan melakukan aktivitas klik di halaman blog atau website kalian.Sehingga dengan nilau bounce rate yang baik dan tidak buruk maka mesin pencarian akan mudah merekomendasikan blog kalian di halaman pencarian dan dan blog kalian akan tamoil relevan di setiap hasil pencarian google.


Kembali.lagi ke topik tentang pemasangan breadcrumb pada blog agar lebih seo mari kita bahaa langkah langkahnya di bawah ini :


Cara Memasang Breadcrumb SEO Friendly di Blogger

1.Login ke blogger dan buka dashboard blog

2.Cari dan pilih Tema 

3.Setelah menu tema terbuka selanjutnya pilih edit HTML

4.Kemudian copy paste kode di bawah ini tepat di atas kode </head>

<style type='text/css'> /* Breadcrumb */ .breadcrumbs{background:#fff;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%;color:#888;font-weight:400;text-overflow:ellipsis;-webkit-text-overflow:ellipsis;white-space:nowrap} .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} </style>


5.Cari kode di bawah ini

<b:includable id='comment-form' var='post'>


6. Lalu Tambahkan kode ini tepat diatasnya.


<b:includable id='breadcrumb' var='posts'> <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' title='Home' itemprop='item'> <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>


7.kemudian cari kode seperti berikut

<b:includable id='main' var='top'>


8.Dan tambahkan kode script ini tepat di bawahnya

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


Kesimpulan

Diatas merupakan langkah langkah tentang bagaimana Cara memasang breadcrumb Seo Friendly di Blogger agar  fungsi navigasi di blog kalian lebih SEO dan User Friendly.Semoga artikel di atas bisa membantu,sekian terimakasih sudah berkunjung.


Posting Komentar untuk "Cara Memasang Breadcrumb Seo Friendly di Blogger"