How to overwrite WordPress title with TNG page title for better SEO

This is a short hint to further integrate WordPress and TNG. It is common practice for most WordPress themes to display the page, category or post title in the title bar of your browser. A stand-alone TNG installation will do exactly the same of course.

The real challenge is, to overwrite the WordPress title with the particular TNG title whenever TNG information is displayed. I took a look at the HTML source code, and the solution was at the end easier than expected:
Out of the box, the TNG integration plugin hooks into the head section of the HTML and adds the TNG title and also other meta data. But the TNG title is not taken into account, because the hook comes after the WordPress title. Thus, we have two title tags in the header section, and the first one from WordPress and wins.

What we have to do is removing the WordPress title tag from the header. This needs to be done conditionally, because all regular WordPress views shall show page, category or post title as before. I copied the header.php file into the child theme folder. This way, the modification won’t get lost once theme updates are installed. The relevant section is easily identified by the title tag:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<body class="page page-id-332 page-template">
...

Now I wrapped a condition around this line. In this example, 332 is the unique ID of the empty WordPress page, which is used to show the TNG content in WordPress. You can see the ID either in the backend, or also in the body tag of the page. The exclamation mark in front of is_page() inverts the statement: If we are not on page 332, add the WordPress title. Now, the section looks like this:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<?php if ( !is_page( 332 )) { ?>
    <title><?php wp_title( '|', true, 'right' ); ?></title>
<?php } ?>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<body class="page page-id-332 page-template">
...

This is all you need to do. Since there is now only the TNG title tag remaining, the browser will show the TNG information in the title bar.

Schreibe einen Kommentar

Ich akzeptiere