How To Add Breadcrumbs / Navigation in the top post in Blogger
How to Make SEO Friendly
Breadcrumbs. Many tutorials explaining how to make breadcrumbs on Blogspot /
Blogger. This time I will explain how to create SEO friendly breadcrumbs and
all labels indexed by Search Engines.
Breadcrumbs are a navigation
menu that is above the post title like the one on my blog. This structure is
different from WordPress, which could make the child category. Structures in
the blogger only Home then Label. Where has several labels, it would read like
this:
Home> Label1>
Label2> Labels3
How to Make SEO Friendly
Breadcrumbs
1. Log into Blogger
2.
Click Template > Edit HTML > Proceed
3.
Check Expand Widget Templates
4.
Find the code ]]>
</ b: skin> and save this code on it:
.breadcrumbs{padding:0px 5px
5px 0;margin-bottom:20px;margin-top:0px;font-size:11px;color:#5B5B5B;border-bottom:1px
dotted #bbb;}
5.
Find
the code <b: includable id = 'main' var = 'top'>, replace with:
<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'>Home</a></span> »
<span><data:blog.pageName/></span></div>
<b:else/>
<b:if
cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the
post page -->
<b:loop
values='data:posts' var='post'>
<b:if
cond='data:post.labels'>
<div class='breadcrumbs'
xmlns:v='http://rdf.data-vocabulary.org/#'>
<span
typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl'
property='v:title' rel='v:url'>Home</a></span>
<b:loop
values='data:post.labels' var='label'>
» <span
typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title'
rel='v:url'><data:label.name/></a></span>
</b:loop>
»
<span><data:post.title/></span>
</div>
<b:else/>
<div
class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl'
rel='tag'>Home</a></span> »
<span>Unlabelled</span> »
<span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if
cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the
label archive page and search pages.. -->
<div
class='breadcrumbs'>
<span><a
expr:href='data:blog.homepageUrl'>Home</a></span> »
<span>Archives 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'>Home</a></span> »
<span>All posts</span>
<b:else/>
<span><a
expr:href='data:blog.homepageUrl'>Home</a></span> »
<span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main'
var='top'>
<b:include data='posts'
name='breadcrumb'/>
6.
Save your template.
To check please visi t: http://www.google.com/webmasters/tools/richsnippets
To test that appear several
labels, copies of your posts that have the label is more than 1. and click
Preview. If it successfully means breadcrumbs installed properly.
Hello,
ReplyDelete1 - How can I show all labels?
2 - What codes should I delete to stop the post title of my blog from appearing?
Thank you