Optimization with HTML Meta tags is the most important to make your Blogger SEO friendly.
You can't talk to Search Engine about your blog any without adding HTML Meta tags that which type page you want and don't want  to index, crawl.
Google recommends using Meta tags because it can understand and using Meta tag helps to provide information about site.

Indexing and crawling aren't the main purposes, to familiar with your blog, content, authorization; to show snippets of data of your blog on search engine, social site etc are done by meta tags.


HTML Meta Tags for Blogger

This article will help you to PROPER use of HTML Meta Tags for your Blogger blog STEP-by-STEP.

1. Open Graph Protocol (OGP) Meta Tags

To enable blog pages to become rich object on social site specially for Facebook, you have to install OGP for your blog.

To install, follow the instructions.

1(A) Replace your <html....> tag with
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:og='http://ogp.me/ns#'>
1(B). Replace your <head...> tag with
<head prefix='og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#'>
1(C). Paste the following meta tags just after the above <head> tag.
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta content='article' property='og:type'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='PUT URL OF YOUR BLOG LOGO HERE' property='og:image'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.metaDescription' name='og:description'/>
</b:if>
<b:if cond='data:blog.pageType == "index"'>
<meta content='Put Short Description of Your Blog.' name='description' property='og:description'/>
</b:if>
<b:include data='blog' name='all-head-content'/>
<meta content='blogger' name='generator'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default?alt=rss"' expr:title='data:blog.title + " - RSS"' rel='alternate' type='application/rss+xml'/>
<link expr:href='"http://www.blogger.com/feeds/" + data:blog.blogId + "/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if>
</b:if>
<link href='/favicon.ico' rel='icon' type='image/x-icon'/>
<meta content='Your Name' name='Author'/>
<meta content='general' name='rating'/>
<meta content='your email' name='email'/>
<meta content='en_US' property='og:locale'/>

2. Meta Tags for Dynamic Title

Replace Your <title>....</title> tag with the following:
<b:if cond='data:blog.pageType == "index"'>
<title>Blogger, Code and Ubuntu Platform</title>
<b:else/>
<b:if cond='data:blog.pageType != "error_page"'>
<title><data:blog.pageName/></title>
</b:if></b:if>
<b:if cond='data:blog.pageType == "error_page"'>
<title>Page Not Found - <data:blog.title/></title>
</b:if>
3. Verification Meta Tags
To get better result from search engine, you must connect your website with Google, Yahoo/Bing, Yandex Webmaster Tool. To verify you have to put verification code provided by them with meta tags on your blog.
Learn -

Put the following meta tags just after title tags. Similarly step 4,5 also.

<meta content='Verification Code' name='google-site-verification'/>
<meta content='Verification Code' name='yandex-verification'/>
<meta content='Pinterest Verification Code' name='p:domain_verify'/>
<meta content='Bing Verification Code' name='msvalidate.01'/>

4. View Port Meta Tags

To enable your blog mobile supported, you need to add view port meta tags. 
<meta content='width=device-width, initial-scale=1' name='viewport'/>

5. Social Site Meta Tags

<meta content='Facebook App ID' property='fb:app_id'/>
<meta content='Your Profile ID in Digit' property='fb:admins'/>
<link href='https://plus.google.com/+YOUR USER NAME/posts' rel='publisher'/>
<link href='https://plus.google.com/+YOUR USER NAME/about' rel='author'/>
<link href='https://plus.google.com/+YOUR USER NAME' rel='me'/>

6. Twitter Card and Pinterest Rich Pin Card Meta Tags

What is Twitter card?
Twitter card allows full width image, Post Title, short snippet of sharing Post's URL. Without adding meta tags for Twitter card on your Blog, it doesn't show like below .
Similarly Pinterest Rich Pin allows like Twitter Card when pin.

To enable those, find for uncustomized-post-template and hit Enter. You will get twice. Stop at the second and you will see a div tag or article tag with this attribute. Put the following code just after this tag.
<!-- Twitter Card Tags -->
<meta content='@compromath' name='twitter:site'/>
<meta content='@Elliyas_Ahmed' name='twitter:creator'/>
<b:if cond='data:post.firstImageUrl'>
 <meta content='summary_large_image' name='twitter:card'/> <!-- summary_large_image or any other your card types -->
 <meta expr:content='data:post.firstImageUrl' name='twitter:image'/> 
<b:else/>
 <meta content='summary' name='twitter:card'/>
 <b:if cond='data:blog.postImageThumbnailUrl'>
    <meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/> 
 </b:if>
</b:if>

<b:if cond='data:blog.pageName'>
  <meta expr:content='data:blog.pageName' name='twitter:title'/>
<b:else/>
    <meta expr:content='data:blog.title' name='twitter:title'/>
</b:if>

<b:if cond='data:blog.metaDescription'>
 <meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<b:else/>
 <meta expr:content='data:post.snippet' name='twitter:description'/>     
</b:if>
<meta expr:content='data:post.sharePostUrl' name='twitter:url'/>
      <!-- /Twitter Card Tags -->

<!-- Pinterest Rich Pins Tags -->
<meta expr:content='data:post.timestampISO8601' property='article:published_time'/>
<meta content='Technology' property='article:section'/>
<b:loop values='data:post.labels' var='label'>
<meta expr:content='data:label.name' property='article:tag'/>
</b:loop>
      <!-- /Pinterest Rich Pins Tags -->

7. Indexing Meta Tags for Robots

You can control indexing, noindexing, following, nofollowing, revisit etc by search engine bot on your blog by using meta tags. Put the followings just after <head> tag.

<meta content='global' name='distribution'/>
<meta content='1 days' name='revisit'/>
<meta content='1 days' name='revisit-after'/>
<meta content='document' name='resource-type'/>
<meta content='all' name='audience'/>
<meta content='general' name='rating'/>
<meta content='all' name='robots'/>
<meta content='index, follow' name='robots'/>
<b:if cond='data:blog.pageType == "archive"'>
<meta content='noindex' name='robots'/>
</b:if>
<b:if cond='data:blog.searchLabel'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>
<b:if cond='data:blog.isMobile'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>

*** Remarks: Be alert using the indexing meta tags. Don't make conflict this with robots.txt setting. Use the same setting on robots.txt file.

Check Meta Tags Validation Online

Now check the validation of HTML Meta tags for your blog.

Facebook Object Debugger: You can check Facebook snippet of your Blog Post's URL.

Put your post URL and observe the result. If you have no problem, you will see no warning or error. If you have, solve according to instructions.

Twitter Card Validator: Similarly put your post URL and observe the result.

If you do successfully, you will see the following resutls:

*.yourdomain.com is whitelisted for summary_large_image card
INFO:  Page fetched successfully
INFO:  31 metatags were found
INFO:  twitter:card = summary_large_image tag found
INFO:  Card loaded successfully
Learn more about Twitter card.

Rich Pin Validator: Check your Rich Pin validation from here.

I hope you have enjoyed HTML Meta Tags for your Blogger blog.