TYPO3 SEO: The Basics…
In this post I’m going to show you some basics of SEO in TYPO3, I will explain how you can easily handle SEO stuff within TYPO3. This is not a “best practise” nor is it a tutorial on how SEO works. But if you’re new to TYPO3, or SEO in TYPO3 you’ll find some useful things here.
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!)
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/
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…



This is really a great post, thanks! I downloaded the seo_basic extension and it’s really easy. Keep up the good work!
Thank you. You’ve brought me up to date on TYPO3 SEO procedures using some new extensions that I was not aware of.
Best regards
Wonderfull, im new to typo3 and will definitely need this.
Thank you.
Thank you guys… you might also want to read this post:
http://www.typo3-addict.com/2009/09/typo3-seo-combining-graphical-headers-with-text-headers/
It’s a bit more advanced but I think it you’ll like it.
Was very interested to read this article (finally some decent, easily implemented optimisations in English!) but wondered if you could assist with one thing? I already have some typoscript to generate a breadcrumb style title tag but have no idea how to reverse it to take advantage of the SEO gain mentioned above:
page.headerData.1 = HMENU
page.headerData.1.special = rootline
page.headerData.1.1 = TMENU
page.headerData.1.1.wrap = |
page.headerData.1.1 {
noBlur = 1
NO.linkWrap = | :: |*||*| |
NO.doNotLinkIt = 1
NO.stdWrap.htmlSpecialChars = 1
}
page.headerData.1.doNotLinkIt = 1
page.headerData.1.wrap = |
Any ideas?
Hi Jangla,
This can be done by using the following patch:
http://bugs.typo3.org/view.php?id=6637
This will add a TypoScript feature:
special = reverseOrder
It should be in the core of TYPO3 4.3
I’ve just tried using the defaultHeaderType but had no luck. Possibly because of the way I’m trying to use it :) In order to reduce the amount of work needed to change all the H1 tags in the site, I’m trying to specifically target one content definition that only appears in one template.
I’ve got this code to render the content:
tempinfo.right_pag_sub4 = USER
tempinfo.right_pag_sub4 {
userFunc = tx_jspagination_pi2->main
content = USER
content {
defaultHeaderType = 2
userFunc = tx_tsvoila_pi1->main
field = right_column
}
title = TEXT
title.field = title
title.htmlSpecialChars = 1
breaking = FLEX
breaking.field = breaking
subtitle = TEXT
}
… but the H1 tag remains an H1 tag. Any help from anyone – is this even possible to do it this way?
Ah – I’ve found why the above doesn’t work: the defaultHeaderType needs to be set in the constants field and not the setup field. My question therefore is whether it’s possible to achieve the same result in the setup field so I can change it for a single content definition or templavoila template?
Jangla, please go to the TypoScript Template Analyser (Template module). Have a look at line 192 of the css_styled_content setup. Here the Constant ‘defaultHeaderType’ is being loaded. (If not, search for the line). This will probably help you.
Hint:
lib.stdheader.10.key {
field = header_layout
ifEmpty = {$content.defaultHeaderType}
ifEmpty.override.data = register: defaultHeaderType
}
If you need help, please contact me through maarten (at) emaux.nl.
Hi Maarten,
That won’t work as it will change the default header for the entire site – I need to target a single templavoila template.