How to Get Many Traffic from Search Engine: Add Meta Tags to Blogger posts

Meta Tags

Meta Tags play crucial role for successful search engine optimization (SEO). It is a trick to tell the search engine what our post is all about. The keywords helps the search engine learn faster the content of our post to be matched with readers' query. As a result, our post will show up on search result faster. The description gives brief summary of our post content to the readers and attracts their attention to read our post even further. These kinds of little tricks are very easy to use and also very effective to increase our blog's reputation on the search engines. When people search any topic on Google or Yahoo! then most probably our post will be on the top of search result because meta tags are always responsible for that kind of task and dealing with search engines.

Well here we go!

1. Login to Blogger > Dashboard
2. Click on Drop Down Menu and selectTemplate
3. Backup your Template before making any changes to your blog
4. Now Click on Edit HTML
5. Press Ctrl + F and search the code shown below.

<b:include data=’blog’ name=’all-head-content’/>

6. Paste below code just after the above code.

<b:if cond=’data:blog.url == “Your post URL”‘>
<meta content=’Write some Description For Your post’ name=’description’ />
<meta content=’A Few Keywords For Your post’ name=’keywords’ />
</b:if>

Note: Remember if you want to add meta tags for every post then follow below steps.If you have 300 post in your blog then you have to paste the code 300 times for every post. Look at the example below.

<b:include data=’blog’ name=’all-head-content’/>

<b:if cond=’data:blog.url == “Your Post URL"‘>
<meta content=’Write some Description For Your Blog Post' name=’description’ />
<meta content=’A Few Keywords For Your Blog Post’ name=’keywords’ />
</b:if>

<b:if cond=’data:blog.url == “Your Post URL”‘>
<meta content=’Write some Description For Your Blog Post' name=’description’ />
<meta content=’A Few Keywords For Your Blog Post’ name=’keywords’ />
</b:if>

7. Finally Save your template.

Remember:
1. Replace "Your post URL" with your post link
2. Replace "Write some Description For Your Blog post" with your post's Description
3. Replace "A Few Keywords For Your Blog post" with your post's keywords.

You can check what you have done already correct or not by visiting http://chkme.com/page-seo-tools type your post url on the box given and then click check. If you can see the post url, post description and keywords there, you have done the correct steps. Wish you are successful with your meta tags setting. Happy blogging..

Read more

Post Preview With Read More and Thumbnail on Your Blogger Home Page

Post Preview With Read More and Thumbnail

Do you want to have posts that look like the picture above on your blogger home page? Certainly! It looks much nicer. By default blogger shows the full posts in the home page and as a result readers find it boring and tiring to do much scrolling down just to get to the other posts on your blog. Not efficient really. Well just to help your readers it is a good idea to have a summary of your posts on your blog’s homepage and then add a ‘read more’ link below the post summary. Let me show you how to do it.

1. Login to Blogger then click on Dashborad

2. Click on Drop Down Menu and select Template
3. Backup your current Template before making any changes to your blog
4. Now Click on Edit HTML
5. Press Ctrl + F and search </head>
6. Paste below code before </head>

<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(a,b){if(a.indexOf("<")!=-1){var s=a.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}a=s.join("")}b=(b<a.length-1)?b:a.length-2;while(a.charAt(b-1)!=' '&&a.indexOf(' ',b)!=-1)b++;a=a.substring(0,b-1);return a+'...'}function createSummaryAndThumb(a){var b=document.getElementById(a);var c="";var d=b.getElementsByTagName("img");var e=summary_noimg;if(d.length>=1){c='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+d[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var f=c+'<div>'+removeHtmlTag(b.innerHTML,e)+'</div>';b.innerHTML=f}
//]]>
</script>
<script type='text/javascript'>
summary_noimg = 550;
summary_img = 450;
img_thumb_height = 150;
img_thumb_width = 200;
</script>

7. Now find <data:post.body/>
8. Replace it with the code below

<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<div style='clear: both;'/>
<span class='rmlink' style='font-weight:bold;padding:6px;float:right;text-align:right;'><a expr:href='data:post.url' >Read more</a></span>
</b:if>
</b:if>

9. Now Save your template.

By default your posts would look like the picture above, but if you'd like to customize the look to your desire, below is the guide for you. Just change the numbers and make experiment.

summary_ noimg= 550; >> Length of the summary if the post does not have a thumbnail.
summary_img = 450; >> Length of the summery if the post have a thumbnail
null_thumb_height = 150; >> Height in pixels of the thumbnail.
null_thumb_width = 200; >> Width in pixels of the thumbnail.

Well that's the guide how you change the look of your posts on blogger home page. Wish your readers be more pleased to read through all your posts with ease.

Read more