Breadcrumbs are a navigation
menu that is usually located above the title of posting a blog or website. It
contained a link to the home or main page, followed by the label and then the
title of the post is opened. Breadcrumbs is quite important as a contributing
factor in the SEO of your blog, because with breadcrumbs we can inform visitors
about the category of the article is in the blog.
Breadcrumbs which I will share it has the advantages of SEO Friendly. However, these breadcrumbs already I see for yourself that this is already SEO Friendly breadcrumbs, all labels indexed by Search Engines and most important is Valid HTML5.
How
to Install Breadcrumbs SEO Friendly
1. Go to Blogger
>> Save Template >> Edit HTML >> Then add the CSS code
below before ]]>
</ b: skin> or </ style>
/* 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;}
2. The next step, find HTML code like this post
<b:includable id='main'
var='top'>...</b:includable>
3. Then add the breadcrumbs HTML code just
below the code above
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl !=
data:blog.url'>
<b:if cond='data:blog.pageType ==
"static_page"'>
<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 ==
"item"'>
<!-- 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 + "?max-results=5"'
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 ==
"archive"'>
<!-- 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 ==
"index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName ==
""'>
<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>
4. Save the template.
To determine the breadcrumbs
are installed properly on the blog, you can check here Google testing tool. Thus tutorial How to Add SEO
Friendly Breadcrumb may be useful.