Optimizing the Syntax in the WordPress Title Tag

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 = ''; }

For WordPress version 2.1.x

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

$prefix = '';
if ( isset($title) )
	$prefix = " $sep ";

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

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

For WordPress versions 2.0.x

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

$prefix = '';
if ( isset($title) )
	$prefix = " $sep ";

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

$prefix = '';
if ( isset($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.

About this entry

You are currently reading ‘Optimizing the Syntax in the WordPress Title Tag’

Author: ardamis

Originally published: 3 July 2006

Last modified: 25 June 2007

Category: Web Site Dev, Wordpress

30 Responses to “Optimizing the Syntax in the WordPress Title Tag”

comments feed (RSS 2.0) | leave a response | trackback

[...] This blog had that » at the front of the title for a few months until I Googled and found Optimizing Wordpress Title and found the correct syntax for the code. Basically, the default separator for the wp_title() is used until you put something else in there wp_title(’ ‘). The full code required is found in the link above. I still have not figured how to post html code and php code so that it shows in posts. [...]

Wordpress Title | Search Engine Optimization Blog-Core SEO
July 23rd, 2006

I actually use:


$prefix = '';
if ( isset($title) ) {
	if($sep=='BLANK') {
		$prefix = "";
	}
else $prefix = " $sep ";
}

Then use wp_title('BLANK');

Ryan McCue

October 14th, 2006

[...] At first, I used the method at Ardamis.com to remove it, but that left unwanted spaces. I then moved on to the second, harder method which involved editing some of Wordpress’ core files. But then I thought, what if I want to use the separator. [...]

Playing with the Wordpress title | Blog | Cube Games
October 14th, 2006
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.

ardamis
October 26th, 2006
[...] To optimize the WordPress Title Tag in my blog I use to run Optimal Title Plugin and that worked fine. But, recently I wanted to just fix the problem from inside of WordPress and not run an extra plugin. You have to open wp-includes/template-functions-general.php and change a couple things. Oliver Baty from Ardamis.com actually wrote a pretty good tutorial on how to hack the code and get the job done. Enjoy! [...]

none SEO MOD WordPress Titles | TechRoam
November 28th, 2006
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.

Shawn Anthony
December 23rd, 2006
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.

ardamis
December 23rd, 2006
Right, I have another:
```
str_replace(' &raquo; ', '' ,wp_title('&raquo;',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.
Ryan McCue
January 11th, 2007
Like your style.. although i would not include the Site Name everywhere.. Thnx for your explanation.. Makes it easier..

Regards

rxbbx
January 12th, 2007
[...] Although there are Wordpress Plugins which can help you out with optimizing your Title Tag, I prefer the old way. I am not that fond of using plugins. The only disadvantage of modifying your theme or core files is that you need to change the files again with a Wordpress Upgrade. The wordpress codex gives a nice example: Template Tags / WP Title WordPress Codex. If you want to go a bit further you should take a look at Optimizing the Syntax in the WordPress Title Tag. Ardamis gives a clear and great example. [...]

Rxbbx Dev Blog Optimize Title Tag Wordpress
January 21st, 2007
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.

Max Roeleveld
January 29th, 2007
[...] Als je meer wilt spelen met de Wordpress titel mogelijkheden, dan kun je meer info lezen op Optimizing the Syntax in the WordPress Title Tag. [...]

SEOKING.nl » Zoekmachine optimalisatie voor Wordpress blogs
February 4th, 2007
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
```
<title><?php trim(wp_title('')); ?></title>
```
will result in the xhtml output looking like
```
<title>  Optimizing the Syntax in the WordPress Title Tag</title>
```
I’m working on a plugin, but in the mean time, this is the best solution I can offer.
ardamis
February 9th, 2007
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:

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

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

barry
March 15th, 2007
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:
<title><?php if(wp_title('')) { echo ' | '; } bloginfo('name'); ?></title>

Or, if you’re aiming for compact code:
<title><?php wp_title('') and print ' | '; bloginfo('name'); ?></title>
Ash Searle
March 15th, 2007
Thanks, this is a really great and useful post. Once I get my head around this code, I guess I’ll be impressed with the results and how Google indexes my blog pages.

Andrew Kelsall, Sqwink Design
April 21st, 2007
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.

ardamis
April 21st, 2007
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 . ' | ';
}
```
Ryan McCue
June 5th, 2007
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.

ardamis
June 5th, 2007
Thanks for the tip. Since my name is my domain, I used “by” as the seperator and it worked like a charm.

Stephan Miller
August 30th, 2007
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!

compuwisdom
October 3rd, 2007
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!

Dave
October 5th, 2007
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!

jgoode
November 7th, 2007
[...] Optimizing the Syntax in the WordPress Title Tag | Ardamis.com [...]

links for 2007-11-30 | Brewed Fresh Daily
January 2nd, 2008
[...] Ardamis has a great walk through on how to do this. [...]

How Do I Optimize My Wordpress Title Tag On My Blog? | Ask the Blogger!
March 9th, 2008
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?

Kathy
March 10th, 2008
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!!!

Charles
April 23rd, 2008
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.

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

steev
June 2nd, 2008
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.

Scott Lenger
June 13th, 2008