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

Der TITLE-Tag und die META Description einer Webseite sind von enormer Wichtigkeit für Suchmaschinenoptimierung und die Ansteuerung sozialer Netzwerke. Wenn man eine Standardseite in TYPO3 erstellt, kann man beide seit der Version 9.5 von TYPO3 bequem über die Seiteneigenschaften füllen. Bei einer Extension muss man aber selbst dafür sorgen, dass entsprechende Daten in die Webseite gespielt werden. Dafür gibt es Schnittstellen des TYPO3 Core.

Extension Programmierung und Suchmaschinenoptimierung

Wenn man eine Extension für eine TYPO3 Webseite programmiert und in eine Webseite eingebunden hat, ist man mit dem für Menschen sichtbaren Ergebnis manchmal recht zufrieden. Aber was ist mit den Maschinen? Genauer gesagt, mit Suchmaschinen? Um Google die Inhalte einer Extensions anzudienen, ist es auch in diesem Fall sinnvoll, Suchmaschinenoptimierung zu betreiben. In diesem Fall bedeutet erfolgreiche SEO die Erweiterung der TYPO3 Extension, um den <TITLE> Tag und die META-Tags der Seite zu füllen. 

Das grundlegende Dilemma ist oft: Die Extension ist auf einer Seite eingebunden. Hier hat man bereits SEO betrieben, der Titel der Seite und die Angaben für Facebook sind gefüllt. Wenn man einen Blog hat, möchte man natürlich, dass bei jedem Beitrag auch in den META-Angaben Daten stehen wie der Titel des Beitrags und die Kurzfassung. Genau vor dieser Herausforderung standen wir im Blog unserer Agentur. 

Schnittstellen des TYPO3 Core

In diesem Beitrag beschreiben wir, wie man aus dem Blog der Agentur Daten zieht, mit denen man die entsprechenden Tags füllen kann. Hier muss man zwei Schnittstellen des TYPO3 Core ansprechen: 

  • Die MetaTag API 
  • Die PageTitle API 

Die erstere schreibt mehrere Tags wie Page Description oder das Facebook OpenGraph Protocol, die zweite füllt aus mehreren möglichen Quellen den <TITLE> Tag. 

Beginnen wir mit der MetaTag API, denn diese ist einfacher zu bearbeiten. 

MetaTag API

Nehmen wir also an, wir wollen unsere Extension so erweitern, dass sie die Schnittstellen von TYPO3 nutzen soll. Nehmen wir ebenso an, dass es sich hier als Beispiel um einen Blog handelt, bei dem wir bereits über nutzbare Daten verfügen. Wir haben bereits einen Titel für den Blog und eine Kurzfassung. Beide sind mit ihrer Länge und ihrem Inhalt hervorragend geeignet, um als Quellen für unsere Schnittstelle zu dienen. 

Um die Schnittstelle ansprechen zu können, geben wir in den Controller unserer Extension. Hier fügen wir oben die beiden Namespaces des TYPO3 Core ein, die wir für unser Anliegen nutzen möchten: 

 use TYPO3\CMS\Core\MetaTag\MetaTagManagerRegistry;
use TYPO3\CMS\Core\Utility\GeneralUtility;

In unserem Controller suchen wir uns nun die Action, aus der heraus wir die einzelnen Beiträge des Blog ausgeben. Dazu müssen wir das uns Datenmodell unserer Extension ansehen und herausfinden, mit welcher Methode wir die Kurzfassung auslesen. Diese nutzen wir dann zur Bereitstellung der gewünschten Daten. 

Im ersten Schritt initialisieren wir den metaTagManager und rufen das gewünschte Objekt der META-Tags auf, dass wir bearbeiten wollen, in diesem Fall die Meta Description: 

$metaTagManager = GeneralUtility::makeInstance(MetaTagManagerRegistry::class)->getManagerForProperty('description');

Vielleicht wird diese Angabe bereits von unserem System gefüllt. In diesem Fall ist es notwendig, dass wir den standardmäßig gefüllten Tag entfernen: 

$metaTagManager->removeProperty('description');

Nun können wir den Tag mit einer entsprechenden Methode aus unserem Modell füllen: 
$metaTagManager->addProperty('description', $blog->getKurzfassung());

Um eine Angabe wie OpenGraph für Facebook zu füllen, können wir ebenfalls MetaTag API nutzen. Auch in diesem Fall rufen wir den gewünschten Tag auf, hier den OpenGraph Titel: 

$metaTagManager = GeneralUtility::makeInstance(MetaTagManagerRegistry::class)->getManagerForProperty('og:title');

Oft ist auch dieser durch unsere Arbeit an der Webseite zur SEO schon gefüllt. Wir entfernen ihn also zunächst: 

$metaTagManager->removeProperty('og:title');

Im nächsten Schritt füllen wir den OpenGraph Titel für Facebook dann durch die entsprechende Methode aus unserer Extension: 

$metaTagManager->addProperty('og:title', $blog->getTitel());

TitleTag API

Um die zweite Schnittstelle für den <TITLE> Tag anzusprechen, ist etwas mehr Arbeit vonnöten. Als ersten Schritt legen wir eine eigene Datei im Verzeichnis Classes / Controller an, die wir an unser System anbinden. Wir nennen Sie in unserem Fall PageTitle.php und geben ihr den Namespace unserer Extension. Zudem erweitern wir die Klasse zur Generierung des Title Tags um eine eigene Klasse. 

 namespace Ibk\Ibkblog\Controller;
  
use TYPO3\CMS\Core\PageTitle\AbstractPageTitleProvider;
  
class IbkblogTitleProvider extends AbstractPageTitleProvider
{
  public function setBlogTitle($title)
  {
    $this->title = $title;
  }
}

Wir legen in dieser Klasse eine Funktion an, der wir den gewünschten Titel übergeben. 

Im nächsten Schritt ergänzen wir unsere Datei ext_localconf.php im Stammverzeichnis unserer Extension und fügen ihr die Konfiguration unsere Titel Providers hinzu: 

 \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addTypoScriptSetup(trim('
  config.pageTitleProviders {
    own {
      provider = Ibk\Ibkblog\Controller\IbkblogTitleProvider
      before = record
      after = altPageTitle
    }
  }
')); 

Nun können wir uns an unseren Controller begeben. Diesen weisen wir an, Gebrauch von der GeneralUtility Klasse des TYPO3 Core zu machen, falls dies nicht schon geschehen ist: 

use TYPO3\CMS\Core\Utility\GeneralUtility;

In der Action, die uns die Einzelansicht eines Blog Postings schreibt, können wir nun an die Generierung unserer Daten gehen. In dieser Methode können wir auf das betreffende Blog Objekt zugreifen und uns dessen Daten über die entsprechende Get-Methode holen: 

$blog->getTitel(); 

Um nun den Titel der Seite mit unseren Daten zu füllen, müssen wir zuerst eine entsprechende Variablen einrichten. Im nächsten Schritt kann dann der Titel zugewiesen werden: 

 $titleProvider = GeneralUtility::makeInstance(IbkblogTitleProvider::class);
$titleProvider->setBlogTitle($blog->getTitel());

Damit überschreibt unser Titel nun den Standard des TYPO3 Core. 

Mehr TYPO3 Code Snippets im IBK Wiki

In dieser Seite haben wir Ihnen die Funktionen der beiden Schnittstellen beschrieben, mit denen uns TYPO3 die Möglichkeit zum Anpassung der TITLE- und META-Tagsbietet. Ausführliche Beschreibungen mit weiteren Code Snippets finden Sie im Wiki der Internetagentur Irma Berscheid-Kimeridze:

►TYPO3 Code Snippets TITLE- und META-Tag im Wiki der Agentur IBK

Links zur TYPO3 Dokumentation

TYPO3 bietet zwei Referenzen für die Schnittstellen zu den META-Tags und den Page TITLE an: 

►MetaTagApi

►PageTitleApi

Thomas Berscheid ⧉ 01.08.2020