Die Version 9.5 von TYPO3 brachte eine wichtige Verbesserung beim Routing in der Webseite. Dies hat Auswirkungen auf die Erstellung von Umleitungen, die Einbindung einer Sitemap und weitere Funktionen, die mit der Generierung von Links zu tun haben.

Mit der Version 10.4 von TYPO3 sind diese Funktionen noch einmal ergänzt und verbessert worden, so werden z. B. nun automatisch Umleitungen angelegt, wenn man das Feld URL-Segment bearbeitet. Die unten beschriebenen Funktionen und die damit verbundenen Sourcen haben sich jedoch nicht geändert.

Mit der Einführung der Version 9.5 LTS von TYPO3 ist der Traum so manches TYPO3-Entwicklers Wirklichkeit geworden: die Extension realURL ist weggefallen! Stattdessen gibt es nun die Systemextension SEO, mit deren Hilfe man lesbare Links zum Zwecke der Suchmaschinenoptimierung erzeugen kann. Die Konfiguration einer Webseite umfasst nun mehrere Schritte, um die Grundlagen für eine erfolgreiche Arbeit zu legen.

In mancher Installation von TYPO3 9.5 wird die SEO Extension zwar ausgeliefert, ist aber nicht aktiviert. In diesem Fall geht man wie gewohnt in den Extension Manager und aktiviert die SEO Extension. Anschließend wird diese in das Root Template der Webseite eingebunden.

Über das Modul Seitenverwaltung → Seiten ruft man nun die Site Configuration auf. Hier legt man eine neue Seite an. Dieses Modul liefert nicht nur die Angaben zur Konfiguration der Basis URL, sondern auch andere Module. Im Gegensatz zu früheren Versionen von TYPO3 werden an dieser Stelle auch die 404 Fehlerseite und ggf. die robots.txt festgelegt. Aber dazu mehr weiter unten in dieser Seite!

Für die gewählte Root Page ID der Seite wählt man einen eindeutigen Site Identifier aus. In unserem Fall haben wir den Namen „georgienseite“ vergeben. Mit diesem Identifier wird ein Verzeichnis angelegt. Wir werden später erneut darauf stoßen. Beim Entry Point kann man nun einen Slash „/“ eingeben. Ratsamer ist es jedoch, hier den absoluten Link der Seite incl. Protokoll anzugeben, in diesem Fall also „https://www.georgienseite.de/“. Dies wird sich als sinnvoll erweisen, sobald Sie die Google Search Console mit einer Sitemap füttern wollen. Damit ist die Grundkonfiguration der Seite erledigt.

Bei den Languages haben Sie die Gelegenheit, die Sprachen zu konfigurieren. Hier können Sie den locale Parameter auf „de_DE“ setzen, ggf. ein Unterverzeichnis und die Bezeichnung bzw. die Flagge für die gewünschte Sprache wählen.

Hier nun eine sehr interessante Neuerung der LTS 9.5: In diesem Menu legen Sie fest, was bei einer falsch eingegebenen Seite geschehen soll. Dazu sollten Sie bereits im Vorfeld eine 404-Seite konfiguriert haben. Über + Neu anlegen erhalten Sie ein Menu, bei dem HTTP Error Status Code auswählen können, den Sie bearbeiten möchten. Wählen Sie aus dem Drop Down Menu 404 (Page not found) aus. Der Inhalt des Fensters lädt sich neu. Mit dem Menu How to handle Errors können Sie nun auswählen, was im Fehlerfall geschehen soll. Für die 404-Seite wählen wir günstigerweise „Show Content from Page“. Es öffnet sich ein neues Auswahlmenü, in dem sie über den Site Picker die ID Ihrer Fehlerseite auswählen können.

Im nächsten Schritt können Sie nun über den Reiter Static Routes Ihre robots.txt konfigurieren. Wählen Sie dazu über Static Route Name die robots.txt aus. Über Static Text können Sie nun ihre Datei konfigurieren. Der Vorteil dieser Methode ist, dass Sie nicht erst per FTP auf den Server zugreifen müssen, sondern die Konfiguration direkt im Backend erledigen können.

Das TYPO3 Backend schreibt die Konfiguration der Webseite nicht in die Datenbank, sondern in die Datei config.yaml. Diese Datei finden Sie im Verzeichnis typo3conf\sites\georgienseite. Wie man erkennt, erzeugt TYPO3 das Unterverzeichnis auf Basis der Angaben zum Site Identifier. Die Konfiguration der Georgienseite sieht dann z. B. so aus:

rootPageId: 1
base: 'https://localhost.georgienseite/'
baseVariants: {  }
languages:
-
  title: Deutsch
  enabled: true
  languageId: '0'
  base: /
  typo3Language: de
  locale: de_DE
  iso-639-1: de
  navigationTitle: ''
  hreflang: ''
  direction: ''
  flag: de
errorHandling:
-
  errorCode: '404'
  errorHandler: Page
  errorContentSource: 't3://page?uid=24'
  

Mit der Installation der SEO Extension im Core von TYPO3 ist es obsolet geworden, eine Extension installieren zu müssen, mit der man eine Sitemap bei Google einreichen kann. Ohne weitere große Arbeiten bei der Konfiguration leisten zu müssen, steht diese Datei nun unter dem Link https://www.georgienseite.de/sitemap.xml zur Verfügung. Unter dieser Datei sind alle Sitemaps aufgelistet, die man Google zum Einlesen vorlegen kann.

Mit ein wenig TypoScript ist es allerdings möglich, Sitemaps für andere Zwecke zu erzeugen. Dies trifft z. B. für die beliebte News Extension zu. Hier ein Beispiel für die Config:

plugin.tx_seo {
  config {
    xmlSitemap {
      sitemaps {
        news {
          provider = TYPO3\CMS\Seo\XmlSitemap\RecordsXmlSitemapDataProvider
          config {
            table = tx_news_domain_model_news
            sortField = sorting
            lastModifiedField = tstamp
            recursive = 3
            pid = 238 // Storage PID der News Datensätze
            url {
              pageId = 240 // Zielseite der Listenansicht
              fieldToParameterMap {
                uid = tx_news_pi1[news]
              }
              additionalGetParameters {
                tx_news_pi1.controller = News
                tx_news_pi1.action = detail
              }
              useCacheHash = 1
            }
          }
        }
      }
    }
  }
}

Die TYPO3 Extension Yoast SEO liefert die Möglichkeit zur Erstellung einer Sitemap, die man bei der Google Search Console oder vergleichbaren Diensten einreichen kann. Dazu ist es notwendig, eine solche Konfiguration in der config.yaml hinuzufügen:

routeEnhancers:
  PageTypeSuffix:
    type: PageType
    map:
      feed.xml: 9818
      sitemap.xml: 1533906435
      yoast-snippetpreview.json: 1480321830
    

Um das Routing der News zu perfektionieren, kann man in der config.yaml noch weitere Angaben machen. Hier ein Beispiel für eine weitere Konfiguration der Datei:

routeEnhancers:
  News:
    type: Extbase
    extension: News
    plugin: Pi1
    routes:
      -
        routePath: '/{news-title}'
        _controller: 'News::detail'
        _arguments:
          news-title: news

Der Blog auf der Webseite der Agentur IBK ist eine von Thomas Berscheid im Jahr 2015 programmierte und seitdem stetig dem aktuellen Stand des Frontend und der technischen Entwicklung des Backend angepasste TYPO3 Extension. Zur Aktualisierung der Programmierung und Konfiguration des Blog gehörte mit der Version 10.4 von TYPO3 das update der Blog Extension und der Konfiguration der Webseite, um den Blog für SEO mit lesbaren Links ausstatten zu können. Hier folgen Code Snippets für die config.yaml zur Einrichtung einer Schnittstelle für die Extension.

Ähnlich wie bei der oben stehenden Konfiguration der News Extension können wir bei der Blog Extension festlegen, was mit bestimmten Links geschehen soll. Dazu legen wir fest,

• welche Extension wir ansprechen
• welches Plugin in der Extension wir laden

Danach legen wir das Routing fest.

routeEnhancers:
  Blog:
    type: Extbase
    extension: Ibkblog
    plugin: Blog
    routes:
      -
        routePath: '/{blog-link}'
        _controller: 'Blog::showByLink'
        _arguments:
          blog-link: link

Das Konzept des Blogs ist, die Links innerhalb der Webseite lesbar zu gestalten. In den Links sollen Begriffe stehen, die für Menschen lesbar sind und Suchmaschinen Informationen über die Inhalte des Blogpostings mitgeben.

Anstelle eines Links in der Form

/blog?tx_ibkblog_blog[action]=show&tx_ibkblog_blog[blog]=40&tx_ibkblog_blog[controller]=Blog           

schreiben wir nun einen Link ähnlich wie diesen in die Listenansicht aller Blogbeiträge:

/blog/mein-neuer-blogbeitrag-november-2020

Der Name mein-neuer-blogbeitrag-november-2020 für den Link steht in unserer Datenbank, diesen haben wir als eindeutige Bezeichnung für den Beitrag vergeben und mit diesem wird der Beitrag identifiziert. Über das Routing ordnen wir die Parameter nun folgendermaßen zu:

routePath: '/{blog-link}'

Alles was als Parameter hinter hinter dem Basisverzeichnis des Blog steht wird ausgelesen und in eine Variable übernommen

  _controller: 'Blog::showByLink'

Als Ziel unserer Aktion legen wir für das Plugin (hier: Blog) einen Controller (hier: showByLink) fest, der die Daten in unserer Extension entgegennehmen und verarbeiten soll.

  _arguments:
    blog-link: link

Die ausgelesene Variable blog-link übernehmen wir und weisen die einer PHP-Variablen mit dem Namen link zu, die wir dem Controller unserer Extension übergeben und mit der wir dort arbeiten können.

Das oben dargestellte Konzept können wir noch ausweiten. Neben der reinen Übergabe des Links zu einem einzelnen Datensatz, im obigen Fall einem einzelnen Blogbeitrag, können wir Links zu Listenansichten definieren und auslesen.

Das Problem dabei: Wir müssen einen Begriff definieren, mit dem unser System erkennt, dass es sich um eine bestimmte Liste handelt. Dies können wir über einen entsprechenden String bei der Generierung des Links konfigurieren. Hier ein Beispiel für ein solches Routing:

routePath: '/bloglist/{blog-offset}'
  _controller: 'Blog::list'
  _arguments:
    blog-offset: offset
    

In diesem Fall passiert Folgendes:

routePath: '/bloglist/{blog-offset}'      

Über einen Begriff (hier: bloglist) findet unser Routing einen Link und liest diesen gezielt zu dem Zweck aus, für den er geschrieben wurde.

  _controller: 'Blog::list'

Alles was an Daten übergeben wird ordnen wir einem Controller (hier: Blog) und in diesem einer Aktion (hier: list) zu, in der die Daten weiter verarbeitet werden.

  _arguments:
    blog-offset: offset

Ein Parameter (hier: blog-offset) wird ausgelesen und einer Variable (hier: offset) zugeordnet.

Bei einem Routing, hier am Beispiel der Blog Extension von Thomas Berscheid, können wir auch mehrere Parameter übergeben. Hier ist ein Beispiel für die Übergabe mehrerer Parameter an die Extension:

routePath: '/taglist/{blog-tag}-{blog-name}/{blog-offset}'
  _controller: 'Blog::list'
  _arguments:
    blog-tag: tagid
    blog-name: tagname
    blog-offset: offset

Ein solcher Link kann aussehen wie folgt:

https://www.agentur-ibk.de/blog/taglist/4-Schlagwort/3

Sehen wir uns nun an, welche Daten aus dem Link an die Extension übergeben werden.

routePath: '/taglist/{blog-tag}-{blog-name}/{blog-offset}'

Über einen eindeutigen statischen Bestandteil des Links (hier: taglist) können wir diese Art von Link identifizieren und damit unserem System mitteilen, dass hier eine klar definierte Art von Daten kommt, die ausgelesen und der Blog Extension bereitgestellt werden soll.

  _controller: 'Blog::list'

Wir ordnen die nun folgenden Daten einem Plugin (hier: Blog) und einem Controller (hier: list) zu.

  _arguments:
    blog-tag: tagid
    blog-name: tagname
    blog-offset: offset

In diesem letzten Schritt ordnen wir diese drei ausgelesenen Parameter nun Variablen zu, die im Controller verarbeitet werden können.

Wir müssen zur Umsetzung des Routing darauf achten, dass wir in unseren Übersichten nun Links so aufbauen, dass sie von unserem System auch ausgelesen werden können. Hier ist ein gekürztes Beispiel aus der IBK Blog Extension von Thomas Berscheid:

<a href="{f:uri.page(pageUid:pagestartuid)}/katlist/{blogkatlink}-Kategorie/{count}">
  {count}
</a>

Unserem Fluid Template geben wir aus unserem Controller mehrere Werte mit:

$this->view->assign('pagestartuid', $pageStartUID);
$this->view->assign('blogkatlink', $blogKatLink);

Der dritte Parameter count wird innerhalb des Fluid Template durch eine Iteration, also eine mit Zähler durchlaufene Schleife, erzeugt.

Aus diesen Parametern können wir nun unseren Link aufbauen:

{f:uri.page(pageUid:pagestartuid)}

Mit diesem Fluid Viewhelper sagen wir unserer Extension, in welcher Seite das Frontend Plugin für die Blog Extension eingebaut ist.

/katlist/

Mit diesem eindeutigen Identifier sprechen wir die entsprechende Funktion in unserem Routing an.

/{blogkatlink}-Kategorie/

Wir übergeben die ID der Kategorie und den Namen einer Kategorie, den wir frei definieren können.

/{count}

Hiermit legen wir fest, welche Seite der Listenansicht aufgerufen werden soll.