Cara Membuat Breadcrumb Terindex Google dan Valid HTML5

Cara Membuat Breadcrumb Terindex Google dan Valid HTML5 - Breadcrumb merupakan sebuah menu navigasi yang terdiri dari Home >> Label >> Title Post dan biasanya terletak di atas judul artikel blog. Breadcrumb berfungsi untuk memberitahukan kepada pengunjung bahwa sekarang ia sedang berada di mana.

Sebenarnya ada banyak tutorial cara membuat breadcumb yang bertebaran di google, tetapi mungkin masih banyak yang tidak terindex google dan juga belum valid html5. Di artikel kali ini Tor Template akan berbagi bagaimana caranya membuat breadcrumb yang seo friednly, terindex google, dan valid html5.

Baca juga vroh : Cara Membuat Artikel Terkait dengan Thumbnail di Blog

Berikut langkah-langkahnya :

1. Login dulu ke akun blogger sobat.
2. Masuk ke Template => Edit HTML.
3. Pasang kode cssnya, letakkan diatas ]]></b:skin> atau </style> :

   .breadcrumbs{width:auto; padding: 5px 0; color: #666; border-bottom: 1px dotted #ccc;; font-size:12px; font-weight:400;margin-top:5px}

4. Cari kode yang seperti ini :

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

   Kemudian ganti dengan kode dibawah 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> &#187; <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'>
     &#187; <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>
   &#187; <span><data:post.title/></span>
   </div>
   <b:else/>
   <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <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> &#187; <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> &#187; <span>All posts</span>
   <b:else/>
   <span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <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'/>

Sekian artikel tentang cara membuat breadcrumb seo friendly, terindex google, dan valid html mudah-mudahan bermanfaat dan dapat mendongkrak posisi blog ke pejwan gugel.

^^Semoga Berhasil^^

Credit to :

http://blog.kangismet.net/