Best Practices for WordPress Titles

Best Practices for WordPress Titles

3 3735
The title of a web page appears at the top of the browser window
The title of a web page appears at the top of the browser window

As most folks already know WordPress is a fantastic way to set up and maintain your own website. WordPress is more than a blogging tool, it is a full-blown content management system (CMS.) We often build entire sites from WordPress that don’t look like a blog at all. Casa Amarilla is a great example of this.

One built in function of WordPress is to automatically generate titles for your pages and posts. This is a very powerful feature but needs some tweaking out-of-the-box.

Web Page Titles 101

A page title appears at the top of the browser window, not actually in the area where your web page displays. See the graphic below:

The title of a web page appears at the top of the browser window
The title of a web page appears at the top of the browser window

How Titles Work in WordPress

Before we get to the issue with titles in WordPress, let’s define some elements that you’ll see in the Admin area.

  • Site Name (aka Site Title) This is one of the first things that WordPress asked you when it was installed.
  • Post/Page Title This is the title or subject of an individual page or post. The title for this post is “Best Practices for WordPress Titles”

We’ll use our site, bossanovawebdesign.com, as an example because the entire site is managed by WordPress (not just the blog portion that you’re reading.)

Wordpress Admin Panel --> General Settings
Wordpress Admin Panel --> General Settings

EXAMPLE

  • Site Name (aka Site Title) Bossa Nova – Web Site Design, eCommerce Development, and SEO Firm in Hampton Roads, VA
  • Post/Page Title Best Practices for WordPress Titles

By default, WordPress uses the Site Name as the title for the home/main page.

This works fine until someone views your sub-pages and/or posts. This may not seem like a big deal to you right now, but it can affect your traffic from organic search results.

Change the Order of the Title Components

For blog posts and sub-pages, WordPress (by default) uses the Page Title after the Site Name, with a separator in-between ( in this case a double right bracket ” » ” )

Bad Practice:

Bossa Nova – Web Site Design, eCommerce Development, and SEO Firm in Hampton Roads, VA » Best Practices for WordPress Titles

In many cases, it also adds the words “Blog Archive” with separators in between all of this, making the post title even longer.

Even Worse Practice:

Bossa Nova – Web Site Design, eCommerce Development, and SEO Firm in Hampton Roads, VA » Blog Archive » Best Practices for WordPress Titles

It’s not a great idea to have a long site title because it may end up being truncated in search results, which is not a very user-friendly experience. Users will be less likely to click on your link vs. the hundreds of others that they can actually read.

Even if you have a short title, however, we would still recommend that you switch the order so that the Post Title comes before your Site Name.

Best Practice:

Best Practices for WordPress Titles » Bossa Nova – Web Site Design, eCommerce Development, and SEO Firm in Hampton Roads, VA

This way, if your title gets cut short, at least the post name (which is probably more relevant to what the user is searching for) is visible.

Web page titles also appear in search listings
Web page titles also appear in search listings

Fear not, this is actually very easy to do, even if you’re not a web designer or developer. Read on!

Let’s take a look at the code.

Wordpress Visual HTML Editor
Wordpress Visual HTML Editor

In the visual editor, click on Appearance –> Editor. Find the file on the right called header.php, and click on that to show your code in the window.

You’re going to be looking for the <title> tag.
It is in between the <head> and </head> tags.

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

We’ll show the same code from above, but this time on separate lines to make it easier to discuss.

Before:

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

The snippets above are simple PHP tags with functions that allow the title of your blog to be dynamically generated.

Translation:

<title> = Begin building the title of this page
<?php bloginfo(‘name’); ?> = Site Name/Title = Display the name of this blog
<?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> = If this is not the home page, add » Blog Archive
<?php wp_title(); ?> = Page/Post Title = Display the post title
</title> = Finish building the title of this page

So, all we need to do is switch the order of the title components, and eliminate the “Blog Archive” line.

After

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

That should take care of it. Hit the save button for the header.php editor, and go preview your site.

Notes

Coding Mishaps

  • Before you try any of this, please copy the existing code from your header.php and paste it into a text file to be saved somewhere nice and safe. If anything goes wrong, break that text file out and paste it back in.
  • Second, you don’t have to edit any of the code I’ve laid out for you here. You should be able to paste in the “After” code exactly as-is.
  • Third, if you do have something go wrong, it’s probably a semicolon or comma or period or quote mark or parenthesis that’s been accidentally deleted. Don’t panic. Get your text file back out and start over from scratch.

Separator

  • You can use any type of separator you’d like. Some common separators are the dash ‘ ‘ and the pipe ‘ |
  • The default separator is the double right brackets ‘ »
  • In order to make this work, you’ll need this code: &raquo;
  • Just be sure to leave the rest of the line in tact when changing the separator out. You will only want to use the area in between the single quotes surrounding ‘&raquo;’ (Leave the true,’right’ bit alone!)

Including Tagline

If you want to include the “Tagline/Description” in your title (see earlier screenshot for General Settings Admin Panel), use this code:

<title>
<?php wp_title('&raquo;',true,'right'); ?>
<?php bloginfo('name'); ?> - <?php bloginfo('description'); ?>
</title>

Most of these instructions and documentation can be found on the WordPress Help Site, however if you end up getting stuck, just let us know and we’ll try to help you through it.

Good Luck!

 Name: Email: We respect your email privacyPowered by AWeber Email Marketing Software 

3 COMMENTS

  1. This is a neat way to modify the title tag.

    Yes, I agree with John Locke’s comment, the title tag takes more weight actually in On Page SEO.

    This is a must in building a site and go away form the old way of placing text on the title tag.

    Thank you for the tip! I now have a way to do it, way easier!

  2. You explained everything very well. Title optimization is perhaps the easiest way to make your website search engine friendly, so every webmaster should know how to do it.

  3. DUDE, thank you so much! It drove me nuts to find out how to “erase” the standard separator and change it with another one. Now I have a lovely title tag in the preferred composition. 🙂

Leave a Reply

This blog is kept spam free by WP-SpamFree.