SEO-Überschriftenstruktur

Wie diese Prüfung funktioniert

Scanaris zählt die <h1>-Tags im HTML deiner Seite. Das richtige Ergebnis ist genau eins. Gibt es keins, öffnet es einen Befund mit mittlerem Schweregrad: Weder Google noch ein Screenreader wissen, was das Hauptthema ist. Gibt es zwei oder mehr, öffnet es einen mit niedrigem Schweregrad und der Anzahl: Mehrere Hauptüberschriften verwässern, worum es auf der Seite geht. Untersucht wird nur das ausgelieferte HTML, ohne JavaScript auszuführen, und nur die gescannte Seite.

Warum das wichtig ist

Die <h1> ist die Schlagzeile der Seite, das Erste, was ein Screenreader ansagt, und eines der klarsten Signale, die Google hat, um das Thema zu verstehen. Eine Seite ohne h1 ist wie ein Artikel ohne Titel: Die Suchmaschine muss ihn aus dem Rest ableiten. Mehrere h1 sind kein HTML-Fehler, aber sie verteilen dieses Signal: Hat deine Produktseite Produktname, Slogan und „Bewertungen" alle als h1, ist keins der drei das Thema. Und sie ist die Basis der restlichen Hierarchie: h2 teilen den Inhalt in Abschnitte, h3 unterteilen, und so navigiert, wer Tastatur oder Screenreader nutzt, und so zerlegen KI-Assistenten deinen Text, um ihn zu zitieren.

Warum das passiert

Der häufigste Fall von null h1 ist das Design: Der große Text im Hero ist ein div mit Größenklassen oder ein p, weil wer ihn gebaut hat, ans Aussehen und nicht an die Struktur gedacht hat. In Single-Page-Apps rendert JavaScript die h1, und sie ist nicht im anfänglichen HTML. Der Fall mehrerer h1 kommt meist von Komponenten: Jede Karte, jeder Abschnitt, jedes Widget bringt seine eigene h1 mit, oder das Logo ist „fürs SEO" in eine gepackt, was ein Rat von 2008 ist.

So behebst du es

• Eine h1 pro Seite mit dem Hauptthema, sichtbar und nahe am Anfang des Inhalts. Auf der Startseite, was du tust; bei einem Artikel sein Titel; bei einem Produkt sein Name.
• Das Logo ist keine h1. Es ist ein Link zur Startseite mit dem Markennamen als Text oder als alt.
• Der Rest in h2 und h3, ohne Ebenen zu überspringen: Eine h3 gehört in einen Abschnitt mit h2. Interessiert dich ein Tag nur wegen der Größe, nutze eine CSS-Klasse, keine Überschriftenebene.
• In Komponenten nimm die Ebene als Prop entgegen (<Heading :level="2">), statt sie innen festzulegen, damit dieselbe Karte auf einer Seite h2 und auf einer anderen h3 sein kann.
• In SPAs rendere mindestens die Seitenstruktur serverseitig oder nutze Prerendering; sonst sieht Google eine leere Seite, bevor es dein JavaScript ausführt.

Prüf, ob es behoben ist

curl -s https://deinedomain.de | grep -oiE '<h[1-6][^>]*>[^<]{0,80}' | sed 's/<\(h[1-6]\)[^>]*>/\1: /'

Genau eine Zeile sollte mit h1: beginnen, gefolgt von der h2- und h3-Hierarchie in logischer Reihenfolge. Kommt nichts heraus, rendert JavaScript den Inhalt, und Google sieht ihn beim ersten Mal auch nicht.

Häufige Fragen

HTML5 erlaubt eine h1 pro Abschnitt. Warum wird das gemeldet?

Die Spezifikation erlaubte es mit dem abschnittsweisen „Outline"-Algorithmus, aber kein Browser und kein Screenreader hat ihn je umgesetzt, und die Spezifikation hat ihn 2022 gestrichen. In der Praxis bleibt eine h1 pro Seite die Empfehlung von Google und der Barrierefreiheitsrichtlinien.

Meine h1 ist per CSS versteckt, damit das Design sauber bleibt.

Eine mit display: none versteckte h1 lesen weder Google noch Screenreader. Brauchst du sie unsichtbar, aber lesbar, nutze eine Klasse für visuell versteckten Text (sr-only); aber überleg, ob die Hauptüberschrift der Seite wirklich versteckt sein sollte.

Werden die anderen Ebenen geprüft?

Diese Prüfung zählt nur h1. Leere Überschriften erkennt Barrierefreiheit, und der Tab-Titel, der nicht dasselbe wie die h1 ist, auch wenn sie sich meist ähneln, wird von SEO-Metadaten geprüft.