SEO mit Links in TYPO3: Title in Navigation zur Suchmaschinenoptimierung

Kommen wir zuerst zu einer Anforderung, die jede Webseite umsetzen muss, die aus mehr als einer einzigen Seite besteht: Wir brauchen eine Navigation. Dabei spielt es zuerst einmal keine Rolle, welche Art einer Navigation wir in einer TYPO3 Webseite einbauen: Mag dies eine Navbar, ein Mega Menu oder eine von links nach rechts durchklickbare Leiste sein – in jedem Fall stehen in solch einer Navigation im Quellcode <a href=““> Tags, die zu einem Ziel führen.

Beschäftigen wir uns zuerst mit dem, was Menschen sehen. Nehmen wir als einfaches Beispiel eine Navbar und gestalten wir diese mit einem Framework, hier mit Bootstrap 4. Wir setzen in einem solchen JavaScript- und CSS-Framework einen bestimmten Code als Grundanforderung um, den wir entsprechend der Vorlage des Frameworks aufbauen. Dazu können wir TypoScript oder den VHS Viewhelper nutzen. In jedem Fall stehen wir oft vor der Herausforderung, möglichst viele Information für Besucher sichtbar und schnell erfassbar zu gestalten. Bei einer responsiven Webseite sind unsere Möglichkeiten heutzutage jedoch recht beschränkt, denn wir können in einer Navbar nicht 20 Links zu verschiedenen Themenbereichen einer Webseite einbauen. Also müssen wir die Informationen straffen und möglicherweise auch neu ordnen und zusammenfassen. Ein Beispiel dazu, auch wenn dies ein Mega Menu und keine Navbar ist, finden Sie oben in dieser Webseite. 

Sie finden also nun wenig Platz vor und ordnen die Informationen der gesamten Webseite neu an. Dabei überlegen Sie sich passende Begriffe, um vielleicht bestimmte Themenbereiche neu zusammenzufassen. Ein Beispiel in dieser Webseite der Agentur IBK ist das TYPO3 Tutorial: Hier haben wir alle möglichen Informationen zum Erlernen von TYPO3 zusammengefasst, wozu auch Fundstellen für Source Code und weitere tiefer gehende Informationen gehören. All diese sind nun so benannt, dass Sie für einen menschlichen Besucher schnell und intuitiv erfassbar sind. Für weitere Informationen kann man auf das jeweilige Drop Down Menu gehen. 

Es gibt aber noch weitere Informationen schon in der ersten Ebene, und auf die möchten wir nun eingehen. 

Zusätzlich zu den Informationen in der Navigation, die Menschen erfassen, gibt es noch weitere Quellen, die für Maschinen da sind. Oft werden diese Informationen für mehrere Zwecke genutzt. Bei Links ist das wichtigste das TITLE-Attribut, das wir jedem Link mitgeben können. 

Einen Link schreiben wir im HTML-Code, unabhängig von der Wahl unseres Content Management Systems, in einer solchen Form: 

<a href="seite.html" title="TYPO3 Tutorial"> TYPO3 Tutorial</a>

Vergessen wir an dieser Stelle einmal, dass wir noch Klassen für CSS und weitere Attribute hinzufügen können, konzentrieren wir uns auf das TITLE-Attribut. Dieses dient drei Zwecken: 

• Beim Überfahren des Links mit der Maus erscheint der im TITLE-Attribut hinterlegte Begriff neben dem Mauszeiger und liefert dem menschlichen Besucher zusätzliche Informationen zu Ziel und Zweck des Links 
• Personen mit eingeschränkter Sehfähigkeit können sich dank barrierefreier Gestaltung einer Webseite den Text des TITLE-Attributes vorlesen lassen 
• Suchmaschinen lesen den Text des TITLE-Attributes aus und bewerten diesen in Zusammenhang mit der dort verlinkten Zielseite 

Sie sehen also: Mit den TITLE-Attribut können Sie einem Link eine Reihe von weiteren Informationen mitgeben, die sich zusätzlich zu den für Menschen lesbaren Informationen hinter diesem Link verstecken.

Wenn man eine Webseite aufbaut und SEO betreibt, gibt es bestimmte Maßzahlen, an die man sich üblicherweise hält. Die Angaben zur optimalen Länge eines Titels innerhalb eines Links gehen auseinander. Allgemein empfohlen wurde in den letzten Jahren eine Zeichenzahl von max. 70 Zeichen für den textlichen Inhalt eines TITLE-Attributes. Hier gehen die Meinung jedoch auseinander, es gibt Quellen, die auch sagen, dass man ruhig bis zu 200 Zeichen nehmen kann. Es gibt das Experiment eines Kollegen, der Google mit Links in verschiedener Länge gefüttert hat und zu dem Ergebnis kam, dass alles jenseits der 70 Zeichen nicht mehr beachtet wurde. Und es gibt Diskussionen, die diesem entgegen stehen. Zudem prüfen viele Tools die Länge von Links und bemängeln alles, was länger ist als 70 Zeichen. Wie es oft ist in der Suchmaschinenoptimierung: Die Meinungen über die optimale Handlungsanweisung gehen auseinander. 

Wenn bei Ihnen nun bei Ihrem TYPO3 Projekt die Ratlosigkeit wächst, sollten Sie allerdings einen anderen Punkt in Betracht ziehen. Und der heißt: Wie viele Links habe ich eigentlich in meiner Webseite? Hier sollten Sie einmal kurz nachrechnen. Wenn Sie eine Webseite mit einem Mega Menu haben, dass mindestens drei Ebenen in der Navigation einer Webseite darstellen kann, dann können dies auch 200 oder 500 Links sein. Wenn Sie nun jedem dieser Links ein TITLE-Attribut von 200 Zeichen Länge mitgeben, dann liegen Sie im Quelltext im letzten Fall schon bei 100 KB. Das ist eine Datenmenge, die bei jedem Zugriff auf Ihre Webseite übertragen werden muss und die nicht wie ein JavaScript Framework zwischengespeichert werden kann! In diesem Fall sollte man Mitleid mit den Besuchern haben und sich überlegen, die Datenmenge zu reduzieren. 

Sollten Sie jedoch nur wenige Punkte in der Navigation haben, weil Sie z. B. viele Produkte innerhalb eines Shops oder einer Extension verlinken und dies außerhalb der Navigation geschieht, dann sollte man längere TITLE-Attribute nutzen. 

Ein zweiter Gedanke, den man sich an dieser Stelle machen sollte und den Google ebenfalls befolgt, ist: wo führt die Seite eigentlich hin? Was ist der Inhalt der verlinkten Seite? Hier kommen wir einer Lösung schon näher. 

Denn was zeigt die verlinkte Seite an? Wir haben einen TITLE-Tag in unserer Seite, sichtbar vor allem für Suchmaschinen, wir haben zudem eine <h1> Überschrift in der Seite, sichtbar in erster Linie für Menschen, aber enorm wichtig ebenfalls für Suchmaschinen. Beide textlichen Inhalte sollten eine bestimmte Länge nicht überschreiten, und da liegt die Grenze derzeit bei ca. 70 Zeichen. 

Damit haben wir eine Benchmark und eine Quelle für die Informationen, die wir der Navigation in unserer Webseite über die Links mitgeben können: Nehmen Sie den Titel der verlinkten Seite und bauen Sie diesen in die Navigation mit ein! Als Feld kommt dazu im Backend von TYPO3 der „Alternative Navigationstitel“ in Frage. Damit haben Sie den besten Platz gefunden, um SEO mit Hilfe der Navigation zu betreiben. 

Eine Navigation für eine TYPO3 Webseite können wir mit TypoScript aufbauen. Damit haben wir die Möglichkeiten, die Optionen der Konfigurationssprache für TYPO3 zu nutzen. Bei der Generierung der Links für unsere Webseite können wir dabei auf das bewährte hierarchische Menu (HMENU) von TypoScript zurückgreifen. 

Wir haben dabei die Option, für die Generierung des TITLE-Attributes nicht nur ein Feld aus der Datenbank zu nutzen, wir können auch mehrere Felder ansprechen. Dies ist von allem dann von Vorteil, wenn wir viele Links in unserer Webseite haben und der redaktionelle Aufwand nicht immer in der zur Verfügung gestellten Zeit geleistet werden kann. 

Der Source Code für eine Navigation mit TypoScript in einer TYPO3 Webseite sieht üblicherweise so aus wie in diesem Beispiel: 

 NO = 1
NO {
  wrapItemAndSub = <li class="nav-item">|</li>
  ATagParams = class="nav-link"
  ATagTitle.field = nav_title // description// title
}

Für die Darstellung des TITLE-Attributes ist das Objekt ATagTitle zuständig. Diesem weisen wir über das Attribut field einen Wert zu. Diesem Wert können wir nun in einer hierarchischen Ordnung mehrere Quellen nacheinander zuweisen, getrennt durch Schrägstriche.

In diesem Fall erfolgt hier die folgende Reihenfolge in der Abfrage: 

• Ist das Feld nav_title für die verlinkte Seite mit Inhalt gefüllt? Wenn ja, wird dieser Wert für den Aufbau des TITLE-Attributes genommen. 
• Wenn der Wert leer ist, nimmt unser System den Wert description für die META-Beschreibung der Zielseite 
• Ist auch dieser Wert leer, nimmt unser System das Feld title, das wir beim Erstellen der Seite ausfüllen müssen, dass also immer gefüllt sein muss. 

Damit können wir die Navigation der Webseite automatisiert füllen. 

Wenn Sie also nun eine Navigation in Ihrer Webseite aufbauen sollen und sich Gedanken über das Thema SEO machen, sollten Sie die oben stehenden Tipps beherzigen. Es lohnt sich in jedem Fall, in einem TYPO3 Projekt nicht jedes mal denselben Weg zu beschreiten, sondern genau hinzusehen, welche Techniken man im Besten miteinander kombiniert. 

Navigation in TYPO3: Bootstrap Navbar und Mega Menu

SEO in TYPO3 mit sprechenden Links