Blog der Agentur IBK als TYPO3 Extension

Im Jahr 2015 bestand der Wunsch, die Webseite der Agentur IBK mit einem Blog zu erweitern. Nicht nur, dass jede richtige Agentur ohnehin ihren Blog haben sollte, wir wollten auch mal eines dieser Projekte in eigener Regie umsetzen, mit denen man sich in TYPO3 mal so richtig ohne Zeit- und Geldlimit und ohne Gedankenbremse austoben kann. Diese Idee stand im Raum, als wir mit dem Blog anfingen. Mittlerweile ist der IBK Blog integraler Bestandteil der Webseite unserer Agentur. In den folgenden Absätzen möchten wir Ihnen dieses Projekt unserer eigenen Extension schildern. 

Zielsetzung der TYPO3 Extension Programmierung

Dabei sollte der Blog ausdrücklich Bestandteil der TYPO3 Webseite und keine eigene Wordpress Webseite sein. Dieses Projekt kam zwei Jahre später. Ziel des TYPO3 Agenturblogs war die Integration von Ansichten, Beiträgen, Information und Verlinkungen innerhalb der bestehenden Webseite. Und zugleich sollte er eine TYPO3 Extension aus eigener Produktion sein, vor allem um von anderen Produkten komplett unabhängig zu sein.

Pflichtenheft und Anforderungsprofil für den Blog

Zu Anfang eines jeden IT-Projektes steht natürlich die Frage bei der Erstellung des Pflichtenhefts: Was soll das fertige Produkt liefern? Wir haben uns also Gedanken darüber gemacht, was der Blog können soll, um das Anforderungsprofil zu erstellen. Folgende Informationen sollten im Blog enthalten sein:

  • Einzelne Beiträge mit Titel, Kurzfassung und langer Ansicht 
  • Keine Bilder in den Beiträgen 
  • Schlagworte 
  • Kategorien 

Zu den Inhalten kommen noch einige Ansichten: 

  • Listenansicht aller Blogbeiträge 
  • Einzelansicht eines Blogbeitrags 
  • Filterung nach Schlagworten und Kategorien 
  • Weiterschaltung von Ansichten durch Buttons, wenn mehr als eine Seite generiert wird 
  • Schlagwortwolke mit abgestufter Größe der Schlagworte je nach Häufigkeit der Verwendung 

Bei den Funktionen gab es folgende Anforderungen: 

  • Die Eingabe von Blogbeiträgen, Kategorien und Schlagworten erfolgt ausschließlich im Backend 
  • Ein Frontend Editing ist nicht vorgesehen 
  • Bilder werden nicht in die Beiträge eingebunden 

Auf einzelne Bilder für jeden Beitrag haben wir im Blog ausdrücklich verzichtet. Der Grund dafür liegt in der Praxis: Der IBK Blog innerhalb der TYPO3 Webseite sollte eine schnelle Möglichkeit sein, um als redaktionelles System über Neuigkeiten zu informieren. Eine lange Suche nach passendem Bildmaterial, verbunden mit der Arbeit des Zuschneidens, Hochladens und weiterer manueller Punkte der Suchmaschinenoptimierung sollte vermieden werden. Dass der Punkt dabei nicht außer Acht gelassen wurde und Bilder dabei eine wichtige Rolle spielen, sehen wir zu einem späteren Zeitpunkt noch einmal. 

Damit stand das Anforderungsprofil für den Blog fest. 

Datenbank und Ansichten zur Programmierung mit Extension Builder

Auf Basis der Daten konnten wir nun mit Hilfe des Extension Builders die Struktur der Tabellen in der Datenbank und die ersten Ansichten erstellen. Ab diesem Zeitpunkt ist bei der Entwicklung von Extensions der weitere Fortgang der Frontend Bearbeitung vom Ergebnis der Arbeit des Extension Builders losgelöst.

Fluid Templates und Partials für Views

Wir haben also die ersten Views für die Listenansicht und Einzelansicht erstellt. Ab hier ging die Arbeit im Controller und Repository für die Extension los: Mit Hilfe eigener SQL-Abfragen aus der Datenbank haben wir Listen für die vorhandenen Kategorien und Schlagworte erstellt, die in mehrere Ansicht eingebunden werden können. Diese Bestandteile der Templates sind als Partials abgelegt. Damit konnten wir die Templates für die einzelnen Ansichten in mehrere übersichtliche Fluid Templates zerlegen und die Partials mehrfach verwenden, was den Code der gesamten Extension übersichtlicher macht. Die Darstellung vor allem der Listenansichten nutzt zudem Conditions und Iterations in Fluid, auch wenn der SQL-Code bereits für eine schlanke Struktur der zu visualisierenden Daten sorgt. 

So haben wir den Blog dann online gestellt. Über den Link zur Startseite des Blog ist nun die Listenansicht zu erreichen, von dort kann man sich die einzelnen Beiträge ansehen und nach Kategorien sowie Schlagworten gruppieren.

Responsives Frontend der Extension mit Bootstrap

Bei der Gestaltung der Ansichten haben wir, wie beim Frontend Layout der gesamten Webseite der Agentur IBK, auf Bootstrap als Standard für eine responsiv gestaltete Webseite gesetzt. Für die Listenansicht des Blog haben wir ein zweispaltiges Layout umgesetzt, damit die Liste der Beiträge bei großen Bildschirmen neben Schlagworten und Kategorien steht. In der Einzelansicht nehmen die Blogbeiträge die gesamte Breite ein. 

Suche? Kommentarfunktion?

Was wir zwischenzeitlich einmal ausprobiert und dann wieder verworfen haben: 

  • Eine Kommentarfunktion ist im Blog implementiert, wurde jedoch nie genutzt und ist mittlerweile deaktiviert 
  • Eine Suche ist ebenfalls implementiert, ist jedoch ebenfalls nicht genutzt worden und seit Dezember 2020 auch nicht mehr notwendig, weil wir einen eigenen Indexer für die Faceted Search geschrieben haben.

Weiterentwicklung der IBK Blog Extension

Über die Jahre hinweg zeigt es sich, dass TYPO3 ein lebendiges Content Management System ist, an dem ständig gearbeitet und das permanent auf dem aktuellsten Stand der Technik gehalten wird. So haben wir die Blog Extension mit dem Upgrade der Agenturwebseite auf die TYPO3 Version 9.5 auf den aktuellen Stand gebracht und die SQL-Queries mit Queries für den Doctrine Datenbanktreiber ersetzt. Beim Upgrade auf TYPO3 10.4 haben wir die Namespaces und Klassen und Methoden auf den Standard der objektorientierten Programmierung für PHP 7.4 gebracht. 

Ein weiterer Punkt ist die Entwicklung der Texteditoren im TYPO3 Backend. Der Umstieg vom RTE auf den CK Editor im Jahr 2017 ermöglichte weitere Funktionen zur Gestaltung des Fließtextes in den Beiträgen des Blog. Die Blog Extension haben wir auch an dieser Stelle den aktuellen technischen Möglichkeiten angepasst. 

Bilder für Suchmaschinenoptimierung

Mit der steigenden Zahl der Beiträge haben wir das Layout des Blog immer wieder an die Webseite angepasst. Zudem gab es natürlich noch das Thema Suchmaschinenoptimierung und in diesem Zusammenhang haben wir uns Gedanken über Bilder gemacht. Diese sollten ja nach unserem Anforderungsprofil nicht Bestandteil der Blogbeiträge sein, und das hat sich vom Arbeitsablauf auch als sehr gute, weil zeitsparende Maßnahme erwiesen. 

Bilder in TYPO3: ALT- und TITLE-Attribute

Aus Sicht der Suchmaschinenoptimierung ist dies natürlich ein Nachteil, denn man verzichtet damit auf die positive Rolle von ALT- und TITLE-Attributen bei einem Bild. Die Lösung: Wir haben ein Bild fest in die Ansichten des Blog implementiert und schreiben die jeweiligen Daten zum Bild in den Quelltext. Eine sehr schöne Anwendung von Viewhelpern bei der Arbeit mit Fluid Templates. 

SEO mit Routing und sprechenden Links

Damit ist das Thema SEO aber noch nicht erledigt. Ein weiterer Punkt nach dem Upgrade der TYPO3 Version auf 9.5 und 10.4 war, wie wir die Optionen der neuen Versionen für SEO nutzen können. Was jedem TYPO3 Integrator, der sich intensiv mit Suchmaschinenoptimierung beschäftigt, bei einer Webseite die Tränen in die Augen treibt, ist die Verwendung von Parametern in einem Link. Bei der Generierung von Links zum Umschalten zwischen Listen- und Einzelansicht sowie der Filterung von Kategorien kommen naturgemäß Links mit Parametern zum Einsatz. Wir haben nun die Möglichkeiten des Routing in TYPO3 genutzt, um Links in klar definierten Strukturen abzufangen und entsprechende Buttons mit Hilfe der Viewhelper in den Fluid Templates zu generieren. Mehr dazu können Sie in den unten verlinkten Seiten lesen. 

Lesen Sie hier mehr dazu:

 TITLE-Tag und die META Description in Extension füllen

 Canonical Link mit TypoScript: SEO für eine Extension

Upgrade für TYPO3 12

Im Januar 2024 haben wir ein größeres Upgrade des Blog auf die Version 12.4 von TYPO3 vorgenommen. Die großen Anpassungen fanden dabei im Backend statt. So haben wir die Generierung der Links für die Übersicht der Kategorien und Schlagworte über das Routing nutzerfreundlicher gemacht. Auch Google darf sich freuen: Die Links aus der XML Sitemap sind nun lesbar, ebenso wie bei den Canonical Tags kommen sie nun ohne Parameter und Hash Codes im sichtbaren Link aus. TITLE Tags und Beschreibungen sind nun für jeden Beitrag individuell dargestellt. Und Google kann sich Informationen zum Blog nun per JSON auslesen.