Show The missing H1 Tag on Blogger Homepage Title ~ All Blogger Tricks

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

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 

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 + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>

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 Blogger Tricks</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 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 + "_headerimg"' 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 

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:

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

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

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.

All Blogger Tricks