SEO meta tags for Blogger January 7, 2013

In default, Blogger's template hasn't the meta tags (like keywords or description). So this'll not good at SEO your site. In this post ill show you how to add SEO meta tags into your blogger.

1. Edit title + meta tags:
- Edit template in HTML mode.
- Search: <title><data:blog.pageTitle/></title>
- Replace with:

<b:if cond='data:blog.pageType == "index"'>
<meta expr:content='data:blog.pageTitle' name='keywords'/>
<title><data:blog.pageTitle/></title>
<b:else/>
<meta expr:content='data:blog.pageName' name='description'/>
<meta expr:content='data:blog.pageName' name='keywords'/>
<title><data:blog.pageName/></title>
</b:if>

• <b:if cond='data:blog.pageType == "index"'> mean at the home page we use data:blog.pageTitle
• And other page use data:blog.pageName

2. Make powerful keywords meta tags:
- I use jQuery to get and replace keywords meta tag. So you need add jQuery library like: (or download from jQuery.com

<script src='http://code.jquery.com/jquery-1.8.2.min.js' type='text/javascript'/> 

- Now reopen your edit template page (with choose Expand Widget Templates)
+) Search block: <span class='post-labels'>

<span class='post-labels'>
<b:if cond='data:blog.url == data:post.url'>
<b:if cond='data:post.labels'>
 <data:postLabelsLabel/>
 <b:loop values='data:post.labels' var='label'>
  <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
  <b:if cond='data:label.isLast != "true"'>,</b:if>
 </b:loop>
</b:if>
</b:if>
</span>

+) Add under: (use this html in one line to get nice tag content after)

<div id='labels_seo' style='display: none;'><b:if cond='data:blog.url == data:post.url'><b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'>, </b:if></b:loop></b:if></b:if></div>

Use this value fill to my meta tag

- Finally, add this code before <body/> (this code use to get div 'labels_seo' html and fill to new meta tag use jQuery function before() )

<script>
    var new_keyw = $('#labels_seo').html();
    $('meta[name=keywords]').remove();
    $('title').before('<meta content="' + new_keyw + '" name="keywords">');
</script>

4. Make description meta tags from <readmore> + blogger name
This step make me a lot of time. Let's start:
- Use Post Template to get your description faster: (Go to Setting -> Posts and comments -> Post Template)

<div id="post_des">
Your Post Description</div>

- Edit all posts before with this template:

- Update script:

<script>
    // Keywords
    var new_keyw = $('#labels_seo').html();
    $('meta[name=keywords]').remove();
    $('title').before('<meta content="' + new_keyw + '" name="keywords">');
    // Description
    var new_des = $('#post_des').html();
    $('meta[name=description]').remove();
    $('title').before('<meta content="' + new_des + '" name="description">');
</script>

Thanks for reading!