Optimize H1,H2 & H3 heading tags in Blogger

Optimize heading tags in Blogger h1 h2 h3 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 H2 for 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

    Edit Blogger Template 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)

    find-h1-tag-in-blogger-template
  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"'>
    </h1>
    <b:else/>
    </h2>
    </b:if>
    <b:else/>
    </h1>
    </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'> or similar (Do a Ctrl + F for <h3 within the Blogger Template Editor to find it) find-h3-tag-in-blogger-template
  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"'>
    </h2>
    <b:else/>
    </h1>
    </b:if>
    <b:else/>
    </h2>
    </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.

59 comments :

  1. The title of the website is most important and it should remain H1. May I seek your opinion on the subject and may I solicit your advice for our website

    Regards

    1. This comment has been removed by the author.

  2. Pretty nice tut. Clear explanation of the tags and how they are important. I did this the other way by changing the h3's to h1 without those conditional statements & tweaking the css to match the blog style. Can you explain any particular reason for conditional tags and how it may effect the seo of the blog.

    1. If you don't use conditional tags, it will lead to multiple H1s on non-post pages. This is a debatable topic as many feel that multiple H1s on the same page won't be a problem.Personally I feel that we should arrange these based on priority and hence the conditional tags.

    2. Awesome post. I was porting a wordpress template and I have seen that wordpress themes use the same technique. This post is the one that made your blog the most important blog for blogger users. My theme customizations have become too easy now. Thanks for this great post.,

  3. Thx for your help. Your blog is cool :)

  4. Hey thanks for the tip. But as you said there is problem. I've applied all the things and my post titles have cahnged :( They look really small and bad. Can you help?

    1. sure :-) blog URL please

    2. Awesome hints! But I´ve got the same issue with mine... could you help me too? Btw thanks for sharing!

  5. Hi Aneesh,
    Nice tutorial, I am looking for something from a long time.
    My blog post title is already H1 Tag, But It is H1 even on homepage too. How can I make my blog post title to H2 on my Blog homepage.

  6. Vary nice job. thanks for a helpful tutorial.

  7. nice tutorial,, i will use to my blog, thanks for share this tutorials

  8. i found difficulties to edit h3 to h2 tag on new blogger template.would you sort out this problem?

  9. Hi bro its amazing post

    what about to using "if cond" for change post title to H1 on post and "else" to H2 on home

    Something like

    start if cond post
    h1
    else
    h2
    end if

    Is this the right way?

  10. nice job..... thanx for your tips

  11. i am getting difficulties with new blogger template. please help me

  12. Shouldn't you also change the css values for the heading tags? otherwise the text format associated to those tags will also change, don't they?

    I'm using the new blogger template as well and I would like to follow your indications but I'm afraid of change all the formats within the blog...

    Thanks for your interesting posts!

  13. Hello everybody ?
    could someone help me
    How can i remove these social icons from my blog navbar ?

  14. GigaBoy Technology SolutionsMay 3 at 10:24 PM

    Hello. I applied the changes and it doesn't appear to have changed properly. I more than likely did something wrong, but if you wouldn't mind checking it out for me, I would really appreciate it.

    Thanks!

    -Geoffrey

  15. Works, thank's

  16. Amazing. These Conditional Tags are awesome. Now I have on my home page (h1) Web site title (/h) and (h2)Post1(/h2), (h2)Post2(/h2)......(h2)Post "n" (/h2). I'm saying againt, these "rules" are awesome and you're the MAN. Good Joob and few billions thanks from me.

  17. Hi Tagmaster ;-)
    Amazing tutorial. But unfortunately this does not work for me. I have done all these funny codes that you describe in this post. But my article-headings are still < h2 post-title entry-title>
    Please, can you help me?

    1. I am having the same problem.... Please help me... All other things are well except h2 tags on article titles on full post pages... these should be h1 according to your article.... my blog:

  18. Thank you for the Tip, Just Implemented it.

  19. Thanks for your post Aneesh,

    I added those head tag codes in my blog, kindly verify my blog codes are right and my blog

  20. I dont understand at all. E.g should i change the h1 class='title' to h2 and the the /h1 to the code you highlighted?

  21. can you help for my blog

  22. Great trick and great tutorial Aneesh… !!

    It works almost fine, so I contact you to fix the small problem I have.

    Thanks.

  23. Nice tutorial but can you help me?
    Earlier when I used to post, the default heading would come automatically.

    But Now I have to place the heading in the marked space. How can I post without that..?

  24. Thanks!
    Made all the changes but now it looks like there is extra padding/space between the blog post title and the first line of the blog post?
    Any suggestions?

    1. Also, the font for the post title is different from when it's on the front page and when you're looking at the post's page.

  25. Sir Nice Tutorial im Regular visit of ur blog. Will u Please Guide me How to Implement tags to my blog

  26. i am searching this for a long time finally i got it

  27. Anish PanickerJuly 19 at 1:09 AM

    In condition, 'index', showing h2 and on other static pages it wasn't supporting..,
    any way great tutorial..

    A big thanks

  28. Did I do it right?
    Can you please check out my website and tell me if i did it right. I followed your instructions. lol

    Thanks

  29. Hi! I tried your trick and after some days my organic results went down. Could you please have a look at my blog?

  30. May I ask why blog post title shoud be.assigned more importance than blog title ?

    1. The short answer is SEO - people searching are more likely to be interested in the content of your blog post (which should be reflected in the POST title) than in the name of your blog (BLOG title).

  31. I am unable to apply the h1 tag? You have suggested to generate in the tag generator? Please assist me my blog

  32. Does it still work for template that were not provided by default by Blogger?
    I found on mine the code lines your're talking about but I can't paste them in your code generator without getting an error message : invalid input

    For H3 here is what I'm pasting :

  33. Hi , i am looking for this kind
    > add h1 tag for full post title and h2 tag for excerpt post title
    but the one you posted the code which put h2 tag for all excerpt post title and full post title ,

    adding more than one h1 tag for a single page is not good

    please help if you have any idea thank you

  34. Hi ! I couldn't find H3 tags on my blog
    !!

  35. hi, i have applied the techniques, so how do i check my blog post title has changed, need you help

  36. Very good topic but can you write more detail as its not convenient for newbies .

  37. hello this guide is so nice but during apply they mention some issue. like blog title removed

  38. This comment has been removed by the author.

  39. dear please help me. same ap jese template ha but us mein yeh kam nai kar rehy ha kiun

  40. Hi, I followed your tutorial and as you predicted post headline on my home page has become tiny. The url is Sorry to pester you but could you help me adjust this? Thanks!

  41. Oh my, I also just learned there is no H1 tag on my homepage... so I guess I really messed up somewhere. I'm going to leave it alone for a few days to see if you have time to look at it. If you don't (I'm sure you are busy) I'll revert to what I had before. Thanks,

    1. If you could download your template and send me a copy, I can have a look. You can backup your template at "Template > Backup/Restore > Download full template". Could you send me the .xml file and I can sort it out.

  42. Thanks for such valuable post. If you could review my blog. I have changed all the heading tags according to your posts description.

  43. she.is.the.oneApril 10 at 7:56 PM

    it is cool tutorial.

    unfortunately title of the post appear from center to the left side. how should i solve this pls?

    1. Go to Template > Customize > Advanced > CSS and add

      h1.post-title{
      font: 20px Montserrat, sans-serif;
      color:#000000;
      margin: .75em 0 0;
      text-align:center;
      text-transform:uppercase;
      letter-spacing:2px;
      }

    2. she.is.the.oneApril 30 at 6:15 PM

      Dear Aneesh,

      I added the code to css, but the title of the posts still appear to the left side...

  44. Serwis komputerowy PoznańApril 20 at 12:00 PM

    Thank you so much! That was so helpful! Greetings

  45. she.is.the.oneMay 4 at 4:39 PM

    Dear Aneesh, If I change post title to H1, do i will loose the good position, which i have right now on the google? (if you add "swiss fashion blogger" you will find on second page. Thank you very much in advance.

  46. Help me. Please teach me to fix my blog's error. Look my blog. My chkme score only 85 %

  47. Thank you so much . I don't change yet in my blog . I AT the moment insert h2 in post and now blog
    I should change because black is not esthetic. Excuse me for my English. Can you help me? Thank you

  48. thank you so so much...it has worked for me...hats off to you!