Überschriften-Checker: H1- bis H6-Gliederung aus HTML | We.Inc
Füge HTML ein und sieh seine H1- bis H6-Gliederung als Baum, mit markierten übersprungenen Ebenen, fehlenden oder doppelten H1 und leeren Überschriften. Läuft in deinem Browser; nichts wird hochgeladen.
Füge das HTML einer Seite ein, und dieser Checker zeichnet ihre Überschriften-Gliederung als eingerückten Baum, von h1 bis h6, einschließlich Elementen mit role="heading". Er markiert übersprungene Ebenen wie eine h2, auf die eine h4 folgt, eine fehlende oder doppelte h1 und leere Überschriften. Das Parsen passiert in deinem Browser, der Code verlässt dein Gerät also nie.
Was der Checker markiert
Prüfung
Beispiel
Warum es wichtig ist
Übersprungene Ebene
h2 direkt gefolgt von h4
Screenreader-Nutzer verlieren die Orientierung
Keine h1
Seite beginnt mit h2
Die Seite hat keine Hauptüberschrift
Mehr als eine h1
Logo und Titel sind beide h1
Eine h1 sollte die Seite benennen
Leere Überschrift
<h3></h3> oder nur ein Icon
Wird vorgelesen, ohne etwas zu sagen
Erste Überschrift ist keine h1
h3 vor der h1
Die Gliederung beginnt mittendrin
Mit Überschriften überfliegen Menschen mit Screenreadern eine Seite, und Suchmaschinen erkennen daran die Form deiner Inhalte. Füge unten das HTML einer Seite oder Komponente ein, aus dem Seitenquelltext oder deinem Editor, und die Gliederung erscheint mit jedem Problem markiert in der Zeile, in der es auftritt.
Kopiere das HTML deiner Seite, zum Beispiel über den Seitenquelltext, und füge es in das Feld ein. Oder lade das Beispiel, um die Prüfungen zu sehen.
Der Checker liest jedes h1 bis h6 und jedes Element mit role="heading" in Dokumentreihenfolge.
Lies den Baum: Die Einrückung folgt der Ebene, und Warnungen stehen neben der Überschrift, die sie ausgelöst hat.
Korrigiere das Markup, füge es erneut ein und kopiere die saubere Gliederung als reinen Text, wenn du sie für ein Briefing brauchst.
Nutze Überschriftenebenen für die Struktur und CSS für die Größe. Wirkt eine h2 in einer Karte zu groß, gestalte sie um, statt sie durch eine h4 zu ersetzen.
Mehrere Ebenen zurückzuspringen ist in Ordnung: Auf eine h4 kann eine h2 folgen, wenn ein neuer Abschnitt beginnt.
Ein Logo ist selten die richtige h1. Gib die h1 dem Titel, der diese Seite benennt.
Füge bei Single-Page-Apps das gerenderte HTML aus dem Element-Inspektor deines Browsers ein, denn der Seitenquelltext zeigt womöglich nur eine leere Hülle.
Per CSS versteckter Text zählt hier trotzdem, da der Checker Markup liest und dein Stylesheet nicht anwendet.
Häufige Fragen
Ist es falsch, Überschriftenebenen zu überspringen?
Laut dem Überschriften-Tutorial des W3C kann das Überspringen von Rängen verwirren und sollte wo möglich vermieden werden, zum Beispiel eine h2, auf die direkt eine h4 folgt. Einen Abschnitt zu schließen und wieder nach oben zu springen, etwa von h4 zu h2, ist normal.
Darf eine Seite mehr als eine h1 haben?
HTML erlaubt es, aber MDN empfiehlt eine einzige h1, die den Inhalt der Seite beschreibt. Die alte Idee, dass jeder Abschnitt wieder bei h1 beginnen könne, beruhte auf einem Dokumentgliederungs-Algorithmus, den Browser nicht verwenden, daher warnt dieses Tool bei einer zweiten h1.
Warum kann ich nicht einfach eine URL eingeben?
Dies ist eine statische Seite, die in deinem Browser läuft, und Browser verhindern, dass eine Website das HTML einer anderen liest. Das Einfügen des Codes hält das Tool ehrlich und privat: Nichts wird irgendwohin gesendet.
Versteht es role="heading"?
Ja. Ein Element mit role="heading" wird mit seinem aria-level gelesen. Fehlt aria-level, greifen Browser auf Ebene 2 zurück, daher behandelt der Checker es als h2 und markiert das fehlende Attribut.
Beeinflussen Überschriften die SEO?
Überschriften beschreiben jedem Leser die Struktur deiner Inhalte, auch Suchmaschinen. Wir versprechen nichts zu Rankings; eine klare Gliederung lohnt sich in erster Linie für Menschen.
Die Gliederung lesen
Jede Zeile ist eine Überschrift, eingerückt nach ihrer Ebene. Eine gesunde Gliederung liest sich wie ein Inhaltsverzeichnis: ein Titel, eine Handvoll h2-Abschnitte und darunter bei Bedarf h3-Unterabschnitte.
Warnungen zeigen auf die Überschrift, an der der Sprung passiert ist, nicht auf die davor. Behebe sie von oben nach unten, denn eine falsche Ebene weit oben kann alles darunter merkwürdig aussehen lassen.
Häufige Ursachen
Die meisten übersprungenen Ebenen entstehen, weil eine Überschrift wegen ihrer Standardgröße gewählt wurde. Templates und Page-Builder machen das oft in Footern und Karten. Andere stammen von Komponenten, die auf Seiten mit anderer Struktur wiederverwendet werden, weshalb es sich lohnt, die Überschriftenebene einer Komponente konfigurierbar zu machen.
Leere Überschriften umschließen meist ein Icon oder ein Bild ohne Alt-Text. Gib dem Bild einen Alt-Text, füge sichtbaren Text hinzu oder verwende dafür keine Überschrift mehr.
Überschriftenebenen auf einen Blick
Wie die sechs Ebenen auf einer Webseite üblicherweise verwendet werden
Ebene
Typische Verwendung
Der Seitentitel, einmal
Hauptabschnitte der Seite
Unterabschnitte innerhalb einer h2
Details innerhalb einer h3, etwa Punkte in einer Funktionsliste
Selten; tiefe Dokumentation und Rechtstexte
Eine kaputte Gliederung reparieren
Vorher: Ebenen nach Größe gewählt
Die Kartentitel springen von h2 zu h4, weil h4 die passende Größe zu haben schien.
Nachher: die richtige Ebene, mit CSS umgestaltet
Die Karten nutzen h3, die nächste Ebene darunter, und eine Klasse hält sie klein.
Prüfe deine Überschriften
Füge unten HTML ein. Es wird in deinem Browser gelesen und nie hochgeladen.
Zu prüfendes HTML
Beispiel laden
Leeren
Gliederung
{n} Überschriften, {w} Warnungen
Keine Überschriften gefunden. Füge das HTML einer Seite ein, um ihre Gliederung zu sehen.
Keine Probleme gefunden.
(leer)
role=heading
Gliederung kopieren
Springt von h{from} zu h{to}
Eine weitere h1 auf der Seite
Leere Überschrift
Die erste Überschrift ist keine h1
Die Seite hat keine h1
role=heading ohne aria-level (wird als Ebene 2 gelesen)