Sie befinden sich hier: start » rich_text_snippets

Rich Text Snippets in Fluid Templates

Action disabled: recent

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.

Frequently Asked Questions: FAQ Page mit Rich Text Snippets

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>

TypoScript Source Code für FAQ Page

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

Fluid Template Source Code für FAQ Page

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>

Accordion Menu für FAQ Page

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'}
  });
});

Vorlage für FAQPage bei Schema.Org

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>

Die Vorlage für den Aufbau einer Breadcrumb Navigation finden Sie bei Schema.Org.

BlogPosting mit Rich Text Snippets

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.

Grundstruktur des HTML-Code für ein BlogPosting

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.

Fluid und HTML-Elemente für ein BlogPosting

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.

Überschrift H1

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

Überschrift H2

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

Bild mit SEO Texten

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

Autor und Datum der Veröffentlichung

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

Der eigentliche textliche Inhalt des Blogbeitrags

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