Cara Memasang Breadcrumbs Seo Friendly

Published by Concept Phone Kamis, 11 Oktober 2018

Cara Memasang Breadcrumb SEO Friendly - Breadcrumbs ialah sebuah hidangan navigasi yang biasanya berada di atas judul postingan suatu blog atau website. Isinya berupa link yang menuju home atau halaman utama yang diikuti dengan label lalu judul dari postingan yang dibuka. Breadcrumbs ini cukup penting sebagai faktor pendukung SEO di blog, alasannya ialah dengan breadcrumbs kita dapat menginformasikan kepada pengunjung mengenai kategori dari artikel yang ada di dalam blog tersebut.

Breadcrumbs yang akan aku bagikan ini mempunyai kelebihan yaitu SEO Friendly, walaupun Saya sendiri tidak begitu jago dalam hal SEO. Namun, breadcrumbs ini sudah Saya buktikan sendiri bahwa breadcrumbs ini sudah SEO Friendly, semua label terindeks oleh Search Engine dan tentunya Valid HTML5.

Cara Memasang Breadcrumbs SEO Friendly

1. Buka Blogger > Klik Template > Edit HTML > Kemudian tambahkan arahan 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;}

2. Langkah selanjutnya, cari arahan HTML post ibarat ini

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

3. Kemudian tambahkan arahan HTML breadcrumbs sempurna di bawah arahan di atas

<b:includable id='breadcrumb' var='posts'> <b:if cond='data:blog.homepageUrl != data:blog.url'> <b:if cond='data:blog.pageType == &quot;static_page&quot;'> <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 == &quot;item&quot;'> <!-- 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 + &quot;?max-results=5&quot;' 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 == &quot;archive&quot;'> <!-- 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 == &quot;index&quot;'> <div class='breadcrumbs'> <b:if cond='data:blog.pageName == &quot;&quot;'> <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>

4. Simpan template.

Untuk mengetahui breadcrumbs sudah terpasang dengan benar di blog, Sobat dapat cek di sini Google testing tool

Demikian tutorial Cara Memasang Breadcrumb SEO Friendly, agar beremanfaat.