Cara Membuat Menu Breadcrumbs SEO Friendly

Assalamualaikum Wr Wb , Hallo Sobat. Pada artikel kali ini saya akan membuat tutorial Cara Membuat Menu Breadcrumbs SEO Friendly.

Apa Itu Menu Breadcrumbs ?

Breadcrumbs adalah sebuah menu navigasi yang memudahkan pengunjung untuk mengetahui dimana lokasi mereka berada Atau dengan kata lain Breadcrumbs menyempurnakan navigasi yang ada dalam blog kalian seperti Homepage, Tag, kategori , Dan Arsip website kalian.

Fungsi Menu Breadcrumbs ?

Fungsi dari breadcrumbs ini selain untuk memudahkan navigasi para pengunjung Ternyata juga memudahkan Mesin Pencari untuk mengindex website kalian Sehingga dapat menemukan website kalian dengan mudah. Dan Juga di lihat dari segi SEO penggunaan Breadcrumbs ini juga bisa mendongkrak sedikit skor SEO website kalian Lho.

Cara Membuat Menu Breadcrumbs SEO Friendly

1. Buka Blogger

2. Klik Tema

3. Klik Edit Html

4. Tambahkan Kode Css Di Bawah Ini Sebelum ]]></b:skin> atau </style>

/* Breadcrumbs */
.breadcrumbs{padding:20px 30px;background:#fff;margin-bottom:20px}
.breadcrumbs a,.post-info a {color:#19abea;}
.breadcrumbs a:hover,.post-info a:hover {color:#454545;}

5. Cari Kode Html Di Bawah Ini

Caranya kalian klik dimana mana saja di html nya Lalu kalian Klik Ctrl+f di keyboard kalian lalu kalian paste kode di bawah ini lalu klik enter

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

6. Lalu Kalian Tambahkan Kode Html ini Tepat Di Bawah Kode Di Atas

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag' title='Home'>Home</a></span> / <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- Breadcrumb Untuk Halaman Pos -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs'>
Anda di sini : <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url' title='Home'><span itemprop='title'>Home</span></a></span>
<b:loop values='data:post.labels' var='label'>
/ <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url + "?max-results=5"' expr:title='data:label.name' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span>
</b:loop>
/ <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag' title='Home'>Home</a></span> / <span>Without Label</span> / <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- Breadcrumb Untuk Label Search dan Search Pages -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span>Archived For <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span>All Post</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span><data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

7. Terakhir Klik Simpan Tema

Akhir Kata

Untuk mengetahui apakah kodenya bekerja atau tidak kalian bisa mengeceknya di Google Struktur Data Test . Oke gaes sekian dulu tutorial tentang Cara Membuat Menu Breadcrumbs SEO Friendly kali ini jika ada kesalahan mohon dimaafkan Dan Semoga Bermanfaat. Sekian Wassalamualikum Wr Wb