Optimising Blogger Header H1/H2/H3 Tags For Better SEO/SERP's

Organise your blog pages H-Tags

Yet another back to back tutorial for optimising blogger standard themes and template Header Tags (H1/H2/H3) for better search engine results and SEO. If you did not catch on the re-structuring your blogger H1 and H2 tags for blog title and post title, you can visit this tutorial for reference.

Here we are going to focus on the later H-tags for better on-page optimisations for your blog pages and posts. With re-structuring your blog header tags, it will make your blog more search engine friendly. Hence providing better on-line presence for your blog or site.

Standard blogger template and themes has H1 tags for blog titles, H2 header tags for blog post titles. For blog widgets - H3 tags and H4 tags for bookmarks links and comments and the lists goes on. To make it more clearly to search engines, we are going to change the relevance of the widgets to your blog post or pages.

The blog widgets installed is basically supporting features to your blog, so we want it to be read as secondary to your blog post/article contents by search engine crawlers. Thus, helping out your blog pages and posts contents to be more relevant to search engines.

Changing your Blogger Widgets H-Tags

This tutorial will be a manual installation and the amount of time spent will be based on how many widgets you have installed on your site. It is best to finish out your blog customisations before starting this tutorial.

> Go to blogger.com > "Your Blog" > Dashboard > Template > Backup/Restore  > (Pop Up Window) Save your existing template to your PC. - Please remember doing this while editing your template.

> Go to Edit HTML > Proceed >  Tick on Expand Widget Templates.

> Press Ctrl-F and copy this code:  </b:widget id  - paste to your search bar > press Enter.

> You will find various line of codes which would look similar to this:-

<b:include name='quickedit'/>
</b:includable>
</b:widget>
<b:widget id='PopularPosts1' locked='false' title='Popular Articles' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == &quot;false&quot;'>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>

Note: This is an excerpt code from the Popular Post widget. 

> Change the H2 code to H3 in the start and at the ending of the above line of codes. A sample would be looking like this:-

<b:include name='quickedit'/>
</b:includable>
</b:widget>
<b:widget id='PopularPosts1' locked='false' title='Popular Articles' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h3><data:title/></h3></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == &quot;false&quot;'>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>

Note: This is an excerpt code from the Popular Post widget. 

> Now repeat the steps above for all your installed widgets. The length of codes will varies and just keep an eye for the start of the H2 code and the ending /H2 codes only. Change all of the header codes to H3.

Our advise, for every change, it is best to click the Save button and continue your search for your existing widget H2 header tags.

Your CSS Stylesheets

When changing your H2 widgets H-tags, certain stylesheets of your standard blogger templates have some differences. Additional stylesheets code is required to synchronise the changes with the above tags; while still in Edit HTML window:-

> Press Ctrl-F and copy this code: ]]></b:skin> - and paste to your search bar > Press Enter.

> Copy code below and paste above the given code:-

.post h3, #sidebar h3, #footer H3 .post-footer h3{font-size:1.2em}

> Click save and Preview. You can change the font size which suits your blogger template ie. 1.3em indicates 130% larger from your existing font size etc.
Now your blog pages and posts will have a re-structured layout for your on-page optimisations. A sample view will look something like the screen shot below.

Header tags basic layout for your Blog Home page (Static Page)

Header tags basic layout for your Blog Post Pages.

The images above is fairly a good indicator on how your basic header tags layout would be. You can see how the header tags switch through out your site, between your blog pages and your blog posts (marked red and blue). Use the browser built SEO Site Tools, for instance, to quickly check your header tags setting and layout.

With this basic knowledge, you can probably move forward to advance methods on taging other elements such as your anchored links and navigations. Switch the label H-tags which you feel needs the importance to search engine crawlers and you will be amazed on the outcome for your web pages in search engine results..