One way you can improve navigation of a Blogger blog (Blogspot blog) is to add breadcrumb navigation to your Blogger blog. There is also a SEO benefit of installing a breadcrumb as major search engines like Google treat anchor text links as important. In this Blogger tutorial I will guide you through the steps to add breadcrumb navigation to a Blogger blog (Blogspot blog).
What Will a Breadcrumb Do on My Blog?
Adding a breadcrumb to your blog provides a form of text-based navigation. A breadcrumb displays the visitor's location within a blog. The advantage of a breadcrumb is that it provides shortcuts to enable visitors to quickly get around your blog by jumping from one part of your blog to another.
To illustrate how adding a breadcrumb would work in your blog let's use an example. A breadcrumb for an individual post would follow this format:
Home > Label > Post Title
Using this post as an example a breadcrumb might be Home > Navigation > Add a Breadcrumb to Blogger Blogspot Blog. In cases where there is more than one label this hack uses the last label listed. If a visitor wanted to look at other posts about navigation all they need do is click on the "Navigation" link in the breadcrumb and they will be taken to a page which will show them all the posts with the "Navigation" label.
SEO Benefits of a Breadcrumb
Apart from improving the navigation of your Blogger blog adding a breadcrumb also has SEO benefits. Anchor text such as labels tells search engines about the subject of the linked page. Search engines view a breadcrumb with a text link to relevant keywords in the post as important. Read more about SEO try the following articles:
Blogger Blogspot SEO Tips and Tricks
Add Meta Tags to Blogger for Better SEO
How to Add a Breadcrumb Navigation to your Blogger Blog
It is not difficult to add a breadcrumb to your blog but it does involve adding a snippet of code to your template. Below is a step by step walkthrough which I have aimed at beginners so that anyone reading my blog will be able to follow the instructions.
1. Login in to Blogger if you are not already logged in
2. Navigate to Design > Edit HTML
3. Back up your blog using Download Full Template as a precaution in case you accidently overwrite some code and are not able to retrieve it.
4. Check the Expand Widget Template box
5. Add the following CSS code above this line ]]></b:skin>
.breadcrumbs {float: left;width: 590px;font-size: 11px;margin: 5px 10px 20px 10px;padding: 0px 0px 3px 0px;border-bottom: double #EAEAEA;}
Once your breadcrumb is working modify this if you need to so that it blends with the look and style of your template.
6. Find this line of code <b:includable id='main' var='top'>
7. Older XML Blogger templates and custom templates replace the entire block of code below. If you are using the new generation of Blogger templates such as Simple look for alternative instructions further down in this Step)
<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:adStart/>
with
<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>
<!-- disable default status message
<b:include data='top' name='status-message'/>default status message disabled -->
<b:include data='posts' name='breadcrumb'/><data:adStart/>
Note: if you are using the new generation of Blogger templates eg Simple then do the following instead:
Find this code block and add the code in red between <div class='blog-posts hfeed'> and <data:defaultAdStart/>
<b:includable id='main' var='top'>
<b:if cond='data:top.showPlusOne'>
<script expr:src='data:top.plusOneJsUrl'/gt;
</b:if>
<!-- posts -->
<div class='blog-posts hfeed'>
<!--Breadcrumb Hack - disable default status message
<b:include data='top' name='status-message'/>default status message disabled -->
<b:include data='posts' name='breadcrumb'/>
<data:defaultAdStart/>
8. Now immediately before <b:includable id='main' var='top'> paste the following large block of code:
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on front page -->
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>
Browse » <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<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"'> » <a expr:href='data:label.url' rel='tag'><data:label.name/></a> </b:if> </b:loop>
» <span><data:post.title/></span> </b:if> </b:loop> </div>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<div class='breadcrumbs'>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/> </div> <b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » All posts <b:else/>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> »
Posts filed under <data:blog.pageName/>
</b:if> </div> </b:if> </b:if> </b:if>
</b:if>
</b:includable>
9. Click on Save Template button
10. Click View Blog and navigate to any post page to see your new breadcrumb in action
Add a Breadcrumb Based on Archives
Follow this hack provided by Purple Moggy if you would like to add a breadcrumb based on year and month. Likely format would be: Home > Year > Month > Blog Title
Tips and Troubleshooting
Some browsers have problems displaying the code above. If experience any issue then use the code in this link Add Breadcrumb Navigation to a Blogger Blog
In this Blogger tutorial you have learned how to add breadcrumb navigation to your Blogger blog (Blogspot blog) to improve SEO and site navigation. Please let me know how you get on. Good luck!
Showing posts with label SEO. Show all posts
Showing posts with label SEO. Show all posts
SEO on Blogger
Want to improve SEO on a Blogspot Blogger blog? This tutorial discusses how bloggers can optimize their blog using SEO techniques to improve indexing of their Blogger Blogspot blog and achieve a better ranking in search engine results.
In this article I will be discussing the following Blogger help tips for SEO:
Get Your Blog Listed by Major Search Engines
Getting listed in the major search engines is a must if you want to get traffic from search engines. I have written several in depth articles about how to add a sitemap to major search engines and how to add your blog to Google, Yahoo and MSN so I will not repeat myself. Follow these articles for step by step walkthroughs
Optimize Your Blogger Post Titles
Major search engines lend a lot of weight to titles so it is important that you craft your post titles carefully. To optimize your post titles make them keyword rich and ensure the title clearly explains what the blog post is about. Try to put your keywords at the beginning of your title for best results and avoid repeating your keywords within the title. Avoid long titles as Google only displays about 65 characters in the search results anyway.
Title tags are important if your Blogger blog is to attract traffic and rank in search engine results. On your blog home page the blog title appears between the title tags while on each individual post page it is the name of the article itself. While the title tags themselves are unseen by the visitor to your blog they are read when search engines crawl your blog.
Search engines use title tags to display your post title as a headline in search engine results. Search engines also display a description of the article either by extracting it from the post content usually by picking up the first 150 characters of your post or by reading the meta description of the post if one exists.
Meta descriptions can be crafted for individual posts in Blogger to good effect. Make descriptions unique for each post and ensure they contain your target keywords and keyword phrases to encourage search engines to extract snippets from them. To find out more about adding a meta description to an individual post please see my article Adding Meta Tags to Blogger Blogspot Blog for Better SEO
Add Meta Tags and Blog Description to Blogger
Adding meta keywords and a blog description to your Blogger Blogspot blog can boost your rankings by helping visitors locate your blog using keyword and keyword phrases. To find out the best method of inserting these into your Blogger blog please refer to my article about Adding Meta Tags to Blogger Blogspot Blog for Better SEO
Use Keywords in Alt Tags and Image Titles
Optimize the images used on your blog by making use of the alt tags and image titles. For some tips on SEO and images please refer to 10 Tips to Build Site Traffic for a Blogspot Blog
Use Target Keywords in Your Post Content
Make sure you know your targeted keywords and use them within your post content. One of the factors in determining rankings is the relevance of the targeted keywords in relationship to the text that appears in the post content.
Change the Order of Post Title and Blog Title for Better SEO
One key change you can make to Blogger that will markedly improve the SEO of your blog is to adjust the title tags.
By default Blogger title tags are not optimized for search engines. The name of the blog appears before the name of the article which is not search engine friendly. Since search engines read left to right and give preference to what appears first having your blog name display before your post title is significant. To improve SEO it pays to adjust the order of title tags so that the your post title appears first:
Blog Title | Post Title
to
Post Title | Blog Title
Optimize Your Blogger Permalinks
Hand in hand with a title tag is the permanent permalink that is created when a post is published. If the title of the post is more than about 35 characters long you will strike problems with Blogger because it will shorten the title to a 35-40 character permalink. Some very ugly results happen because of this factor. For instance imagine a permalink such as:
http://blogknowhow.blogspot.com/2009/02/how-to-create-improved-permalinks-for.html
A totally useless permalink results because the blogger keyword has been left off. Learn more about crafting titles and working around the limitations of Blogger permalinks in my article How to Create Search Engine Friendly Permalinks
Improve SEO by Making Use of Headings for Post Titles
Heading tags are important for optimal SEO. Most Blogger.com templates use html header tags sized <h2> or <h3> for the post title. In the past major search engines like Google gave precedence to tags with <h1> ahead of anything else but how important <h1> tags are today is less certain. You could tweak the heading size of your post title if you wish however take care to ensure the look of your template isn't compromised. A bigger font will result and this may mean other parts of your blog will need to be adjusted to compensate. To find out what size your blog title is look for the following lines in your template.
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'>&t/a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
As can be seen this template blog title is in <h3>. To change the size of the tags just substitute the appropriate header tag where <h3> appears
Improve SEO By Making Use of Heading Tags Within Posts
Heading tags can be used to good effect in your posts. Make sure you have only one <h1> heading per page if you have one at all and reserve this for your post title. Make use of <h2> and <h3> headings throughout your post to emphasize key points and targeted keywords. Major search engines do take notice of <h2> and <h3> headings when crawling your blog. To add emphasis to a heading within your blog simply enclose the heading in <h3> tags.
Add Breadcrumb Navigation to your Blogger Blog
There is a hack that can be used to add breadcrumb navigation to a Blogger Blogspot blog. Adding breadcrumb navigation can boost your SEO of your blog as well as improving how readers get around.
A breadcrumb provides text-based navigation by displaying the visitor's location within a blog. A breadcrumb provides shortcuts to enable visitors to quickly get around your blog and jump from one part of your blog to another. For example a breadcrumb for a post about meta tags would be Home > Meta Tags >Add Meta Tags to Blogger for Better SEO. An anchor text such as 'meta tags' tells search engines about the subject of the linked page. Search engines view a breadcrumb with a text link to relevant keywords in the post as important.
To find out how to add a breadcrumb navigation to your Blogger Blogspot blog please refer to my article Add Breadcrumb Navigation to a Blogger Blog
This article has focused on providing you with solid Blogger SEO advice, tips and tricks for the Blogspot Blogger. It will help you achieve good SEO results for your blog. Good luck. If you have time let me know about your experiences.
In this article I will be discussing the following Blogger help tips for SEO:
- Adding Your Blogger Blog to Major Search Engines
- Optimizing Blogger Post Titles
- Utilising Meta Keywords and a Meta Description
- Using Keywords in Alt Tags and Image Titles
- Using Target Keywords in Your Post Content
- Optimizing Blogger Title Tags
- Optimizing Your Blogger Permalinks
- Making Use of HTML Heading Tags Within Posts and Post Titles
- Adding Breadcrumb Navigation to your Blogger Blog
Get Your Blog Listed by Major Search Engines
Getting listed in the major search engines is a must if you want to get traffic from search engines. I have written several in depth articles about how to add a sitemap to major search engines and how to add your blog to Google, Yahoo and MSN so I will not repeat myself. Follow these articles for step by step walkthroughs
Optimize Your Blogger Post Titles
Major search engines lend a lot of weight to titles so it is important that you craft your post titles carefully. To optimize your post titles make them keyword rich and ensure the title clearly explains what the blog post is about. Try to put your keywords at the beginning of your title for best results and avoid repeating your keywords within the title. Avoid long titles as Google only displays about 65 characters in the search results anyway.
Title tags are important if your Blogger blog is to attract traffic and rank in search engine results. On your blog home page the blog title appears between the title tags while on each individual post page it is the name of the article itself. While the title tags themselves are unseen by the visitor to your blog they are read when search engines crawl your blog.
Search engines use title tags to display your post title as a headline in search engine results. Search engines also display a description of the article either by extracting it from the post content usually by picking up the first 150 characters of your post or by reading the meta description of the post if one exists.
Meta descriptions can be crafted for individual posts in Blogger to good effect. Make descriptions unique for each post and ensure they contain your target keywords and keyword phrases to encourage search engines to extract snippets from them. To find out more about adding a meta description to an individual post please see my article Adding Meta Tags to Blogger Blogspot Blog for Better SEO
Add Meta Tags and Blog Description to Blogger
Adding meta keywords and a blog description to your Blogger Blogspot blog can boost your rankings by helping visitors locate your blog using keyword and keyword phrases. To find out the best method of inserting these into your Blogger blog please refer to my article about Adding Meta Tags to Blogger Blogspot Blog for Better SEO
Use Keywords in Alt Tags and Image Titles
Optimize the images used on your blog by making use of the alt tags and image titles. For some tips on SEO and images please refer to 10 Tips to Build Site Traffic for a Blogspot Blog
Use Target Keywords in Your Post Content
Make sure you know your targeted keywords and use them within your post content. One of the factors in determining rankings is the relevance of the targeted keywords in relationship to the text that appears in the post content.
Change the Order of Post Title and Blog Title for Better SEO
One key change you can make to Blogger that will markedly improve the SEO of your blog is to adjust the title tags.
By default Blogger title tags are not optimized for search engines. The name of the blog appears before the name of the article which is not search engine friendly. Since search engines read left to right and give preference to what appears first having your blog name display before your post title is significant. To improve SEO it pays to adjust the order of title tags so that the your post title appears first:
Blog Title | Post Title
to
Post Title | Blog Title
Optimize Your Blogger Permalinks
Hand in hand with a title tag is the permanent permalink that is created when a post is published. If the title of the post is more than about 35 characters long you will strike problems with Blogger because it will shorten the title to a 35-40 character permalink. Some very ugly results happen because of this factor. For instance imagine a permalink such as:
http://blogknowhow.blogspot.com/2009/02/how-to-create-improved-permalinks-for.html
A totally useless permalink results because the blogger keyword has been left off. Learn more about crafting titles and working around the limitations of Blogger permalinks in my article How to Create Search Engine Friendly Permalinks
Improve SEO by Making Use of Headings for Post Titles
Heading tags are important for optimal SEO. Most Blogger.com templates use html header tags sized <h2> or <h3> for the post title. In the past major search engines like Google gave precedence to tags with <h1> ahead of anything else but how important <h1> tags are today is less certain. You could tweak the heading size of your post title if you wish however take care to ensure the look of your template isn't compromised. A bigger font will result and this may mean other parts of your blog will need to be adjusted to compensate. To find out what size your blog title is look for the following lines in your template.
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'>&t/a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
As can be seen this template blog title is in <h3>. To change the size of the tags just substitute the appropriate header tag where <h3> appears
Improve SEO By Making Use of Heading Tags Within Posts
Heading tags can be used to good effect in your posts. Make sure you have only one <h1> heading per page if you have one at all and reserve this for your post title. Make use of <h2> and <h3> headings throughout your post to emphasize key points and targeted keywords. Major search engines do take notice of <h2> and <h3> headings when crawling your blog. To add emphasis to a heading within your blog simply enclose the heading in <h3> tags.
Add Breadcrumb Navigation to your Blogger Blog
There is a hack that can be used to add breadcrumb navigation to a Blogger Blogspot blog. Adding breadcrumb navigation can boost your SEO of your blog as well as improving how readers get around.
A breadcrumb provides text-based navigation by displaying the visitor's location within a blog. A breadcrumb provides shortcuts to enable visitors to quickly get around your blog and jump from one part of your blog to another. For example a breadcrumb for a post about meta tags would be Home > Meta Tags >Add Meta Tags to Blogger for Better SEO. An anchor text such as 'meta tags' tells search engines about the subject of the linked page. Search engines view a breadcrumb with a text link to relevant keywords in the post as important.
To find out how to add a breadcrumb navigation to your Blogger Blogspot blog please refer to my article Add Breadcrumb Navigation to a Blogger Blog
This article has focused on providing you with solid Blogger SEO advice, tips and tricks for the Blogspot Blogger. It will help you achieve good SEO results for your blog. Good luck. If you have time let me know about your experiences.