Cara Membuat Breadcrumbs SEO Friendly di Blogger

Cara Membuat Breadcrumbs SEO Friendly di Blogger

Membuat Breadcrumbs pada blog merupakan salah satu cara untuk mengoptimasi sebuah blog. Karena menurut para ahli (katanyasih) mbah Google lebih menyukai blog yang mempunyai breadcrumbs ini sehingga breadcrumbs dianggap sebagai salah satu trik SEO.

Breadcrumbs merupakan navigasi atau peta suatu halaman atau postingan yang kita publikasikan. Biasanya berada di atas judul postingan seperti yang ada di blog saya. Tentunya dengan adanya breadcrumbs akan memudahkan pengunjung dan mesin pencari untuk mengetahui letak dan masuk dalam kategori/label apa halaman atau postingan yang kita publikasikan tersebut, dengan begitu pengunjung akan lebih memudah untuk menjelajahinya kembali.

Mau tau seperti apa tampilan breadcrumbs pada blog? berikut tampilannya.

Cara Membuat Breadcrumbs SEO Friendly di Blogger

Berikut tampilan blog yang sudah memakai breadcrumbs yang sudah terindex di hasil pencarian Google.

Cara Membuat Breadcrumbs SEO Friendly di Blogger

Yaudah nggak usah kebanyakan prolog, langsung aja buat Anda yang ingin membuat Breadcrumbs pada blognya, silahkan ikut langkah-langkah berikut ini.

Cara Membuat Breadcrumbs SEO Friendly di Blogger

1. Buka Blogger > Template > Edit HTML
2. Letakkan kode di bawah ini di atas kode ]]></b:skin> atau </style>

.breadcrumbs{padding:0px 5px 5px 0;margin-bottom:20px;margin-top:0px;font-size:11px;color:#5B5B5B;border-bottom:1px dotted #bbb;}

3. Cari kode <b:includable id=’main’ var=’top’>, kemudian ganti dengan kode di bawah ini.

<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'>Home</a></span> / <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs'>
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><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' 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'>Home</a></span> / <span>Unlabelled</span> / <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> / <span>Archives 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'>Home</a></span> / <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> / <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>

4. Simpan template Anda.

Setelah Anda melakukan cara di atas, silahkan cek tampilan breadcrumbs pada halaman postingan Anda. Jika sudah tampil berarti Anda telah melakukan cara di atas dengan baik.

Untuk perubahan tampilan postingan yang diterbitkan sebelum membuat breadcrumbs ini di hasil pencarian Google memerlukan waktu yang cukup lama. Tetapi untuk postingan yang diterbitkan setelah Anda membuat breadcrumbs ini, maka Google akan langsung menampilkan breadcrumbsnya.

Semoga bermanfaat.

Leave a Reply