Cara Memasang Breadcrumbs Seo Friendly Valid Html5

Cara Memasang Breadcrumbs SEO Friendly Valid HTML5 - Breadcrumbs SEO Friendly Valid HTML5 adalah sebuah tekhnik meningkatkan secara optimal seo yang mempermudah mesin pencari dan pengunjung untuk menemukan blog kita. Navigasi Breadcrumbs ini akan menampilkan semua label yang di hubungkan dengan artikel kita yang tentunya akan semakin gampang blog kita di crawl oleh mesin penelusur.

Cara Memasang Breadcrumbs SEO Friendly Valid HTML5

Untuk sahabat yang ingin memasang Navigasi Breadcrumbs ini di blog sobat, silahkan ikuti cara berikut :

Langkah Pertama, Login ke Blogger > Template > Edit HTML > Salin CSS dibawah ini dan simpan sebelum arahan </style> atau ]]></b:skin>

/* 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 Kedua, Temukan arahan HTML berikut

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

Kemudian letakkan arahan HTML berikut, sempurna di atasnya

<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 Ketiga, Silahkan simpan template sobat.

Demikian tutorial Cara Memasang Breadcrumbs SEO Friendly Valid HTML5 semoga bermanfaat dan selamat bereksperimen.

Share this post