Ready to talk? Chat with us, request a quote, or call 866-726-5968

Main Menu

Fathom Blog

News & analysis on digital marketing & analytics

avatar

WordPress SEO Secret: Switching Post H1/H2 Tags

By | February 12, 2010

WordPress SEO

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!

WordPress SEOFirst 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>

WordPress SEOChange 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.

25 Comments

avatar

About Phil Van Treuren

Phil Van Treuren is a Senior Account Executive at Fathom, and has been with the company since 2009. He specializes in digital marketing strategy for the manufacturing and home improvement industries, and has worked for clients including Eaton Corporation and Owens Corning. He is a graduate of Southern Utah University, with Bachelor’s degree in English. He is also a graduate of U.S. Army Officer Candidate School.

Google+

  • http://tibichi.ro Sebastian Tibichi

    Makes sense, but how come you don’t use it? :)

  • http://allmendingerenterprises.com Brad Allmendinger

    Thanks for the info; I was wondering about this. I gave it a try on one of my blogs.

  • Amber

    I just made this change to my template, thanks for the information, it was just what I was looking for.

  • Germain Bracamontes

    hey there, great info I did most of these changes.. but now i can’t find the #underheader text or “sitename” anywhere.. I’ve already opened teh style sheet and used “find” but nothing… you know why is it? Thanks!

  • admin

    made changes to my site as follows -
    made removed h1 tag from header blog title and put h1 tag to post title.

    From next day google traffic has dropped significantly. Why so ?

  • http://www.quixli.com SALVADOR

    Thank you very much for the information. Is there a plugin for this yet? Would be great for helping my lest techie users on our services. take care

  • http://www.ethnic-contemporary.com Nasir

    Thank you very much for clear explanation. I read many article about change h1 wordpress. it is clearer explanation.

  • http://valentinewebs.com/ Jason Barr

    I’ve been doing something similar to this in my theme designs lately, only with a slight difference. Most of my designs have a custom homepage, so I’ll use a different header for the home page than for internal pages, but I don’t use the h1 tag in that header for the blog title – I use it for the description. Then on single posts and pages the post/page title is h1.

    The rationale is that the blog title may be actually less important for search purposes than the description, which ties into the purpose of the site and is probably more closely related to the meta description (and more importantly potential search terms), and so on. The blog title already gets weighted pretty heavily anyway because it’s in the header (with an h2 tag) and also in the title tag in the html head.

    Your thoughts?

    Of course, one can do more when doing the actual design instead of using another person’s template.

  • Simon

    That’s well explained and most useful!

    Thank you.

    S

  • echal

    I’m gonna try this…

  • http://celebritybioz.com Jason

    Thanks for the info on h1 and h2 tags. I was just bolding all important subtitles within a post or page. Now I got a lot of work to do to go through and change those to h2 or h3, but hopefull it will be worth it, thanks again.

  • http://gumz-ex-press.com Gumz

    Nyc Implementation here…

  • Jeramy

    Thanks for the info, I applied it to my site. I was wondering how to go about resolving the issue with my h1 and h2 tags. I use the Socrates theme and so the coding in the style.css was quite different then above, but your info still gave me what I needed to figure it out and get the job done. Really appreciate the help.

  • Aden

    thank for nice article

  • http://yorkvisitors.com Jason

    Thanks for the article. Does this process still work if we are using the wordpress all in one seo plugin? I use this plug in (which is great), but it does give me the same H1 for all 10 pages on my website. Any advices appreciated.

  • http://guitarsuperstarsreviewtips.com Jason

    I have managed to get this working on all of my sites now, so thanks again for the advice!

  • Mars

    Really thanks!I search for many tutorial but this is awesome :)!Will use for my site!

  • http://www.alexnewell.com/ Alex

    Thank you Phil. I have done a few ad hoc hacks up to now and it’s great to have this outline of a method.

    Frankly I have often chickened out and gone to find a theme that handles things properly. There’s some gorgeous themes I have been avoiding and I’m keen to get going with this.

  • http://www.sfihomebizz.com/ Kavita

    I have changed my post titles to h1 tag. But on checking my posts in http://www.givegoodweb.com/tools/page-check/ shows results as (It’s best to avoid links in your Heading 1 tag.).

    So should we use h1 tags for just text or links also like post titles. What do you say and what should be done for better SEO because I have read some comments mentioning their google traffic dropped after changing.

  • http://www.martinstruenetincomebz.com Martin

    I needed a better understanding of how to use h1 & h2 tags. I found it in this great article. Thank you Phil!

  • http://seo.organicosas.com benno

    Thankyou very much, you just saved my ass with that h1 tag double up, cheers also for a few breadcrumbs that lead me to cracking my twentychild theme just that little bit more in my favour as well. :)

  • http://wilfredodiaz.com Wilfredo Diaz

    Wow dude. You must have went through a little trouble to figure all this out. Thank you for putting up this post for people like me who would of never figured it out. Have a great day.

  • Pingback: Episode 006 Internet Marketing For Small Business Q&A Podcast

  • http://healthy-smoothierecipes.org Kali Claire

    This explanation was the only one I understood. Thank you.

  • http://www.twoggle.com/blog/effective-blog-writing/ How To Blog

    Thanks, great article! I’m going to try this, hope to see the effects shortly.

Request an Assessment

Let us take a look at your current online presence.

Free
Assessment

Get Blog Updates

Archives

Interested in Writing for Our Blog?

Tell us your idea.

Write
For Us