May 31, 2007

Typo3 CMS SEO (Part 1): Title Tags

Part one of a ten part series: Typo3 SEO

Perhaps the single most important search engine optimization (SEO) best practice is making sure that each page in your site has unique, keyword-targeted search terms in the title tag of the web page’s HTML header. There’s even evidence to suggest that having duplicate titles on many pages severely limits a search engine spider’s ability to rank your pages – since at first glance, all the pages appear similar. On smaller sites, customizing your title tag is not hard to do. However, on a larger site that requires a content management system (CMS), with hundreds or even thousands of pages, this task could prove challenging. Yet, not so with Typo3. Here are a few simple options:

OPTION 1: Use Typo3’s Default Page Titles

With Typo3, the default page titles are automatically configured to be relevant and unique, according to the following format:

[SITETITLE] : [PAGETITLE]

The only thing you’ll need to do is specify the SITETITLE field, found in the main template information record of your site:

Then, each time you create a page, you’ll be required to specify a PAGETITLE under Edit Page Properties, as such:

Based on the above input, Typo3 will generate the following title tag:

<title>Dawson Interactive: Services</title>

And if I were to add an additional page, with the page title, “About”, Typo3 will generate the following title tag:

<title>Dawson Interactive: About</title>

OPTION 2: Add Some Customization to Typo3’s Default Page Titles

However, what if on occasion we needed to make the page title more keyword specific without changing the navigational title? Well, one way to do this is to tell Typo3 to use the SUBTITLE field instead. For instance, for our “Services” page above, suppose we preferred the title tag to read “Services and Solutions”. Here’s how to accomplish this:

First, just add the following Typoscript code to your Setup:

### CUSTOM PAGE TITLE
# suppress default title tag
config.noPageTitle = 2
# declare a page header text object
page.headerData.10 = TEXT
# use page subtitle field first; otherwise use page title field
page.headerData.10.field = subtitle // title
# wrap the field with the following
page.headerData.10.wrap = <title>Dawson Interactive: |</title> 

Then, customize the “Services” page by modifying the SUBTITLE field under Page Properties:

As a result, Typo3 will generate the following title tag:

<title>Dawson Interactive: Services and Solutions</title>

Also notice that changing the last line of the above Typoscript setup, you can achieve all sorts of custom title tag options. In this case, special characters:

page.headerData.10.wrap = <title>Dawson Interactive &#187; |</title>

Renders:

<title>Dawson Interactive » Services and Solutions</title>

Or, consider changing the order of things:

page.headerData.10.wrap = <title>| at Dawson Interactive</title>

Renders:

<title>Services and Solutions at Dawson Interactive</title>

OPTION 3: Getting Even More Fancy by Installing the Browser Page Title Extension

If you require even greater dynamic customization (with multi-lingual capability), I would recommend trying out the Browser Page Title (browser_page_title) extension. The purpose of this extension is to give you even greater flexibility to control the output of the title tag. You can easily specify a default title with dynamic fields, or use the BROWSER PAGE TITLE field to manually override your default setting. Very handy indeed. Here’s my current setup:

# Title Tags - EXT:browserpagetitle
includeLibs.tx_browserpagetitle = 
typo3conf/ext/browser_page_title/class.tx_browserpagetitle.php
config.titleTagFunction = tx_browserpagetitle->getTitle
plugin.browser_page_title {
   defaultTitle = Dawson Interactive | {title}
   currentTitle = Dawson Interactive | 
   {tx_browserpagetitle_browser_title}
}

So, for my “Services” page, the default output is:

<title>Dawson Interactive | Services</title>

Yet to customize this as before, in Edit Page Properties, with the Browser Page Title extension installed, you’ll see a new field opened up in the backend, called “Browser Title”. Here, I simply specify what I want the browser title to be. In this case, “Services and Solutions”:

And the output is instead:

<title>Dawson Interactive | Services and Solutions</title>

Very simple. And with just a few small tweaks to the defaultTitle and currentTitle values above, you can achieve many different custom combinations:

static string 1
static string 1 - {dynamic field}
static string 1 - {dynamic field} - static string 2
{dynamic field}
{dynamic field} - static string 2
etc...

OPTION 4: Customizing the Page Title Based on the Navigation Level

The Typo3 framework is so flexible, the possibilities are limitless. So I’ll offer one more. Here’s a handy modification to option 2 (above) which allows you to specify custom page titles based on the level of navigation.

For example, suppose you had a directory site (like www.homeinsurancesites.com), with pages for major cities and states, with the following site structure:

www.homeinsurancesites.com
    Alabama
        Birmingham
        Mobile
        Montgomery
    Alaska
        Anchorage
        Fairbanks
        Juneau
    Etc…

Now suppose you needed to include the city and state name in the title of the respective page. No problem with Typo3. By combining a few conditional statements with the custom header option, we get the following configuration:

### CUSTOM PAGE TITLE
# suppress default title tag 
config.noPageTitle = 2
# declare a page header text object
page.headerData.10 = TEXT
# declare that we’ll be inserting custom data
page.headerData.10.insertData=1
# wrap the custom data with the following
page.headerData.10.wrap = <title>|</title>
# if homepage is selected
[treeLevel = 0]
page.headerData.10.value = Home Insurance Sites – Welcome!
# if state level is selected
[treeLevel = 1]
page.headerData.10.value = Homeowners Insurance Sites 
in {leveltitle:1}
# if city level is selected
[treeLevel = 2]
page.headerData.10.value = Homeowners Insurance Sites 
in {leveltitle:2}, {leveltitle:1}
# ending all conditionals
[END]

This configuration results in the following output:

www.homeinsurancesites.com  -> <title>Home Insurance Sites – Welcome!</title>

www.homeinsurancesites.com/alabama  -> <title>Home Insurance Sites in Alabama</title>

www.homeinsurancesites.com/alabama/montgomery -> <title> Home Insurance Sites in Montgomery, Alabama</title>

Next article in this series:

Page URLs - Generating simple, keyword specific URLs with Typo3

Is your CMS SEO-friendly? The following checklist will help you determine the capabilities of your...

TYPO3 would do well to learn from the growing success and core strenghs of Wordpress

If you're looking for a quality and affordable web hosting provider, look no further. Web Hosting...