Optimize H1,H2 & H3 heading tags in Blogger

Heading tags are a way of organizing and prioritizing content in a HTML document. There are 6 heading tags - H1(the most important one) to H6(the lease important one). Among these six tags,H1 tag is the most important tag followed by H2, H3 and so on. By default Blogger uses H1 tags for the blog title, H3 for post titles and H2for sidebar titles. Having proper weighted headings is really important from an SEO perspective and this tutorial will help you to assign heading tags based on importance.

How to use heading tags

Heading tags should be assigned to titles based on their priority. The most important heading on the page should we wrapped in an H1  tag. For a post page, the most important title will the title of the blog entry. The Blog’s name and the sidebar headings are not as important as the post title.

By default, Blogger homepage uses the below heading tag distribution

<h1>Your Blog Title</h1>
<h3>First post's title</h3>
<h3>Second post's title</h3>
<h2>Sidebar Gadget title</h2>

The Sidebar Gadget titles are not as important as the post titles. So we will reorganize these tags to:

<h1>Blog Title</h1>
<h2>first post's title</h2>
<h2>second post's title</h2>
<h4>Sidebar Gadget title</h4>

By default, Blogger post page uses the below heading distribution

<h1>Blog Title</h1>
<h3>The post title</h3>
<h2>Sidebar Gadget title</h2>

We will reorganize this to

<h2>Blog Title</h2>
<h1>The post title</h1>
<h4>Sidebar Gadget title</h4>

Modify template to assign heading tags based on priority

1. Login to your Blogger Dashboard, backup your template and Navigate to Template > Edit HTML
   
2. Change Blog Title to H2 on post and static pages - Find the opening H1 tag associated with your blog title It will be  <h1 class='title'> or similar (Do a Ctrl + F for <h1 within the Blogger Template Editor to find the tag)
   
3. Copy this opening tag into the below box and generate the template tag.
   Your opening h1 tag:  
   Replace the text you copied from the template with the generated code. Do this for every <h1. Now replace all </h1> (Closing tag) with

   <b:if cond='data:blog.pageType != "index"'>
   <b:if cond='data:blog.pageType == "archive"'>
   &lt;/h1&gt;
   <b:else/>
   &lt;/h2&gt;
   </b:if>
   <b:else/>
   &lt;/h1&gt;
   </b:if>

4. Changing Post title to H1 on post and static pages – Find the opening H3 tag associated with your post title. It will be <h3 class='post-title entry-title' itemprop='name'> or similar (Do a Ctrl + F for <h3 within the Blogger Template Editor to find it)
5. Copy this opening tag into the below box and generate the replacement code.
   Your opening h3 tag:  
   Replace the text you copied from the template with the generated code. Do this for every <h3 .Now replace all </h3>(Closing tag) with

   <b:if cond='data:blog.pageType != "index"'>
   <b:if cond='data:blog.pageType == "archive"'>
   &lt;/h2&gt;
   <b:else/>
   &lt;/h1&gt;
   </b:if>
   <b:else/>
   &lt;/h2&gt;
   </b:if>

6. Changing Sidebar Gadget Titles to H4 – Find all occurrences of

   <h2><data:title/></h2>

   and replace them with

   <h4><data:title/></h4>

More Help

If you want me to review the code changes that you have made, leave a comment here and I will be happy to review the heading tags added to your blog. Altering the heading tags might change the font sized of your headings. I can’t write a generic post to deal with these as different templates have defined the CSS in multiple ways. So If you face such issues, the best way will be to use the comment/contact form here.