How to Show missing H1 Tag on Blogger Homepage Title

Hey Whats Up Guys! We know that 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. 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.So Today I gonna going to tell you briefly about missing H1 Tag on Blogger Homepage.

Let Start it Below:

How to Show missing H1 Tag on Blogger Homepage Title

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 no 1: When no Image is used as logo but instead title and Description is shown.

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 no 2: When Image is used as logo in Header

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.

Now Customize Hierarchy For titles:

Following is the SEO friendly and recommend way to display headlines in a Blog.

Condition No 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 toPost 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 No 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 2: How To Correctly assign H1 and H2 Tag To Post Titles in Blogger?

Optimize Header Blog Title Tag:

1 Go To Blogger >> Template.

2 Click "Edit HTML"

3 Search this code

<div id='header'>

4.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 following code:

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

4.Next search for this code 

5.Just below it you will find the following HTML code:

6.Replace it with this optimized Code

<b:if cond='data:blog.pageType == "index"'>
                          <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 + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' itemprop='logo' style='display: block'/><span>My Blogging School</span></a>
                            </h1>

<b:elseif cond='data:blog.pageType == "archive"'/>

<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 + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' itemprop='logo' style='display: block'/><span>My Blogging School</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 + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/><span>My Blogging School</span></a></h2> </b:if>

Note: In the code above replace My Blogging School with your Blog title

5. Finally search for this code 

Below it you will find the following code:

Replace it with this optimized code:

<b:elseif cond='data:blog.pageType == "archive"'/>

<b:if cond='data:blog.pageType == "index"'>
<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!

Now Customize 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 No 1 Make these changes:

1.Find this CSS class

#header h1 {

2.Replace it with this

#header h1, #header h2 {

3.Next find this

#header h1 a {

4.Replace it with this

#header h1 a,#header h2 a {

For Condition No 2 Make these changes:

1.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;}

And we have Done it!!!!!

I hope that after reading this article you easily know How to Show missing H1 Tag on Blogger Homepage Title.

Let me know you if you have any problem regarding to this article.If you have any problem you can ask me in comment box.Thanks for reading this article.Stay tuned for more lectures.