We have a good-looking site now. It is pretty and standards-compliant, but not particularly customized. Now we can jump in and start playing with the TypoScript and TemplaVoila templates. We need to update the metadata, but we also need to start adding key design elements like banners and a logo. Like almost everything in TYPO3, there are a lot of ways to add some of these elements. We are going to use TypoScript, to make them more flexible and easier to maintain. We want to make sure that our new elements are easy to update when we want to make changes, but we don't want to have to set the logo on each page.
In this chapter you will be:
- Adding important keywords and description metadata through page properties
- Defining new elements in our TemplaVoila template
- Adding a banner to our page properties
- Adding a current date and timestamp to our template
- Adding dynamic logos to our template
Now that we are getting comfortable working with updating the TypoScript template, we are ready to start diving more into the HTML output generated from the TypoScript and integrating more information from the individual page properties into the template. For example, we can tie the keywords and descriptions section of the page properties to the TypoScript setup so that we output the keywords into the metadata in the head section of our HTML when it is viewed.
Proper metadata such as keywords and description on individual pages can be an important part of our overall strategy for search engine optimization (SEO). By including keywords in our individual pages, we can generate sitemaps for search engines automatically and help new visitors find our website easier.
First, we need to add some keywords and a description in the page properties of our front page. Remember that we looked at the page properties at the end of Chapter 1 when we assigned the TemplaVoila template to our main page. This time we just need to edit the Metadata tab. Add some keywords and a description in the Metadata text areas as shown in the following screenshot:
To see this work right now, we can go ahead and add the following code to the bottom of our TypoScript template setup.
page.meta.keywords.field = keywords page.meta.description.field = description
The nice thing about TypoScript is that it's fairly easy to read even if you're not comfortable writing it from scratch, yet. Anytime that we write page.<something>, we are modifying the page object that TYPO3 is using to build the rendered page. In this case, we are modifying page.meta.keyword and page.meta.description, and TYPO3 already knows where to place those in the rendered HTML output. Finally, the keywords and description values on the right side of the = are the names of the specific fields in the page properties. When the page is generated for output, TYPO3 will pull the keywords and description fields from our page properties, assign them to the page.meta fields, and render the HTML with the new meta tags in the head.
The nice thing about TypoScript is that it's fairly easy to read even if you're not comfortable writing it from scratch, yet. Anytime that we write page.<something>, we are modifying the page object that TYPO3 is using to build the rendered page. In this case, we are modifying page.meta.keyword and page.meta.description, and TYPO3 already knows where to place those in the rendered HTML output. Finally, the keywords and description values on the right side of the = are the names of the specific fields in the page properties. When the page is generated for output, TYPO3 will pull the keywords and description fields from our page properties, assign them to the page.meta fields, and render the HTML with the new meta tags in the head.
If we clear the cache, reload the front page, and view the source code, we see our keywords in the HTML head:
<head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <!-- This website is powered by TYPO3 - inspiring people to share! TYPO3 is a free open source Content Management Framework initially created by Kasper Skaarhoj and licensed under GNU/GPL. TYPO3 is copyright 1998-2009 of Kasper Skaarhoj. Extensions are copyright of their respective owners. Information and contribution at http://typo3.com/ and http://typo3.org/ --> <title>Awesome Site: Awesome Site</title> <meta name="generator" content="TYPO3 4.3 CMS" /> <meta name="keywords" content="typo3, template, awesome, example" /> <meta name="description" content="This is just an awesome page about TYPO3 template goodness." /> <link rel="stylesheet" type="text/css" href="http://typo3temp/stylesheet_42a7d7391a.css" media="screen" /> <script src="typo3temp/javascript_0b12553063.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="fileadmin/templates/reset.css" /><link rel="stylesheet" type="text/css" href="fileadmin/templates/style.css" /> </head>
Using this technique, we've managed to move up our search rankings in about five minutes. That is impressive, but the most important thing we've done is seeing how we can link the dynamically controlled information from the page setup area into our TypoScript template.