How to Add H1 tag for Single Post & H2 tag for homepage of Blogger

Change Post titles tags < H1>for Posts &< H2> for homepage url on Blogger

Efficient use of H1 & H2 Tags is important for any blog in terms of SEO. Search engines keep on changing their algorithm but importance of <H1>, <H2> &< H3> tags has never been affected. Blogger, by default uses H3 tag for individual blog post & which might affect you  in SERPs. Search engine bots read any page the way we human read it. As H1 is biggest in size & that's why anything inside H1 tag is considered important & that's why we use H1 tags for post titles.

H1, H2, H3 SEO Conventions 

Lets see some of the SEO conventions which Google Never told you

1. There should be only one H1 tag on single Page
2. Blog Post Title should be in H1 tag
3. Use H2 tags to highlight the subtopics.
4. Use H3 tags if you still have anything less important than H2 tags
5. Always keep 10-12 Posts on you homepage with read more link.

Handling H1 & H2 tags in blogger is quite tricky. If you just hardcode the H1 tag for every blogger post, you will have many posts with H1 tags on homepage url which is not advisable. (ref. rule 1). You can overcome this problem by keeping just a single post on homepage but it looks odd & it is advisable to keep 10-12 posts on your home page.

Word press has plug ins for such modification but in blogger,we don't have such plug ins or scripts for blogger. I did some research &  made my own script to resolve this problem. You can check that my every post has H1 tag & it becomes H2 tag on homepage.

Adding H1 tag on individual blogger Post & H2 tags on Home page

Enough talking, lets see the code.
Every default blogger template has following code. Most of the blogs have <h3> tags while some new customized tags have <h2> tags.

1. Take a backup of your template then

2. Go to Blogger >> blog >> Edit HTML & Check the Expand Widget Templates option.
3. Search for "<a expr:name='data:post.id'/>"
4. You will find The following code under the <a expr:name='data:post.id'/> tag
5. You will find following code under the tag.

    <b:if cond='data:post.title'>
      <h3 class='post-title entry-title'>
      <b:if cond='data:post.link'>
        <a expr:href='data:post.link'><data:post.title/></a>
      <b:else/>
        <b:if cond='data:post.url'>
          <b:if cond='data:blog.url != data:post.url'>
            <a expr:href='data:post.url'><data:post.title/></a>
          <b:else/>
            <data:post.title/>
          </b:if>
        <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
      </h3>
    </b:if> 

6. Replace this code with my code.

 /*  © CopyRight:- Sangram Nandkhile   © Blogshippo.blogspot.com */
<b:if cond='data:post.title'>
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <h1>
     <b:if cond='data:post.link'>
       <a expr:href='data:post.link'><data:post.title/></a>
     <b:else/>
        <b:if cond='data:post.url'>
          <a expr:href='data:post.url'><data:post.title/></a>
        <b:else/>
          <data:post.title/>
        </b:if>
     </b:if>
      </h1>
  <b:else/>
        <h2>
     <b:if cond='data:post.link'>
       <a expr:href='data:post.link'><data:post.title/></a>
     <b:else/>
        <b:if cond='data:post.url'>
          <a expr:href='data:post.url'><data:post.title/></a>
        <b:else/>
          <data:post.title/>
        </b:if>
     </b:if>
      </h2>
  </b:if>
  </b:if>
  /*  © CopyRight:- Sangram Nandkhile   © Blogshippo.blogspot.com */ 

5.You can find the same code for 2-3 times. Replace the first  code by my code everywhere.
6. Save the template.

 

This demo site has H1 tags on the Individual page & H2 tags on the homepageurl.

These might make some visual changes in your blog's titles as it must not be having CSS for H1 tag. You will have to add CSS for H1 & H2 tags. 

Change Post titles tags < H1>for Posts &< H2> for homepage url on Blogger

Efficient use of H1 & H2 Tags is important for any blog in terms of SEO. Search engines keep on changing their algorithm but importance of <H1>, <H2> &< H3> tags has never been affected. Blogger, by default uses H3 tag for individual blog post & which might affect you  in SERPs. Search engine bots read any page the way we human read it. As H1 is biggest in size & that's why anything inside H1 tag is considered important & that's why we use H1 tags for post titles.

H1, H2, H3 SEO Conventions 

Lets see some of the SEO conventions which Google Never told you

1. There should be only one H1 tag on single Page
2. Blog Post Title should be in H1 tag
3. Use H2 tags to highlight the subtopics.
4. Use H3 tags if you still have anything less important than H2 tags
5. Always keep 10-12 Posts on you homepage with read more link.

Handling H1 & H2 tags in blogger is quite tricky. If you just hardcode the H1 tag for every blogger post, you will have many posts with H1 tags on homepage url which is not advisable. (ref. rule 1). You can overcome this problem by keeping just a single post on homepage but it looks odd & it is advisable to keep 10-12 posts on your home page.

Word press has plug ins for such modification but in blogger,we don't have such plug ins or scripts for blogger. I did some research &  made my own script to resolve this problem. You can check that my every post has H1 tag & it becomes H2 tag on homepage.

Adding H1 tag on individual blogger Post & H2 tags on Home page

Enough talking, lets see the code.
Every default blogger template has following code. Most of the blogs have <h3> tags while some new customized tags have <h2> tags.

1. Take a backup of your template then

2. Go to Blogger >> blog >> Edit HTML & Check the Expand Widget Templates option.
3. Search for "<a expr:name='data:post.id'/>"
4. You will find The following code under the <a expr:name='data:post.id'/> tag
5. You will find following code under the tag.

    <b:if cond='data:post.title'>
      <h3 class='post-title entry-title'>
      <b:if cond='data:post.link'>
        <a expr:href='data:post.link'><data:post.title/></a>
      <b:else/>
        <b:if cond='data:post.url'>
          <b:if cond='data:blog.url != data:post.url'>
            <a expr:href='data:post.url'><data:post.title/></a>
          <b:else/>
            <data:post.title/>
          </b:if>
        <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
      </h3>
    </b:if> 

6. Replace this code with my code.

 /*  © CopyRight:- Sangram Nandkhile   © Blogshippo.blogspot.com */
<b:if cond='data:post.title'>
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <h1>
     <b:if cond='data:post.link'>
       <a expr:href='data:post.link'><data:post.title/></a>
     <b:else/>
        <b:if cond='data:post.url'>
          <a expr:href='data:post.url'><data:post.title/></a>
        <b:else/>
          <data:post.title/>
        </b:if>
     </b:if>
      </h1>
  <b:else/>
        <h2>
     <b:if cond='data:post.link'>
       <a expr:href='data:post.link'><data:post.title/></a>
     <b:else/>
        <b:if cond='data:post.url'>
          <a expr:href='data:post.url'><data:post.title/></a>
        <b:else/>
          <data:post.title/>
        </b:if>
     </b:if>
      </h2>
  </b:if>
  </b:if>
  /*  © CopyRight:- Sangram Nandkhile   © Blogshippo.blogspot.com */ 

5.You can find the same code for 2-3 times. Replace the first  code by my code everywhere.
6. Save the template.

 

This demo site has H1 tags on the Individual page & H2 tags on the homepageurl.

These might make some visual changes in your blog's titles as it must not be having CSS for H1 tag. You will have to add CSS for H1 & H2 tags. 

Was that useful? Why not share it?