Dachzeilen semantisch korrekt umsetzen

Wie setzt man eine Überschriften-Kombination — also eine Überschrift mit Dachzeile — am besten um? Gemeint ist so etwas:

Ich bin eine Dachzeile Und ich bin die richtige Überschrift

Schaut man in der Contao-Welt ein bisschen links und rechts, sieht man immer wieder diese Lösungen:

1. Die schlechteste Lösung

<h3>Ich bin eine Dachzeile</h3>
<h2>Und ich bin die richtige Überschrift</h2>

Die H3 ist normalerweise kleiner als die H2 — mit dem richtigen Styling sieht das also ungefähr aus wie eine Überschrift mit Dachzeile. Nur ist es keine: Es sind zwei Überschriften, die zwar in Bezug zueinander stehen, aber in der falschen Reihenfolge. Wie schon bei der neutralen Überschriften-Option gilt: Das wird Google und damit den SEOs nicht gefallen.

2. Die Alternative

Die Dachzeile als neutralen Text mit div, p oder span auszeichnen:

<div>Ich bin eine Dachzeile</div>
<h2>Und ich bin die richtige Überschrift</h2>

Auch das lässt sich mit ein bisschen Styling umsetzen — hat aber den Nachteil, dass die Dachzeile weniger SEO-relevant ist. Einen Tod muss man also sterben? Nicht unbedingt.

3. Die bevorzugte Lösung

Wie machen das eigentlich die großen Online-Portale wie Zeit, taz, FAZ, tagesschau oder Spiegel? In etwa so:

<h2>
  <span class="dachzeile">Ich bin eine Dachzeile</span>
  <span class="separator">: </span>
  <span class="ueberschrift">Und ich bin die richtige Überschrift</span>
</h2>

Ein Beispiel aus der Praxis: Contao Themes für Agenturen und Webdesigner:innen — untersuch mal die erste Überschrift.

Dieses Markup hat zwei Vorteile:

1. Alle relevanten Begriffe stehen in einer Überschrift.
2. Die Überschrift ist für Suchmaschinen wie Screenreader gleichermaßen lesbar.

Umsetzung in Contao

Wie so oft gibt es mehr als eine richtige Lösung. Wenn du keine eigene Idee hast, lass dich von dieser inspirieren:

1. Lege ein neues Feld supline an und füge es per DCA-Anpassung vor dem Feld headline ein.
2. Passe für Inhaltselemente die Templates block_searchable, block_unsearchable und ce_headline an: Steht etwas in supline, wird das Markup von oben verwendet — wenn nicht, „fast" das bisherige.
3. Blende den Doppelpunkt zwischen Dachzeile und Überschrift „screenreaderfreundlich" per CSS aus.

Die genannten Templates beziehen sich auf die alten PHP-Templates. Für Frontend-Module ist der Weg aufwendiger: Dort brauchst du für jedes Modul ein eigenes Template. Wie du Überschriften in den Twig-Templates von Contao 5 zentral anpasst, zeigt Überschriften-Klasse per Twig ergänzen.