How to Implement a Custom Title Tag | Strategic Communications and Marketing

Importance

Title tags help search engines understand what a page is about. More importantly the title tag denotes to what a page will contain and where that page is in the information architecture of a website and the Illinois system as a whole.

Target Audience

Web Dev/IT
User experience professionals

Definitions and Brand Guidance

Title tag is the HTML code tag that allows you to give a web page a title. This title can be found in the browser title bar as well as in the search engine results pages.
The Web Design and Navigation page outlines the brand recommendation for title tags using two or three identifiers.

Instructions

For publish.illinois.edu websites or WordPress or Drupal Illinois theme pages, this implementation will be automatic.

Method 1: Manually edit static HTML

For a static HTML website you’ll want to manually edit the title tag on all of your pages. You can find it within the head tag of your code.

<!DOCTYPE html>
<html>
<head>
<title> Enter your H1 Here | Enter your website title here | Illinois </title>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

For this method users will have to complete this task on every page they create.

Method 2: Use a WordPress plugin called Yoast SEO

There are several WordPress plugins that can accomplish this for you with a fresh WordPress install or in addition to the Illinois theme. The plugin instructions in this article pertain to Yoast SEO: this plugin is primarily used for search engine optimization but can also be a tool to dynamically modify the title tags on a WordPress website. This is only applicable to the three-identifier layout, H1 | Site title | Illinois.

NOTE: Always use your discretion when picking a plugin and installing it on your website. Plugins can be a security risk to your website if they aren’t reputable and/or updated regularly.

To download the plugin:

Go to your WP dashboard under plugins > install new plugins.
Type Yoast SEO install and activate it.
Once it is active you will see a Yoast SEO tab in your WP dashboard. Navigate to this tab and complete the first-time configuration.
In the WP dashboard you should now be able to select Yoast SEO > Settings > Site Basics.
In the Site Basics settings, ensure the website name, alternate name and tagline have the text you expect or leave it blank. For the title separator click the bar “|” and save your changes.

Once you complete the site basics you can navigate to the content types and change the settings for both posts and pages to reflect the title tag you would like to see.

In the SEO title section there will be variables preloaded in the text box.
You can hit the “insert variable” button to see the variable options you have and you can also type in custom text that will appear on each page.
To achieve the H1 | Site Title | Illinois title tag I, insert the variables in this order: “Title”, “Page”, “Separator”, “Site title”, “Separator”.
At the end, type Illinois as plain text in the box.

Save the changes and repeat for the post settings, if applicable.

Method 3: Use PHP in WordPress to update dynamically using a function

This function is able to pull your website’s H1, the category your page is under in the menu, the site title and Illinois. See our title tag section for examples.

Note that this code uses functions like get_the_title(), get_bloginfo(), and wp_get_post_parent_id(). These functions are specific to WordPress and won’t work in other CMS environments. See the next method for similar results in Drupal.

You need to ensure that this code is placed in the correct theme file or incorporated into WordPress’s theme system appropriately. You will want to pull in the function in place of any custom text in your page’s title tag.

function get_custom_title() { 

    $title = ''; 

    // Get the H1 for the page 

    $h1 = get_the_title(); 

    // Get all ancestor menu items 

    $ancestor_menu_items = get_all_ancestor_menu_items(); 

    // Get the website title 

    $site_title = get_bloginfo('name'); 

    // Assemble the custom title 

    if ($h1) { 

        $title .= $h1; 

    } 

    if (!empty($ancestor_menu_items)) { 

        // Filter out the current page title from ancestor items 

        $ancestor_menu_items = array_filter($ancestor_menu_items, function ($item) use ($h1) { 

            return $item !== $h1; 

        }); 

        $title .= ' | ' . implode(' | ', $ancestor_menu_items); 

    } 

    if ($site_title) { 

        $title .= ' | ' . $site_title; 

    } 

    // Append " | Illinois" to the end 

    $title .= ' | Illinois'; 

    return $title; 

} 

function get_all_ancestor_menu_items() { 

    $ancestor_menu_items = array(); 

    // Get the current page ID 

    $current_page_id = get_queried_object_id(); 

    // Start with the current page 

    $parent_id = $current_page_id; 

    // Loop through ancestor menu items until there are no more 

    while ($parent_id) { 

        $ancestor_menu_items[] = get_the_title($parent_id); 

        $parent_id = wp_get_post_parent_id($parent_id); 

    } 

    // Reverse the array to have the top-level ancestor first 

    $ancestor_menu_items = array_reverse($ancestor_menu_items); 

    return $ancestor_menu_items; 

}

Method 4: Use PHP in Drupal to update dynamically using a function

You will need to make sure that this basic example is placed in the correct theme file or incorporated into Drupal’s theme system appropriately. You will want to pull in the function in place of any custom text in your page’s title tag.

function get_custom_title() { 

    $title = ''; 

    // Get the H1 for the page 

    $h1 = drupal_get_title(); 

    // Get all ancestor menu items 

    $ancestor_menu_items = get_all_ancestor_menu_items(); 

    // Get the website title 

    $site_title = variable_get('site_name', ''); 

    // Assemble the custom title 

    if ($h1) { 

        $title .= $h1; 

    } 

    if (!empty($ancestor_menu_items)) { 

        // Filter out the current page title from ancestor items 

        $ancestor_menu_items = array_filter($ancestor_menu_items, function ($item) use ($h1) { 

            return $item !== $h1; 

        }); 

        $title .= ' | ' . implode(' | ', $ancestor_menu_items); 

    } 

    if ($site_title) { 

        $title .= ' | ' . $site_title; 

    } 

    // Append " | Illinois" to the end 

    $title .= ' | Illinois'; 

    return $title; 

} 

function get_all_ancestor_menu_items() { 

    $ancestor_menu_items = array(); 

    // Get the current page ID 

    $current_page_id = arg(0); 

    // Start with the current page 

    $parent_id = $current_page_id; 

    // Loop through ancestor menu items until there are no more 

    while ($parent_id) { 

        $ancestor_menu_items[] = drupal_get_title($parent_id); 

        $parent_id = menu_get_item($parent_id)['mlid']; 

    } 

    // Reverse the array to have the top-level ancestor first 

    $ancestor_menu_items = array_reverse($ancestor_menu_items); 

    return $ancestor_menu_items; 

}

Method 5: Programmatically update the title tag in Drupal using a hook

You may also be able to override the title tag in the head of your HTML document using the HOOK_preprocess_html:

function mymodule_preprocess_html(&$variables) {

// Change the Title

$variables['head_title']['title'] = 'Title of your page';

// Change the Suffix (website name)

$variables['head_title']['name'] = ' | your site name | Illinois';

}

The result will look like this: Title of your page | your site name | Illinois

Additional Resources

Visit the WordPress Developer Resources for more information on how to customize and edit your WordPress website.

Yoast.com has a support page for help and more information about their WordPress plugin.

Visit Drupal.org for the most up to date information on how to edit and update your Drupal website.

Contact

Sydney Flowers, Front End Web Developer, sydbeth@illinois.edu