How to Add Breadcrumb in Blogger for SEO
Breadcrumb is the navigation trail which tell about visitors’ location on our site or blog. Means it helps to understand the visitor or reader that at which location of your blog they are. This also helps readers to understand topics related to which category they’re reading.Using Breadcrumbs in a blog, has many SEO benefits. The main advantage being that, adding breadcrumbs to your blog will add rich keywords phrases and titles to the link structure of your blog. It also helps to increase your site exposure in search engines by adding keywords into your blog posts
Typical breadcrumbs look like this:
Home page > Section page > Subsection page
or
Home page : Section page : Subsection page
or
home page : section page 1 : section page 2
Breadcrumb features:
- Support Google Rich Snippet (you can test at Webmaster Rich Snippet Tool)
- Support multi label breadcrumb
- Breadcrumbs for label page
- Style and compatible (even support IE)
- Highly optimized and customize.
Instruction to how to add Breadcrumb in Blogger
Step 1:Remember back up your template first, then go to Template > Edit HTML > tick Expand widget Templates.Step 2:Search for this code if you wanna show breadcrumbs outside post content section, below menu navigation. Add Step 3 code right after that.
<b:includable id='post' var='post'>
And search this code if you wanna show breadcrumbs right upper post title. If you find more than one instances of code, then locate the first one and add Step 3 code above that.
<b:if cond='data:post.title'>
Step 3: Paste this code below
Step 4: Copy the css below after <head><!--Start Breadcrumbs code, get at http://www.icttricks.com--> <b:if cond='data:blog.pageType == "item"'> <div class='breadcrumb' xmlns:v='http://rdf.data-vocabulary.org/#'> <span class='crumbs'> <span class='crust' typeof='v:Breadcrumb'> <a class='crumb' expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'><span itemprop='title'>Home</span></a> <span class='arrow'><span>></span></span> </span> <b:loop values='data:posts' var='post'> <b:if cond='data:post.labels'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> <span class='crust' typeof='v:Breadcrumb'> <a class='crumb' expr:href='data:label.url' property='v:title' rel='v:url'><span itemprop='title'><data:label.name/></span></a> <span class='arrow'><span>></span></span> </span> </b:if> </b:loop> <b:else/> Untagged </b:if> </b:loop> <span class='crust'> <a class='crumb' expr:href='data:post.url'><span><data:post.title/></span></a> <span class='arrow'><span/></span> </span> </span> </div> </b:if> <!--end -->
Also Read<!--Breadcrumb CSS get at http://www.icttricks.com---> <b:if cond='data:blog.pageType == "item"'> <style type='text/css'> /* Post Breadcrumb ----------------------------------------------- */ .breadcrumb { background:#F7F7F7; border:1px solid #eaeaea; width:100%; margin:10px; font-size:10px; text-transform:uppercase; overflow:hidden; position:relative; bottom:10px; margin-left:0 } .breadcrumb a,.breadcrumb a:visited { color:#222; font-family:Arial,sans-serif } .breadcrumb .boardTitle { display:none } .breadcrumb .crust { display:block; float:left; position:relative } .breadcrumb .crust a.crumb { background-color:#f1f1f1; display:block; height:24px; line-height:24px; margin-bottom:0; outline:0 none; padding:0 10px 0 18px; text-decoration:none } .breadcrumb .crust:first-child a.crumb { padding-left:10px } .breadcrumb .crust:last-child a.crumb { background-color:#e7e7e7; font-weight:bold } .breadcrumb .crust:last-child .arrow span { border-left-color:#e7e7e7!important } .breadcrumb .crust .arrow { -moz-border-bottom-colors:none; -moz-border-left-colors:none; -moz-border-right-colors:none; -moz-border-top-colors:none; border-color:transparent black transparent #BBBBBB; border-image:none; border-style:solid none solid solid; border-width:12px 1px 12px 12px; display:block; height:0; position:absolute; right:-12px; top:0; width:0; z-index:5; } .breadcrumb .crust .arrow span { -moz-border-bottom-colors:none; -moz-border-left-colors:none; -moz-border-right-colors:none; -moz-border-top-colors:none; border-color:transparent black transparent #f1f1f1; border-image:none; border-style:solid none solid solid; border-width:12px 1px 12px 12px; display:block; height:0; left:-13px; overflow:hidden; position:absolute; text-indent:9999px; top:-12px; #ffffff-space:nowrap; width:0; z-index:6; -webkit-transition:all .4s ease-in-out; -moz-transition:all .4s ease-in-out; -o-transition:all .4s ease-in-out; -ms-transition:all .4s ease-in-out; transition:all .4s ease-in-out } .breadcrumb .crust:hover a.crumb { background-color:#e7e7e7; color:#222; -webkit-transition:all .4s ease-in-out; -moz-transition:all .4s ease-in-out; -o-transition:all .4s ease-in-out; -ms-transition:all .4s ease-in-out; transition:all .4s ease-in-out } .breadcrumb .crust:hover .arrow span { border-left-color:#e7e7e7; -webkit-transition:all .4s ease-in-out; -moz-transition:all .4s ease-in-out; -o-transition:all .4s ease-in-out; -ms-transition:all .4s ease-in-out; transition:all .4s ease-in-out } a.loadpost { width:100%; display:block; padding:8px; border:2px solid #cdcdcd; color:#222; text-transform:uppercase; text-decoration:none; font-family:Oswald,open sans, sans-serif,arial; font-weight:400; font-size:16px } a.loadpost:hover { border:2px solid #ff9900; color:#fff; background-color:#ff9900 } </style> </b:if> <!--end -->
- Sublime Text 3 Build 3065 License Key
- Top 5 Best Torrent Downloading 2014
- Top 5 Sites URL Shorten websites to Earn Money
- How Can You Earn Cash Online with Link Shortening WebSites
- Tricks for How to Make a WiFi Hotspot on your Windows 7/8 Laptop
- How to Import Wordpress to Blogger
- How to Install Emmet with Sublime Text 3
0 comments:
Post a Comment