Show The missing Tag on Blogger Homepage

Show The 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#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 Post Titles, headings within post body and also Sidebar Titles.

How can your posts rank well when Blogger is assigning the same Headline tag to your sidebar titles which it assigns to your Posts?
Condition#2: When Image is used as logo in Header

Heading Tag	Assigned to
h1	Missing: Assigned to none, removed!
h2	Assigned to Post Titles, headings within post body  and also Sidebar Titles.

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

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.

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?

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 pageswhich 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.

I will publish Part 2 on coming Friday.

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.

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

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>
                        </div>

6 Save your template and you are all done!

That simple!