Blogger how to - optimising h1 for a better SEO

Found on http://www.jackbook.com/blog-tips/optimizing-the-use-of-h1-for-a-better-seo.

Used Mimima default blogger template created by Douglass Bowman for the example here.

1. Go to your template editor. Then Tick the Expand Widget Template.

2. Find this code below,

<h1 class='title' style='background: transparent; border-width: 0px'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</h1>

Change it to be like this below,

<b:if cond='data:blog.pageType != "item"'><h1 class='title' style='background: transparent; border-width: 0px'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</h1>
<b:else/>
<h2 class='title' style='background: transparent; border-width: 0px'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</h2>
</b:if>

Find this code below,

<h1 class='title'><b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</h1>

Change it to be like this below,

<b:if cond='data:blog.pageType != "item"'><h1 class='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</h1>
<b:else/>
<h2 class='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</h2>
</b:if>

3. Done with the blog title.

Now we are going to set the H1 to the post title.

4. Go find this code below,

<b:if cond='data:blog.pageType != "item"'><b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
</b:if>

Replace that code with this code below,

<b:if cond='data:post.title'><b:if cond='data:blog.pageType != "item"'>
<h1 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h1>
<b:else/>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
</b:if>

5. Done with the post title.

Now we need to adjust the style so your layout will keep the same as before.

6. Find this code below,

tips: if you use firefox, you can just press CTRL+F and then type this on the searchbox on the bottom left. “#header h1″

#header h1 {margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

This is the style of your blogtitle. It says #header h1 isn’t?

Replace the codes with below,

#header .title {margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

We just changed the style of our blog header. instead we set the style of h1 inside the id header, we set it to style “title” inside of id header.
If you are not familiar with StyleSheet (CSS) or HTML code, then just follow all the steps, and you will make it.

Now we need to set the post title style.
7. Find this code below,
tips: if you use firefox, you can just press CTRL+F and then type this on the searchbox on the bottom left. “.post h3″

.post h3 {margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal;
}

.post h3 strong, .post h3 a:hover {
color:$textcolor;
}

Change all of those codes with below,

.post .post-title {margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

.post .post-title a, .post .post-title a:visited, .post .post-title strong {
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal;
}

.post .post-title strong, .post .post-title a:hover {
color:$textcolor;
}

8. Save your template and done.

Now if you see your blog, it has the same look, but it has a better HTML structure now.