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.
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.
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.
Navigation mit Bootstrap Menu und VHS Viewhelper
Beim Aufbau einer Webseite hat man manchmal richtig viel Herzblut investiert, um das Optimum aus seinem Projekt herauszuholen, und dann stellt sich ein paar Monate später heraus, dass man es doch noch ein wenig besser machen könnte. So ähnlich war es Anfang 2021 bei der Georgienseite.
Nachdem wir die Navigation auf ein Mega Menu umgestellt hatten, haben wir die Inhalte der Georgienseite zu ihrem 20. Geburtstag aufgeräumt. Einiges aus den Bereichen Magazin und Service war in die Jahre gekommen. Corona mit seinen täglich aktualisierten Reisewarnungen und die Arbeit an der SEO haben dafür gesorgt, dass wir viele Seiten umgezogen und erneuert haben. Viele neue Inhalte sind hinzugekommen, z. B. bei unseren Rezepten. Diese sind nach der Google Statistik auf den vordersten Rängen bei der Beliebtheit aller Seiten gelandet. Kurz und gut: Wir haben Inhalte und Navigation renoviert und auf einen neuen Stand gebracht.
Damit einher ging die Frage, ob das Mega Menu wirklich die beste Option für die Georgienseite darstellt. Wir kamen zu dem Schluss: Es könnte besser gehen. Deshalb haben wir uns nach einem neuen Menu umgesehen.
Für die neue Navigation der Georgienseite haben wir nun eine aufklappbare Lösung auf Basis von Bootstrap 4.6 entwickelt. Diese bietet, vor allem bei mobilen Endgeräten, die wundervolle Möglichkeit, sich mit wenigen Mausklicks oder Fingertipps durch die gesamte Webseite zu navigieren.
Beim Aufbau der Hierarchie der Georgienseite kommt dabei nicht nur eine standardisierte Navigation zum Einsatz, wir haben die Funktion um ein wichtiges Feature ergänzt: Es ist nun möglich, in der zweiten Ebene die dritte mit einem Klick auf ein "+" zu Öffnen. Dieser scheinbare Link ist technisch so gestaltet, dass wir keinen zusätzlichen Link haben und damit unter der magischen Grenze von 400 Links innerhalb der Seite bleiben. Das Layout haben per CSS an die Standards der Georgienseite angeglichen.
Mit dieser neuen Navigation auf der Basis von Bootstrap 4 öffnen sich noch weitere Möglichkeiten. So haben wir in der Navigation nun eine vierte Ebene angeschlossen. Gerade bei den Rezepten und den Gerichten der georgischen Küche sind Chinkali und Chatschapuri nun direkt mit wenigen Klicks oder Tippen erreichbar. Damit wird es noch einfacher, sich auf der Georgienseite zurecht zu finden.
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.
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.