Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
— | typo3_9_5_seo_sites_routing [2023.12.12 16:02] (aktuell) – angelegt - Externe Bearbeitung 127.0.0.1 | ||
---|---|---|---|
Zeile 1: | Zeile 1: | ||
+ | ====== TYPO3 9.5 und 10.4 SEO und Routing ====== | ||
+ | |||
+ | Die Version **9.5** von TYPO3 brachte eine wichtige Verbesserung beim Routing in der Webseite. Dies hat Auswirkungen auf die Erstellung von Umleitungen, | ||
+ | |||
+ | 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 '' | ||
+ | ===== SEO mit Sites ===== | ||
+ | |||
+ | |||
+ | 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. | ||
+ | |||
+ | ==== Installation und Aktivierung der SEO Extension ==== | ||
+ | |||
+ | In mancher Installation von TYPO3 9.5 wird die SEO Extension zwar ausgeliefert, | ||
+ | |||
+ | ==== Sites anlegen ==== | ||
+ | |||
+ | Über das Modul '' | ||
+ | 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! | ||
+ | |||
+ | ==== Site Configuration ==== | ||
+ | |||
+ | 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 " | ||
+ | Beim **Entry Point** kann man nun einen Slash "/" | ||
+ | Damit ist die Grundkonfiguration der Seite erledigt. | ||
+ | |||
+ | === Sprache konfigurieren === | ||
+ | |||
+ | Bei den **Languages** haben Sie die Gelegenheit, | ||
+ | |||
+ | === Error Handling === | ||
+ | |||
+ | 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 '' | ||
+ | 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 "// | ||
+ | |||
+ | ==== Static Routes ==== | ||
+ | |||
+ | |||
+ | 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. | ||
+ | |||
+ | ===== config.yaml - Site Configuration ===== | ||
+ | |||
+ | |||
+ | |||
+ | Das TYPO3 Backend schreibt die Konfiguration der Webseite nicht in die Datenbank, sondern in die Datei config.yaml. Diese Datei finden Sie im Verzeichnis '' | ||
+ | Die Konfiguration der Georgienseite sieht dann z. B. so aus: | ||
+ | |||
+ | rootPageId: 1 | ||
+ | base: ' | ||
+ | baseVariants: | ||
+ | languages: | ||
+ | - | ||
+ | title: Deutsch | ||
+ | enabled: true | ||
+ | languageId: ' | ||
+ | base: / | ||
+ | typo3Language: | ||
+ | locale: de_DE | ||
+ | iso-639-1: de | ||
+ | navigationTitle: | ||
+ | hreflang: '' | ||
+ | direction: '' | ||
+ | flag: de | ||
+ | errorHandling: | ||
+ | - | ||
+ | errorCode: ' | ||
+ | errorHandler: | ||
+ | errorContentSource: | ||
+ | | ||
+ | ===== Sitemap als XML für Google ===== | ||
+ | |||
+ | 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:// | ||
+ | |||
+ | ==== Sitemap für News als XML ==== | ||
+ | |||
+ | |||
+ | 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 | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | | ||
+ | ===== config.yaml - YOAST Sitemap Configuration ===== | ||
+ | |||
+ | 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 '' | ||
+ | |||
+ | routeEnhancers: | ||
+ | PageTypeSuffix: | ||
+ | type: PageType | ||
+ | map: | ||
+ | feed.xml: 9818 | ||
+ | sitemap.xml: | ||
+ | yoast-snippetpreview.json: | ||
+ | | ||
+ | Um das Routing der News zu perfektionieren, | ||
+ | |||
+ | ===== config.yaml - News Configuration ===== | ||
+ | |||
+ | routeEnhancers: | ||
+ | News: | ||
+ | type: Extbase | ||
+ | extension: News | ||
+ | plugin: Pi1 | ||
+ | routes: | ||
+ | - | ||
+ | routePath: '/ | ||
+ | _controller: | ||
+ | _arguments: | ||
+ | news-title: news | ||
+ | |||
+ | |||
+ | ===== config.yaml - Blog Routing Configuration ===== | ||
+ | |||
+ | 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. | ||
+ | |||
+ | ==== Links für Blog Artikel auslesen ==== | ||
+ | |||
+ | Ä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: '/ | ||
+ | _controller: | ||
+ | _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 | ||
+ | / | ||
+ | schreiben wir nun einen Link ähnlich wie diesen in die Listenansicht aller Blogbeiträge: | ||
+ | / | ||
+ | Der Name '' | ||
+ | routePath: '/ | ||
+ | Alles was als Parameter hinter hinter dem Basisverzeichnis des Blog steht wird ausgelesen und in eine Variable übernommen | ||
+ | _controller: | ||
+ | Als Ziel unserer Aktion legen wir für das Plugin (hier: '' | ||
+ | _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. | ||
+ | |||
+ | ==== Links zu Listen Ansicht über Routing übergeben ==== | ||
+ | |||
+ | 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, | ||
+ | |||
+ | 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: '/ | ||
+ | _controller: | ||
+ | _arguments: | ||
+ | blog-offset: | ||
+ | | ||
+ | In diesem Fall passiert Folgendes: | ||
+ | |||
+ | routePath: '/ | ||
+ | Über einen Begriff (hier: '' | ||
+ | _controller: | ||
+ | Alles was an Daten übergeben wird ordnen wir einem Controller (hier: '' | ||
+ | _arguments: | ||
+ | blog-offset: | ||
+ | Ein Parameter (hier: '' | ||
+ | |||
+ | |||
+ | ==== Mehrere Parameter für Extension mit Routing übergeben ==== | ||
+ | |||
+ | 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: '/ | ||
+ | _controller: | ||
+ | _arguments: | ||
+ | blog-tag: tagid | ||
+ | blog-name: tagname | ||
+ | blog-offset: | ||
+ | Ein solcher Link kann aussehen wie folgt: | ||
+ | https:// | ||
+ | Sehen wir uns nun an, welche Daten aus dem Link an die Extension übergeben werden. | ||
+ | routePath: '/ | ||
+ | Über einen eindeutigen statischen Bestandteil des Links (hier: '' | ||
+ | _controller: | ||
+ | Wir ordnen die nun folgenden Daten einem Plugin (hier: '' | ||
+ | _arguments: | ||
+ | blog-tag: tagid | ||
+ | blog-name: tagname | ||
+ | blog-offset: | ||
+ | In diesem letzten Schritt ordnen wir diese drei ausgelesenen Parameter nun Variablen zu, die im Controller verarbeitet werden können. | ||
+ | |||
+ | ==== Links für Routing mit Fluid Viewhelpern erstellen ==== | ||
+ | |||
+ | 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=" | ||
+ | {count} | ||
+ | </a> | ||
+ | | ||
+ | Unserem Fluid Template geben wir aus unserem Controller mehrere Werte mit: | ||
+ | $this-> | ||
+ | $this-> | ||
+ | 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: | ||
+ | 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. | ||
+ | / | ||
+ | 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. | ||
+ | |||
+ | <WRAP left info 100%> | ||
+ | Den Blog als Beispiel finden Sie hier: [[https:// | ||
+ | </ | ||