Cara Memasang Breadcrumbs Seo Friendly

Cara Memasang Breadcrumb SEO Friendly - Breadcrumbs yaitu sebuah sajian 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 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 hebat 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 menyerupai 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, supaya beremanfaat.