TYPO3 SEO mit Rich Text Snippets: Strukturierte Daten

Der Gebrauch von Rich Text Snippets, mit deren Hilfe man strukturierte Daten für Google erzeugen kann, bietet eine hervorragende Möglichkeit zur Suchmaschinenoptimierung. Denn mit dieser SEO Maßnahme erleichtern wir Google das Lesen unserer Webseite: Wir standardisieren bestimmte Inhalte unserer Seite nach einem definierten Schema auf unserer TYPO3 Webseite, damit diese von Suchmaschinen leichter verarbeitet und gespeichert werden können. 

Strategie für Standards definierter Inhalte

Hinter dieser Strategie steckt folgende Überlegung: Es gibt auf vielen Webseiten immer wiederkehrende Inhalte, die einer (fast) immer gleichen Struktur folgen. Auf der Webseite von Schema.Org werden hier Filme als Beispiel genannt, bei denen es einen Titel, einen Regisseur, Hauptdarsteller, ein bestimmtes Genre und einen Komponisten für die Filmmusik gibt.

Event als Beispiel für die Struktur von Daten

Ähnliches gilt auch für andere Inhalte, mit denen wir SEO betreiben möchten: Wenn wir ein Event anbieten, sei es es ein Konzert der Manic Street Preachers, eine georgische Tanzgruppe oder eine TYPO3 Schulung, dann haben wir auch in diesem Fall ständig wiederkehrende Daten, mit denen wir dieses Event beschreiben: 

  • Titel der Veranstaltung 
  • Tag der Veranstaltung 
  • Zeitpunkt für Anfang und Ende des Events 
  • Ort der Veranstaltung 
  • Preis der Karten oder der Teilnahme, ggf. gestaffelt 

Diese Liste ließe sich weiter fortsetzen. Man sieht: Viele Informationen, die wir auf einer Webseite darstellen können, lassen sich in ein Schema packen und damit für eine Suchmaschinenoptimierung herrichten. Mehrere Vorlagen und die Umsetzung für TYPO3 schildern wir Ihnen in dieser Seite und bei den Code Snippets für TYPO3 sowie im Wiki unserer Agentur. Alle Links dazu finden Sie unten auf dieser Seite.

Warum sollte man Rich Text Snippets verwenden?

Es stellt sich nun die Frage, warum man Rich Text Snippets auf einer Webseite überhaupt verwenden sollte. Nun, diese Frage sollte man sich bei der Konzeption der Inhalte einer Webseite schon stellen. Beantworten lässt sie sich auf jeden Fall damit, dass wir damit eine Technologie nutzen können, um besser bei Google gefunden zu werden. Denn natürlich honoriert es Google, wenn wir der Suchmaschine die Arbeit erleichtern. Und selbst wenn wir keine Produkte auf unserer Webseite, keine Events, keine Nachrichten und keinen Blog anbieten, dann haben meist aber eine Brotkrümel-Navigation, mit der wir den Besuchern einen Klickpfad anbieten. Genau diese Parallelnavigation können wir mit Hilfe von Rich Text Snippets in strukturierte Daten einfassen und sehen dann später nach dieser SEO Maßnahme die Rootline in den Suchergebnissen bei Google. 

Breadcrumb Navigation: Beispiel für Rich Text Snippets

Eine Brotkrümel-Navigation, nach Hänsel und Gretel auch Breadcrumb Navigation oder Parallelnavigation genannter Klickpfad, erlaubt es dem Besucher unserer Webseite, den Link zur Startseite genauso wiederzufinden wie die Kinder ihren Weg aus dem Wald finden (wollten). Solch eine Navigation kommt auf sehr vielen Webseiten zum Einsatz.

Im Fall einer Webseite mit TYPO3 können wir eine Brotkrümelnavigation mit Hilfe von TypoScript oder mit dem VHS Viewhelper als Extension erstellen. Sollten wir allerdings Rich Text Snippets als strukturierte Daten in unsere Parallelnavigation einbauen wollen, so müssen wir auf den VHS Viewhelper zurückgreifen, denn wir müssen die Links entsprechend ihrer Ebene durchnumerieren und damit erreichen wir die Grenzen dessen, was wir mit TypoScript machen können. 

Quelltext Vorlage von Schema.Org

Solch eine Vorlage für den Quelltext einer solchen Breacrumb Navigation sieht 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>

Anhand dieses Source Code Beispieles sehen Sie mehrere Eigenschaften, die wir strukturierten Daten mitgeben sollten: 

  • Mit dem itemscope leiten wir das strukturierte Element ein und definieren verschiedene untergeordnete Objekte 
  • Über den itemtype mit dem entsprechenden Link geben wir der Suchmaschine die Information, um welchen Typ es sich bei den Daten handelt, auch hier können wir eine Hierarchie abbilden 
  • Über die Eigenschaft itemprop zeigen wir die verschiedenen Attribute mit Typ und Wert, der von der Suchmaschine gelesen werden soll

Weitere Erläuterungen finden Sie bei Schema.Org:

Code Beispiel für die BreadCrumbList

Umsetzung der Brotkrümel-Navigation mit VHS Viewhelper

Solch eine Vorlage können wir mit Hilfe des VHS Viewhelpers in eine Struktur für eine Schleife umsetzen, die dann die Brotkrümel-Navigation darstellt: 

 <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>

Wie man daraus eine gesamte Parallelnavigation erstellen kann, erfahren Sie bei unseren Code Snippets für TYPO:

Blog mit strukturierten Daten nach Schema.Org

Auch einen Blogbeitrag können wir nach einem vordefinierten Schema so gestalten, dass die einzelnen Elemente des Postings besser für SEO bearbeitet sind.

Vorlage von Schema.Org für BlogPosting

Am Beispiel des Blogs unserer Agenturwebseite sehen Sie hier, wie man mit Hilfe der einzelnen Objekte eines Datensatzes in einem Blogbeitrag gezielt Properties für strukturierte Daten befüllen kann: 

 <article class="col-md-12" itemscope itemtype="https://schema.org/BlogPosting"> 
  <h1 itemprop="headline">{blog.titel}</h1>
  <img itemprop="image" src="https://www.webseite.de/img/Blog-Nachrichten.jpg">
  <h2 itemprop="abstract">{blog.kurzfassung}</h2>
  <span itemprop="author">{blog.name}</span>
  <span itemprop="datePublished">{blog.datum}</span> 
  <f:format.html>{blog.inhalt}</f:format.html>
  <a href="{v:page.absoluteUrl()}" itemprop="url" title="{blog.titel}"> Link zum Post</a>
</article>

Hier handelt es sich um eine gekürzte Version des Quelltextes in der View, die in unserer Blog Extension die Einzelansicht eines Beitrags bereitstellt. 

Frequently Asked Questions in Google Suchergebnissen

Wenn man bei Google nach Dokumentation oder Anweisungen sucht, wie etwa der Installation von TYPO3 in 5 Schritten, dann findet man bei Google oftmals FAQ. Diese Frequently Asked Questions werden besonders hervorgehoben und sie sind schon in der Darstellung bei Google in einer Form von Frage und Antwort dargestellt. Das ist ein gravierender Grund, sich einmal näher mit der Vorlage für FAQ Pages bei Schema.Org zu beschäftigen. 

Rich Text Snippets Source Code für FAQ

Die Darstellung von Fragen und Antworten für eine FAQ Page folgt der Dokumentation von Schema.Org wie in dieser Seite beschrieben: 

Schema.Org - FAQPage

Wir können nun den Source Code unseres TYPO3 Fluid Templates so aufbauen, dass wir alle Inhalte für FAQ in einen entsprechenden Rahmen einbauen: 

 <div itemscope itemtype="https://schema.org/FAQPage">
  [...FAQ - Fragen und Anworten...]
</div>

Je nach Vorgehensweise kann man die einzelnen Inhalte nun über Partials oder weitere Elemente steuern. Herauskommen sollte solch ein Quellcode, bei dem die Frage in einer Überschrift und die Antwort jeweils in einem Fließtext steht: 

 <div itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
  <h3 itemprop="name">[...Frage...]</h3>
  <div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
    <div itemprop="text">
      <p>[...Antwort...]</p>
    </div>
  </div>
</div>

Solch ein Konzept haben wir für unsere Agenturwebseite für die FAQ umgesetzt. Source Code für TypoScript, Fluid Template und JavaScript finden Sie ausführlich dokumentiert im Wiki unserer Agentur.