Breadcrumb Navigation: VHS Viewhelper und Rich Text Snippets

Eine Breadcrumb Navigation oder Brotkrümelnavigation, auch Parallelnavigation, Rootline oder Klickpfad genannt, ist eine feine Sache: Wenn man sich in einer Webseite befindet, weiß man, wie man in die oberhalb dieser Seite liegenden Ebenen der Navigation zurück kommt. Dies gilt für uns Menschen. Suchmaschinen sehen noch mehr in einem Klickpfad. Und im Rahmen einer Suchmaschinenoptimierung können wir Google mit Hilfe von strukturierten Daten weitere Informationen mitgeben, die menschliche Besucher nicht sehen. Mit Hilfe von Rich Text Snippets können wir die SEO Maßnahmen einer TYPO3 Webseite verbessern. 

Breadcrumb Navigation per TypoScript erstellen

Der gute alte Weg zur Erstellung einer Breadcrumb Navigation führt über TypoScript. Mit der Konfiguration eines hierarchischen Menus in TYPO3 können wir so etwas wie den folgenden Quelltext nutzen, um eine Brotkrümelnavigation zu erzeugen: 

 lib.navigation_breadcrumb = HMENU
lib.navigation_breadcrumb {
  special = rootline
  special.range = 0
  1 = TMENU
  1 {
    wrap = |
    target = _top
    NO {
      linkWrap = |
      allWrap = |*||»|*||              
    }
  }

Dieses TypoScript können wir erweitern, um den Links mit linkWrap Parameter oder über ATagParams CSS Klassen mitzugeben. Mit solch individuell programmiertem TypoScript lässt sich hervorragend eine Parallelnavigation umsetzen. Bei einer Sache stößt man aber an die Grenzen von TypoScript. Und dies wollen wir uns im folgenden Fall einmal ansehen.

Schema.Org Rich Text Vorlage für BreadcrumbList

Suchmaschinen und Aggregatoren haben beim Besuch einer Webseite nicht unbedingt vor, den gesamten HTML-Quelltext abzugrasen und nach passenden Informationen zu durchforsten. Sie lieben es, wenn man ihnen spezifische Informationen als Appetithappen bereitstellt. Dazu gibt es mehrere Wege. Eine davon ist es, über das Format JSON versteckte Informationen zu einer spezifischen Seite im Quelltext zu hinterlegen. Man kann aber auch den sichtbaren Quelltext mit bestimmten Attributen befüllen, die Suchmaschinen interpretieren können. Zu diesen Zweck wurde Schema.Org ins Leben gerufen: Mit diesen Formaten kann man eine bestimmte Art einer Information zu beschreiben, dass eine Suchmaschine diese in ein Raster einordnen kann. Wichtig ist die vor allem für Shops, denn über die Rich Text Formatierung kann man Suchmaschinen oder Aggregatoren Informationen zum Produkt wie den Namen, die Beschreibung und Preise, aber auch Sonderangebote und Rabatte mitgeben. 

Genauso wie für Produkte in einem Shop ist dies auch für Informationen zu einer Webseite möglich. Für eine Brotkrümel-Navigation sieht eine Vorlage nach Schema.Org folgendermaßen aus: 

 <ol itemscope itemtype="https://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope
      itemtype="https://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/dresses">
    <span itemprop="name">Dresses</span></a>
    <meta itemprop="position" content="1" />
  </li>
  <li itemprop="itemListElement" itemscope
      itemtype="https://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/dresses/real">
    <span itemprop="name">Real Dresses</span></a>
    <meta itemprop="position" content="2" />
  </li>
</ol>

All dies ist kein Hexenwerk. Mit einer Anpassung der oben stehenden Vorlage für eine Breadcrumb Navigation in TypoScript lässt sich dieses Schema recht einfach umsetzen. Das Problem taucht jedoch auf, sobald man an die Nummerierung der Elemente geht, die über einen bestimmten Quelltext ausgezeichnet werden sollen, in diesem Fall die Hierarchie der Links über den Parameter der Position: 

<meta itemprop="position" content="1" />

An dieser Stelle schlägt die große Stunde von Fluid und insbesondere die große Stunde des VHS Viewhelper. 

VHS Viewhelper für Breadcrumb Navigation

Eine Vorlage für den Aufbau einer Breadcrumb Navigation über den VHS Viewhelper kann den folgenden Aufbau haben: 

 <v:page.breadCrumb as="menu">
  <ul>
    <f:for each="{menu}" as="menuItem">
      <li>
        <f:link.page pageUid="{menuItem.uid}">
          {menuItem.title}
        </f:link.page>
      </li>
    </f:for>
  </ul>
</v:page.breadCrumb>

Unabhängig davon, in welche Form man den Quelltext für die Brotkrümel Navigation in seinem TYPO3 Projekt gießen möchte, kann man die Elemente dieser Navigation auf wenige Bausteine reduzieren, die für die Generierung der Navigation mit den VHS Viewhelper notwendig sind: 

  • Der Aufruf des Viewhelpers 
    <v:page.breadCrumb as="menu"> 
  • Eine Schleife für die einzelnen Objekte der Navigation 
    <f:for each="{menu}" as="menuItem"> 
  • Der Aufbau eines Links über den f:link Viewhelper von Fluid 
    <f:link.page pageUid="{menuItem.uid}"> 

Mit Hilfe dieser Elemente können wir nun den Quelltext aufbauen, der in unsere Webseite passt und den wir nach Vorlage von Schema.Org und unter Einbettung der Elemente für unser Style Sheet gestalten können. Als Ergebnis haben wir einen Quellcode in dieser Art: 

 <v:page.breadCrumb as="menu">
  <span itemscope itemtype="https://schema.org/BreadcrumbList">
    <f:for each="{menu}" as="menuItem" iteration="breadIteration">
      <f:if condition="{breadIteration.index}>0">&raquo;</f:if>
      <span itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <f:link.page pageUid="{menuItem.uid}" title="{menuItem.title}" additionalAttributes="{itemprop="item"}">
        <span itemprop="name">{menuItem.title}</span>
      </f:link.page>
      <meta itemprop="position" content="{breadIteration.cycle}" />
      </span>
    </f:for>
  </span>
</v:page.breadCrumb>

Damit können wir nun unsere Parallelnavigation bestücken. 

VHS Viewhelper für weitere Optionen

Dieses Konzept kann man noch weiter ausbauen und die Möglichkeiten des VHS Viewhelper nutzen, wenn man dies möchte: 

  • Mit einer Condition können wir den Link für die aktuelle Seite am höchsten Punkt der Hierarchie abschalten 
  • Als Text können wir entweder den Seitentitel, den SEO Titel oder den alternativen Titel angeben, auch per Condition abgefragt, wenn nicht immer gefüllt 
  • Wir können jedem Link und jedem ummantelnden HTML-Element eine beliebige Klasse für unser CSS mitgeben 
  • Als Trenner zwischen den einzelnen Ebenen können wir ein beliebiges Zeichen einbauen, in diesem Beispiel das HTML-Sonderzeichen des doppelten Pfeiles nach rechts 

Der große Vorteil des VHS Viewhelpers ist natürlich, dass wir die gesamte Brotkrümel-Navigation nun zusammen mit den anderen Bestandteilen des Fluid Templates in ein Partial einbauen können und damit mehr Übersicht über den Quellcode unseres Projektes haben, als wenn wir eine TypoScript Datei einbinden.