Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Blogspot / Widget

Cara Menciptakan Breadcrumbs Seo Friendly & Valid Html5 Di Blog

Cara Membuat Breadcrumbs Yang Terindex Google Di Blog Cara Membuat Breadcrumbs SEO Friendly & Valid HTML5 di Blog
Sebelumnya aku sudah menciptakan tutorial memasang Breadcrumbs di blog yang SEO Friendly dan keren, hanya saja yang kali ini mempunyai tampilan jauh lebih menarik serta Valid HTML5 dan pastinya SEO Friendly, tentu Breadcrumbs yang baik akan lebih manis di search engine nantinya. Memang tidak semua para blogger mengerti apa itu Breadcrumbs, oleh alasannya itu aku akan menjelaskan sedikit tentang Breadcrumbs ini. Breadcrumbs ialah hidangan navigasi dari situs atau website yang akan memudahkan pengunjung untuk megetahui di label, ketegori, dan tags manakah ia ketika ini, dapat dikatakan Breadcrumbs merupakan jejak bagi pemirsa untuk memahami di titik atau entri manakah ia berada, sehingga mereka akan lebih paham ihwal topik yang mereka baca. Selain itu Breadcrumb juga berfungsi untuk menyediakan fitur on-click access ke level halaman website diatasnya, sekaligus menghindari user tersesat alasannya terlalu dalam menjelajahi website. Biasanya Breadcrumbs muncul secara horizontal di bab atas dari sebuah halaman web, dan juga berada sempurna di bawah kafetaria judul atau header. Dan juga ditandai dengan pemisah hirarki menyerupai memakai simbol  », >, ➤, dan grafik lainnya. Nah lantas bagaimana cara pembuatanya simak aja langkah-langkahnya berikut.

Cara Memasang Breacrumbs Yang Terindex di Google dan Valid HTML5

1.  Silahkan Anda terlebih dahulu Log-in ke Blogger
2. Kemudian pilih Template → Edit HTML
3. Lalu selanjutnya cari kode HTML seperti dibawah ini.

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

4. Jika sudah tambahkan kode HTML dibawah ini sempurna dibawah aba-aba diatas, atau jikalau sudah ada aba-aba semacam ini, silahkan di ganti saja pakai yang 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='nofollow'><i class='fa fa-reply-all fa-lg'/></a></span>  <span><data:blog.pageName/></span>      </div>       <b:else/>         <b:if cond='data:blog.pageType == &quot;item&quot;'>         <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'><i class='fa fa-reply-all fa-lg'/>  <data:title/></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;?&amp;amp;max-results=5&quot;' itemprop='url'><span itemprop='title'><i class='fa fa-check-square-o fa-fw'/> <data:label.name/></span></a></span><b:if cond='data:label.isLast != &quot;true&quot;'>  </b:if> </b:loop>  <span><data:post.title/></span>         </div>         <b:else/>         <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'><i class='fa fa-reply-all fa-lg'/></a></span>  <span>Uncategories</span>  <span><data:post.title/></span></div>      </b:if>         </b:loop>       <b:else/>         <b:if cond='data:blog.pageType == &quot;archive&quot;'>         <div class='breadcrumbs'> <span><a expr:href='data:blog.homepageUrl' rel='nofollow'><i class='fa fa-reply-all fa-lg'/></a></span>  <span><i class='fa fa-check-square-o fa-fw'/> Archive for <data:blog.pageName/></span>       </div>        <b:else/>         <b:if cond='data:blog.searchQuery'>         <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'><i class='fa fa-reply-all fa-lg'/></a></span>  <span><i class='fa fa-check-square-o fa-fw'/> <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' rel='nofollow'><i class='fa fa-reply-all fa-lg'/></a></span>  <span>All post</span>         <b:else/>         <span><a expr:href='data:blog.homepageUrl' rel='nofollow'><i class='fa fa-reply-all fa-lg'/></a></span>  <span><data:blog.pageName/></span>          </b:if>         </div>       </b:if>       </b:if>       </b:if>       </b:if>       </b:if>       </b:if> </b:includable>

5. Setelah itu cari kode ]]></b:skin> atau </style>
6. Lalu Copy kode CSS berikut ini, dan Paste diatas atau sebelum kode ]]></b:skin> atau </style>

/* Breadcrumbs Seo Friendly */ .breadcrumbs {background:#fff;font-size:100%;height:45px;overflow:hidden;padding:0;border:1px solid #e9e9e9;border-bottom:none;} .breadcrumbs &gt; span {padding:0;} .breadcrumbs &gt; span:last-child {background:#fdfdfd;color:#666;border-right:none;font-family:&#39;Open Sans&#39;;font-size:13px;font-weight:300;padding:10px;line-height:30px;} .breadcrumbs a {background:#fdfdfd;color:#666;font-family:&#39;Open Sans&#39;;font-size:13px; font-weight:normal;line-height:45px;} .breadcrumbs span a {color:#666;padding:10px;} .breadcrumbs span:first-child  a{background:#fdfdfd;color:#666;margin-left:15px;} .breadcrumbs span a:hover {color:#00a3d9;} .breadcrumbs a:hover {color:#00a3d9;}

7. Terakhir silahkan Anda Simpan atau Save templatenya dan lihat hasilnya

Selanjutnya untuk mengecek apakah Breadcrumbs sudah terpasang dengan benar atau tidak, silahkan Anda coba dengan mengceknya disini Google Testing Tool

Nah itulah langkah singkat memasang Breadcrumbs di blog, selain itu juga terindex di pencarian google, sehingga tampak bahwa situs Anda terlihat anggun dimata pengunjung. Sekian dulu artikel kali ini jikalau ada yang ingin Anda tanyakan atau tidak paham silahkan komentar dibawah ini terima kasih.

Anda mungkin menyukai postingan ini :