Better way to display title meta tag

To display title meta tag in WordPress, we can use wp_title function. But it's not enough if you want your theme SEO friendly.

Update: The code below is outdated. Use the plugin Slim SEO to get this done automatically.

In TwentyTen, TwentyEleven and Underscores (_s) themes, WordPress team has tried to solve the SEO issue by using the following code:

<title>< ?php
/*
 * Print the <title> tag based on what is being viewed.
 */
global $page, $paged;

wp_title( '|', true, 'right' );

// Add the blog name.
bloginfo( 'name' );

// Add the blog description for the home/front page.
$site_description = get_bloginfo( 'description', 'display' );
if ( $site_description && ( is_home() || is_front_page() ) )
    echo " | $site_description";

// Add a page number if necessary:
if ( $paged >= 2 || $page >= 2 )
    echo ' | ' . sprintf( __( 'Page %s', '_s' ), max( $paged, $page ) );

?></title>

What it does is formatting the title tag as:

For homepage or front page: Site name - Site description
For other pages: Page title - Site name (and maybe) - Paged

It's ok if we just accept it. But when we go into the code, we'll see it's not very good:

Code is long and make header.php file complicated
There're 2 parts in the code above: one for the current page title, which is echoed by wp_title and one for the site name and description. The not-cool part is this code echoes the additional info (site name and site description) directly
Because of the 2nd reason, it's hard to make the SEO plugins to re-format title meta tag. I've looked into the code of popular SEO plugins such as WordPress Plugin By Yoast and WordPress All-In-One SEO and see both using output buffering to change the page title (Yoast uses in force mode while AIO SEO plugin always does), which may make you out of memory and get "Header sent" error.

So, how to make the code better?

The natural way is using wp_title function , of course. But as I said, it's not enough. So, we'll use a filter to change the output of this function.

First step: just use this piece of code in your header.php file:

< ?php wp_title( '|', true, 'right' ); ?>

< ?php wp_title( '|', true, 'right' ); ?>

You can change the separator (|), and its location (right). The 2nd parameter allows you to echo (true) the title or not (false). For more documentation, please read here.

Second step: using the wp_title filter. This filter accepts 3 parameters: title, separator and its location. Here's my code that use the filter:

add_filter( 'wp_title', 'rw_title', 10, 3 );

function rw_title( $title, $sep, $seplocation )
{
    global $page, $paged;

    // Don't affect in feeds.
    if ( is_feed() )
        return $title;

    // Add the blog name
    if ( 'right' == $seplocation )
        $title .= get_bloginfo( 'name' );
    else
        $title = get_bloginfo( 'name' ) . $title;

    // Add the blog description for the home/front page.
    $site_description = get_bloginfo( 'description', 'display' );
    if ( $site_description && ( is_home() || is_front_page() ) )
        $title .= " {$sep} {$site_description}";

    // Add a page number if necessary:
    if ( $paged >= 2 || $page >= 2 )
        $title .= " {$sep} " . sprintf( __( 'Page %s', 'dbt' ), max( $paged, $page ) );

    return $title;
}

You can see most of the code is similar to the code used by TwentyEleven, so it's not hard to understand. The cool part of this code is that it can handle both left and right position of the separator, e.g. if you write this in header.php, it still works well:

<title>< ?php wp_title( '-', true, 'left' ); ?></title>

(your title format will be Site name - Page title).

This way, you can control your title meta tag for better SEO score, without any plugins!

I highly recommend this method to theme frameworks. It helps not only make the code cleaner, but also allows users to filter the output (using higher priority). That's the way WordPress users always do!

Comments