I took the Integrator Exam a couple of weeks ago in Brussels, Belgium at the FOSDEM conference. The english e-book version of the original TYPO3 Integrator Exam book (Patrick Lobacher) was a real help. Not only does it help you to prepare for your exam, but the clear and complete answers are also a good way to learn TypoScript by examples. I recommend this book for everyone who works with TypoScript, weather you take the exam or not.

In this tutorial I’m assuming you already have a website. You also need 2 or more languages. In this case we have our default language (English) with two other languages (Dutch and German). If you do not have these languages you might want to make them first, else the tutorial won’t be correct. To check your languages go to the List module, click on the root (world-icon) of the TYPO3 installation and see if there are ‘Website Languages’. (See screenshot 1)

Screenshot 1. Click to enlarge!

Got your languages? Good! Now where can we find this wonderful module? The Localization Overview module can be found within the Info module.

1. Go to the Info module in the left main menu.
2. Select the rootpage of your website.
3. Select 'Localization Overview' from the top dropdown menu.

You’ll now see an overview of your pages with the default language pagetitles, and perhaps the pagetitle you already translated.

Screenshot 2. Click to enlarge!

As you can see in the screenshot column 3 and 4 are the Dutch and German pagetitles and still empty. To translate the default pages into a new language we now check all pages we want to translate and hit the ‘Create new translation headers’ button. This way we can translate all pages in 1 screen!

Screenshot 3. Click to enlarge!

The edit screen allows you to insert a new pagetitle for the (in this case Dutch) language. You can also hide the page of choose a different language you want to translate but these options aren’t relevant in this tutorial. Once you’ve inserted all your new pagetitles save the page.

Beware that your TYPO3 login expires by default after 1 hour!
This should be no problem with TYPO3 4.x but it doesn't hurt to
save regularly when inserting many new pagetitle! Better to save
3 times than ending up expired and start all over again...

Once your done and saved the page you’ll return to the Localization Overview page. I would recommend inserting 1 language at a time, this way you don’t need to keep switching languages in you head or make sure you enter the right language into the right field.

Screenshot 4. Click to enlarge!

I hope this tutorial was clear and helpful. If you have any questions don’t hesitate to ask.

Note: If you don't know anything about a 301 redirect
please read the grey box at the bottom of the article!

Redirecting a page using 301

In this tutorial we have 2 pages: a news list page and a news single page

http://www.your-website.com/old-news-page/

http://www.your-website.com/news/

Now, since both page 1 and 2 are well indexed in Google and there are several inbound links we don’t want to delete either of them. Yet the first news item had become obsolete and we want to redirect all these inbound links to another page.

If we delete the first page the visitor will end up with a 404 page. A 301 redirect could redirect the first pages to another page, and this is Google friendly too! So… how to do this?

1. In the backend, go the 'info' module in the left main menu.
2. Select the rootpage of your website.
3. Choose "Speaking Url Management" from the dropdown menu.
4. Choose "Error log" from the second dropdown menu.

You should now see a list of url errors:

Click to enlarge!

It seems the page ‘old-news-page’ has been requested by a visitor but could not be found. To make sure this won’t happen again we are going to redirect this page to our new page: ‘news’. As you can see, there’s a little button called ‘set as redirect’. Click this button to set the redirect for this url. You should now see the following screen:

Click to enlarge!

In the screenshot above I’m redirecting the page ‘old-news-page’ to the new page: ‘news’. As you can see I activate the ‘Send “301 Moved permanently” header’ checkbox. Now TYPO3 will make the redirect a 301 redirect!

1. Set the old url (this way it's set automatically)
2. Set the new page
3. Save the redirect
4. Go to http://www.your-website.com/old-news-page/
5. TYPO3 will redirect you to http://www.your-website.com/news/
6. Redirect succesful!

Now let’s see how we can make this work for tt_news!

Redirecting a tt_news record using 301

When you delete a news record and try to visit it you’ll end up with a ‘no news id’ error. The RealURL Management Error Log does not register this error! So, we need to manually set the redirect.

In this case we have 2 news records:

http://dev.emaux.nl/news/news-single/article/example-news-record/

http://dev.emaux.nl/news/news-single/article/new-news-record/

To redirect news record 1 to news record 2, please follow the following steps:

1. In the backend, go the 'info' module again.
2. Select the rootpage of your website.
3. Choose "Speaking Url Management" from the dropdown menu.
4. Choose "Redirects" from the second dropdown menu.

We're back at the second screenshot above!

5. Click '+ New entry'
6. Set the url which no longer exists
7. Set the new url to which you want to redirect
8. Check the 301 checkbox
9. Save and enjoy!

Click to enlarge!

That’s it, your done! Repeat this procedure for all news items you delete. Hope this tutorial was clear and helpful. If you have any questions don’t hesitate to ask.

What is a 301 redirect?

A 301 redirect is a redirect which uses a 301 http-header code.
This code tells search engines the page is no longer available
at the given location but is 'permanently moved' to another
location. The resource (e.g. search engine) should use the new
URL in the future instead of the old URL. In real life this would
mean the old page should be replaced by the new page upon
re-indexing.

This is a good thing! Now the search enige realizes the old page
doesn't contain the information which is being looked for. The
new page does, so your pageranking is preserved. A win-win
situation: We happy (pageranking preserved), seach engine happy
(page contains good information) and visitor happy (finds the
information it's looking for).

Basic no. 1: A clean source code.

A clean source code makes it easier for search engines to crawl your website. For that, you need to clean up the default HTML output done by TYPO3. Use this line of TypoScript a put it in your template Setup section:

# Clean up prefixes in source code
config.disablePrefixComment = 1

This will clean up the prefixes made with every content-element. This should be a relief! For a more complete cleanup please go to this post.

Basic no. 2: Make you headers better.

By default, every content-element header is a <h1> header in TYPO3. For your SEO it’s better to just have one <h1> tag per page. To convert all these <h1> tags into <h2> tags you need to put the following line in your template Constants section:

# Convert default H1 tags into H2 tags
content.defaultHeaderType = 2

You can now add a <h1> tag manually to the page, or generate one dynamically using TypoScript.

Basic no. 3: Images.

By default, images which are scaled, croped or in any other way modified by TYPO3 are given a random name. For example:

/typo3temp/pics/b3e43c4bb3.jpg.

By installing the extension: fl_realurl_image, your images will get a nicer name. Install the extension and you’re done. Images will now be named like:

/typo3temp/fl_realurl_image/your_image.jpg

Basic no. 4: Page title.

The pagetitle is important for your SEO ranking. This title needs to summerize the pagecontent as close as posible. I suggest you manually edit these to your needs. Someone (can’t rememer the name, sorry) once told me: Use an inverted breadcrumb path as a pagetitle. The theory behind this: People think about their page names, the lower in the pagetree the more specific. If you invert this you have a pretty close to content path and also the main keywords which people interested in this subject will search for.

Basic no. 5: URL’s.

The default URL’s of TYPO3 are not readable, the solution to this problem is RealURL. Since this extension is really popular I’m not going to explain it, this has been done more than enough times. Just search the web for a good tutorial. I can recommend the extension “danp_realurlconfigurator” though, which gives you a nice configurator.

Basic no. 6: Description and meta tags.

A really important SEO rule is to have unique page descriptions and meta tags. Since these fields have to match the page content as close as posible it’s only logical to have them in your page configuration. If you edit your page you’ll find the second tab is all about meta data. Here you can fill in the description and meta tags for your page. To actually use these field in the frontend source code you’ll need to following lines in your template Setup section:

# This will activate the page meta data
page.meta.keywords.field = keywords
page.meta.description.field = description

Basic no. 7: An XML sitemap for Google Webmaster Center.

If you want Google to track your page changes and crawl them accordingly you can submit a XML sitemap. If you do not know what a XML sitemap is please read this first. There are a couple of extensions to generate such a sitemap dynamically in TYPO3.

Basic no. 8: JavaScript at the bottom of your source.

Deprecated since version 4.3! Use page.includeJSFooter instead.

This might be more of a speed thing rather than SEO, but still… By default TYPO3 will put javascript includes in your header.

-- SNIP: Deprecated snippet --

TYPO3 also generates a default JavaScript which can be removed by putting this line in your template Setup section:

# Remove the default JS file in the header
config.removeDefaultJS = 1

Make sure you copy the content of this file to your custom one before removing it.

Tip: Extension seo_basics

Benjamin Mack has developed an extension (seo_basics) which is really useful. It not only generates the XML sitemap by default, but it also helps you to update the page descriptions and meta tags. Download and install the extension through the extension manager. Once installed, go to http://www.your-website.com/sitemap.xml, you’ll notice it works right out of the box. (If it doesn’t, please check you RealURL configuration). But this is just the beginning. Go to the “info” module and select your root website page. Now, in the drop-down box choose “SEO Management”.

(Update: 17-01-2010: Breaking change in extension update, include static template first!)

Click to enlarge!

Here you’ll see all pages with there url-path, title, description and metatags. Click on the “Edit SEO fields”. Now you’ll notice you can edit all fields of all pages within one screen! Once you start filling in the details you’ll notice the color changes while typing:

Yellow: To little text
Green: Just good!
Red: To much text

If you would like to add META Abstract & Author to seo_basics please look at this post of Michael Cannon: http://www.acqal.com/blog/a/article/add-meta-abstract-author-to-seo-basics/

Click to enlarge!

Hope you liked this post:)

These basics are far from a complete reference but I hope they will be of use. If you’ve got suggestions, please don’t hesitate to comment…

Google Analytics: 126 visits, 248 pageviews
Webalizer: 749 visits, 2169 pageviews

On the same day! How can this be? I read about Webalizer being unreliable due to the fact a visitor can visit from multiple IP’s (proxy) but can that explain this big of a difference? On the other hand I read about GA being unreliably due to the fact it can only track visitors with JavaScript enabled.. but how many people these days don’t have JavaScript?

Neuro Web Design is a very easy to read psychology book which deals with questions like: Why do people decide to buy a product online? and Why do they trust the information a website provides? The book describes how the human brain works and how information and design is stored in our brain. It teaches you how to get peoples attention on a website without them even knowing you’re doing it. This book is really interesting when you want to know how the unconscious brain works and how you can activate it. After you read this book you know how to design a website which will attract the attention of people because you triggered that unconscious part.

Quote from the website of the book on which I totally agree: “You will learn the unconscious reasons for people’s actions, how emotions affect decisions, and how to apply the principles of persuasion to design web sites that encourage users to click. Neuro Web Design is scientific, yet you’ll find it accessible and easy to read”

I suggest you just read the book. You can finish it in half a day and you’ll be surprised by the content and how easy it is to implement these things.

The screenshots shows the ‘server version’, the client version is even half the size. All your client has to do is run the application and give you the unique ID and password. Is not slow either, works like a charm.

The only downside is the pop-up users get after closing the connection, but this only happens in the free version. But since your on the phone anyway it’s not that much big of a deal. Just try it, you’ll love it!

The most easy remote assistance software ever!

By the way: The programm can also tranfer files and has a ‘presentation’ mode, but I haven’t tried them yet. Feel free to post your experiences.

For a client who needed a solid and easy workspace center for multiple writers and publishers I enhanced the default versioning / workspace part of TYPO3. The code is still a bit messy but I’m working on a cleaner version.

We only needed two levels of authorisation instead of three, so in this case the reviewer is also a publisher. Since both the writers and the publisher in this case are not computer whiz kids the screen has to be as clean as posible. Futhermore it is neccessary to quickly see comments writers made for publishers. The pagebrowser now only shows when there actually are more pages neccessary. Only admins can now switch between workspaces because this can only go wrong once it’s set correctly. (The tab is still visible in the screenshot, not in real version)

I also did some changes in the versioning module which can be accessed through the list view by clicking on the version icon, but for now this is just empty since it didn’t add any value for the client and only made things more complicated.

I want to share a screenshot with you guys of a publisher who’s about to check for new changes and perhaps accept them. As you will see this screenshots looks a lot cleaner and easier to use. It’s not The big breakthrough on workspace handling but it’s a start.

Michael Cannon also wrote relevant posts on this subject:
Increase TYPO3 Workspace Relation Limits
Customize the TYPO3 Workspace Notification Messages
NR Easy Workspace

Update:

• Records which are still in “creating” stage are unable to be deleted or rejected.
• Buttons “Preview workspace” and “Publish workspace” are now locallang and are configurable through User TsConfig: workspace.showPublishAll = 1 / workspace.showPreviewLink = 1
• Button “Preview workspace” is now a direct link to the frontend instead of an url-generator.

Click to enlarge!

Before:

After: