Rich Text Snippets in Fluid Templates

Rich Text Snippets sind strukturierte Daten in einer HTML Webseite. Mit Hilfe dieser Struktur erleichtern wir es Suchmaschinen, bestimmte Inhalte in unserer Webseite zu finden. Für eine erfolgreiche SEO sollte man also auf jeden Fall überlegen, ob man Rich Text Snippets für bestimmte Zwecke einsetzen kann. Da bestimmte Suchergebnisse wie FAQ (Frequently Asked Questions) bei Google gesondert hervorgehoben und oftmals als erstes Ergebnis angezeigt werden, sollte man auf diese Maßnahme der Suchmaschinenoptimierung auf keinen Fall verzichten.

Wir können auf einer Webseite FAQ einbauen. Diese Frequently Asked Questions werden bei Google, wenn unsere Webseite gefunden wurde, als Frage und Antwort dargestellt. Um dies zu erreichen, gibt es bei Schema.Org eine Vorlage für eine FAQPage. Eine Frage mit der dazu gehörenden Antwort wird dann in solch einer Form dargestellt:

<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 eine einzelne FAQ wird mit anderen Fragen und Antworten umrahmt von einer weiteren Eigenschaft, die Suchmaschinen klar macht, dass es sich bei dem nun folgenden Text um Frequently Asked Questions handelt:

<div itemscope itemtype="https://schema.org/FAQPage">
  [...Hier die Fragen und Antworten...]
</div>

Wie können wir dies nun am besten in unsere TYPO3 Webseite integrieren? Es gibt mehrere Lösungsansätze und wir könnten natürliche eine Extension in unser TYPO3 Projekt einbinden. Für die Webseite der Agentur IBK haben wir eine andere Lösung gewählt: Wir haben das Backend Layout um ein weiteres Feld (hier: ColPos Nr. 16) erweitert und lesen Überschrift und Bodytext aus der Tabelle tt_content aus. Einfacher und leichter zu pflegen geht es kaum.

Das TypoScript zum Auslesen der Daten und für die Darstellung der einzelnen Elemente im Frontend sieht wie folgt aus:

## FAQ
faq_content = CONTENT
faq_content {
  table = tt_content
  select {
    where = colPos = 16
    orderBy = sorting
  }
  
  renderObj = COA
  renderObj {
    10 = TEXT
    10.wrap = <div itemscope itemprop="mainEntity" itemtype="https://schema.org/Question" class="faqlist">
 
    20 = TEXT
    20 {
      field = header
      required = 1
      wrap = <h3 itemprop="name">|</h3>    
    }

    30 = TEXT
    30.field = bodytext
    30.required = 1
    30.wrap ( 
      <div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
        <div itemprop="text">|</div>
      </div> 
    )
  
    40 = TEXT
    40.wrap = </div>
  }
}     

Wir können die oben erzeugte Variable faq_content nun in unser Fluid Template einbauen, um die jeweiligen Fragen und Antworten darzustellen:

<div itemscope itemtype="https://schema.org/FAQPage">
  <f:format.raw>{faq_content}</f:format.raw>
</div>

Um die Darstellung der FAQ auf unserer TYPO3 Webseite zu perfektionieren, können wir die einzelnen Fragen und Antworten nun per Accordion animieren. Das Problem gegenüber einen normalen Accordion ist dabei allerdings die Verschachtelung der Elemente. Wir können die einzelnen Paarungen von Fragen und dazu gehörenden Antworten bei den Frequently Asked Questions jedoch einzeln über eine Klasse ansprechen, wie in dieser Zeile TypoScript angelegt:

10.wrap = <div itemscope itemprop="mainEntity" itemtype="https://schema.org/Question" class="faqlist">

Mit ein wenig JavaScript, die Einbindung von jQuery einmal vorausgesetzt, können wir unser Accordion nun ans Laufen bringen:

$(function() {
  $(".faqlist").accordion({ 
    collapsible:true, 
    active:false, 
    event:'click', 
    heightStyle:'content', 
    animate:{duration:'1000',
    easing:'swing'}
  });
});

Zur Suchmaschinenoptimierung einer TYPO3 Webseite ist es eine gute Maßnahme, mit Rich Text Formaten zu arbeiten. Mit Hilfe dieser Formatierung erleichtern wir Suchmaschinen das Crawlen unserer Webseite. Der Klickpfad kann mit Hilfe entsprechender Rich Text Snippets von Google eingelesen und bei einem Suchergebnis dargestellt werden. Für eine erfolgreiche SEO sollte man auf diese Anforderung auf jeden Fall zurückgreifen.

Hier ist nun ein Source Code für eine Brotkrümelnavigation mit Rich Text Snippets. Zum Einsatz kommt hier der VHS Viewhelper, weil dieser über Fluid Templates den Einsatz von Schleifen (Iterations) und Bedingungen (Conditions) erlaubt.

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

Stellen Sie sich vor: Sie betreiben einen Blog auf Ihrer Webseite. Wäre es nicht schön, wenn die Beiträge aus Ihrem Blog bei den Google Suchergebnissen gelistet werden? Um dies zu erreichen, können Sie die Rich Text Snippets für ein BlogPosting nutzen. Als Beispiel zeigen wir Ihnen einen Auszug aus dem Fluid Template des Blog unserer Agenturwebseite. Bei diesem Blog handelt es sich um eine von Thomas Berscheid erstellte Extension für die TYPO3 Webseite der Agentur.

Jeder einzelne Beitrag des Blog wird von einem HTML-Code eingefasst, der auf den Typ des BlogPosting hinweist:

<article class="col-md-12" itemscope itemtype="https://schema.org/BlogPosting"> 
  [...Hier der Inhalte des Blog...]  
</article> 

In diesen Rahmen hängen wir nun die einzelnen Elemente ein, aus denen ein Beitrag besteht. Dabei kommt Bootstrap als Vorlage für ein responsives Layout zum Einsatz.

Bei diesem Anwendungsfall übergeben wir ein Objekt blog an unser Fluid Template. Nun lesen wir die einzelnen Variablen aus. Bei diesem Schritt ordnen wir die einzelnen Elemente den Rich Text Elementen zu.

<div class="row">
  <div class="col-md-12">
    <h1 itemprop="headline">{blog.titel}</h1>
  </div>
</div>

<div class="row">
  <div class="col-md-12 blog-titel">
    <h2 itemprop="abstract">{blog.kurzfassung}</h2>
  </div>
</div>

<div class="row">
  <div class="col-md-12">
    <img itemprop="image" title="{blog.titel}" alt="{blog.titel}" src="meinbild.jpg">
  </div>
</div>

<div class="row">
  <div class="col-md-12">
    <span itemprop="author">{blog.name}</span>
    <span itemprop="datePublished"><f:format.date format="d.m.Y H:i:s">{blog.datum}</f:format.date></span>
  </div>
</div>

<div class="row">
  <div class="col-md-12" itemprop="articleBody">
    <f:format.html>{blog.inhalt}</f:format.html>
  </div>
</div>

<div class="row">
  <div class="col-md-12">
    <a href="meineseite.de" itemprop="url" title="{blog.titel}">Mein Link</a>
  </div>
</div>