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.
| 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
| 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 + "_headerimg"' 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 == "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 <!--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 == "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.