How to Change the Title Tags in Blogger for More Search Engine Traffic


By default Blogger displays the blog title first, followed by the name of the post. As you might notice this is not good when it comes to SEO. It's important for the name of the post to come before the name of your blog, especially when it comes to google search results. Learn how to make your post title show up first so that you can reel in more traffic from the search engines.

Why Change the Titles?

It's quite important to have the Post Title + Blog Title arranged accordingly because this is how you would want your blog to be displayed on google's search results. This way more people will click on your link when searching google because the post title is more relevant than your post name.
Example Google Search Results:
You are most likely to click on the bottom image when searching google for the keywords "image reflection generator". The reason being is that your mind reads text from left to right. So it makes sense to have the more important title on the left.



How to Change the Titles:

  1. Go to Layout>edit HTML in your Blogger dashboard.
  2. Search for this tag: <title><data:blog.pageTitle/></title>
  3. Replace this tag with the following code:
  4. <b:if cond='data:blog.pageType == &quot;index&quot;'> <title><data:blog.title/></title> <b:else/> <title><data:blog.pageName/> | <data:blog.title/></title> </b:if>
  5. Save your template and you should see the results in your web browser as depicted in the images below.
  6. It may take a few days for the changes to show up on the google search results. I guarantee you that you will start receiving more traffic from google once you are re-indexed!









How to Add Google+ Button & Social Networking Buttons Below Post Title


This is the same widget that I am using on this blog. Check the social network buttons appearing below this post title and see how they are arranged.
I have arranged them in order of load time so that they may appear as quickly as possible when the page is viewed. I have added twitter, Facebook like, stumbleupon and Google+ button i.e +1 button. Other sharing options are included in the AddThis Share button.

Adding Social Networking Buttons To Blogger

1. Go To Blogger > Design > Edit HTML
2. Backup your template
3. Search for <data:post.body/>
4. and just above it paste the code given below,
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<table border='0'>
<tr> <td> <a class='twitter-share-button' data-count='horizontal' data-lang='en'  data-via='iluvroy' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow'/> <b:if cond='data:post.isFirstPost'> <script src='http://platform.twitter.com/widgets.js' type='text/javascript'> </script> </b:if> </td>
<td> <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp; action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; margin-left:20px; width:100px; height:20px;'/> </td>
<td><div style='margin-right:25px;'> <script expr:src='&quot;http://www.stumbleupon.com/hostedbadge.php?s=1&amp;r=&quot; + data:post.url'/></div> </td>
<td><div style='margin-right:5px;'> <g:plusone expr:href='data:post.url' size='medium'/> </div> </td>
<td> <!-- AddThis Button BEGIN --> <div class='addthis_toolbox addthis_default_style '> <a class='addthis_counter addthis_pill_style'/> </div> <script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
<script type='text/javascript'> var addthis_config = { ui_cobrand: &quot;MY BLOGGER TRICKS&quot;, ui_header_color: &quot;#ffffff&quot;, ui_header_background: &quot;#0080FF&quot; } </script> <!-- AddThis Button END --></td>
</tr> </table>
</b:if><br/>
Replace iluvroy your twitter username.

5.  Note: If you have previously added the +1 button then you may skip this step. Now search for </head> and just above it paste the following code,
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>
6.   Save your template and visit your blog to see it appearing on post pages. The widget will not be visible on homepage but on post pages only. If you want to show it on homepage too then delete the highlighted yellow lines.

Have fun! :>

Feel free to ask any questions you may have.





Related Posts Plugin for WordPress, Blogger...

Comments

Twitter Delicious Facebook Digg Favorites More