Overused H2 & Missing H1 Tags in Blogger Posts Titles

Optimize Headline Tags h1 and h2 in BloggerMost Blogger blogs are poorly optimized when it comes to Headline tags which includes H1, H2 and H3 either because newbie publishers are implementing wrong SEO techniques by reading unauthentic articles across the web or may be because they are using a custom template which may look quite attractive when it comes to User interface (UI) but they are the worst when it comes to Optimized XHTML Structure. In our previous tutorial we share how you can assign H1 Tag to Blog Title on homepage, search pages and Archives, in todays tutorial we will discuss how to correctly optimize Post titles and Static Page titles in blogspot by assigning H1 Tag to a title on Item Page and H2 tags on Index and Archive pages. We will also empower the title Structure with the correct Schema Markup.

I have used the word 'Overused' because rarely do people understand that keeping a logical hierarchy of Headline tags on a HTML DOM is not only SEO friendly but also sensible thing to do. Bloggers today rarely understand that and as a result they often use Multiple H1 tags on a single page or they assign H2 to Post titles on item pages which is a terrible SEO mistake. H2 is overdosed to post tiles on every single Page may it be index, item or archive pages.

For The Record: This tutorial is the first tutorial of its kind shared online which focuses on adding H1 Tag to Post titles and optimizing the Headline tags with Microdata tags

Just like the headlines in a newspaper attract a reader's attention, similarly the Headline tags in a blog article attracts the attention of a search robot. H1 is given the most importance followed by H2, H3 and so on till H6. In web typography we normally use H1,H2 and H3 a lot and it is important that you may optimize the layout of your template such that these tags may be correctly placed on the basis of Importance. To make it worst Post Titles are even Self-Hyperlinked or Self-Linked when Post is viewed. Why would you link a page to the page itself? Makes no logic.

Note: Please first read Part 1 of this tutorial series so that you may understand the default hierarchy for Headline Titles in Blogger

What's The Plan?

Be default Blogger blogs have the following Heading Settings:

Before:

Heading Tag Assigned to
h1 Assigned to Blog Title. Not assigned at all when Logo Image is used
h2 Assigned to Sidebar Titles.
h3 Assigned to Post Titles and Subheadings! Weird!

I called it weird because your Sidebar tiles are given more importance than your Post titles! By default blogger assigns <H3> tag to Post titles on all pages which makes them even less important than the sidebar headlines which have a H2 tag. Fixing this is really important to better rank your titles.

In case where a logo image is used, no H1 tag is used at all! Which means there is almost no presence of <h1> tag on any page of your blog which is really not recommended in SEO.

After:

Heading Tag Assigned to
h1 Assigned To Blog Title only on Index Pages and archives and assigned to Post Title on the Item Page only. This way every page on your blog will have a H1 tag assigned to your most important Title.
h2 Assigned to Post Titles on Index Pages and archives. Assigned to Sidebar Titles on all pages. Due to widget XHTML structure configuration, the sidebar headlines tags can not be edited. H2 is fixed for sidebar Headlines
h3 Assigned to Subheadings only

This way you will assign <H2> tag to Posts titles on Index and Archive Pages

  • Index Pages: These pages are your Homepage and Label Pages

and you will assign <H1> Tag to Post Tiles on Item Pages only

  • Item Pages: These are your Post or Static Pages When viewed

Lets get to work!

Optimizing Post Title Headline Tags

Remember that we are not just optimizing titles, we will also be adding schema microdata tags to better help search bots to recognize the structure of your entire site. This will also help eliminating Data structured errors on your webmaster account.

Follow these sequential steps:

1 Go To Blogger > Template > Backup your template

2 Click Edit HTML

3 Search for this code or its alike

class='post hentry'

Which will be contained inside a div section as shown below

<div class='post hentry'>
 

4 Replace it with this

<div class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
<meta expr:content='data:post.firstImageUrl' itemprop='image_url'/>
 

info: The above highlighted parameters are microdata tags that help describe your content.

5 Next find this code or one similar to it:

<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/>
      <data:post.title/>
    </b:if>
   </h3>
  </b:if>

or in new blogger templates the code will look like this

<b:if cond='data:post.title'>
<h3 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'>
<a expr:href='data:post.link ? data:post.link : data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>

Replace the code you just found with this optimized version of the code

<b:if cond='data:post.title'>
                     <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <h2 class='post-title entry-title' itemprop='name'>
     <b:if cond='data:post.link'>
       <a expr:href='data:post.link' itemprop='url'><data:post.title/></a>
     <b:else/>
        <b:if cond='data:post.url'>
<a expr:href='data:post.url' itemprop='url'><data:post.title/></a>
<b:else/>
          <data:post.title/>
        </b:if>
     </b:if>
     </h2>

                       <b:elseif cond='data:blog.pageType == &quot;archive&quot;'/>
<h2 class='post-title entry-title' itemprop='name'>
     <b:if cond='data:post.link'>
       <a expr:href='data:post.link' itemprop='url'><data:post.title/></a>
     <b:else/>
        <b:if cond='data:post.url'>
<a expr:href='data:post.url' itemprop='url'><data:post.title/></a>
<b:else/>
          <data:post.title/>
        </b:if>
     </b:if>
      </h2>

<b:else/>
<h1 class='post-title entry-title' itemprop='name'>
     <b:if cond='data:post.link'>
       <data:post.title/>
     <b:else/>
        <b:if cond='data:post.url'>
         <data:post.title/>
<b:else/>
          <data:post.title/>
        </b:if>
     </b:if>
      </h1>
</b:if>
                    </b:if>

 

6 Save your template and you are done!

Customize the Titles!

Since we have changed the tag for post titles therefore you will see a change in your title colors and appearance. You need to style the new tags using the following css code.

Paste the code below just above ]]></b:skin>

.post h2 a,.post h2 a:visited, .post h1{
display:block;
text-decoration:none;
color:#242729;
font-family:arial;
font-size:27px;
line-height:36px}

.post h2 a:hover{
color:#828282;
text-decoration:none}

 

  • Replace 242729 with Title color
  • Replace 828282 with Title Color when mouse is hovered on it

Save your template and all done!

Need Help?

We have implemented the same method on MBT and we have seen amazing results so far. I hope to see your blogs rank well on SERPs and it benefit you as much as possible. Please let me know if you need any help in understanding any part of this tutorial. Wish you all a happy blogging experience, full of fun and free of bugs.

Peace and blessings buddies! =)

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

36 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. Thanks for the info it was a great help for my sites

    ReplyDelete
    Replies
    1. You are most welcomed. I hope this better optimizes your blog Headlines :)

      Delete
  2. That's A Shocking News That Blogger Shows These Type Of Headings In Our Blogs.
    Thank You Very Much Mohammad For Providing Such A Useful Tutorial To Us :)

    ReplyDelete
    Replies
    1. Sadly that is true. Blogger blogs are often coded by keeping performance in mind and never SEO. Lately blogger has started optimizing templates by providing Search prefences

      Delete
  3. Thanks Mohammad! A nice and informative tutorial and I have successfully implemented it on my blog. My Blog URL : http://technologyhunterzz.blogspot.com/

    ReplyDelete
    Replies
    1. I am so glad you applied them all correctly Usama. Well done! :)

      Delete
  4. Hi Mohammad ,my template has 2 same codes which are different with the code you share!!!
    What should I do please?
    My blog is www.ntsotsos.gr

    ReplyDelete
  5. Sir My Blog url: www.sarkariresultblog.com
    My blog recieved 4-5 thousands view every day, but after some days my blog recieved only 4-6 hundreds views Help me?

    ReplyDelete
  6. Don't these changes break the mbt-pager unless you modify its script as well ?

    ReplyDelete
  7. Hello Mohammad!
    I've taken an audit of my blog. I found that on my blog, h1 is assigned to post titles on item pages but on the index pages, there is no h1. h2 is assigned to post titles on index pages. Sidebar headings are h2 on both, index and item pages. It means I've only one problem that homepage don't contain any h1. So, please reply me with the solution.

    ReplyDelete
  8. my template has three codes of h3 that i need to replace with the code you provided but which one !

    ReplyDelete
  9. Hey bro, I am happy to see you once again. Thanks for such a nice information and scripts.This tutorial is really helpful for me. Thanks Mustafa Bro..
    Regards: ComTechHub

    ReplyDelete
  10. U need to chnage that image_url to image. Otherwise its gonna throw up another error

    ReplyDelete
  11. Dear Mustafa, i am new to blogger. I have no idea about these things. Can you please suggest me a blogger template which has all these feature. I need it.. Thanks in advance.

    ReplyDelete
  12. Hello Mohammad,
    One thing should be edited in your post.
    " the sidebar headlines tags can not be edited. H2 is fixed for sidebar Headlines "
    It can be edited. I am already using it on http://www.bloggertipsseotricks.com , since after H1 tag, we should use H2 tags for subheadings in the content.

    ReplyDelete
  13. Hey Mohammad!

    Thanks for Awesome tutorial.
    I got a problem, when i upload my logo, home page showing no h1 tag.
    but posts and pages showing h1 tag.
    how to show h1 tag on home page with logo?

    ReplyDelete
  14. step by step guide. easy to understand and to implement for my blog

    ReplyDelete
  15. assalamualaikum bro
    i'm a regular reader of this blog.Why don't you change those h2 and h3 tag in this blog?

    ReplyDelete
  16. Hey Mohammad
    Very good blog and got good information how to use h1 and h2 tags.

    ReplyDelete
  17. Hi, I did everything right I think but my post titles still have h3 tags...
    Also when I go to a post page, the Blog's title disappears. What am I doing wrong?

    I'm at: http://nicolesoefenblog.blogspot.nl/

    ReplyDelete
  18. I can't find div class='post hentry' please help :(

    ReplyDelete
  19. Thank You Brother.
    Very information blog i bookmarked this blog and your making Millions from adsense thank for sahring SEO information for new bloggers.

    Keep Blogging

    ReplyDelete
  20. Hi Ahmedzai,

    I must say I am not hot at html and all this coding thing but yet I put up like couple of hours to apply it on my weblog as you suggested.

    The problem is on post or article page, where title of the post is shown in H1 but along with that title of the blog is also in H1, which means I am having two H1 tags on my post/article/item page.

    Can you help me there, to fix it ? please ? kindly do respond!

    ReplyDelete
  21. By changing these codes , what will be the difference between old code and this changed one . Pls tell me as i cant understand all these codings

    ReplyDelete
  22. After completing this tutorial yesterday I am having some trouble with the appearance of my post titles; the font isn't right, it shoud be all in caps in a different font than ariel and the line spacing between the date and title is off. I did try playing around with the sizes and fonts but it's still not matching my template. I found this in the coding, how can I translate this into css?




    My blog is http://www.fashionmamaaquarius.com. Thanks!

    ReplyDelete
  23. Sir Thank you much for such a great articles. I have learned much thing regarding blogging from MBT.

    ReplyDelete
  24. Thank you so much for this tutorial , your blog has been always so helpful for me ! one of the best blogs about Blogging and SEO ! Thank you again :)

    ReplyDelete
  25. HI, I now get TWO h1 on my post pages?
    The blog title AND the post title? please help!

    ReplyDelete
  26. Hi I did this and it works okay for homepage of the blog, but now on the post pages I have TWO H1 tags (the blog title AND the post title) can you please help?

    Here's my blog: http://www.blog.birdsparty.com/

    Thanks in advance! :)

    ReplyDelete
  27. Hi,
    I am unable to locate "div class='post hentry'" in my template.Please help.

    ReplyDelete
  28. Hi,
    My title vanished away from the home page. But is appearing in my index page.Please help. I could find the above code.

    ReplyDelete
  29. Thanks. It's works on new blogger template. But i lost my h3 tag. I thought with h1 and h2 were enough.

    ReplyDelete
  30. Thanks. Will try to rearrange tags

    ReplyDelete
  31. Hi Mohammad bro :) I followed all your steps and implemented on my blog The Blogging Arena. Please tell that is it working or not?

    ReplyDelete