Typominima, free typography based minimal WordPress theme

Blog SEO Tips – SEO Friendly Titles (H1, H2, H3)

Another quiet Sunday in the blogosphere, as usual. This morning I thought about writing another link share post or a WordPress theme recommendation, but later I’ve decided to break the pattern (since it’s all so quiet) and make Sundays the host of a blog SEO tips series. In this first post I’m going to talk about the importance of using SEO friendly titles (H1, H2, H3) and the right way to do so.

Usual Coding Patterns in WordPress Themes

If you’re even a bit familiar with the WordPress themes, by now you’ve probably took a look at your theme’s files. Blog pages are rendered through an association of a few PHP files with standard names (index.php, archive.php, single.php) with different templates of the theme, based on the content type.

The index.php file usually stands for your home page, also being capable of replacing any other template that hasn’t been already defined. So, if you don’t have a template for search results (search.php), the index file will take over and render your search results page.

Each of these templates includes smaller pieces of code to build up the final result. The most used are header.php, sidebar.php and footer.php.

For now, we’ll limit our attention to the following files in your theme’s folder:

  • header.php
  • index.php
  • single.php
  • page.php (not every theme has it)
  • archive.php, search.php (not every theme has them)

Optimizing the Header File

Having your primary keyword present at the top of you page it’s very important.
Considering the fact that most themes come with text based logos instead of graphics, we’ll be looking for the <h1> tag in the header.php file.

If you look at the WordPress default theme will find this piece of code, close to the end of the file:

<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<div class="description"><?php bloginfo('description'); ?></div>

The first line displays your blog’s title into a link to the homepage, inside the H1 tag.
The second line displays your blog’s description.

H1 is the most important heading style and the coding recommendations state that only one should be used per page. When talking about a homepage, archive page or search results, it’s best that we optimize these pages according to our main keywords, therefore this H1 tag is required.

But what about on the single post pages? When we display single post, we would want to have their pages optimized according to their content, not the overall keywords of the blog. This is where the H1 should be removed from the header.php file, and placed instead of the H2 surrounding the posts title, to give make it more visible and representative in the eyes of a search engine spider.

How do we do that? First we need to add some conditional tags in the header.
Look for the piece of code that I’ve listed above and replace it with this one:

<?php if(is_single() OR is_page()) {
// On single post pages and static pages we use this code
?>
<h2><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<div class="description"><?php bloginfo('description'); ?></div>
<?php }
else {
// On home page and archive style pages we use this code
?>
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<div class="description"><?php bloginfo('description'); ?></div>
<?php } ?>

By using some WordPress conditional tags we managed to limit the use of the H1 HTML tag to all archive style pages (including the homepage).

Next, we move to single posts and static pages to continue our optimization.

Optimizing the Single Posts and Static Pages

After we’ve made the changes in the header file, we need to apply some modifications to the single.php and page.php files to make their titles more search engine friendly.

Open the default theme’s single.php file and look for this piece of code:

<h2><a href="<?php echo get_permalink() ?>" rel="bookmark"
title="Permanent Link: <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

Remember that I’ve told you we are allowed to used <h1> only once per file, for our most important title / phrase. Since we’ve eliminated the use of <h1> on single posts and static pages in the header.php, now, all we have to do is to change <h2> and </h2> with <h1> and </h1>, just like this:

<h1><a href="<?php echo get_permalink() ?>" rel="bookmark"
title="Permanent Link: <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>

There you go, now your most important phrase on a single post page is the post’s title, as it should be!
Most themes don’t come with this type of heading importance separation and by following this guide you’ll be able to fix this issue on your own with no trouble at all.

While the default theme does not have a page.php template defined, you could clone the single.php file and rename it. If you don’t clone it, the index.php file will be used to display static pages, which means you’ll list page titles using the <h2> instead of <h1>.

Consider Using Subheadings in Your Posts

For further SEO improvement, you should consider using relevant subheadings inside your post to evidentiate different parts of your post’s structure.
Write down your article and when you’re finished, switch to HTML view and add <h3> & </h3> around you subheadings, like this:

<h3>This Is a Subheading</h3>

Final Thoughts

Usually, titles are the most important links on your blog. Through them, users and spiders alike navigate through your content. Use them smart and effectively.
If you have any questions or need further help with this, feel free to drop a comment.
Also, join me again next Sunday for a new post in the Blog Seo Tips series.

More Blogsessive Content

ThemeForest