Anleitung

Strukturierung von Überschriften

Ein sinnvoll und klar strukturierter Text ist wichtig für gute Lesbarkeit und Nutzerfreundlichkeit einer Webseite. Um die digitale Barrierefreiheit sicherzustellen und die Suchmaschinenoptimierung (SEO) zu verbessern, ist eine korrekte Strukturierung der Überschriften auf unseren Webseiten unerlässlich.

Eine klare Strukturierung der Überschriften ist besonders für Menschen mit Sehbehinderung essentiell, da sie Hilfsmittel nutzen, um sich die Überschriften vorlesen zu lassen und direkt zum gewünschten Inhalt zu springen. Gleichzeitig trägt die Berücksichtigung der Überschriftenhierarchie zur Suchmaschinenoptimierung (SEO) bei und unterstützt somit die Sichtbarkeit und Auffindbarkeit unserer Webseiten.

Direkt zu:

Grundlegende Regeln

In RUB-Web gibt es insgesamt vier Überschriftenarten:

H1: Hauptüberschrift; das ist automatisch immer der Titel der Seite. Jede Seite hat stets nur eine H1. Die Hauptüberschrift kann nicht manuell vergeben werden. Das System nimmt immer den Titel der Seite automatisch als H1, den ihr im Backend unter General > Titel eingebt.

Als Redakteur*innen stehen uns bei der Seitenerstellung und -bearbeitung die folgenden Überschriftenarten zur Verfügung:

H2: Überschrift zweiter Ordnung; für Hauptthemen auf der Seite.
H3: Überschrift dritter Ordnung; für Zwischenüberschriften innerhalb eines Abschnitts. Die Namen von Kontaktdatensätzen sind automatisch H3.
H4: Überschrift vierter Ordnung; für weitere Untergliederungen. Die Titel von Falt- und Infoboxen sind automatisch H4.

Bitte beachtet:

Es darf keine Hierarchieebene übersprungen werden: Nach einer H2-Überschrift muss die nächsttiefere Ebene eine H3-Überschrift sein. Das Überspringen von Ebenen (zum Beispiel direkt von H2 zu H4) ist nicht zulässig und beeinträchtigt die Barrierefreiheit.
Zwischen Überschriften derselben Hierarchie muss Text stehen; es dürfen keine zwei Überschriften derselben Ebene direkt aufeinander folgen.
Es darf keine leeren Überschriften geben. Wenn ihr im Backend in einem Absatz ein Überschriftenformat ausgewählt habt, muss dort auch Text eingetragen werden beziehungsweise vorher durch euch markiert worden sein.

Überschriften in RUB-Web einstellen

Überschriften können im Paragraph "Text" eingegeben werden.

Die Überschriftenart könnt ihr im Backend im Texteditor auswählen, indem ihr den relevanten Text beziehungsweise die relevanten Wörter markiert, dann das Drop-Down-Menü „Absatz“ öffnet und dort das gewünschte Format anklickt:

texteditor_einstellen_der_gewuenschten_ueberschrift.png

Screenshot: Texteditor in RUB-Web. Auswahl des Drop-Down-Menüs "Absatz": Dort können alle verfügbaren Überschriften H2 bis H4 ausgewählt werden.

RUB

Beispiel

Hier findet ihr ein Strukturierungs-Beispiel für Überschriften:

Zur Beispiel-Seite

Hilfsmittel

Auf bereits erstellten Seiten von könnt ihr die Überschriften zum Beispiel mit den folgenden beiden Tools checken:

HeadingsMap

Die Überschriftenhierarchie kann zum Beispiel die Browser-Erweiterung HeadingsMap überprüfen:

AddOn HeadingsMap für Firefox
Erweiterung HeadingsMap für Chrome

Nach der Installation könnt ihr durch Klick auf das AddOn/die Erweiterung in eurem Browser für die jeweilige Webseite sehen, wie die Überschriften strukturiert sind. Das Tool markiert Überschriften rot, die nicht korrekt strukturiert sind. Diese könnt ihr dann im Backend von euren Webseiten anpassen.

Bookmarklet Headings

Das Bookmarklet Headings findet auch leere Überschriften:

Zum Bookmarklet Headings

Unter „Installation“ findet ihr einen Link. Diesen könnt ihr einfach in die Lesezeichenleiste oder -liste eures Browsers ziehen.

Ruft dann die Webseite auf, die ihr überprüfen möchtet. Durch Klick auf das Bookmarklet/Lesezeichen in eurer Lesezeichenleiste oder -liste werden alle als Überschriften markierten Absätze angezeigt. Falls leere Überschriften erscheinen, könnt ihr diese dann im Backend von euren Webseiten korrigieren, indem ihr entweder einen Überschriftentext einsetzt oder das Textformat auf "Absatz" ändert.

Darstellung der Überschriften durch das Bookmarklet Headings

darstellung_von_ueberschriften_im_bookmarklet.png

Screenshot: Darstellung von Überschriften im Bookmarklet Headings

Im Fall von leeren Überschriften steht kein Text zwischen (zum Beispiel) <h2> und </h2>. Dies muss im Backend korrigiert werden.

Checkliste für Überschriften

Arbeiten am Laptop an der Webseite der RUB

Eine Person arbeitet am Laptop an der Webseite der RUB.

RUB, Marquard

Verwendet aussagekräftige und kurze Überschriften, um Textabschnitte zu strukturieren.
Nutzt Überschriften nicht zu Gestaltungszwecken. Mehrere Sätze oder ganze Absätze gehören nicht in eine Überschrift.
Achtet darauf, dass die Überschriften in einer logischen und sinnvollen Reihenfolge (H2 bis H4) strukturiert sind.

Weitere Infos & Kontakt

Weitere Informationen

RUB-Web Support

Kontakt & Schulungsunterlagen