Adjust Blogger Title Tags to Improve SEO

This tutorial explains how to improve search engine optimisation (SEO) of your Blogger (Blogspot) blog by optimising your page title for search engines like Google and Yahoo.

By default your Blogger (Blogspot) blog does not have search engine optimised title tags. This puts your blog at a disadvantage compared to other blogs that have inbuilt SEO as these sites are likely to be placed more highly in search engine results.

The title tags of your blog are ordered by blog name first followed by the title of the post. This is not ideal for popular search engines like Google and Yahoo which give more importance to the first words of a title. By way of example take a look at how the title tags of this blog were viewed in a browser before any SEO. Note the order of the tags: Blog Name | Post Name.



When this site was first indexed by Google this is the search engine results this site received. Note how the blog name is first in all the results.



Fortunately there is a simple tweak to your template which can rectify this problem. By simply reversing the position of the blog name and page title significant improvement can be gained in search engine results. See the difference in the example below:



Follow the step by step guide below to achieve higher rankings in search engine results.

Tweak of Title Tags for New Blogger (beta) Blogs

1. Login to your blog at Blogger.com and navigate to Layout > Edit HTML

2. Backup your template by downloading it to your computer. This will ensure that you can upload your template before these changes in case of problems.

3. Replace the following line of code (about 5-10 lines from the top):

with (highlight code, Ctrl + C to copy)







4. Click on Save Template and then View Blog. Navigate to an individual post. You will see that your page title is now first followed by your blog title. A pipe symbol separates the two.


Below is an example of the change in search engine results since the tweak was implemented for this site. Since optimising for search engine friendly page titles there has been a significant improvement in traffic accessing the site. This didn't happen right away but if you too implement this page title tweak and continue to deliver quality content you are on your way toward higher search engine rankings.



Troubleshooting
Several readers have reported issues with the line . If you experience this problem then try inserting this line instead which seems to work on some older blogs: . For more on this please read the comments section.

This tutorial has discussed how to adapt the title tags of a Blogger (Blogspot) blog to improve search engine optimisation (SEO) by Google,Yahoo and other search engines.

• Share this on del.icio.us
• Digg this!
• Stumble upon something good? Share it on StumbleUpon
• Add this to Google Bookmarks
• Tweet This!
• Share this on Facebook
• Subscribe
• Buzz up!

Read more!

HOW TO ADD ORKUT SHARE BUTTON TO BLOGGER

Follow the steps given below to add orkut share button to blogger blogs:
(Note : Before following this procedure, please take a backup of your template)

• First of all sign in to your blogger blog and go to Layout -> Edit HTML.
• Now click on Expand Widget templates.
• Now copy and paste the following code above </head>
  

 <script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
 google.load('orkut.share', '1');
 google.setOnLoadCallback(function() {
   var params = {};
   params[google.orkut.share.Field.TITLE] = 'Interesting Page!';
   params[google.orkut.share.Field.DESTINATION_URL] = '<data:post.url/>';
   var connection = new google.orkut.share.Connection(params);
   document.getElementById('orkut-share').onclick =
     function(e) { connection.send('orkut.com', {}); };
 }, true);

Now search for the following code in your template :

<div class='post-header-line-1'>

and paste the following code below it :

<span id="orkut-share" style="cursor:pointer;">
<img src="http://i48.tinypic.com/2d98wtg.gif"/>
</span>
</script>

That’s all. Save your template and see the changes.

• Share this on del.icio.us
• Digg this!
• Stumble upon something good? Share it on StumbleUpon
• Add this to Google Bookmarks
• Tweet This!
• Share this on Facebook
• Subscribe
• Buzz up!

Read more!

HOW TO SETUP A DOMAIN BOUGHT FROM NAME.COM TO BLOGGER

How to buy the Domain Name?

Name.Com will allow you to buy domains with different extensions like .COM, .NET, .ORG etc .

1. First of all Goto Name.Com and you will find a Search Box there. This search box can be used to check if the domain name is available or not. For example if i need the domainmynewcustomdomain.com , then i will search for mynewcustomdomain

2.Name will show the available domain name extensions.Select the one you want.

3.Click the Checkout Button and on the next screen opt to create an account(if you don’t have one. if you have one , then login with that account)

4.Now finish the payment process(using credit card or paypal) and you will be having the domain under your name.com account

How to Setup the Blogger Custom Domain?

1.If you are logged in at your name.com account, then click the Account Icon V

2. Now you will be taken to a page listing all your domains. Click on the domain name which you want to use for your blogger blog.

3. On the next screen Click DNS Management form the Right Sidebar

4.In the DNS Management, add a new CNAME record with the following values CNAME, www, ghs.google.com,1800 and submit

5.Now again add another DNS record with the following values A, (leave next field blank),216.239.32.21 and 1800 and click submit

6. Now we are done setting up the CNAMES

Adding the Custom domain at Blogger.com

1.Login to your Blogger Dashboard and Navigate to Settings > Publishing.

2.Opt For Switch to: Custom Domain (Point your own registered domain name to your blog) and switch to advanced settings

3.Type your new domain there ,fill in the Captcha and save the settings.

4.Now select the redirection Option and save the settings Once again

5. Now your blog should be visible at your new domain. The changes can take up to 3 days to take effect (This is because your ISP’s DNS Server has to get the new updated information about the domain records.)

SETTING UP GOOGLE APPS


1. LOG ON TO YOUR ACCOUNT.

2.Click the Account Icon and then Click the domain name that we just used.

3.Now Click on the Enable link next to Google APPS

4. On the next Screen fill out the required details and click Continue with setup

5.Now you will be able to access your version of Gmail at http://mail.yourcustomdomain.com and similarly you will have the other Google apps running on your sub domains.

Try it out guys. and let me know if this tutorial helped you in any way :)

• Share this on del.icio.us
• Digg this!
• Stumble upon something good? Share it on StumbleUpon
• Add this to Google Bookmarks
• Tweet This!
• Share this on Facebook
• Subscribe
• Buzz up!

Read more!

RELATED POSTS WIDGET WITH THUMBNAILS

Displaying the links to related posts along with a thumbnail of the corresponding post will help you increase the page views/user .Users will be tempted to go for the related postswhen they are presented attractively with thumbnails.

This is another first release from me.This one also uses the media thumbnails generated by blogger for each post.

For displaying the thumbnails,this widget will use the images uploaded for the post using the blogger image uploader(from the post editor) [Update - Now supports external images also.]

Related Posts Widget with Thumbnails for Blogger

Here are the detailed installation steps

1.First of all Login to your blogger dashboard and navigate to Layout > Edit HTML and check the "Expand Widget Templates" check box

2.Now look for

 </head>

and replace it with

 <!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, "Times New Roman", Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts  a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End--></head>

3.Now Find

 <div class='post-footer-line post-footer-line-1'> 

OR

 <p class='post-footer-line post-footer-line-1'> 

4.Now immediately after any of these lines(whichever you could find) place this code snippet

<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End--> 

5. SAVE THE TEMPLATE AND YOU ARE DONE.

• Share this on del.icio.us
• Digg this!
• Stumble upon something good? Share it on StumbleUpon
• Add this to Google Bookmarks
• Tweet This!
• Share this on Facebook
• Subscribe
• Buzz up!

Read more!

HOW TO PRINT A BLOG POST FROM BLOGGER

You may want to give option for visitors to print your post directly from your blog. This blog tips show you how to do this task easily.

1.Login to your dashboard--> layout- -> Edit HTML

2.Check on "Expand Widget Templates"

3.Find out tag.

4.Now copy below code and paste it before tag.

5.Take decision where you want to show print page option. If you want to show after post title then before this tag or for after each post paste following code after this tag .
Print Page

• Share this on del.icio.us
• Digg this!
• Stumble upon something good? Share it on StumbleUpon
• Add this to Google Bookmarks
• Tweet This!
• Share this on Facebook
• Subscribe
• Buzz up!

Read more!