A Title plus a few Headers

This post isn’t strictly for WordPress users but I see it increasingly on WordPress sites so I’m targeting that as the main example. What am I talking about? Simple on page SEO AND Usability/Accessibility (it’s not all about the Search Engines!).

Page Titles

Your page title is the most important aspect. You’ve got 50+ characters (around 65 I think, but search engines vary) so use them! Keep the main basis of the title unique to each page if you can, however I am a fan of keeping the main site title, be it a site name or company name, at the end of the title so that you still have consistency. Plus at a glance, in the search engine listings, people can still see which company/site you are from the title. I hate being on a site that just has the page title and no identification.

In WordPress it’s not so straight forward but still perfectly possible. For standard blogging then your posts will take the same page title as the post title, so bear that it mind. For static pages it does the same, which isn’t so good as you don’t want ‘Home’ for your front page, or ‘About’. However this can easily be changed with the SEO Title Tag Plugin. This allows you to set the page title for any page (or post). It’s a must for anyone running WordPress as a CMS, and also those of you who use static pages on your site. However, if you’re using WordPress as a blog then you need to alter your index.php template to allow you to control the front page title. To do this you can replace the standard title of

<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>

and change this to

<title><?php if (is_home()) : echo 'Front Page Text Here'; else : wp_title(''); endif; echo ' - '; bloginfo('name'); ?></title>

On this line change the ‘Front Page Text Here’ to whatever you want displayed, and also change the hyphen to the separator of your choice in the second echo statement. This will then give you the page title followed by the blog name. On internal pages you’ll simply get the page or post title followed by the blog name. It’s a good idea to at least switch the wp_title() and bloginfo(‘name’) around anyway in my opinion.


Ahh Headers. These seem to either be misunderstood or just abused, if they’re used at all! Using the Web Developer Firefox Extension you can easily go to any page and choose Outline – Headings, and see what header tags are being used and where. It’s often interesting to see how the same header tags are styled so differently on different parts of the page. Surely this should say to some people that perhaps they’re using them wrongly?! Headers are also important for semantics and usability/accessibility. It creates a structured hierarchy within the page and as a result emphasises relationships between one section and another, and can be used by users of certain screen readers and browsers to navigate through the page based on the structure (yes I just got that from Dave!!).

From my point of view, headers need to be used right to define the right amount of importance to the text within the tags along with the content about to follow. I often see people either using multiple H1s on a page, or one H1 and then a load of H2s and nothing else. There’s no structure there, not for the visitor and not for the search engines. Surely, to me, if you use to many H2s then it starts to dilute the importance of a H2 and perhaps a H3 can be seen as more important if there is only one of them. I’m sure it doesn’t work like that but if you have everything in a H2 then everything is considered of equal importance, and that’s probably not right.

WordPress is a major culprit of this and it’s something I wish they’d change. By default, the template tags of wp_list_categories() and wp_list_bookmarks() both output H2 headers. This is quite annoying as you already have H2s around your post titles, are the headings of ‘Categories’, ‘Blogroll’ and anything else in your sidebar worthy of the same importance? Personally I don’t think so. Changing these is fairly easy however.

For the bookmarks list you can easily add in a couple of extra parameters to control what the heading uses by specifying the before and after tag


For the categories list however you need to simply prevent the header from being output and manually do this one yourself using similar code to

<?php wp_list_categories('title_li='); ?>

The title_li= parameter tells the function what title to output, so by leaving it blank it’s being told to output nothing.

Another misuse of headings that I often see on a blog post is the date below the title also in a header. Why?! The date is of no importance whatsoever. Sure, it should be there for definite, but not in a header tag. You’re just diluting the importance of headers by throwing a date into one.

From my point of view there should be one H1 on a page. At the top and contains the site or company name. This is also consistent across the site. My H1 uses image replacement to show the header image of the rose with the PHP code, however ‘underneath’ it has my blog name. I then use H2s for my post titles and H3s for my sidebar headings IF I can’t put them into definition lists which is what I’d actually prefer to use (and will be on the next theme). I also use H3s in my posts, hence why I’d rather not have them in my sidebar at all!


This isn’t a guarantee on anything. I’m not an SEO, just applying some common sense and using what I’ve read on SEO sites. However SEO aside, semantics and usability dictate that you should keep your pages structured, follow a hierarchy and follow consistency. With CSS in use a lot more these days, it’s not too hard to switch tags around, just assign the H3 the same style as the H2 had for your sidebar and you’re usually fine.

You may also like...

3 Responses

  1. Sarah says:

    Just an addition to this. My own home page title is now constructed using the blog description followed by the blog name ie.

    if (is_home()) :
    else :
    echo " :: ";

    Which simply says, if it’s the home page then display the description else display the correct page title (category name or post title), followed by two colons and the sitename.

    This way if you want to change it just go to Options – General and change your description in the admin panel 😀

  2. Hi Sarah ~ Great post! Sorry to be such a noobie … but are all of the code suggestions you’ve given done on the styles.css page?

    Also, how (and where) do I add the code so that my header is read as my blog title?

    Thanks for all you do helping others … you’re awesome! *huGs* Suzanne

  3. Sarah says:

    Hi Suzanne, no the code suggestions are done in the relevant theme files, so the page title is changed in the header.php file, and the sidebar titles will be in the side.php file.

    For your page title, you need to edit the header.php and find the title tags, then remove what’s within there and replace it with my PHP code in my previous comment.

    There’s also a more detailed post on this over at Blogging Tips – http://www.bloggingtips.com/2008/05/18/improve-your-front-page-title/