Optimizing the Syntax in the WordPress Title Tag

This post was written in 2006. As of WordPress 2.5 (released in 2008), a new seplocation parameter has been added to wp_title. This allows you to reverse the page title and blog name in the title tag, in much the same way as I have described in this post. The page at http://codex.wordpress.org/Function_Reference/wp_title provides this example:

<title><?php wp_title('|',true,'right'); ?><?php bloginfo('name'); ?></title>

I’d recommend using it, instead of the admittedly complicated instructions below.

Getting the title tag just right in WordPress isn’t as easy as it ought to be. Currently, a popular title syntax for SEO purposes shows the page’s title, followed by a pipe separator, followed by the site’s name. In practice, this preferred syntax would appear as “Page Title | Site Name”. For whatever reason, the default theme in WordPress has this order reversed, so that each page’s title starts with the blog name, followed by a » separator, some useless clutter, another » separator and then the page’s title. The instructions below will help you optimize the title tag to take advantage of the prefered method.

The code for the default WordPress title tag, which is found in the “header.php” file, looks like this:

<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>

It seems like it should be an easy thing to clean up. We remove the unnecessary “Blog Archive” stuff and then switch the two title template tags, putting <?php bloginfo('name'); ?> behind <?php wp_title(); ?>.

Our title tag code now looks like this:

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

But if you make this obvious change and reload one of your blog’s post pages in your browser, you’ll notice that the separator, which is inextricably part of the wp_title template tag, wants to be in front of the page title and is now the very first character in your browser’s title bar, resulting in something like “» Page Title Blog Title”. Furthermore, we are missing a desired separator between the page title and the blog title.

Let’s first do something about that initial separator. The wp_title tag we’ve been using so far, <?php wp_title(); ?>, is abbreviated, meaning that there are some options that are being allowed to fall back to their default states because we haven’t specifically provided otherwise. Changing the behavior of the wp_title separator is as easy as manipulating these options in the unabbreviated wp_title template tag. The full tag, including the options, looks something like: <?php wp_title('sep', display); ?>, where ‘sep‘ stands for whatever separator you want and display is either “true” or “false”, depending on whether you want the title displayed. For example, if you want to use the pipe symbol ” | ” to appear at the beginning of your post title, you would use: <?php wp_title('|'); ?>. (The display option defaults to “true”, which is what we want here, so I’ll omit that part in the future for the sake of brevity.)

This fiddling with different separators works just fine when the elements of the title are in the default order, but when we put wp_title at the beginning of our title tag, we get a separator as the first character in our title. We don’t want a separator in front of the Page Title, so we will use the ‘sep‘ option described above to tell WordPress to use an empty string (represented by the absence of text between two quotes) as the separator, like so: <?php wp_title(''); ?>. This is the preferred method for removing the leading separator from the wp_title tag. Now the code for our title tag looks like:

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

This title will cause your browser’s title bar to display “Page Title Blog Name”. We are getting closer to what we want.

Without explaining exactly how it works, let me just offer you an optional line of code to selectively add or omit a separator between the Page Title and the Blog Name as appropriate for each page: <?php if(wp_title(' ', false)) { echo ' | '; } ?>. Place this line of code between the wp_title and bloginfo template tags, as so:

<title><?php wp_title(''); ?><?php if(wp_title(' ', false)) { echo ' | '; } ?><?php bloginfo('name'); ?></title>

Reload the page again, and your title bar should show you exactly what we want, “Page Title | Blog Name”, without a leading separator. Any page without a Page Title, the home page, for example, will just have “Blog Name” in the title tag. Everything up to this point is explained on the WordPress Codex page dealing with Template Tags/wp_title. For most users, this is as far as one wants or needs to go to achieve the desired result.

Further optimization

But… if you’re really humorless about clean code, there’s more to be done. If you view the source code of these pages, you’ll notice that there are a handful of spaces after the opening title tag and before your Page Title. Yikes. Lucky for you, I like my code to be tidy and am also pretty interested in SEO, and for both of these reasons, albeit in unequal parts, these leading spaces in the title tag are unacceptable.

There are three ways to make WordPress close up the spaces whenever we declare an empty string as our separator, as in: <?php wp_title(''); ?>. The first method requires editing a file in the WordPress core. The second method is accomplished by adding a few lines of code to your theme’s ‘functions.php’ file. The third method uses a simple plugin.

Using any of these methods to remove the spaces will also remove the separator that WP wants to add between the year, month, and DD.MM.YY date of the titles of the monthly archives. So if your separator was a pipe symbol, they looked something like: 2006 | December | 17.12.06 | Ardamis.com and after removing the spaces they will look like: 2006 December 17.12.06 | Ardamis.com

Method 1 – the core file

This method involves hacking a core file. This is the most direct way to get the desired result. It basically corrects the problem the moment it happens.

For WordPress version 2.2

The file we want to edit is: \wp-includes\general-template.php. Open it up and find the following lines (beginning at line 224):

$prefix = '';
if ( !empty($title) )
	$prefix = " $sep ";

Add the line if ( $prefix == ' ' ) { $prefix = ''; } below the block, so that the block now reads:

$prefix = '';
if ( !empty($title) )
	$prefix = " $sep ";
	
if ( $prefix == '  ' ) { $prefix = ''; }

Method 2 – functions.php

If you’re not comfortable editing a core file, and if you don’t want to install yet another plugin, this method will also work. Open the ‘functions.php’ file in your theme folder and add the following lines. Depending on your theme, functions.php may already contain some PHP code; that’s ok, just tuck this in at the end. The first line of functions.php should be <?php and the last line should be ?>. If those lines don’t exist, add them and then add the following code between them.

function af_titledespacer($title) {
	return trim($title);
}

add_filter('wp_title', 'af_titledespacer');

Method 3 – a plugin

If plugins are more your speed, you can get the same results with my Despacer plugin.

Download the Despacer WordPress plugin

Utilizing the changes in the template files

We can now remove the separator and the annoying blank spaces on an instance-by-instance basis by specifying an empty string as the separator, as so: <?php wp_title(''); ?>. By way of example, to hide the separator and remove the blank spaces, a “Page Title | Blog Name” title tag would look like:

<title><?php wp_title(''); ?><?php if(wp_title(' ', false)) { echo ' | '; } ?><?php bloginfo('name'); ?></title>

If anyone finds a better way of arriving at this result, preferably entirely within the template files, please leave me a comment, or post to the WordPress support forum.

You may notice that one poster to the WordPress forums suggests that the search engines don’t care if there is white space in a web page. While I agree that the search engines and browsers don’t have any problem parsing pages that contain chunks of white space, a gap at the beginning of the title tag looks very unnatural to me. No human would intentionally add a bunch of blank spaces to the beginning of the tag, and it’s generally understood that for SEO purposes, a page that looks handcrafted is superior to one that looks like it has been slapped together by a script. This may not be a problem now, but Google and the other search engines are constantly working to remove spam/garbage/scraped sites from their results, and they may one day use weirdly unnatural artifacts like this to identify them.

41 thoughts on “Optimizing the Syntax in the WordPress Title Tag”

  1. Pingback: Wordpress Title | Search Engine Optimization Blog-Core SEO

  3. Pingback: Playing with the Wordpress title | Blog | Cube Games

  4. ardamis Post author

    Thanks, Ryan. I’ve changed the instructions to allow users to switch off the separator and spaces, as per your comment and Cube Games post. I’m using a somewhat different methodology that I think is a little more straight-forward.

    Thanks again for pointing out an improved system.

  5. Pingback: none SEO MOD WordPress Titles | TechRoam

  6. Shawn Anthony

    Man, thank you for putting this out there for the community. Your time and work are deeply appreciated.

    I have one question: Why does the word “none” appear in the title of monthly archives? Example:

    2006 none November | Lo-Fi Tribe

    How can this be prevented?

    Other than that, everything works great.

  7. ardamis Post author

    The “none” between the year, month, and date in the titles of monthly archives is caused by the lines:

    $title .= " $sep ".$month[zeroise($monthnum, 2)];

    and

    $title .= " $sep ".zeroise($day, 2);

    in template-functions-general.php.

    I’ve edited the instructions in the post to account for this, but the above method replaces the “none” with two blank spaces. If this bothers you, you can delete the $sep and either the leading or trailing space, so that the lines look like:

    $title .= " ".$month[zeroise($monthnum, 2)];

    and

    $title .= " ".zeroise($day, 2);

    This method, however, prevents you from ever using separators between the year, month, and date in wp_title, for example, if you use wp_title elsewhere on the archives page.

  8. Ryan McCue

    Right, I have another:

    str_replace(' » ', '' ,wp_title('»',false));

    Basically, it takes the title as a string and replaces the right angled quotation mark with an empty string.
    Haven’t tried it yet, but it should work.

  10. Pingback: Rxbbx Dev Blog Optimize Title Tag Wordpress

  11. Max Roeleveld

    Wouldn’t it be WAY easier to just trim() the output of wp_title(' ', false) to get rid of the extra spaces, and just add the site name as static HTML in the template? Or, if you’re really that much of a perfectionist, code up a custom function which you put in functions.php inside your theme directory?

    Not that this method is *wrong*, but you’ll lose your changes to the core files on the next upgrade… Plugins and custom functions stick around.

  12. Pingback: SEOKING.nl » Zoekmachine optimalisatie voor Wordpress blogs

  13. ardamis Post author

    Yes, it would be way easier to just wrap wp_title in trim(), but it doesn’t get the desired result; the leading spaces remain.

    For example, using

    <?php trim(wp_title('')); ?>

    will result in the xhtml output looking like

    Optimizing the Syntax in the WordPress Title Tag

    I’m working on a plugin, but in the mean time, this is the best solution I can offer.

  14. barry

    I have a variation of unique titles tags. Basically I want the index to have the blog info and each new post to have unique title tags. I have successfully used this:

    DiscussWireless: <?php if (is_single()) {wp_title('',true); } else {bloginfo('name');} ?>

    Only problem, like mentioned above, is two additional spaces (that do’nt happen on the index) in the HTML.

    Any thoughts or fixed yet that I could implement in my code above? Tx

  15. Ash Searle

    Seems like the wp_title function could do with some sensible changes.
    First, acknowledge an empty prefix as ‘no prefix required’:
    $prefix = '';
    if ( isset($title) && strlen($sep) )
    $prefix = " $sep ";

    Second, ALWAYS return the title:
    // Send it out
    if ( $display )
    echo $title;
    // else (deliberately commented out)
    return $title;

    With those changes in place, you could code up your title as:
    <?php if(wp_title('')) { echo ' | '; } bloginfo('name'); ?>

    Or, if you’re aiming for compact code:
    <?php wp_title('') and print ' | '; bloginfo('name'); ?>

  17. ardamis Post author

    Well, don’t expect miracles from this one change. Content and inbound links are still the two most heavily weighted elements. When used in conjunction with other good page structure practices, a concise title will help improve a page’s rank in the results pages, but it’s not going to shoot it to the top of the list.

  18. Ryan McCue

    Well, you didn’t take any notice of my last one, so I thought I’d point it out again, since I use it on my site now.

    $the_title = str_replace(' ```` ','',wp_title('````',false));
    if($the_title) {
    echo $the_title . ' | ';
    }

  19. ardamis Post author

    Ryan, would you mind elaborating on your method here? Where does one insert this code? And could it be condensed further?

    The pipe separator appears to be hard-coded, and I’m not really comfortable with imposing that restriction on the user. But I think you’re on the right track with the use of str_replace.

    Actually, that gave me a good idea about using trim() to remove the spaces, though, and I just edited the post to illustrate its use in functions.php. At the same time, I put together a plugin that’ll do the same thing.

    Thanks for putting in all this time and effort. It has been a fun little competition, and I’ve certainly benefited from having someone pushing me to innovate.

  21. compuwisdom

    You are a genius I am so glad I found this post. I spent 2 hours trying to figure the space before wp_title after I eliminated the “>>”. Thank you!

  22. Dave

    Thanks so much for this. I pulled my hairout this afternoon with a couple of other posts that had incorrect PHP code and blew my development site up. THis took about three minutes and was exactly what I needed!

  23. jgoode

    thank you so much! this is exactly what i was looking for and extremely simple to follow not only your instructions, but your reasoning.

    many thanks!

  24. Pingback: links for 2007-11-30 | Brewed Fresh Daily

  25. Pingback: How Do I Optimize My Wordpress Title Tag On My Blog? | Ask the Blogger!

  26. Kathy

    Thank you for your informative post. I have a related question. Does the title have to have the name of the blog in it and is there any SEO reason for having it there?

  27. Charles

    Thank you for this post! I was searching for a way to remove that space. It was driving me nuts and I didn’t want to use a plugin.

    Great job!!!

  28. steev

    thanks man, great job man keep it up and please take a look at my blog and suggest me is it ok or you will suggest some thing else.I think you are a right man from whom i wanna take suggestions so please suggest me and in last i just wanna thank you once again.

  29. steev

    Great job!
    Thanks this post helped me a lot to make SEO friendly titles for my wordpress blog so man keep it up.

  30. Scott Lenger

    Great, those spaces after the tag were really getting on my nerves. Thanks for the functions solution, makes it a nice way to keep all my template tweaks in one place.

  32. Pingback: Steps, hints, and tricks to setting up a new self-hosted WordPress blog (with links) | TKBB

  37. Kamti

    Really clear tuts, at the first jut adding a pipe sign “|” after to be simpler. But there still | in front of my home page so I decide to follow what you offer.
    Great thanks!

  39. WSz

    Dude, you rock. Seriously. Taming the WP title was seriously driving me crazy. Many thanks for the tips! I owe you a beer!!

  40. Doug

    This gets rid of the leading spaces for me, but not spaces between several title words:

    I can then use the $title_trim variable wherever I want.

  41. j

    Cool, thank you I couldn’t work that out but knew it had to be default wordpress syntax. Thanks again

Comments are closed.