How to Optimize Header Tags in Blogger


There are numerous bloggers struggling to optimize the header tags of blogger. If you too are facing the same problem, we have come up with a decent solution for you.




optimizing header tags in blogger




Blogspot has been the most popular platform for bloggers since the time it was launched. With the passage of time, numerous innovations took place and now you have almost everything on blogger to give you a thrilling blogging experience. The only thing that has not been fixed till now is the heading tags. And, as we know even Google places some amount of importance on heading tags. How will you then fix this problem? A simple and effective solution is here, read on.


What is the problem with header tags in blogger?

I believe, most of us know that h1 should be the most important heading in a page. If you visit a wordpress blog, you will find the post titles containing h1 tag. But, on blogger, you have the blog title with h1 tag, followed by h2 tag for widgets. Your post title has an h3 tag, which means having a lesser importance in the eyes of a search engine. The bigger problem arises when you try to change your post titles to h2. All your headings may change their sizes and your blog may look real scrap. The only solution remains is to exchange the heading tags of the post titles with that of the blog title and use a header image in place of text.


How to change the heading tags of post titles?

Step 1: Go to blogger template in the new blogger interface. Click on Edit html button. (Before doing any changes to your template, I strongly advise you to backup your template and download a copy of it. The backup/restore button is situated on the top right of the same page.)

Step 2: Press Ctrl+F and type h1. The h1 tags in your template will be highlighted. You can press enter to go to the next section containing h1 tag.
Most probably, you will find three places containing h1 tags. You can see them below.

<Group description="Blog Title" selector=".header h1">

.Header h1 {
  font: $(header.font);
  color: $(header.text.color);
  text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
}

.Header h1 a {
  color: $(header.text.color);
}


Replace all these h1 tags with h3 and click on save template. You can check your template to see if you have done it correctly. The blog header font should reduce to the size of post titles.

Note: We could have first changed the h3 tags into h1, but it is always easier to remember the sections containing h1 tags, since, they are fewer in number.

Step 3: Click on expand widgets and now search for h3 tags. Be sure to remember the places where you earlier changed h1 into h3. A good tactics to remember them is that the changed h3 headings will always be after “.header”. Don’t tamper with these; leave them as it is. As for all the other h3 tags, replace 3 with 1 and save the template.

Note: Don’t leave any h3 headings unchanged apart from the ones that were earlier h1, otherwise, you may not get the desired results. One great way to check that you have changed every heading is to search again for h3 tags after completion. You will find exactly 3 h3 tags.

Step 4: The final step is to change your header into a pre-designed image. Your blog title will look somewhat like your post titles after the tweak. If you are happy with it and can change your description font to suit it, then it is well and good. If not, go to layout section. You will find the header just below the navbar and favicon sections. Click on edit button and a window will open. Upload your image that is well suited to the width of your blog header. From the placement options given below, choose the one that best matches with your strategy and click save. If you don’t like to show your diminished header font, you can choose “instead of title and description” option.


Why change h1 tags into h3?

You cannot have/should not have two h1 tags on a single page. This is a great seo sin. Since, h1 is the most important heading that displays the very purpose of a page, it can be implemented only once. All the other headings including h2 and h3 can vary in numbers. The more important a heading is, the less number of times it should be used.

As for now your biggest problem is sorted out. You should not be concerned about h2 headings, since, they are always counted after the h1 headings and you may really need a great deal of time and effort in tweaking everything manually. Yes, there are other great methods to optimize the heading tags in blogger, for example, changing the h3 headings into h2. But, rightly speaking, this one works well and fine with least amount of distortion in your blog design and feel.