Membuat Breadcrums SEO Friendly Ala Arlina Design

Template dengan Breadcrumbs yang SEO Friendly akan meningkatkan page rank di Google, maka dari itu jangan di anggap remehkan Breadcrumbs ini. Kali ini gue akan membagikan breadcrumbs yang di pakai oleh blog Arlina design.

Baca juga : Cara Efektif Mempercepat Loading Blog Agar Lebih Ringan

Dengan Anda memasang breadcrumbs yang SEO Friendly maka, artikel / postingan Anda akan cepat terindex oleh Search Engine. Breadcrumbs pula memiliki kegunaan untuk menginformasikan kepada pengunjung mengenai kategori dari artikel / postingan yang ada di dalam blog tersebut.

Membuat Breadcrumbs SEO Friendly

Langkah pertama :

Login ke Blogger > Tema > Edit HTML. Lalu Anda Copy isyarat CSS dibawah ini di atas isyarat ]]></b:skin> atau </style>

/* Breadcrumbs */ .breadcrumbs {background:#fafafa;font-size:100%;height:45px;overflow:hidden;padding:0;border-bottom:0;position:relative;} .breadcrumbs:after{display:inline-block;content:"\f09b";font-family:fontAwesome;font-style:normal;font-weight:normal;font-size:18px;color:#768187;top:0;right:0;padding:12px 20px;position:absolute} .breadcrumbs > span {padding:0;} .breadcrumbs a{color:#768187;font-size:13px;font-weight:normal;line-height:45px;} .breadcrumbs span a {color:#768187;padding:10px 0;} .breadcrumbs span:first-child  a{color:#768187;margin-left:20px;} .breadcrumbs > span:last-child {visibility:hidden;width:0;height:0;color:#768187;border-right:none;font-size:13px;font-weight:300;line-height:30px;} .breadcrumbs span a:hover {color:#151515;} .breadcrumbs a:hover {color:#151515;}

Langkah kedua :

Carilah isyarat HTML menyerupai dibawah ini,

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

Lalu Anda Copy dan Paste isyarat HTML dibawah ini sempurna di bawah isyarat di atas

      <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'/></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-home'/> <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=6&quot;' itemprop='url'><span itemprop='title'><i class='fa fa-caret-right 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'/></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'/></span> <span> 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'/></span> <span> <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'/></span>  <span>All post</span>         <b:else/>        <span><a expr:href='data:blog.homepageUrl' rel='nofollow'/></span> <span><data:blog.pageName/></span>          </b:if>         </div>       </b:if>       </b:if>       </b:if>       </b:if>       </b:if>       </b:if> </b:includable>

Silakan Anda Save Template. Selanjutnya Anda kunjungi situs Google Struktur Data Testing Tools, untuk menguji apakah Breadcrumbs Anda sudah terpasang dengan baik atau tidak.