Custom Page Title

What's in a name? Turns out, quite a lot especially when it comes to page titles. Page titles don't just identify your page in a row of open browser tabs but it's often the first (and maybe only) thing a user will read on a Search Engine Results Page (SERP) before clicking. It can also be the deciding factor for your page to get clicked when it's shared on social networks. 

Custom titles allow you to incorporate strategic keywords, create more engaging browser and search results displays, and ensure that each page accurately represents the specific content and value proposition of your institution.

Typically, the title tag is in the Header Code of the Page Layout and uses the T4 Title Tag to generate the name of the current Section or Content Item. The published title can then be appended with the name of the organization to give the link a context in search results or when shared on social media, e.g., "Study with us | T4 University". This is the most straightforward approach and ensures that all pages have a title tag without any additional effort by users.

Creating custom page titles in Terminalfour

Search Engine Results Pages display the first few words (50-60 characters) of the title. Still, if the name of the current Section is very long, or doesn't make sense out of the context of the Site Structure, you might want to let your users use a custom title.

You can do this using the Section MetaData content type.

Note: If your system doesn’t already have a SectionMetadata content type you can learn how to create one here.

Create a Content Element on your SectionMetadata content type

Add a new element as follows:

This Content Type will place the option for the custom title text on the "General" tab for creating or editing a Section.

Referencing the custom page title in your layouts

You can now use the section Helper to output this custom Page Title as follows:

<title>{{section field="Custom Page Title"}}</title>

However, we need to account for cases where a user hasn’t used a custom page title. In these situations we should fall back to using the Section Name as follows:

{{#if (section field="Custom Page Title")~}}
  <title>{{section field="Custom Page Title"}}</title>
{{~else~}}
  <title>{{sectionName}}</title>
{{~/if}}

Note: The ~ character is used here to avoid excess whitespace from being published.

Titles on Fulltext Content Pages

Published pages tend to use the name of the current Section, but this can be problematic for Sections with multiple fulltext Content Items. When published, all pages will have the same title. To ensure that each fulltext page has a unique title, we can use Handlebars to check whether we’re on a fulltext page, and if we are, append an element from the Content Item into the title.

In this case, all fulltext Content Types must have the same element name to append to the Title. In this example we’re asing an element called “Headline” but you can update this to reference the name of the element used in your Content Types.

{{#fulltext~}}
  {{~#if (section field="Custom Page Title")~}}
    <title>{{section field="Custom Title"}}: {{publish element="Headline"}}</title>
  {{~else~}}
    <title>{{sectionName}}: {{publish element="Headline"}}</title>
  {{~/if~}}
{{~else~}}
  {{~#if (section field="Custom Page Title")~}}
    <title>{{section field="Custom Page Title"}}</title>
  {{else}}
    <title>{{sectionName}}</title>
  {{~/if~}}
{{~/fulltext}}

Note: The ~ character is used here to avoid excess whitespace from being published.

How this works

The fulltext Block level expression allows us to know if we're viewing a fulltext of a page.
If we are, we check if the SectionMetaDescription has a field called "Custom Page Title" and it is set, so we can output that.

Because we now know we are in a fulltext page we have access to the elements of the Content Item from within our Page Layout which is something that isn't possible using T4 tags. This allows us to use the publish Helper to output the Headline element of the fulltext content type.

Finally, If we're not in a fulltext page we simply output the Custom Title if it exists, otherwise we output the section name.

Other Meta Tags

Apart from the title, you can also configure additional meta tags for Open Graph and Twitter sharing. These can be mapped to Content Items so content authors don't have to add them to each page manually.

Search Engine Optimization (SEO) Tips for Title Tags

Here are a few tips for optimizing title tags for search engines:

1. If title tags are longer than approximately 6 words (around 60 characters), search engines may only display the beginning of the title, followed by an ellipsis. Make sure that the most important text is up front and put the organization's name at the end. For example, use "Masters Degree in Communications and Media Studies | T4 University" rather than "T4 University | Masters Degree in Communications and Media Studies".
2. The length of the title displayed on search results is usually based on pixels and not necessarily the number of characters. Reduce the number of pixels by using a pipe separator (|), rather than a hyphen (-), angle bracket (>), or an ellipsis (...).
3. If the title text does not match the content on the page or is too long, a search engine might change the title displayed in search results. Ensure that the title concisely matches the page's content.
4. Don't have empty title tags. At the very least, make sure that the Section name or Content Item name (for fulltext pages) is used for the title so that if a user does not enter a custom title or content, the page will still have a title.
5. Ensure that each page has a unique title. This is often a problem for fulltext pages, where Section names are used, so make sure to account for fulltext titles when building the title.
6. Use an SEO Tool to test your site and provide valuable feedback. Terminalfour has a built-in SEO report, or third-party tools are available (some are even free).

Do you have any other ideas and tips? Why not share them with us using our feedback form, or on our Slack community, and we can add them here.