Optimizing the use of H1 for a better SEO.
As some of you probably know, Google read H1 as the main header of a page. that means, H1 is the most important tag on your page. and there should be only one H1 on each page.
Unfortunately on most blogger templates and wordpress themes, they have this tag not optimal on their HTML structure. Both Blogger Templates and or WordPress Themes, many of them put H1 as the blog title on the index or homepage. That is correct, unfortunately they put it also inside all the content or post page. That is not rite since it should the post title be the page header.
On this post, We will learn how to optimize the use of H1 tag so we can have a better point on SEO (Search Engine Optimization).
And here is the Idea.
On the index / home page, the H1 tag is on the blog title. On the non index page, the H1 is on the page title it self. let say it is on a post, then the post title should be the one has H1 tag.
So let’s go to the implementation steps.
We will use Blogger Template and WordPress Themes as an example. But this actually works for every kind of cms. Even hand coded can use this trick also.
Optimizing H1 tag on Blogger Template.
First we are going to set the H1 on the blog title. I use the 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.
If you want some example to download, this is the default blogger template I have modified with this trick.
Optimizing H1 tag on WordPress Theme.
1. We will use the default wordpress themes here. so just go to your theme editor. and click the Header file. (Header.php)
2. Find this code.
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
3. Replace with this code below
<?php if(is_home()) { ?><h1 class='blog-title'><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<?php } else { ?>
<h2 class='blog-title'><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h2>
<?php } ?>
4. Save your template and finish with the Header.php
5. Now, open the Index.php
find this code
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
6. Replace with this code,
<h2 class='post-title'><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
7. Save your index.php. We’re done with it.
8. Next, open file single.php
find this code below,
<h2><a href="<?php echo get_permalink() ?>" rel="bookmark" title="Permanent Link: <?php the_title(); ?>"><?php the_title(); ?></a></h2>
replace with this code below,
<h2 class='post-title'><a href="<?php echo get_permalink() ?>" rel="bookmark" title="Permanent Link: <?php the_title(); ?>"><?php the_title(); ?></a></h2>
Save your single.php. We’re done with it.
9. Now open the page.php
find this code below,
<h2><?php the_title(); ?></h2>
10. Replace with this code below,
<h2 class='post-title'><?php the_title(); ?></h2>
Save your page.php. We’re done with it
11. Open your archive.php
find this code
<h3 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h3>
12. Replace with this code below,
<h2 class='post-title' id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
Save archive.php
13. Open Search.php
Find this code below,
<h3 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h3>
Replace with this code below,
<h2 class='post-title' id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
save search.php
14. Open Attachment.php
find this code below,
<h2><a href="<?php echo get_permalink($post->post_parent); ?>" rev="attachment"><?php echo get_the_title($post->post_parent); ?></a> » <a href="<?php echo get_permalink() ?>" rel="bookmark" title="Permanent Link: <?php the_title(); ?>"><?php the_title(); ?></a></h2>
Replace with code below,
<h2 class='post-title'><a href="<?php echo get_permalink($post->post_parent); ?>" rev="attachment"><?php echo get_the_title($post->post_parent); ?></a> » <a href="<?php echo get_permalink() ?>" rel="bookmark" title="Permanent Link: <?php the_title(); ?>"><?php the_title(); ?></a></h2>
Save Attachment.php.
15. Now open the style.css
find this code below,
h1 {font-size: 4em;
text-align: center;
}
Replace with this code below,
.blog-title {font-size: 4em;
text-align: center;
}
16. Find this code below,
h1, h1 a, h1 a:hover, h1 a:visited, #headerimg .description {text-decoration: none;
color: white;
}h2, h2 a, h2 a:visited, h3, h3 a, h3 a:visited {
color: #333;
}
h2, h2 a, h2 a:hover, h2 a:visited, h3, h3 a, h3 a:hover, h3 a:visited, #sidebar h2, #wp-calendar caption, cite {
text-decoration: none;
}
Replace with this code below,
.blog-title, .blog-title a, .blog-title a:hover, .blog-title a:visited, #headerimg .description {text-decoration: none;
color: white;
}.post-title, .post-title a, .post-title a:visited, h3, h3 a, h3 a:visited {
color: #333;
}
.post-title, .post-title a, .post-title a:hover, .post-title a:visited, h3, h3 a, h3 a:hover, h3 a:visited, #sidebar h2, #wp-calendar caption, cite {
text-decoration: none;
}
Save your style.css
And that’s it.
Now you can run your theme, with a better structure and good SEO.
Related Posts
« Will you trust.. TrustRank?
Thanks for favoriting us at Technorati. »