Membuat Breadcrums SEO Friendly Ala Arlina Design

Halo Sobat blog kita, di kesempatan kali ini admin mau berbagi artikel berjudul Membuat Breadcrums SEO Friendly Ala Arlina Design, kami sudah membuat artikel dengan baik, yang berkualitas dan bermanfaat untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan tentang Blogger, HTML, SEO, Tips Blog, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Template dengan Breadcrumbs yang SEO Friendly akan meningkatkan page rank di Google, maka dari itu jangan di anggap remehkan Breadcrumbs ini. Kali ini saya 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 berguna 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 kode CSS dibawah ini di atas kode ]]></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 kode HTML seperti dibawah ini,

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

Lalu Anda Copy dan Paste kode HTML dibawah ini tepat di bawah kode 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.

Baca Juga

Demikianlah Artikel: Membuat Breadcrums SEO Friendly Ala Arlina Design

kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Membuat Breadcrums SEO Friendly Ala Arlina Design dengan alamat link https://blog-kita-semuaa.blogspot.com/2017/06/membuat-breadcrums-seo-friendly-ala.html

Share :