WordPress SEO Title Tag for Theme Designers

Everybody knows that H1 tags are supposed to “highlight” the most important heading on the page.

Whether this really helps with a site’s SEO is still up for debate, but in my opinion, having a good document structure can only help.

In most (if not all) WordPress themes, it’s the Blog’s Title/Name that gets the honour of wearing this badge. But your Blog’s Name shouldn’t necessarily have this honour on page’s that have a “main topic”. i.e.: Single Post pages.

So, what I recommend that all WordPress theme designers do is use H1 tags for your post’s Title on the post’s page, and use H1 around your Blog’s Name for all the other pages.

Here’s the code I use to do this:

For the Blog’s Name

a.k.a. bloginfo(‘name’) – This is usually in the header.php file, just replace the “H1″ before and after the Name with the following:

<?php echo (!is_single()) ? "h1" : "h2"; ?>

So, your Blog Info tags might look like the following now:

<<?php echo (!is_single()) ? "h1" : "h2"; ?> class="blog_title">
    <a title="Home: <?php bloginfo('name'); ?> " href="<?php echo get_settings('home'); ?>/"><?php bloginfo('name'); ?></a>
</<?php echo (!is_single()) ? "h1" : "h2"; ?>>

(Of course, this doesn’t take into account that you’ve replaced the php calls to your Blog’s Name and URL with hardcoded versions once you’ve implemented a theme on your site).

Replace the H2 tag for your Post Title

And now, of course, you need to do the opposite for your post titles.

You need to replace the H2 tags that normally surround the Post Title (a.k.a. the_title()) with the following:

<?php echo (is_single()) ? "h1" : "h2"; ?>

This is usually in the index.php file, unless you have a template page specifically for single posts, in which case it will be in “single.php” (and then, you could probably just put “H1″, as this template will only be used for the Single Post pages).

So, you might have something that looks like the following now:

<<?php echo (is_single()) ? "h1" : "h2"; ?> class="title">
    <a id="post-<?php the_ID(); ?>" href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">
        <?php the_title(); ?>
    </a>
</<?php echo (is_single()) ? "h1" : "h2"; ?>>

CSS Styling your titles

If you’re using a theme designed by somebody else, it might not be as simple as just replacing the H1/H2 tags with the above code, because you might find that the H1 tag has it’s own specific style, as opposed to the Blog Title/Name having a style class.

Now, I’m no designer, so this might not be the best advice, but here’s what I’ve done to work around it.

In the H1 tag (well, the Blog Name tag as it stands after the changes above) you can see I added a class=”blog_title”. And in my style.css file, I changed all the references to “H1” to “.blog_title“.

I hope this makes sense. Let me know if you agree or disagree with me.