Ituaku Blog

Menyediakan Informasi Lugas Dan Terpercaya

Bagaimana Memasang Breadcrumbs SEO Friendly Dengan Baik


Bagaimana Memasang Breadcrumbs SEO Friendly Dengan Baik - breadcrumb adalah sebuah menu navigasi nan biasanya berada di teratas judul postingan suatu blog ataupun website. Isinya berupa link nan menuju home ataupun halaman utama nan diikuti bersama label selanjutnya judul berasal postingan nan dibuka. breadcrumb tersebut cukup penting sebagai faktor pendukung SEO di blog, karena bersama breadcrumb kami mampu menginformasikan kepada pengunjung mengenai kategori berasal artikel nan ada di dalam blog tersebut.



Bagaimana Memasang Breadcrumbs SEO Friendly Dengan Baik

breadcrumb nan akan kami bagikan tersebut memiliki kelebihan yaitu SEO Friendly, walaupun kami sendiri tidak begitu mahir dalam hal SEO. Namun, breadcrumb tersebut selesai kami buktikan sendiri bahwa breadcrumb tersebut selesai SEO Friendly, semua label terindeks oleh Search Engine dan tentunya Valid HTML5.

tutorial menempelkan breadcrumb SEO Friendly

1. Buka Blogger > Klik thema > Edit HTML > selanjutnya tambahkan kode CSS di bawah tersebut sebelum ]]></b:skin> ataupun </style>

/* breadcrumb */ .breadcrumb{padding:20px 30px;background:#fff;margin-bottom:20px} .breadcrumb a,.post-info a {color:#19abea;} .breadcrumb a:hover,.post-info a:hover {color:#454545;}

2. Langkah selanjutnya, cari kode HTML post seperti tersebut

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


3. selanjutnya tambahkan kode HTML breadcrumb tepat di bawah kode di teratas

<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='breadcrumb'><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='breadcrumb'> Anda di stersebut : <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='breadcrumb'><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='breadcrumb'> <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='breadcrumb'> <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>

Tunggu...

4. Simpan thema.

Untuk mengetahui breadcrumb selesai terpasang bersama benar di blog, Sobat mampu cek di stersebut Google testing tool


[embed]https://www.youtube.com/watch?v=-VC-KZY-9ck[/embed]

Demikian tutorial tutorial menempelkan Breadcrumb SEO Friendly, semoga beremanfaat.