Will man zum Zwecke der Suchmaschinenoptimierung im HTML Header Meta-Angaben wie Keywords oder Description auf einer Typo3 basierten Webseite darstellen, genügen wenige Handgriffe im Typo3-Template.

TypoScript für das Typo3 Seitentemplate

page.meta.keywords.field = keywords
page.meta.description.field = description

Einstellungen für die Seite

Nachdem Sie diese Einstellungen vorgenommen haben, werden die von Ihnen im Backend für den Menüpunkt spezifizierten Angaben an der entsprechenden Stelle im Header der Seite dargestellt.
Setzen Sie hierzu bei den Seiteneigenschaften den Typ auf “Erweitert” – so erhalten Sie weitere Felder dargestellt. Die Meta-Keywords werden in das Feld “Stichworte” eingegeben, die Meta-Description in das Feld “Untertitel” “Beschreibung” (Achtung nicht in das Feld “Inhaltsangabe”).

Update 18.11.2009: “Untertitel” durch “Beschreibung” ersetzt. Vielen Dank an Kurt Kunig: http://www.kupix.de/

Für die auf Typo3 basierenden Internetseiten eines Kunden wollte ich zur Suchmaschinenoptimierung elegante URLs verwenden. Erste Wahl zur Lösung dieses Problems ist grundsätzlich die Verwendung von RealURL – was aber in vielen Fällen nur wenig Sinn macht, weil der Konfigurationsaufwand sehr hoch sein kann.

Zweite Wahl war dann die Verwendung von Simulatestatic – hier wird allerdings in der Standardkonfiguration immer “.[ID].[TYPE]” angehängt. Dies würde also z.B. “suchmaschinenoptimierung.32.0.html” oder gar nur “32.0.html” ergeben, was natürlich nicht sonderlich ästhetisch ist.

Dennoch lässt sich Simulatestatic verwenden um aus “index.php?id=32″ die URL “suchmaschinenoptimierung.html” zu machen. Vollziehen Sie einfach die folgenden Schritte in Ihrem Typo3 CMS:

1. Typo3 Template Setup für SimulateStaticDocuments

config.simulateStaticDocuments = 1
config.simulateStaticDocuments_noTypeIfNoTitle = 1

Wichtig ist hierbei, dass die Option “config.simulateStaticDocuments_addTitle” nicht verwendet wird, da Sie die Option config.simulateStaticDocuments_noTypeIfNoTitle überschreiben würde.

Nachdem Sie diese Einstellungen vorgenommen haben würde unsere Beispiel-URL wie folgt aussehen “32.html” – dies entspricht natürlich noch nicht dem gewünschten Ergebnis.

2. Vergabe eines Alias in den Seiteneigenschaften

Nun können Sie einfach bei den Seiteneigenschaften unter dem Punkt “Seitentitel” einen frei wählbaren Alias vergeben – am besten ganz unten “zweite Optionspalette anzeigen” anhaken, dann erscheinen die weiteren Optionen unter den Hauptoptionen. Dieser Titel wird dann für die Generierung der URL verwendet. Geben wir also bei unserer Beispielseite als Alias “suchmaschinenoptimierung” ein, lautet die URL für diese Seite “suchmaschinenoptimierung.html”.

3. Fehlerquellen und Nachteile

Wie so oft im Leben, hat diese Vorgehensweise unter Verwendung von SimulateStaticDocuments (insbesondere gegenüber der Verwendung von RealURL) den Nachteil, dass keine “Pseudo-Unterverzeichnisse” generiert werden können – URLs wie “diensteistungen/suchmaschinenoptimierung.html” lassen sich auf diese Weise leider nicht erzeugen. Allerdings sei an dieser Stelle angemerkt, dass Google “Flache” Seiten mit weniger tiefen Unterverzeichnis-Strukturen schneller indiziert und besser findet.

Aufgrund der fehlenden Unterverzeichnis-Möglichkeiten kann es natürlich vorkommen, dass ein Alias versehentlich für zwei Seiten vergeben wird. Dieses Problem wird von Typo3 klammheimlich abgefangen, so dass der Seitenalias automatisch auf alias[i] geändert wird. Lege ich also eine zweite Seite mit dem Alias “suchmaschinenoptimierung” an, wird der Alias von Typo3 beim Speichern automatisch auf “suchmaschinenoptimierung0″ geändert – was eventuell nicht so schick ist. Allerdings kann man den Alias völlig problemlos in etwas bezeichnenderes – zum Beispiel “suchmaschinenoptimierung-fuer-fortgeschrittene” ändern.

4. Achtung bei bereits indizierten Seiten!

Möchten Sie diese Änderungen vornehmen, haben aber schon eine große Anzahl Seiten im Google-Index, müssen Sie Google mitteilen, dass die bisherigen Seiten auf die neue Schreibweise “umgezogen” sind, da Sie sonst den bestehenden PageRank und entsprechend Ihre Position auf den Ergebnisseiten der Suchmaschine (SERP) verlieren können.

5. Anregungen oder Probleme

Falls Ihnen dieses kurze How-To geholfen hat, oder Sie noch eine Frage haben zögern Sie bitte nicht, einen Kommentar zu schreiben. Möchten Sie Ihre Webseiten auf diese Art optimieren lassen kann ich diese Arbeiten natürlich gerne für Sie vornehmen – kontaktieren Sie mich einfach per Email.

Kunde

Die Agentur Netprofit Webseitenoptimierung von Robert Hartl fragte mich an, ob ich Interesse an der Realisierung eines Online-Shops für einen ihrer Kunden hätte.

Ich hatte.

Anforderungsprofil

Der Kunde Winwood vertreibt hochwertige Produkte aus Rosskastanienholz und strebte eine geeignete, suchmaschinenoptimierte Präsenz als weiteren Vertriebskanal an. Es sollten einige Produkte angeboten werden, die durch die Seitenbesucher in einen Warenkorb abgelegt werden können und anschließend auf Rechnung bestellt werden können.
Änderungen an den Inhalten der Seiten sowie an den Produkten wollte der Kunde selber vornehmen können.

Ergebnis

Winwood ShopAuf der Basis des Content Management Systems Typo3 sowie der Extension tt_products steht dem Kunden nun ein vollständig selbst administrierbarer Online-Shop zur Verfügung. Es können nach Belieben neue Produkte und Produktkategorien ergänzt werden. Auch die Inhalte können über das Typo3 Backend komfortabel gepflegt werden.

Die Seiten des Kunden finden Sie unter:

• http://www.winwood.at

Realisation

Erstellung des Typo3 Templates

Nach Erteilung des Auftrags und Übermittlung der PDF-Vorlage wurde innerhalb von zwei Werktagen ein statisches Template gestaltet und vom Kunden abgesegnet. Anschließend wurde das Template für die Verwendung im Typo3 CMS angepasst.

Einpflege der Inhalte des Kunden

In den folgenden Tagen wurden sukzessive die Inhalte – die teilweise bereits als PDF vorlagen – eingepflegt.

Realisation unterschiedlicher Spaltenbreiten

Da die Vorlage auf den einzelnen Unterseiten unterschiedliche Spaltenbreiten vorsah, wurden im CMS hierfür verschiedene “Extension Templates” angelegt, die den entsprechenden DIV-Containern zusätzlich zur “class” auch eine “id” übergeben die so eine differenzierte Formatierung per CSS ermöglichen.

Implementierung der Extension tt_products

Zur Integration der gewünschten Shop-Funktionalität entschied ich mich für die Verwendung der Extension tt_products. Der Menüpunkt Produkte verlinkt auf die Produkt-Einzelseite des wichtigsten Produkts des Kunden eine Rosskastanienmatte – die restlichen Produkte können über eine weitere Navigation angesteuert werden.

Interesse?

Falls Sie Interesse an der Realisation eines ähnlichen Projektes haben, stehe ich Ihnen gerne zur Verfügung. Schreiben Sie mir einfach eine Email!

Anforderungsprofil

Die Seiten sollten durch ein Content Management System bereitgestellt werden, um dem Kunden die nachträgliche Pflege der Seite – insbesondere der Ansprechpartner und Produktseiten – ohne Kenntnisse von HTML zu ermöglichen. Darüber hinaus sollten die Standorte des Kunden über eine Google Maps-Karte in die Internetpräsenz integriert werden sowie eine Liste mit Ansprechpartnern und Abteilungen angelegt und gepflegt werden können.

Ergebnis

Manzke Website Dem Kunden steht nun eine selbst administrierbare Interntepräsenz in standardkonformen XHMTL 1.0 Strict zur Verfügung. Das Layout orientiert sich am Corporate Design und den Firmenfarben. Die Wahl des Content Management Systems fiel auf Typo3, da es sich gerade für solche Projekte hervorragend eignet, keine Lizenzkosten anfallen und eine Unmenge an Modulen und Add-Ons zur Verfügung stehen.
Die Seiten sind unter http://www.manzke-gruppe.de zu erreichen.

Features

Google Maps Integration

• Typo3 Content Management System
• Erweiterung bzd_staff_directory zur Darstellung der Mitarbeiter und Abteilungen
• Integration von Google Maps in die Seite über die von Google bereitgestellte API
• Routenplanung mit Typo3 via Google Maps
• W3C Standardkonformes XHTML 1.0 Strict
• CSS 2.0

Interesse an einem ähnlichen Projekt?

Gerne helfe ich Ihnen Ihr Internet-Projekt zu realisieren. Wenden Sie sich einfach an mich.

Obwohl Typo3 Templates sich mit css_styled_content schon sehr detailliert mit CSS formatieren lassen, ist es mit css_styled_contend standardmäßig nicht möglich, via CSS die einzelnen Content Elemente anzusteuern. Wenn man zum Beispiel bei Typo3 erreichen will, dass sich um jedes Inhaltselement ein Rahmen befindet, muss man einen Container um jedes einzelne Content-Element legen. Diesen kann man dann anschließend mit CSS formatieren.

Einen Container mit der Klasse “content-element” wird mit folgender Zeile im Setup des Typo3 Templates um jedes Inhaltselement gelegt:

tt_content.stdWrap.dataWrap = <div class="content-element"><a id="c{field:uid}"></a>|</div>

anschließend kann dieser Container mit CSS formatiert werden.

Diese vorgehensweise ist natürlich erheblich effizienter als die Datei typo3/sysext/css_styled_content/setup.txt zu editieren, da Änderungen dort bei einem Update der Typo3 Version verloren gehen könnten.

Im Zuge eines Relaunches des Internetauftritts des Aeroclub Heidelberg wurde das Design der Seite überarbeitet sowie der Inhalt auf das Content Management System Typo3 portiert.

Ergebnis

www.aec-hd.deNach Abschluss der Arbeiten stand dem Aeroclub eine eigenständig administrierbare Plattform zur Information von Mitgliedern und Interessenten zur Verfügung.
Durch die Verwendung des CMS Typo3 ist es nun möglich aktuelle Meldungen im News-Bereich zu ergänzen sowie die Inhalte der Seite zu überarbeiten und neue Menüpunkte hinzuzufügen. Darüber hinaus gibt es auf den Seiten nun einen internen Bereich, der ausschließlich den Mitgliedern des Vereins noch vorangegangenem Login vorbehalten ist.

Programmierung in XHTML und CSS

In Zusammenarbeit mit den Designern des Layouts wurde das neue Aussehen der Seite als Template für Typo3 umgesetzt. Besonderer Wert wurde hierbei auf dynamische Elemente wie Navigationsstrukturen gelegt, so dass sich Änderungen im Typo3 Backend ohne einen Webdesigner hinzuziehen zu müssen auf das Frontend auswirken. So können zum Beispiel beliebig viele neue Menüpunkte ohne Kenntnis von HTML durch das entsprechnnd Zuständige Mitglied ergänzt werden.
Das Layout lag ursprünglich als Bilddatei vor und wurde von mir anschließend in XHTML und CSS programmiert. Falls Sie Interesse an einer ähnlichen Dienstleistung haben können Sie mich gerne jederzeit kontaktieren.

Link

http://www.aec-hd.de

Im Internet gibt es einige nützliche Ressourcen für fertig gestaltete Joomla und Mambo Templates:
http://www.joomlaos.de/joomla_template_galerie.html
http://www.joomlademo.de/

Wünschen Sie die Erstellung eines Templates für Joomla aus einer von Ihnen bereitgestellten Bild-Datei (z.B. Photoshop) können Sie sich gerne jederzeit an mich wenden. Die Erstellung eines derartigen Templates stelle ich pauschal mit 399,- Euro in Rechnung.