Überschriften in Contao: Dachzeilen in Contao umsetzen (Teil 2)

Moin!

Vorab: Dies ist der 2. Teil zum Thema Überschriften in Contao. Wenn du letzte Woche Urlaub hattest und den 1. Teil noch nicht gelesen hast, kannst du das hier nachholen: Überschriften in Contao Teil 1.

***

Vor ein paar Jahren habe ich mich sehr intensiv mit der Frage beschäftigt, wie man eigentlich am Besten eine Überschriften-Kombination, bzw. eine Überschrift mit Dachzeile umsetzt.

Hä?!?

Ich meine in etwa sowas hier:

Ich bin eine Dachzeile
Und ich bin die richtige Überschrift

Schaut man in der Contao Welt mal ein bisschen links und rechts, dann sieht man immer mal wieder solche Lösungen:

1. Die schlechteste Lösung

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

Denn die h3 ist normalerweise kleiner als die H2. Mit dem richtigen Styling sollte es also in etwa so aussehen, wie eine Überschrift mit Dachzeile. Nur ist es eben keine.

Es sind zwei Überschriften, die zwar in Bezug zueinander stehen, aber in der falschen Reihenfolge!

Wie auch schon letzte Woche, gilt auch dieses Mal, dass das Google und damit den SEOs nicht gefallen wird.

2. Die Alternative

Dann vielleicht doch die Dachzeile als neutralen Text mit einem <div>, <p> oder <span> auszeichnen?

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

Auch diese Darstellung ließe sich mit ein bisschen Styling entsprechend umsetzen, hat allerdings den Nachteil, dass die Dachzeile weniger SEO-relevant ist.

Aber einen Tod muss man ja sterben, oder?

Nicht unbedingt (wenn du bereit bist, 2 Anpassungen zu machen).

3. Meine bevorzugte Lösung

Ich habe mich damals gefragt: Wie machen das eigentlich die großen Online-Zeitungen?

Die Antwort: 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: Contao Themes für Agenturen und Webdesigner:innen (untersuch' mal die 1. Überschrift).

Dieses Markup hat 2 Vorteile:

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

Bleibt nur ein Problem: Wie lässt sich so eine Lösung in Contao umsetzen?

Wie so oft gibt es mehr als eine richtige Lösung. Aber wenn du keine Idee hast, dann lass dich gerne von meiner Lösung inspirieren:

1. ich lege ein neues Feld supline an und füge es vor dem Textfeld headline per DCA-Anpassung ein
2. ich passe für Inhaltselemente die Templates block_searchable, block_unsearchable und ce_headline an.
   • Wenn etwas in supline steht, dann soll das Markup wie oben zu sehen verwendet werden.
   • Wenn nicht, verwende „fast“ das bisherige Markup (dazu mehr nächste Woche)
3. Den Doppelpunkt zwischen Dachzeile und Überschrift blende ich „screenreaderfreundlich“ per CSS aus.

Ach ja: Leider geht das für Frontend-Module aktuell noch nicht so einfach. Dort muss man noch für jedes Modul ein Template anlegen. Es wird aber sehr wahrscheinlich in der nächsten LTS Contao 5.3 einfacher (mehr dazu nächste Woche).

***

Wie setzt du kombinierte Überschriften um? Machst du es bereits wie so ziemlich alle großen Online-Portale? Oder hast du noch eine andere Lösung? Dann melde dich gerne.

Viele Grüße,
Dennis
PS: Wenn dir die heutige Flaschenpost gefallen hat und du nur eine Person kennst, der das ebenfalls gefallen würde, dann leite diese Mail doch an sie oder ihn weiter. Das ist gut fürs Karma 😉