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"'>
    &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) 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"'>
    &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.

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 http://www.indian-share-tips.com/

    Regards

    ReplyDelete
  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.

    ReplyDelete
    Replies
    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.

      Delete
    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.,

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

    ReplyDelete
  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?

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

      Here is my URL:
      http://geldverdienenserioes.blogspot.de

      Delete
  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.

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

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

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

    ReplyDelete
  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?

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

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

    ReplyDelete
  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!

    ReplyDelete
  13. Hello everybody ?
    could someone help me
    How can i remove these social icons from my blog navbar ?
    http://isecure-you.blogspot.com/

    ReplyDelete
  14. 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

    blog page: gigaboy.blogspot.com OR just www.gigaboy.com

    ReplyDelete
  15. 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.

    ReplyDelete
  16. 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?

    ReplyDelete
    Replies
    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: http://bloggerbrush.blogspot.com

      Delete
  17. Thank you for the Tip, Just Implemented it.

    ReplyDelete
  18. Thanks for your post Aneesh,

    I added those head tag codes in my blog, kindly verify my blog codes are right and my blog url is http://www.you2shares.com

    ReplyDelete
  19. 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?
    http://godwithmeblogg.blogspot.com

    ReplyDelete
  20. can you help for my blog http://trickmad.blogspot.in/

    ReplyDelete
  21. Great trick and great tutorial Aneesh… !!

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

    Thanks.

    ReplyDelete
  22. 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..?

    ReplyDelete
  23. 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?

    http://aeiouwhy.blogspot.com/

    ReplyDelete
    Replies
    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.

      Delete
  24. Sir Nice Tutorial im Regular visit of ur blog. Will u Please Guide me How to Implement tags to my blog is http://www.governmentexamsindia.com/
    my email id is sonyvaka@gmail.com

    ReplyDelete
  25. i am searching this for a long time finally i got it check this http://www.leadsquote.com/

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

    A big thanks from http://www.techriksha.com/

    ReplyDelete
  27. 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

    http://kaiserslookbook.blogspot.com/

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

    http://www.foodblaster.com/

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

    ReplyDelete
    Replies
    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).

      Delete
  30. I am unable to apply the h1 tag? You have suggested to generate in the tag generator? Please assist me my blog URL is http://www.sureshotpost.com

    ReplyDelete
  31. 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 :

    ReplyDelete
  32. 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

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

    ReplyDelete
  34. hi, i have applied the techniques, so how do i check my blog post title has changed, need you help harsha-reviews.blogspot.in and citizen-reviews.blogspot.in

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

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

    ReplyDelete
  37. This comment has been removed by the author.

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

    ReplyDelete
  39. Hi, I followed your tutorial and as you predicted post headline on my home page has become tiny. The url is http://www.coolcattreeplans.com/ Sorry to pester you but could you help me adjust this? Thanks!

    ReplyDelete
  40. 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, www.coolcattreeplans.com

    ReplyDelete
    Replies
    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 - aneesh [at] bloggerplugins.org

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

    ReplyDelete
  42. it is cool tutorial.

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

    from - https://plus.google.com/u/0/photos/107774177353548142213/albums/5836277111992802417/6136116463169509394?pid=6136116463169509394&oid=107774177353548142213

    to - https://plus.google.com/u/0/photos/107774177353548142213/albums/5836277111992802417/6136116466950320690?pid=6136116466950320690&oid=107774177353548142213

    ReplyDelete
    Replies
    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;
      }

      Delete
    2. Dear Aneesh,

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

      Delete
  43. Thank you so much! That was so helpful! Greetings

    ReplyDelete
  44. 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 www.sheistheone.ch on second page. Thank you very much in advance.

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

    ReplyDelete
  46. Thank you so much . I don't change yet in my blog . I AT the moment insert h2 in post and now blog is http://infoutili.blogspot.it
    I should change because black is not esthetic. Excuse me for my English. Can you help me? Thank you

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

    ReplyDelete