Aufbau einer korrekten Überschriftenhierarchie
Grundsätzliches zum Aufbau
Auf Webseiten ist generell immer eine korrekte Überschriftenhierarchie sicherzustellen. Insbesondere - aber nicht nur - zur Suchmaschinenoptimierung (SEO) und aus Gründen der Barrierefreiheit. Screenreader für Menschen mit visuellen Einschränkungen nutzen etwa diese Überschriften, um dem Nutzer Ansprungspunkte in der Seite vorzulesen. Dazu ist es erforderlich, dass diese korrekt aufgebaut und verschachtelt werden.
Wir benennen in Drupal diese Überschriften in der Regel wie folgt:
Name | Ebene | HTML-Tag |
Überschrift | 1 | h1 |
Überschrift II | 2 | h2 |
Überschrift III | 3 | h3 |
usw... |
Ein Überschriftenhierarchie ist dann korrekt aufgebaut wenn in Bezug auf die gesamte Seite folgendes erfüllt ist:
Korrekte Verschachtelung: Semantisch kommt ein h2 innerhalb einer h1 vor und eine h3 innerhalb einer h2
Kontinuität: Es wird keine Ebene übersprungen. Jede Seite beginnt immer mit einer h1 - niemals mit einer h2. Es folgt niemals etwa auf eine h1 direkt eine h3.
Viele Websites haben auch nur eine h1 pro Seite. Dies wurde früher auch mal als SEO-relevant angesehen. Dies ist aber ein Mythos. Eine Website kann auch mehrere h1 auf oberster Ebene haben - dies hängt vom Aufbau der Website ab.
Wie viele Überschriftsebenen es insgesamt gibt, hängt von der jeweiligen Website ab. Insgesamt kann man sich die Struktur also etwa so vorstellen:
AutoLevel-Funktion
Für Redakteur*innen ist es insbesondere bei Nutzung eines Content-Managementsystems mit modularem Aufbau oft schwierig, eine korrekte Überschriftenhierarchie so wie oben beschrieben zuverlässig einzuhalten. Auf langen Seiten verliert man schnell den Überblick auf welcher Ebene man sich genau befindet. Kopiert oder verschiebt man Inhalte zwischen Ebenen, so entstehen schnell Fehler.
PLANWERK 6 liefert daher alle Drupal-Websites mit einer selbstentwickelten AutoLevel-Funktion aus. Diese erleichtert die Einhaltung einer korrekten Hierarchie erheblich.
Die grundsätzliche Idee dabei ist, dass man als Redakteur*in jeden Inhaltsabschnitt isoliert für sich betrachtet und so tut, als ob dieser Abschnitt ganz alleine auf der Seite wäre. Man beginnt also innerhalb eines Inhaltsabschnitts immer mit einer H1. Gibt es weitere Unterebenen folgen h2, h3, usw.
Die AutoLevel-Funktion analysiert die bestehende Struktur der Seite und erkennt, welche Überschriften in welcher Reihenfolge wo verwendet wurden. Die tatsächliche Position dieses Inhaltsabschnitts auf der Seite wird dann berücksichtigt und AutoLevel "schiebt" die Überschriften passgenau auf die richtige Ebene. Befindet sich so ein Inhaltsabschnitt etwa bereits innerhalb eines anderen Inhaltsabschnitts mit einer Überschrift, so werden innerhalb dieses Abschnitts alle H1 zu H2, alle H2 zu H3 usw.