I recently coded my own theme for The Beatles Bible, which I documented elsewhere. However, earlier today I was doing a bit of reading on search engine optimisation, and learnt that many WordPress themes have the same h1 tag across the entire site - commonly linked to the site's name in the header.

I hadn't realised, but my theme was the same - the result of following a how-to guide I'd found on the web. Here's some information on how to make it work more efficiently and get that web traffic coming in better.

About H tags and SEO

It's good SEO practice to have a single unique h1 tag on every page, which should be relevant to the content beneath it. Google and other search engines look for them, and duplication of the tag across a site can result in a low ranking. If a theme is coded so the blog title in the header is the h1, you're missing a trick, as it doesn't give much of a clue of what the page is about.

As I said before, this worked for my theme, but yours may be different. However, many WP themes are written in a similar way, and the guide below should apply to a good proportion of people.

Don't be scared - it's actually easier to do than it is to explain, but I hope this guide is sufficient to get you started.

Disclaimer

Before I proceed, please note that I don't provide support for other themes, and please tread carefully if you don't know what you're doing. If what you find here doesn't make sense, chances are you're slightly out of your depth. You'll need to edit your theme template files (FTP is easiest), and if you're nervous about doing so please back up everything first.

It's fairly simple to make these changes. However, as with all web developments, I recommend you practice on a test area if you're unsure. I have a separate live install of WordPress on my server, hidden from search engines, which I use to test theme changes, new plugins and latest versions of WP, to see if anything breaks. Only if it works OK after testing will I roll it out to the public-facing version.

What did I want to do?

The aim was to have h1 tags enclosing the title of every page, and make the site name in the header (The Beatles Bible, Sense Of Doubt etc) an h2. However, there was a slight complication, in that archives (month/year or category/tag pages) would have many h1 tags on them - bad practice which should be avoided. However, it's quite simple to avoid if you know how.

Firstly, I fixed the site title so it was no longer in h1 tags. I looked for something akin to:

<h1><a href="<?php echo get_settings('home'); ?>/"><?php bloginfo('name'); ?></a></h1>

This is the often found in the header, but may be in the page templates (index.php, single.php, page.php, any custom variants you may have). The php commands in the code essentially bring in a link to the blog, and the name, to establish a link to the homepage from the header. You can make this an h2, which will mean your pages are temporarily without any h1 tags.

<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>

Your page templates will often contain code like the above. It may alternatively be simpler, looking like <?php the_title(); ?>, or have extra information. But essentially, if you see php the_title, it's likely to be the page heading as it appears on the page.

We want to make this an h1 tag, as it's normally the most important part of your page. So change the h2 tags to h1s on page.php, single.php, index.php and any others that contain them.

Hacking the archive indexes

We run into a problem when we look at date, tag or category aggregation pages. These commonly list pages under a certain theme. However, as we've changed the headings to h1 tags, we're going to have more than one on a page, right?

Well, not necessarily. If your theme as an archive.php file, make sure the <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a> code is wrapped by h2 tags (normally these would be h1s, but we're breaking the rules here).

We can then use WordPress conditional tags to change how the header responds, depending on what the page type is. In your header look for code similar to:

<h2><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h2> - this is the code for the site's name which earlier we changed from having h1 tags to h2.

You can tell WordPress to putting different tags around the information if you're on an archives page - and your homepage too, if it displays the most recent blog entries.

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

Save and test the file. Then you can view a page's source in a web browser, or use Firebug to see whether it's giving you the correct h1/2 tags around headers on different pages. It may be necessary to turn any caching off at this stage so you're not looking at an older version.

Styling the tags

Now your pages should have h1 tags for the article's headline, you'll want these to be sized correctly. Previously these would probably have been h2 tags, so the easiest thing to do is to edit your style.css file, copy the css for your h2 tags, and use this for your h1s. But feel free to tweak things and get them exactly as you wish.

Potential problems

The theme I'm currently using on this site, Leaves, is a very simple one which used just a single.php and an index.php file - there were no archives.php or page.php files. However, it was easy enough to make those by following the relevant step in the WP Designer tutorial on creating a WordPress theme.