Cara Memasang Breadcrumbs SEO di Blog

Diandra   1/11/2017   Blog, SEO Blog   Comment  

Cara Memasang Breadcrumbs SEO di Blog - Keberadaan breadcrumbs sangat peting sebab dapat meningkatkan kualitas SEO blog. Sebab dengan adanya breadcrumbs dapat memberikan informasi kepada setiap pengunjung mengenai kategori artikel yang sedang dibaca.

Apa itu Breadcrumbs?

Breadcrumbs adalah sebuah menu alternatif yang biasanya berada diatas judul postingan suatu blog. Biasanya berisi sebuah link yang menuju ke halaman utama dan label tertentu.

Pada kesempatan kali ini saya akan membagikan tutorial tentang pemasangan breadcrumbs yang SEO di blog dan sudah valid HTML5.

Baca: Cara Memasang Schema Markup di Blog

Cara Memasang Breadcrumbs SEO di Blog

Sebelumnya lalukan backup template blog terlebih dahulu untuk mengantisipasi terjadinya kesalahan.

#Langkah 1
Tambahkan kode CSS dibawah ini tepat diatas ]]></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;}

#Langkah 2
Cari kode html seperti dibawah ini

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

#Langkah 3
Setelah menemukan kode pada langkah 2, kemudian tambahkan kode html dibawah ini tepat dibawah kode </b:includable>

<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>

#Langkah 4 dan Terakhir
Simpan template dan cek breadcrumbs melalui Google testing tool.

Demikian cara memasang breadcrumbs seo di blog, semoga berguna dan bermanfaat bagi kalian semua. (Sumber: www.arlinadzgn.com)