Show The missing H1 Tag on Blogger Homepage Title


Missing h1 Tag

Almost 90% of Blogger blogs that run a SEO test using some online tool gets an error that the homepage does not contain h1 heading Tag which is mandatory for all pages. All pages must contain the primary title inside this tag and all subsequent titles must follow by h2, h3 and so on. There must be a single h1 tag per page for better SEO results. Blogger removes the h1 tag from the Header title when you replace the Title and description with a Logo. In this tutorial we will teach you how to enclose your Blogspot Logo Image and Text inside h1 tag and we would also assign the Schema micro data tags. Your blog will now show H1 only on your homepage and Search/Label pages which are called index pages but it won't show H1 on item pages which include your blog Posts. Inside your Posts only Post title can be granted a H1 tag to give it precedence and priority over all other Headline titles.

Note: This is the first tutorial across the web which is highlighting this issue and proposing a solution to the mystery of a missing H1 Headline Tag in blogger.

Default Blogger hierarchy for Headline Titles

By default blogger assigns Heading tags in this order which is wrong:

Note: Index Page is your homepage or Label/Search.

Condition#1: When no Image is used as logo but instead title and Description is shown.

Blog Title written in Textual form

Heading Tag Assigned to
h1 Assigned to Blog Title.
h2 Assigned to Sidebar Titles.
h3 Assigned to Post Titles, Subheadings within post body

How can your posts rank well when Blogger is assigning H2  to your sidebar titles but even less important tag i.e. H3 to your Posts?

Condition#2: When Image is used as logo in Header

Blog Title Replaced with a Logo Image

Heading Tag Assigned to
h1 Missing: Assigned to none, removed!
h2 Assigned to Sidebar Titles.
h3 Assigned to Post Titles, Subheadings within post body

In this case Blogger will remove H1 tag from your blog title and leaving your entire blog deprived of H1 tag. This is the reason when you get errors while auditing your sites.

Custom Optimized Hierarchy For Titles

Following is the SEO friendly and recommend way to display headlines in a Blog. Same method is followed on our Wordpress blogs and MBT also.

Condition#1: When no Image is used as logo but instead title and Description is shown.

Heading Tag Assigned to
h1 Assigned To Blog Title only on Index Pages and archives and assigned to Post Title on the Item Page. In Item Pages, The Blog Title will have H2 Tag and instead that H1 tag will be assigned to Post Title. 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 archive. Assigned to Sidebar Titles on all pages. 
h3 Assigned to Subheadings only

Condition#2: When Image is used as logo in Header

Heading Tag Assigned to
h1 Assigned To Blog Title Logo only on Index Pages and archive page and assigned to Post Title on the Item Page. One H1 Tag will be seen on each page.
h2 Assigned to Post Titles on Index Pages and archive. Assigned to Sidebar Titles on all pages.
h3 Assigned to Subheadings only

This simple fix will make your blogs much more optimized and will also help search robots to better understand your Headline significance in terms of organized hierarchy. Lets start making the changes.

Optimizing Heading Tags in Blogger

We have divided this tutorial in two parts. In Part one will fix the Blog Title Tag issue and in Part Two we will optimize the Post Titles.

Part 1: Optimize Header Blog Title Tag

1 Go To Blogger > Template > Backup your template

2 Click "Edit HTML"

3 Search this code

<div id='header'>

Replace it with this code

<div id='header' itemscope='itemscope' itemtype='http://schema.org/Organization'>

If you could not find <div id='header'> then instead find this code <header> and replace it with this

<header itemscope='itemscope' itemtype='http://schema.org/Organization'>

4 Next search for this code <!--Show the image only-->

Just below it you will find the following HTML code

<a expr:href='data:blog.homepageUrl' style='display: block'>
          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
        </a>

Replace it with this optimized Code

<!--Header Tags Optimized Code by MBT-->

<b:if cond='data:blog.pageType == &quot;index&quot;'>
                          <h1 itemprop='name'><a expr:href='data:blog.homepageUrl' itemprop='url' style='display: block'>
                            <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' itemprop='logo' style='display: block'/><span>My Blogger Tricks</span></a>
                            </h1>

<b:elseif cond='data:blog.pageType == &quot;archive&quot;'/>

<h1 itemprop='name'><a expr:href='data:blog.homepageUrl' itemprop='url' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' itemprop='logo' style='display: block'/><span>My Blogger Tricks</span></a>
</h1>


<b:else/>
                                   <h2 itemprop='name'><a expr:href='data:blog.homepageUrl' style='display: block'>
                            <img itemprop='logo' expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/><span>My Blogger Tricks</span></a></h2>            </b:if>

  • In the code above replace My Blogger Tricks with your Blog title

5 Finally search for this code <!--No header image -->

Below it you will find the following code:

<div class='titlewrapper'>
                          <h1 class='title'>
                            <b:include name='title'/>
                          </h1>
                        </div>

Replace it with this optimized code:

<!--Header Tags Optimized Code by MBT-->

<div class='titlewrapper'>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
                          <h1 class='title'>
                            <b:include name='title'/>
                          </h1>

<b:elseif cond='data:blog.pageType == &quot;archive&quot;'/>

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<h1 class='title'>
<b:include name='title'/>
</h1>


<b:else/>
  <h2 class='title'> <b:include name='title'/></h2>
</b:if> </b:if>
                        </div>

6 Save your template and you are all done!

Customize the Header Tags

Since we have added H1 and H2 tags to the Blog Title, therefore you may now add some styles to them so that your Blog title may not look ugly. Since the CSS classes may differ for custom templates and blogger official templates. Therefore I am sharing below the technique for Blogger Template designer templates only. Though you can ask me for correct classes of your custom templates by leaving a comment below.

Note: Your template may not contain #header but it may contain .header, if it does then replace all css IDs that begin with (#) below with (.). i.e. Replace all #header with .header

For Condition#1 Make these changes

Find this CSS class

#header h1 {

Replace it with this

#header h1, #header h2 {

Next find this

#header h1 a {

Replace it with this

#header h1 a,#header h2 a {

For Condition#2 Make these changes

Add the following CSS class just above ]]></b:skin>

#header h1 a,#header h2 a, #header h1 a:visited, #header h2 a:visited{color:#fff; font-size:10px;text-decoration:none;margin:0;padding:0}
.header h1 span, #header h2 span{text-indent:-999em; display:block;}

That simple!

Need Help?

I know the above tutorial may sound a little too technical for some but do not hesitate trying it out and let me know for any help needed. I will try to reply within 24 hours. This change will significantly improve your blog rankings and appearance in search results.

Need Quick Help within 24 Hours? ASK NOW



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 »

69 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.

  1. aoa
    sir apkay btaye huay codes replace karnay ke bad mere header me header-image ke sath sath header-title as text bhi show honay lag giya hai, which looks odd, plz help me as i only want to show image in header instead of title as text. thanks.
    here is my url http://apkmania-news.blogspot.com/

    ReplyDelete
    Replies
    1. Please add the following code just above ]]></b:skin> inside your template


      .header h1 a,.header h2 a, .header h1 a:visited, .header h2 a:visited, .header a, .header a:visited{color:transparent;font-size:0px;text-indent:-9999em;line-height: 0;text-decoration:none;margin:0;padding:0}

      Delete
    2. it worked like a charm, thank you so much sir.

      Delete
    3. Ramzan I have made some changes to the code above. Please instead use this code and delete the previous

      .header h1 a,.header h2 a, .header h1 a:visited, .header h2 a:visited{color:#fff; font-size:10px;text-decoration:none;margin:0;padding:0}
      .header h1 span, .header h2 span{text-indent:-999em; display:block;}


      I have updated the code in Step#4. Please add it again with the new code. The change I made was enclosing the Blog Title inside Span tags. So please update the code shared in step#4

      Delete
  2. Hi Mohammad ,

    using font-size=0px to hide text isn't bad for SEO?
    I am asking just for curiosity!

    ReplyDelete
    Replies
    1. You are right Nik that is surely not a recommended practice. I had accidentally added font-size:0. I have removed it now. We will instead use text-indent property to hide the text which goes in accordance with Google Webmaster policies.

      Delete
    2. Mohammad after your reply I change font_size=0px with text-indent code but now I see text .What is wrong
      Url is www.ntsotsos.gr

      Delete
    3. Assalamu Alikum Mohammad!

      My problem is about CSS class. I didn't find any class like it " #header h1 a { " in my blog template. Could you please say something about it?

      Delete
  3. Thanks for sharing your info. I really appreciate your efforts and I will be waiting for your further write ups thanks once again.

    ReplyDelete
  4. A.O.A Mohammad Bro,
    You said right that this is the first tutorial about this topic. Some days ago I was searching for it on Google but I didn't find anything satisfactory. Anyway, I got help from your Forum but still I don't satisfy with my blogger template.
    Please Suggest me 1 or 2 templates which should be responsive, 100% SEO friendly and beautiful. My blog is moderntipstricks.com.

    ReplyDelete
    Replies
    1. I am glad you found the tutorial so useful Wasil. Buddy no template is 100% SEO friendly and attractive unless you make it so. You may choose any template you want and then optimize it by reading the tutorials on mbt

      Delete
    2. OK, I've changed my whole template and now when I try optimize headings by using your optimized codes; some codes work but the others do not. Please open my blog source code and find that what the problem is?

      Delete
  5. thanks for sharing your info guys.. good luck.

    ReplyDelete
  6. Hi

    I use the simple template. There is no div id='header' tag, only div id='header-inner'

    Where do I put the first code?

    Thanks :)

    ReplyDelete
    Replies
    1. Hey Xistis, I found the same which you have and replaced
      div id='header-inner' instead of div id='header it worked good.

      Delete
  7. Hi, i cant find any of the codes you mentioned on my blog. Does this work with all templates?

    My blog is androidtipster.com

    ReplyDelete
  8. bro ..I'm not able to find id='header'> or .. what i am getting is
    1. id='header-wrapper'> and
    2. id='header-inside'>and
    3. id='header-inner'>or
    4.

    sir what should i do to implement this

    ReplyDelete
    Replies
    1. Brother's find insted of div id???

      Go to replace the code said by MBT

      Delete
  9. Guys it working fine with my blog..i am not facing any issue with the codes

    ReplyDelete
  10. Nice tweak bro
    But one question does hiding text cause seo problem

    ReplyDelete
  11. He Bro Could not find div id='header'>
    and header> plz help me i wanna optimize my blog ProTrick.net

    ReplyDelete
  12. bro ..I'm not able to find id='header'>

    ReplyDelete
  13. I have not yet applied the code but i guess it will work, was searching for this particular issue on youtube but i found it here thanks man :). Nice work.

    ReplyDelete
  14. hello mbt,
    I can't find < div id='header'> nor what i am suposed to do? please help.

    kind regards

    ReplyDelete
    Replies
    1. Hi Paulo,

      Find instead and replace it with

      Hope it works !

      Delete
  15. It worked! Although, there is no div id=header in the template but div id=header-inner works fine. Also, i have to add an additional /b:if tag at the bottom of the customize "No Header Image" before it things are in place.

    However, the template in mentioned is custom template not Google owns template so i can't customize the header tags. Can you pls peep at the site and help me with the custom header tag i can use? The site in mentioned is CCN thanks.

    ReplyDelete
    Replies
    1. In your case find this code for part3:

      <div class="header section section" id="header">

      and then add inside it these schema attributes:

      itemscope='itemscope' itemtype='http://schema.org/Organization'

      Delete
  16. Hi, Is there any way someone could do this for me? I am really struggling...

    ReplyDelete
    Replies
    1. Sure! connect with me I'll try. or you can ask owner of this blog to do for you.

      Delete
  17. Hi,

    I would like to implement your tutorial which I was looking for. But, unfortunately I could not find both code [div id='header] and [header] in my template. I am using a custom blogger template. What should I do to implement your tips.

    Regards.

    ReplyDelete
    Replies
    1. I tried visiting your site "http://www.bloggingwatch.com/" but it is not responding so could not help :)

      Delete
  18. Thanks for the article , its so hard to find blogspot help online.
    Im seeing this as a common problem in the comments but has anyone found a solution. I dont have the div id='header or ... only inner and inside and wrapper. Any tips? Thanks in Advance

    ReplyDelete
    Replies
    1. I could easily find this code inside your template: http://mountaintopchef.blogspot.com/


      <div class="section" id="header">


      Note: You can also add it inside the header-inner div section too.

      Delete
    2. my home page post titles are h2
      my post page titles are h1

      Thanks Mohammad for the reply but i've been searching for ages and still dont see div class="section" id="header"

      I was going to use header-inner instead.

      However there are 3 of them: ALL showing that its , h1

      Yet my HOME PAGE in seo checks still shows the titles as h2

      ????

      Thanks so so so very much, your help is much appreciated.


      Delete
  19. I do what you said in this post. But after applying your tricks my blog header is not showing on the post pages but it is visble in the home page.

    Kindly provide suitable solution.

    ReplyDelete
    Replies
    1. I visited your site "http://netwrkusa.blogspot.com/" but the header looks just fine. Can you please attach a screenshot here

      Delete
  20. I have tried this on my second blog it worked fine but when I tried this on my main blog which runs sora mag template it keeps both logo and blog title which makes my blog look clumsy. Can you please check on that?

    ReplyDelete
  21. Hi Mohammad, i follow that step. I change like your step and my blog title gone. Whats wrong? i'm not use title image. Please tell me, whats wrong

    ReplyDelete
    Replies
    1. Kindly mention your blog url buddy so that I could inspect and help.

      Delete
    2. Sorry, I forgot to write it. This is a my test template. After using step 5, the title of the blog post does not appear in the page
      http://cyberfirefly.blogspot.co.id/

      Delete
    3. fadly I visited your blog. The title is working on homepage but not showing on item pages i.e. Posts. The title div is empty which means you might have forgotten copying the full code from part#5. The last part of the code is missing which is:

      <h2 class='title'> <b:include name='title'/></h2>

      Please repeat step#5 and let me know

      Delete
    4. I follow all of your step but not working. I tried to change <b:elseif cond='data:blog.pageType == &quot;archive&quot;'/> with <b:else/>
      <b:if cond='data:blog.pageType == &quot;archive&quot;'/> and it appeared. my step is right?

      Delete
  22. What if i pasted the code below tag?

    ReplyDelete
    Replies
    1. Dear Mustafa,
      After applying your tricks my header image and drop down menu bar have a increased space between please help.

      Delete
  23. Hello.
    I added all the code as shown, however my header image has moved and now text has appeared behind it and moved my pages. Any help?

    ReplyDelete
  24. Hi..

    Directly below my blog still has div id='header-inner'
    What should I do with it?
    Thanks

    ReplyDelete
  25. Still showing "The h1 tag is missing."
    The img tag does not have an ALT attribute defined. I have my own header image.

    ReplyDelete
  26. Did everything, still get the H1 error in Bing's SEO analyzer :-)

    ReplyDelete
  27. I have followed the steps. But when i check to my H1 in http://www.whatsmyserp.com/, it is still blank, H1 is still blank....how could it happen?

    ReplyDelete
  28. Very difficult to do in custom blogger template. I could not able to do that :(

    ReplyDelete
  29. I could not find div id='header'

    ReplyDelete
    Replies
    1. Salam Mustafa,
      I think having so much h2 tags of post titles as well as widget titles can be result in decrease of SEO score please suggest something. And i am talking about homepage.

      Delete
  30. Hi bro,

    I have tried entering your code in my blog.I tested it by right clicking the blog post name in the index page and inspect.But the blog title is enclosed within H3 only. Please help. My blog 'https://victimrecession.blogspot.in/2009/03/voice-of-victim-current-business-slow.html'

    ReplyDelete
  31. my case is #2
    used picture logo as header. However, I can't find code
    or
    what should I do?

    ReplyDelete
  32. H1 still showing in bing webmaster even I replace the div id='header-inner' to the code in step 3, my site is http://www.nuggetro.info/

    ReplyDelete
  33. In my case there are 2 code for div id='header-inner', do i need to replace this two code with the code in step 3

    ReplyDelete
  34. I can't find any of the code that you are referencing in my blog. Will you please help? www.boreidesign.com

    ReplyDelete
  35. Never mind, I got it!! Thank you so, so, much! This is the first tutorial I've found on this issue that actually works.

    I do have one additional question though. It appears that my H2 settings are still pointing to my side bar widget titles?If I want to assign my post titles to H2 instead, how would I do that and should I for seo?

    ReplyDelete
  36. hi mohammad,
    i am facing difficulty in optimising h1 tag...
    i searched by html template of blogger whose url is www.instamag.in and found "div id='header" 2 times...totally confused...plz help me out how to fix it. waiting for ur reply.

    ReplyDelete
  37. I didn’t find either of this code on my html template code…
    1. div id='header'
    2. header
    Plz help me out. My url is www.instamag.in

    ReplyDelete
  38. Hello Mohammad Bro,

    I tried following your method to 100% exact, it works BUT it is also showing in all the pages together with POST TITLE. If you can please take 2 mins to check and help me I will appreciate it alot.

    www.technospire.xyz

    ReplyDelete
  39. Hi I Am a Newbie and am getting errors could you please take a look if done correctly Thankyou so much my blog is https://forrenttoownhomes.blogspot.co.uk would be much appreciated if you can help

    ReplyDelete
  40. Thanks. It's works on new blogger template.

    ReplyDelete