I’ve used several different content management systems over the years, and WordPress is by far my favorite.  Not only does WordPress allow you to install pre-designed themes that can be hacked to your specifications, it also creates very SEO-friendly websites.  While its use was initially dominated by bloggers, WordPress is quickly becoming the CMS of choice for many static industry and business websites, as well.

In spite of how optimized most WordPress themes are for search engines, there are still a few behind-the-scenes tweaks that webmasters can do to make their sites even more SEO-effective.  I recently discovered one easy-to-implement WordPress hack that might come in handy for some Fathom Blog readers.

About <h1> and <h2> Tags on WordPress Websites

Many of you already know the basics about <h1> and <h2> title tags: they let search engines know what the most important titles on a page are, with <h1> designating most significant title and <h2> designating secondary titles and headings.  On any given website page, the title that you want the search engines to pay the most attention to should always be surrounded by <h1> tags.  Less important titles and headings that separate a page into different sections should instead use the <h2> tag, which gives them less weight as a page descriptor.

When it comes to the homepage main index of most WordPress website themes,  the <h1>/<h2> relationship is perfect.  Your website title, which is the most important descriptor of the homepage, is automatically wrapped in <h1> tags, and the website description is wrapped in <h2> tags.  In the content beneath the header, individual post titles are also wrapped in <h2> tags.

Here’s an example  of what the <h1>/<h2> tag relationship looks like on a WordPress homepage:

<h1 class=”sitename”>Website Title</h1>
<h2 class=”sitedesc”>Website Description</h2>

. . .

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div>
<h2 class=”postTitle”><a href=”<?php the_permalink() ?>”><?php the_title(); ?></a></h2>

And as it is, this is great.  The most important title on the page has an <h1> tag, and the less important titles have <h2> tags.  When you take a look at internal pages and posts, however, there is one glaring problem.

Because WordPress themes pull html from the exact same header.php file for every single page on the entire website, that means that your website title ends up getting the only <h1> tags throughout the site.  The page titles and post titles themselves are delegated to getting tagged with <h2>, which is exactly the opposite of what it should be.  While the title of your website is important to internal pages, the much more vital keywords are usually found in the post or page title.

How to Switch H1/H2 Tags on WordPress Single Posts

Now let’s look at how to easily fix that problem throughout your WordPress website.  A word of warning: always back up your original files before making any html changes to your WordPress theme!

First of all, go into the Edit Themes section of your WordPress admin panel (look in the sidebar and choose “Editor” under the “Appearance” header).    You’ll see all of the template files listed under a “Theme Files” header on the right.  From this, use new tabs to open up the “header.php” file and the “single.php” file (the last one is your single post template).

Now that you have these two files open for editing in separate tabs, take a look at the “single.php” to see how WordPress pulls the same header html into every post on the entire website.  The opening code <?php get_header(); ?> is what calls that common header html onto the “single.php” file.

Since the “header.php” file wraps the site title in <h1> tags, we no longer want to include that html in our “single.php” file.  So the first thing we’re going to do is delete <?php get_header(); ?> from the top of the “single.php” file.

Once you’ve done this, do not hit “Update File” yet!

That “single.php” file now has no direction to pull header code from another location, so we need to put some header code in there for it.  To do this, just click over to the tab where you opened the “header.php” file, highlight all of the text in that file, and copy it.  Now go back to your “single.php” tab and paste all of that code right into the top of the file, where the <?php get_header(); ?> used to be.

Now you can hit “Update File.”  And if you leave everything this way, you won’t notice a single change in your website yet, since all you did was paste the exact same code into the “single.php” file that it had been pulling from the “header.php” file to begin with.

What this now allows us to do, though, is edit the header html code that we pasted into the “single.php” file without affecting the common “header.php” file that is used on the homepage.

After you’ve hit “refresh” on one of your website post pages to make sure that nothing has been screwed up (like I said, it should still look exactly the same as it did before), close the “header.php” tab (you won’t need it anymore).  Go back to your freshly updated “single.php” file and scroll down until you find the code that assigns tags to the website title and description.  It will look something like this:

<h1 class=”sitename” >Website Title</h1>
<h2 class=”sitedesc”>Website Description</h2>

Now change the two “h1″ references to “h2″ instead.  Don’t hit “Update Page” yet.

The last thing to do is scroll down and find the code that assigns tags to the post title.  It will look something like this:

<h2 class=”postTitle”><?php the_title(); ?></h2>

Change those “h2″ references to “h1″ instead, and now click “Update Page.”  Our initial problem is now solved: the individual posts on your WordPress site now feature <h1> tags.

Cleaning Up the Title Tag Formatting

When you go to a post on your website and hit refresh, however, you are probably going to see that the sizes and formatting of your site title and post title are now all screwy.  Don’t panic; that’s easily solved, too.

The title formatting is messed up because of the class=” . . .” attribute that remains unchanged in updated <h1>/<h2> tags on your “single.php” file.  In other words, your WordPress Stylesheet is telling the web browser that anything with an <h1> tag is supposed to show up big and bold, and anything with an <h2> tag is supposed to show up more diminuitive.

Here’s the simple fix: go into your Stylesheet (style.css) and scroll down until you find the code that defines the formating of the <h1 class=”sitename”> appearance.  It will look something like this:

#underheader h1.sitename {
padding: 0 0 0 0;
position: relative;
font-size: 23pt;
width: 600px;
color: #ffffff;
}

This is the exact formatting that we want for the new <h2> wrapped site title on our redesigned post pages, too.  Just copy that snippet of code, paste another instance of it right below, and change the “h1″ to an “h2.”  The end result will look like this:

#underheader h1.sitename {
padding: 0 0 0 0;
position: relative;
font-size: 23pt;
width: 600px;
color: #ffffff;
}

#underheader h2.sitename {
padding: 0 0 0 0;
position: relative;
font-size: 23pt;
width: 600px;
color: #ffffff;
}

After you update the file, the site title on your new post pages should look exactly as is does on the homepage.  Now use this same method to create  new #h1.postTitle formatting to fix the appearance of your <h1> wrapped post titles, as well.

An Important Reminder About Header File Updates

One important thing to remember after you’ve completed this process: any changes that you make to your “header.php” file will now only affect the homepage of your site, and you’ll have to make the same change to the header code that you pasted into the “single.php” file as well.  If, for instance, you insert any tracking code or scripts in the homepage header, make sure you go and insert them on the single post file too.

So, what do you think: worth the trouble or not?  The whole process of switching your H1/H2 tags on WordPress posts is much easier than this long tutorial might make it seem.  And I’ve already started to see more organic traffic from implementing this WordPress SEO secret on my own blog.