Blogger SEO Tips: Update Title Style and Add Meta tag

In blogger, By default, the Blog title appears first, the important information(which is the post title) is pushed to the end. There is a chance for the search engines to append this long a title. Also, it wouldn’t look appealing to searchers on google. So for a good Title, Page title should come first.

Second thing META DESCRIPTION Tag: The importance of this tag In words of Googlewebmaster:

"Why does Google care about meta descriptions?
We want snippets to accurately represent the web result. We frequently prefer to display meta descriptions of pages (when available) because it gives users a clear idea of the URL's content. This directs them to good results faster and reduces the click-and-backtrack behavior that frustrates visitors and inflates web traffic metrics."

I saw there are lot of posts about this but they define meta tags for whole blog means each post has same meta description. I dislike. So I decided to give page title as a meta description. so that each post has different meta description tag.

TO DO both points in blogger:
Goto Edit Html tab and find the codes below
<title> <data:blog.pageTitle/> </ title>
Replace it With
<b:if cond='data:blog.pageType == &quot;item&quot;'> <meta expr:content='data:blog.pageName' name='Description'/> <title> <data:blog.pageName/> | <data:blog.title/> </title> <b:else/> <meta expr:content='data:blog.pageTitle' name='Description'/> <title> <data:blog.pageTitle/> </title> </b:if>
It will display the name of a particular entry first without bringing the name of the blog in first position as well as add meta description tag.

Add Digg, Technorati, Stumble Upon, Delicious buttons in Blogger

Social bookmarking or networking is a great way to increase traffic. There are many bookmarking services like Digg,Technorati,Delicious,StumbleUpon,Reddit,Blink List,Furl,
Mixx,Facebook,Google Bookmarks,Yahoo My Web,..etc and some services like addthis and sharethis provides sharing services of these bookmarking services. our object is to add these bookmarking services in blogger to increase traffic.

Technique 1:
1. In your blogger account click on Layout-> Edit HTML
2. Check on "Expand widget templates"
3. Now search following tag:
<data:post.body/>
4.Copy and paste following code below or after <data:post.body/> tag

<!--Digg-->
<a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url  
+ "&title=" + data:post.title' target='_blank'><img alt='Digg'  
border='0' src='http://benny.ayong.googlepages.com/digg.png' title='Digg'/></a>
<!--technorati-->
<a expr:href='"http://technorati.com/faves?add=" + data:post.url'  
target='_blank'><img alt='Technorati' border='0'  
src='http://benny.ayong.googlepages.com/technorati.png' title='Technorati'/></a>
<!--Delicious-->
<a expr:href='"http://del.icio.us/post?url=" + data:post.url +  
"&title=" + data:post.title' target='_blank'><img alt='Delicious'  
border='0' src='http://benny.ayong.googlepages.com/delicious.png'  
title='Del.icio.us'/></a>
<!--StumbleUpon-->
<a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url +  
"&title=" + data:post.title' target='_blank'><img alt='StumbleUpon'  
border='0' src='http://benny.ayong.googlepages.com/stumbleupon.png' title='Stumble  
Upon'/></a>
<!--Reddit-->
<a expr:href='"http://reddit.com/submit?url=" + data:post.url +  
"&title=" + data:post.title' target='_blank'><img alt='Reddit'  
border='0' src='http://benny.ayong.googlepages.com/reddit.png'  
title='reddit'/></a>
<!--Blinklist-->
<a  
expr:href='"http://www.blinklist.com/index.php?Action=Blink/addblink.php& 
Url=" + data:post.url + "&Title=" + data:post.title'  
target='_blank'><img alt='BlinkList' border='0'  
src='http://benny.ayong.googlepages.com/blinklist.png' title='BlinkList'/></a>
<!--Furl-->
<a expr:href='"http://www.furl.net/storeIt.jsp?t=" + data:post.title +  
"&u=" + data:post.url' target='_blank'><img alt='Furl' border='0'  
src='http://benny.ayong.googlepages.com/furl.png' title='Furl'/></a>
<!--Mixx-->
<a expr:href='"http://www.mixx.com/submit?page_url=" + data:post.title +  
"&u=" + data:post.url' target='_blank'><img alt='Mixx' border='0'  
src='http://benny.ayong.googlepages.com/mixx.png' title='Mixx'/></a>
<!--Facebook-->
<a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.title  
+ "&u=" + data:post.url' target='_blank'><img alt='Facebook'  
border='0' src='http://benny.ayong.googlepages.com/facebook.png'  
title='facebook'/></a>
<!--Google Bookmarks-->
<a expr:href='"http://www.google.com/bookmarks/mark?op=edit&bkmk=" +  
data:post.title + "&u=" + data:post.url' target='_blank'><img  
alt='Google Bookmark' border='0'  
src='http://benny.ayong.googlepages.com/googlebookmark.png' title='Google  
Bookmark'/></a>
<!--YahooMyWeb-->
<a expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?t="  
+ data:post.title + "&u=" + data:post.url' target='_blank'><img  
alt='Yahoo' border='0' src='http://benny.ayong.googlepages.com/yahoomyweb.png'  
title='Yahoo Myweb'/></a>

5. Save your template.
6. Now you will get error:
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The reference to entity "url" must end with the ';' delimiter.
7. for this Convert all & to &amp; in added html.
8. Now Save again.
The result is

New Technique:
Use "AddThis" or "ShareThis".

I recommend "ShareThis" because there are some problems in AddThis hover in different browsers.

Publish Source code in Blogger

After posting any source code, First we make sure that the code is correct and same as the original. For HTML or script source code, we require HTML Encoding so that blogger doesn't execute this code.The Source code format should be different from content and there should be option for copy code or print code so that user don't need to select entire code and press ctrl+c. I use "Syntaxhighligher" to display source code in blogger. It fullfills all requirement. First Layout is very pretty with line numbers and it provides "View Plain" (To display only source code in another window),"Copy to clipboard" and "Print?" options. We will see How can we use syntaxhighlighter in blogger without any hosting.

1.In the blogger,Click on Layout tab ->Edit HTML and put following things Before </head>

<link href='http://syntaxhighlighter.googlecode.com/svn/trunk/Styles/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js'/>

2. put following things Before </body>

<script language="javascript">
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>

3. encode (HTML Encode) your source code. for this, you can use this.
OR

Copy your code in notepad and replace all < in &lt; etc.

4. Put your updated code between:
<pre name="code" class="Cpp">
….My code here…
</pre>