Semantik & SEO: Wie sauberer Code rankt

Semantisches HTML ist kein Rankingfaktor – Google hat mehrfach klargestellt, dass der Wechsel von <div> zu <section> allein keine Position verbessert. Es entscheidet aber darüber, was eine Suchmaschine oder ein KI-System aus deiner Seite überhaupt herauslösen kann: den Hauptinhalt, die Gliederung, die Datentabelle und das Ziel jedes Links.

Das Wichtigste in Kürze

• Kein direkter Rankingfaktor. Die HTML5-Strukturelemente <section>, <article> und <aside> sind für sich genommen kein Signal. Wer etwas anderes verspricht, verkauft eine Vermutung.
• Aber die Voraussetzung für alles Weitere. Ohne <main> ist der Hauptinhalt nicht vom Beiwerk trennbar, ohne Überschriften gibt es keine Gliederung, ohne <th> keine auswertbare Tabelle.
• Überschriften sind das wichtigste Strukturmerkmal – aus ihnen zieht Google Sprungmarken zu Seitenabschnitten und häufig auch den Textausschnitt im Snippet.
• Für KI-Systeme zählt Struktur stärker als für die klassische Suche. Retrieval-Systeme zerlegen Seiten in Abschnitte, und die Schnittkanten verlaufen an den Überschriften. Eine Seite ohne Gliederung wird an willkürlichen Stellen zerschnitten.
• Sprechende Linktexte wirken doppelt: Sie beschreiben für Crawler das Ziel und erfüllen zugleich WCAG 2.4.4.
• Drei Pflichtangaben pro Seite sind Hygiene, nicht Optimierung: eigener <title>, eigene Meta-Description, Canonical auf die maßgebliche URL.
• Der schnellste Test ist die Leseansicht des Browsers: Was dort fehlt, fehlt in der maschinellen Auswertung oft auch.

Abgrenzung – hier geht es um die Suchmaschinen-Seite. Welche Tags nachweislich ausgewertet werden und welche nicht. Was semantisches HTML überhaupt ist, erklärt Was ist semantisches HTML?; die Überschriftenregeln stehen unter Überschriftenstruktur h1–h6.

Was Suchmaschinen tatsächlich aus dem Markup ziehen

Ein Crawler sieht keine Seite, er sieht einen Textstrom mit Markierungen. Vier Dinge liest er daraus ab, und für jedes gibt es ein Element, das es liefert – oder eben nicht:

Der Punkt in der rechten Spalte der Tabelle ist der, den man in Projekten am ehesten unterschätzt. Eine Seite ohne <main> liefert bei jeder Textextraktion die Hauptnavigation gleich mit – bei einer Website mit 40 Menüpunkten sind das 40 Begriffe, die auf jeder einzelnen Seite im Text stehen und das Thema verwässern. Genau davor schützt die Dokument-Outline aus Landmarks und Überschriften, die einem Screenreader Orientierung gibt und einer Suchmaschine eine Landkarte.

Der Teil, der wirklich stimmt – und der, der nicht stimmt

Ich sag’s, wie es ist: In SEO-Texten steht regelmäßig, semantisches HTML verbessere das Ranking. Das ist so nicht belegt. Google-Mitarbeiter haben mehrfach öffentlich gesagt, dass die Verwendung von HTML5-Strukturelementen für sich genommen keinen Rankingvorteil bringt – ein <section> statt eines <div> ändert an der Position nichts.

Was messbar wirkt, ist eine Ebene tiefer:

Überschriften strukturieren die Auswertung. Google nutzt die Überschriftenfolge, um Themen und Unterthemen zu erfassen, generiert daraus Sprungmarken zu einzelnen Abschnitten im Suchergebnis und zieht häufig den angezeigten Textausschnitt aus dem Abschnitt, der zur Anfrage passt. Eine Seite, deren Überschriften für sich gelesen schon ein sinnvolles Inhaltsverzeichnis ergeben, ist damit besser aufgestellt – nicht weil sie „semantischer“ ist, sondern weil mehr aus ihr herauszuholen ist.

Tabellen mit <th> werden als Daten erkannt. Eine Preistabelle aus <div>-Zeilen ist maschinell eine Zahlenwolke, dieselbe Tabelle mit Kopfzellen und scope ist eine Matrix mit Bedeutung. Details unter Tabellen semantisch aufbauen.

Ankertexte beschreiben Ziele. Das gilt für interne wie externe Links und ist einer der wenigen Textbausteine, die andere Seiten über deine Seite schreiben. Wie man das im eigenen Bestand nutzt, steht unter interne Verlinkung.

Weniger Nachbau heißt weniger JavaScript. Ein echter <button> bringt sein Verhalten mit; ein nachgebauter braucht Skript, das geladen, geparst und ausgeführt werden muss. Das schlägt direkt auf die Core Web Vitals durch.

Warum das für KI-Antworten stärker zählt als für Google

Hier hat sich in den letzten zwei Jahren etwas verschoben, das in älteren Artikeln zum Thema noch fehlt. Systeme, die Webinhalte für Antworten abrufen, arbeiten fast immer mit Chunking: Sie zerlegen eine Seite in Abschnitte handhabbarer Länge, bevor sie entscheiden, welcher davon zur Frage passt. Die naheliegende Schnittkante dafür ist die Überschriftenstruktur.

Daraus folgen zwei praktische Dinge:

Jeder Abschnitt sollte für sich stehen. Ein Absatz, der mit „Wie oben beschrieben“ beginnt, wird als Ausschnitt zitiert – ohne das Oben. Deshalb steht auf dieser Website in jedem Antwortblock die Kernaussage vollständig und nicht als Verweis.

Überschriften sollten benennen, was folgt. „Das Problem“ ist als Schnittkante wertlos, „24 × 24 px: was die Zielgröße konkret verlangt“ nicht. Das ist derselbe Rat wie für die klassische Suche, nur mit deutlich härteren Folgen: Bei Google verliert eine schwammige Überschrift eine Sprungmarke, bei einem Retrieval-System entscheidet sie darüber, ob der Abschnitt überhaupt gefunden wird.

Bemerkenswert ist, wie genau das dem Verhalten entspricht, das Screenreader-Nutzende beim Surfen zeigen: Auch sie springen von Überschrift zu Überschrift und entscheiden anhand der Überschrift, ob der Abschnitt die Antwort enthält. Wer schon einmal über die Schulter einer Nutzerin geschaut hat, braucht für Chunking keine weitere Erklärung – es ist dasselbe Navigationsmuster, nur in Software.

Wer beides zusammendenken will, findet die Systematik unter GEO-Grundlagen und strukturierte Daten.

Die HTML-Elemente, auf die es für SEO ankommt

Wenn „SEO und HTML“ zusammenkommen, geht es selten um Philosophie und meistens um eine konkrete Frage: Welche Elemente wertet eine Suchmaschine tatsächlich aus? Hier ist die Liste, sortiert nach Wirkung – und mit der ehrlichen Angabe, was das jeweils bringt.

Zwei Dinge fallen an dieser Tabelle auf, und beide sind der Kern dieses Artikels.

Oben stehen keine „SEO-Elemente“, sondern gewöhnliches HTML. Title, Überschriften, Links und Alt-Texte sind dieselben Bausteine, die eine Seite bedienbar machen. Es gibt keine getrennte Technik für Suchmaschinen – es gibt nur sauber ausgezeichnete Inhalte, die beide Zielgruppen bedienen.

Unten stehen die Elemente, um die am meisten Aufhebens gemacht wird. <section> statt <div> zu schreiben verbessert keine Position. Es verbessert, was aus der Seite herauslösbar ist – und das wirkt erst über die Umwege, die im nächsten Abschnitt stehen.

Ein Minimalgerüst, das alle Elemente der oberen Hälfte enthält, sieht so aus:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Barrierefreie Formulare bauen | example.de</title>
  <meta name="description" content="Pflichtfelder, Fehlermeldungen und Labels …" />
  <link rel="canonical" href="https://example.de/formulare.html" />
</head>
<body>
  <header>…</header>
  <nav aria-label="Hauptnavigation">…</nav>
  <main>
    <h1>Barrierefreie Formulare bauen</h1>
    <p>…</p>
    <h2>Labels richtig verbinden</h2>
    <img src="/img/label.webp" alt="Formularfeld mit sichtbarem Label darüber" />
    <p>Mehr dazu unter <a href="/komponenten/fehlermeldungen.html">Fehlermeldungen</a>.</p>
  </main>
  <footer>…</footer>
</body>
</html>

Die drei Pflichtangaben pro Seite

Unabhängig vom Inhalt braucht jede Seite drei eindeutige Angaben im <head>:

<title>Semantik &amp; SEO: was sauberer Code bringt | html-einfach.de</title>
<meta name="description" content="… 120 bis 160 Zeichen, Suchbegriff vorn …" />
<link rel="canonical" href="https://html-einfach.de/seo-und-ki/semantik-und-seo.html" />

Das sind keine Rankinggeheimnisse, sondern Hygiene – aber es ist die Art Hygiene, die in Audits erstaunlich oft fehlt. Wie man Title und Description formuliert, steht unter Title-Tag & Meta-Description; was der Canonical löst und was nicht, unter Canonical & Duplicate Content.

So prüfst du, was wirklich ankommt

Es gibt einen Test, der zwanzig Sekunden dauert und mehr zeigt als die meisten Tools: die Leseansicht des Browsers einschalten. In Safari heißt sie Reader, in Firefox Leseansicht, in Chrome „Vereinfachte Ansicht“. Diese Funktionen tun dasselbe wie ein Crawler, der Beiwerk entfernt: Sie raten anhand des Markups, wo der Hauptinhalt anfängt und aufhört.

Was du dabei siehst:

• Der Artikel erscheint vollständig → deine Struktur ist auswertbar.
• Abschnitte fehlen → sie hängen außerhalb von <main> oder in Containern, die als Beiwerk gelesen werden.
• Die Leseansicht bietet sich gar nicht an → es gibt keine erkennbare Artikelstruktur.
• Navigation steht mitten im Text → Landmarks fehlen oder sind falsch verschachtelt.

Ergänzend zeigt ein Blick auf die reine Textfassung, was ohne CSS und JavaScript übrig bleibt:

curl -s https://html-einfach.de/seo-und-ki/semantik-und-seo.html \
  | sed -e 's/<[^>]*>//g' | tr -s '[:space:]' '\n' | head -40

Wenn dort die ersten dreißig Wörter aus dem Hauptmenü stammen, weißt du, womit ein Crawler anfängt.

Wenn die Struktur erst durch JavaScript entsteht

Ein Sonderfall, der in Projekten mit React, Vue oder Angular regelmäßig zum Problem wird: Das ausgelieferte HTML besteht aus einem leeren <div id="root">, alles Weitere baut der Browser. Google rendert JavaScript zwar, aber in einem zweiten Durchgang mit eigener Warteschlange – und andere Systeme, die deine Seite abrufen, tun es oft gar nicht.

Der Test dauert eine halbe Minute:

# Was steht im Quelltext, bevor JavaScript läuft?
curl -s https://beispiel.de/seite | grep -c '<h2'

Kommt dort 0 zurück, obwohl die Seite sichtbar acht Zwischenüberschriften hat, dann existiert die Gliederung nur im Browser. Für die klassische Google-Suche ist das meistens verkraftbar; für Abruf-Bots von KI-Systemen und für einfache Textextraktoren ist die Seite in diesem Moment leer. Die Auswege sind bekannt und gut dokumentiert: serverseitiges Rendern, statische Generierung oder zumindest ein vorgerenderter Hauptinhalt.

Dasselbe gilt für Inhalte hinter Interaktion. Ein Absatz, der erst nach dem Klick auf „Mehr anzeigen“ ins DOM kommt, ist für die Auswertung nicht vorhanden. Wenn der Inhalt zählen soll, gehört er ins ausgelieferte HTML – und darf dann per CSS zusammengeklappt sein, etwa mit <details>, das den Zustand nativ mitbringt.

Häufiger Fehler in der Praxis

Überschriften nach Schriftgröße wählen. <h4>, weil es kleiner aussieht – das ist der häufigste Grund für Ebenensprünge. Größe ist CSS, Ebene ist Bedeutung.

Mehrere <h1> pro Seite. Der HTML-Standard erlaubt es formal, die Auswertung wird dadurch aber schlechter, weil das Hauptthema nicht mehr eindeutig ist. Eine reicht.

<main> mehrfach oder gar nicht. Genau ein <main> je Seite, und alles, was zum Inhalt gehört, gehört hinein. Alles andere: <header>, <nav>, <aside>, <footer>.

Semantik nachträglich mit ARIA reparieren. role="main" an einem <div> ist der Umweg zum Ziel; <main> ist das Ziel. Die erste Regel von ARIA gilt hier genauso wie in der Barrierefreiheit.

Erwarten, dass Struktur den Inhalt ersetzt. Eine perfekt ausgezeichnete Seite ohne Substanz rankt nicht. Semantik macht sichtbar, was da ist – sie erzeugt nichts.

Häufige Fragen

Welche HTML-Tags sind für SEO wichtig?

In dieser Reihenfolge: <title>, die Überschriften <h1> bis <h6>, <a href> mit beschreibendem Ankertext, <img alt>, <link rel="canonical"> und <html lang>. Danach folgen <meta name="description"> (Klickrate, kein Ranking), <main> und JSON-LD für strukturierte Daten. <section> und <article> wirken nur indirekt, <meta name="keywords"> gar nicht. Auffällig daran: Es sind durchweg dieselben Elemente, die eine Seite auch bedienbar machen.

Bringt mehr Semantik automatisch besseres Ranking?

Nein, und wer das behauptet, verwechselt Voraussetzung mit Ursache. Struktur sorgt dafür, dass Inhalt korrekt erfasst wird; sie ersetzt ihn nicht. Der Nutzen zeigt sich indirekt: bessere Snippets, Sprungmarken zu Abschnitten, sauberere Extraktion für KI-Antworten, weniger JavaScript. Bei zwei inhaltlich gleichwertigen Seiten hat die strukturierte die besseren Karten – bei ungleichem Inhalt gewinnt der Inhalt.

Zählt <article> oder <section> mehr als ein <div>?

Für das Ranking nicht. Für die Verständlichkeit des eigenen Codes und für die Barrierefreiheit schon: <section> mit einer zugehörigen Überschrift erzeugt eine benannte Region, <article> markiert eigenständig verwendbare Inhalte. Wann welches Element passt, klärt article vs. section.

Sind Meta-Keywords noch relevant?

Nein. Google hat 2009 öffentlich erklärt, das Tag nicht auszuwerten, und daran hat sich nichts geändert. Die Energie ist in Überschriften und Ankertexten besser angelegt.

Muss ich für KI-Systeme anders auszeichnen als für Google?

Nein, aber die Prioritäten verschieben sich. Beide werten dieselbe Struktur aus; KI-Systeme sind dabei stärker auf saubere Abschnittsgrenzen angewiesen, weil sie Seiten in Ausschnitte zerlegen, bevor sie antworten. Praktisch heißt das: aussagekräftige Zwischenüberschriften und Absätze, die ohne den vorhergehenden Kontext verständlich bleiben. Wer das für Menschen gut macht, hat es für beide Systeme gut gemacht.

Was ist wichtiger – Technik oder Inhalt?

Inhalt entscheidet, Technik ermöglicht. Ein guter Text in kaputtem Markup wird unvollständig erfasst; ein leerer Text in perfektem Markup bleibt leer. In der Praxis ist die Reihenfolge aber klar: erst die Struktur richtig anlegen, weil sie danach nur noch schwer nachzurüsten ist, dann den Inhalt schreiben.

Verwandte Themen

• Was ist semantisches HTML? – der Einstieg, von dem aus alles andere leichter wird
• Landmarks & Outline – das Gerüst, das Hauptinhalt und Beiwerk trennt
• Überschriften-Hierarchie – die Ebene mit dem größten Effekt
• Semantik, Barrierefreiheit, SEO & Performance – warum sich diese Arbeit vierfach auszahlt
• Div-Suppe vermeiden – wie man aus einem bestehenden Projekt herauskommt
• WCAG 1.3.1 Info und Beziehungen – dieselbe Forderung, nur als Erfolgskriterium formuliert

Quellen

• Google Search Central: SEO-Starter-Guide (Rolle von Überschriften, Struktur und Links)
• HTML Living Standard: Sections (WHATWG – Bedeutung von main, article, section, nav)
• Understanding SC 1.3.1 Info and Relationships (W3C – Struktur programmatisch verfügbar machen)