Fehlerhafte Canonical-URLs und ungültige Seitenzahlen im News System von TYPO3 12 und 13

Aktuellen Code finden Sie auf GitHub: News System auf GitHub.

In diesem Artikel erkläre ich, wie wir dieses Problem gelöst haben, indem wir eine Umleitung zur Fehlerseite bei ungültigen Seitenzahlen implementierten und so auch das Problem mit den Canonical-URLs beseitigten.

Problemstellung

In TYPO3 mit der News-Erweiterung gab es zwei Hauptprobleme:

1. Falsche Seiteninhalte: Wenn ein Benutzer eine URL mit einer ungültigen Seitenzahl aufrief (z. B. /tag/tag-03/seite-22/ oder /tag/tag-03/seite-99/), wurde nicht die erwartete 404-Fehlerseite angezeigt. Stattdessen wurden die Inhalte der letzten gültigen Seite angezeigt.
2. Fehlerhafte Canonical URLs: Bei ungültigen Seitenzahlen wurde auch eine Canonical URL für die fehlerhafte Seite generiert (z. B. <link rel="canonical" href="https://example.com/tag/tag-03/seite-22/">), anstatt auf die erste gültige Seite des Filters zu verweisen, was zu SEO-Problemen führte.

Zielsetzung

Unser Ziel war es, folgende Punkte sicherzustellen:

• Dynamische und korrekte Berechnung der maximalen Seitenzahl basierend auf den aktuell gefilterten News-Artikeln.
• Automatische Umleitung auf die Fehlerseite bei ungültigen Seitenzahlen, statt den Benutzer auf eine falsche Seite weiterzuleiten.
• Korrekte Canonical URLs, die immer auf die erste gültige Seite des jeweiligen Filters verweisen.

Lösung

Die Lösung, die wir implementiert haben, basiert auf JavaScript und den in HTML eingebetteten Datenattributen für die Gesamtzahl der Seiten und die aktuelle Seite.

Schritt 1: Identifikation der relevanten Elemente im HTML

In der News-Erweiterung von TYPO3 werden die Daten zur Paginierung in den HTML-Elementen des News-Containers als data-* Attribute eingebettet. Die relevanten Attribute, die wir verwenden, sind:

• data-current-page: Gibt die aktuelle Seitenzahl an.
• data-total-pages: Enthält die Gesamtzahl der Seiten.

Ein typisches HTML-Element für den News-Container könnte wie folgt aussehen:

<div class="news-list-view" id="news-container-{contentObjectData.uid}"

    data-uid="{contentObjectData.uid}" 

    data-current-page="{pagination.currentPage}" 

        data-total-pages="{pagination.paginator.numberOfPages}">

...

</div>

In diesem Beispiel:

• {contentObjectData.uid} ist die eindeutige ID des News-Containers.
• {pagination.currentPage} enthält die aktuelle Seitenzahl.
• {pagination.paginator.numberOfPages} gibt die Gesamtzahl der Seiten an.

Schritt 2: JavaScript-Überprüfung der Seitenzahl

Mit den oben genannten data-* Attributen können wir nun mithilfe von JavaScript überprüfen, ob der Benutzer sich auf einer ungültigen Seite befindet. Dies geschieht, indem wir die Werte aus den data-current-page und data-total-pages Attributen auslesen.

Schritt 3: Einbinden des Skripts im Footer

Um sicherzustellen, dass das JavaScript erst nach dem Laden der Seite ausgeführt wird, haben wir das Skript in das Footer-Script von TYPO3 eingebaut. Auf diese Weise wird das Skript erst dann ausgeführt, wenn alle DOM-Elemente verfügbar sind.

Schritt 4: Durchführung der Umleitung

Wenn der Benutzer auf einer ungültigen Seite landet, erfolgt die Umleitung zur Fehlerseite über window.location.href. Die Fehlerseite wird über die PID (z. B. /index.php?id=13) definiert.

Code-Implementierung

Der folgende Code wird im Footer von TYPO3 eingefügt, um die Umleitung bei ungültigen Seitenzahlen durchzuführen:

page.footerData.300 = TEXT

page.footerData.300.value (

<script>

   document.addEventListener("DOMContentLoaded", function() {

       var container = document.querySelector(".news-list-view[data-total-pages]");

       if (container) {

           var totalPages = parseInt(container.getAttribute("data-total-pages"), 10) || 1;

               var currentPage = parseInt(container.getAttribute("data-current-page"), 10) || 1;

               console.log("Total Pages:", totalPages);

               console.log("Current Page:", currentPage);
       
               if (currentPage > totalPages) {

                   console.log("🚀 Umleitung wird durchgeführt!");

              
    // Umleitung auf eine Fehlerseite (hier Beispiel-URL: '/index.php?id=13')

               window.location.href = "/index.php?id=13";  // Ersetze 13 mit der PID der Fehlerseite

           }

       }

   });

</script>

)

Erklärung des Codes

1. DOM-Abfrage: Wir nutzen document.querySelector(".news-list-view[data-total-pages]"), um das Element zu finden, das die Gesamtseitenzahl enthält.
2. Seitenprüfung: Mit einem einfachen Vergleich zwischen currentPage und totalPages stellen wir sicher, dass der Benutzer auf einer gültigen Seite ist.
3. Umleitung: Wenn die currentPage größer als totalPages ist, wird der Benutzer mit window.location.href zur Fehlerseite weitergeleitet.

Vorteile dieser Lösung

• Benutzerfreundlich: Benutzer werden bei ungültigen Seitenzahlen automatisch zur Fehlerseite umgeleitet, wodurch fehlerhafte oder leere Seiten vermieden werden.
• Einfache Implementierung: Diese Lösung erfordert keine komplexe Serverlogik oder Änderungen im TypoScript. Sie nutzt lediglich JavaScript und DOM-Abfragen.
• SEO-Freundlich: Durch die Umleitung wird das Problem der fehlerhaften Canonical-URLs gelöst, da der Benutzer nicht auf einer ungültigen Seite bleibt, die eine falsche Canonical-URL erzeugt.

Fazit

Mit dieser einfachen, aber effektiven Lösung stellen wir sicher, dass Benutzer bei ungültigen Seitenzahlen nicht auf fehlerhafte Seiten weitergeleitet werden, sondern automatisch zur Fehlerseite umgeleitet werden. Gleichzeitig wird das Problem mit den Canonical-URLs beseitigt, da die Umleitung auf die erste gültige Seite oder die Fehlerseite erfolgt.

Wenn du ähnliche Probleme in deinem TYPO3-Projekt hast, kannst du diese Lösung schnell implementieren und anpassen. Sie bietet eine benutzerfreundliche Möglichkeit, das Routing und die Paginierung in TYPO3 zu verbessern und gleichzeitig SEO-Probleme zu vermeiden.