TYPO3 10.4 Upgrade Georgienseite: SEO, Bootstrap, Extensions

Zu Beginn des Jahres 2021 haben wir die Georgienseite auf den neusten technischen Stand in TYPO3 gehoben und ein Upgrade auf die Version 10.4 vollzogen. Damit einher gingen einige technische Anpassungen, vor allem was die Extensions für die Webseite und das Bootstrap Framework anging. Da wir für die Georgienseite knapp vier Jahre zuvor intensiv SEO betrieben haben, waren auch hier einige Anpassungen notwendig. Denn seit der Suchmaschinenoptimierung 2017 sind die von uns in TypoScript programmierten Funktionen in den Programm Core von TYPO3 gewandert. 

TYPO3 Extensions auf dem neuesten Stand

Für die Georgienseite hat Thomas Berscheid seit 2015 mehrere TYPO3 Extensions mit Extbase und Fluid programmiert. Zum einen handelt es sich dabei um eine Extension für Bildergalerien, mit der man im TYPO3 Backend Bilder zu einzelnen Galerien gruppieren und per Flexform ein passendes Layout für die Darstellung im Frontend auswählen kann. Eine andere Extension stellt Reiseberichte in einer Liste mit Sortierfunktionen und einer Suche über JavaScript DataTables bereit. Bei beiden lagen die größten Arbeiten im Frontend, um dieses auf den neuesten Stand zu bringen. Natürlich sind nun die Konventionen zur objektorientierten Programmierung in PHP in diesen Extensions umgesetzt. 

Bildergalerien Extension TYPO3: Extbase, Fluid, Typoscript

Mit Hilfe einer eigenen TYPO3 Extension haben wir Google Maps in die Webseite eingebunden. Es ist möglich, für einzelne Orte Karten im TYPO3 Backend zu hinterlegen. In einer Seite können diese als Plugin eingebunden werden. Seit wir diese Extension 2015 gestartet haben, gab es Anpassungen in Sachen Datenschutz. Um diese auf der Georgienseite umzusetzen, haben wir ein Modul zur Auswahl der Karte ins Frontend integriert. Über ein Fluid Template wird nun die Karte erst dann in die Georgienseite geladen, wenn ein Benutzer bewusst auf den Button zum Laden der Karte klickt. 

Google Maps: TYPO3 Extension ✔ Typoscript, Extbase, Fluid

Den größten Aufwand haben wir mit der Provider Extension betrieben. Man sollte ja eine Webseite alle paar Jahre auf den Prüfstand stellen, ob die Technik noch den aktuellen Anforderungen entspricht. Wir haben dies in den Fluid Templates getan und die Integration von Bootstrap 4.5 voran getrieben. Für die Template Gestaltung der Georgienseite kommt nun auch Font Awesome zum Einsatz.

Navigation über Mega Menu mit Bootstrap und VHS Viewhelper

Bei der Navigation haben wir uns von der Typoscript Version verabschiedet und das Mega Menu mit Bootstrap 4.5 und dem VHS Viewhelper gestaltet. Der Grund dafür ist die intensive Beschäftigung mit dem Thema SEO. Denn die Georgienseite besteht aus fast 400 einzelnen Seiten, die natürlich alle über das Mega Menu zugänglich gemacht werden können. Zusammen mit den Links aus dem redaktionell bearbeiteten Inhalt, der Seitenleiste mit aktuellen Nachrichten und dem Footer kommen da bei vielen Seiten mehr als 400 Links zusammen. An diesem Punkt meckern viele Tools zur Suchmaschinenoptimierung einer Webseite, denn ein Bot kann bei einer solchen Vielzahl von Links ins Stottern kommen. 

Zu diesem Zweck haben wir nun einige Maßnahmen ergriffen. Als technische Maßnahme haben wir die Generierung der Navigation von TypoScript auf den VHS Viewhelper verlagert. Damit haben wir die Möglichkeit, mit Hilfe von Conditions die Darstellung der Navigation zu steuern. Wir haben nun die Anzahl der Links innerhalb der dritten Ebene der Georgienseite auf eine maximale Zahl von fünf Links reduziert und bieten einen zusätzlichen Links zur Übersicht des jeweiligen Kapitels an. Damit haben wir zugleich die Navigation kürzer und damit leichter benutzbar gemacht. 

TYPO3 Navigation: VHS Viewhelper, Fluid Template, Conditions

Damit einher gingen redaktionelle Arbeiten, um die Struktur der Georgienseite aufzuräumen. Redaktionelle Inhalte wie die Linkliste spielen heute kaum noch eine Rolle und sind in den letzten Jahren kaum von Besuchern genutzt worden. Wir haben einige Inhalte der Georgienseite abgeschaltet, entsprechende Umleitungen eingerichtet und mehrere Kapitel umgezogen.

TypoScript Funktionen zur Suchmaschinenoptimierung

Es ist manchmal schade, sich von Dingen zu trennen, in die man mehrere Tage Arbeit gesteckt hat. Auf der anderen Seite genießt man die Vorteil eines Upgrades. Die TypoScript Funktionen, die wir 2017 auf der Georgienseite zur SEO umgesetzt haben, waren ein solcher Fall. 

Mit Hilfe der HeaderData Funktion in TypoScript haben wir Links für das Open Graph Protokoll von Facebook und die Twitter Cards automatisch generiert. Dies galt ebenso für die Generierung des Canonical Links auf der Georgienseite für jede einzelne Seite. Beides ist seit der Version 9.5 von TYPO3 in den Code des Content Management Systems gewandert. Diese beiden Funktionen konnten wir nun abschalten. 

Mit der Integration von Font Awesome Icons in die Webseite und einem neuen Google Font für die Überschriften ergab sich jedoch das Problem, dass die Fonts erst einmal von einem Browser geladen werden müssen, damit die Georgienseite korrekt dargestellt werden kann. Wir haben das Laden durch die Preload Funktion beschleunigt. Dies lässt sich mit der HeaderData Funktionen von TypoScript hervorragend umsetzen.

Font Awesome Icons lokal in TYPO3 Webseite einbinden

SEO Maßnahmen mit TYPO3 10.4

In diesem Zusammenhang haben wir die gesamte Webseite auf den Prüfstand gestellt und per Seobility mehrfach auf SEO hin durchchecken lassen. Als Ergebnis haben wir die Performance der Georgienseite Schritt für Schritt durch einzelne Maßnahmen verbessert. Dies war sehr viel redaktionelle Arbeit, denn die Georgienseite besteht seit Juli 2000, läuft seit Oktober 2014 mit TYPO3 und hat Inhalte aus diesem gesamten Zeitraum. Da war es Ende 2020 an der Zeit, einen vorgezogenen Frühjahrsputz zu machen. 
Eine dieser Maßnahmen war, die Links der Georgienseite anzupassen. Im Rahmen früherer Maßnahmen zur Suchmaschinenoptimierung hatten wir sprechende Links erzeugt, die allerdings über die Jahre hinweg sehr lang geworden waren. Ein Nachteil dieser Strategie ist leider, dass der Quelltext jeder Seite sehr stark aufgebläht wird, weil alle diese Links im Mega Menu aufgeführt werden. Also haben wir uns dazu entschlossen, die Links anzupassen. 

Eigentlich ist dies aus SEO-Sicht glatter Suizid. TYPO3 bietet allerdings seit der Version 10.4 das exzellente Feature, dass beim Ändern von Links automatisch Umleitungen eingerichtet werden. Die Funktion der Umleitungen gibt es seit der Einführung des neuen Routing in der Version 9.5 in TYPO3, die automatische Erstellung ist jedoch neu. Dies war auch der wichtigste Grund für das Upgrade auf diese Version von TYPO3. Im Zusammenspiel mit der Google Search Console, der Systemextension SEO und der Extension Yoast SEO haben wir nun Google die neuen Links kommuniziert, was den Umstieg auf kürzere Links deutlich erleichtert hat. Wichtiger Nebeneffekt für die Suchmaschinenoptimierung: Durch die kürzeren Links im Mega Menu hat der reine HTML-Quelltext jeder Seite der Georgienseite um mehr als 10% abgenommen.