Semantisches HTML: Struktur für Mensch und Maschine

Zwei Webseiten können im Browser identisch aussehen und im Quellcode völlig unterschiedlich verständlich sein.

Die eine Seite besteht fast nur aus verschachtelten <div>-Containern. Die andere nutzt semantische HTML5-Elemente (Hypertext Markup LanguageHyperText Markup Language (HTML) ist die Auszeichnungssprache für Webseiten. Mit ihr werden Struktur und Inhalt einer Seite definiert, etwa Überschriften, Absätze, Links und Bilder.Zum Glossareintrag →, HTML, die Auszeichnungssprache für Webseiten) wie <main>, <article>, <nav>, <section>, <aside> und <footer>. Für Nutzer ist der Unterschied oft unsichtbar. Für Browser, Screenreader, Suchmaschinen und Crawler ist er relevant.

RankScan kennt zum semantischen HTML zwei Massnahmen:

• «Hauptinhalt nicht ausgezeichnet»: Auf den betroffenen Seiten fehlt ein <main>-Element.
• «Beiträge ohne article-Element»: Blog- oder News-Beiträge haben ein <main>, aber kein <article>.

Mehr misst RankScan beim semantischen HTML nicht. Die übrigen Elemente und Regeln in diesem Artikel sind allgemeines FachwissenExpertise bezeichnet die fachliche Kompetenz hinter einem Inhalt. Sie ist das zweite E in E-E-A-T und sollte über sichtbare Autorenangaben und Belege erkennbar sein.Zum Glossareintrag →.

Wichtig ist die richtige Einordnung:

Semantisches HTMLSemantisches HTML bedeutet, HTML-Elemente nach ihrer inhaltlichen Bedeutung zu verwenden, etwa <main> für den Hauptinhalt oder <nav> für Navigation, statt alles aus generischen <div>-Containern zu bauen.Zum Glossareintrag → ist kein Ranking-Trick. Es ist sauberes Markup, das Inhalt, Navigation, Hauptbereich und Beiwerk klarer unterscheidbar macht.

Das hilft Nutzern, assistiven Technologien, Entwicklern, Suchmaschinen und Systemen der Künstlichen Intelligenz (KI), Inhalte besser einzuordnen. Es garantiert aber keine besseren Rankings, keine Featured SnippetsEin Featured Snippet ist ein hervorgehobener Antwortauszug, den Google oberhalb der klassischen Treffer anzeigt. Er beantwortet eine Suchanfrage direkt und wird oft als Position Null bezeichnet.Zum Glossareintrag → und keine KI-Zitationen.

Was ist semantisches HTML? #

Semantisches HTML bedeutet: HTML-Elemente werden nach ihrer inhaltlichen Bedeutung verwendet.

Nicht:

<div class="button">Mehr erfahren</div>

sondern:

<a href="/leistungen/">Mehr erfahren</a>

Nicht:

<div class="main-content">
  <div class="post">
    <div class="title">Titel</div>
  </div>
</div>

sondern:

<main>
  <article>
    <h1>Titel</h1>
  </article>
</main>

Google beschreibt semantisches Markup als Markup, das entsprechend seiner Bedeutung und seines Zwecks verwendet wird: zum Beispiel Überschriften für Überschriften, Absätze für Absätze und Listen für Listen.
Quelle: Google Search Central Blog: On web semantics

Das Mozilla Developer Network (MDN), eine Entwickler-Dokumentation, formuliert es ähnlich: Semantisches HTML bedeutet, «das richtige Element für die richtige Aufgabe» zu verwenden, weil Browser dadurch eingebaute Accessibility-Funktionen bereitstellen können.
Quelle: MDN, HTML: A good basis for accessibility

Was bedeutet «Hauptinhalt nicht ausgezeichnet»? #

Die RankScan-Massnahme «Hauptinhalt nicht ausgezeichnet» bedeutet: Auf den betroffenen Seiten fehlt ein <main>-Element. Maschinen trennen den Hauptinhalt dann schlechter von Menü und Fusszeile.

Einstufung in RankScan: Schwere niedrig · Aufwand gering · Arbeitsart Entwicklung.

Der Befund heisst nur: kein <main>. Ein Container mit role="main" zählt als <main>. Fehlende <nav>-, <footer>- oder <section>-Elemente lösen die Massnahme nicht aus.

Semantische Bereiche helfen Screenreadern und Parsern. Für das Ranking ist <main> kein direkter Faktor, sondern technische Hygiene. Deshalb ist die Schwere niedrig.

Was bedeutet «Beiträge ohne article-Element»? #

Die RankScan-Massnahme «Beiträge ohne article-Element» bedeutet: Die betroffenen Beiträge haben ein <main>-Element, aber kein <article>. Der Beitrag ist als eigenständige Einheit nicht ausgezeichnet.

Einstufung in RankScan: Schwere niedrig · Aufwand gering · Arbeitsart Entwicklung.

RankScan prüft das nur auf Seiten, die es als Beitrag erkennt, zum Beispiel Blog-, News- oder Ratgeberbeiträge. Leistungs- und Übersichtsseiten brauchen kein <article>. Dort genügt <main>.

Fehlt auf einer Seite schon <main>, meldet RankScan nur «Hauptinhalt nicht ausgezeichnet». Ein Beitrag kann deshalb erst nach dem Einbau von <main> unter «Beiträge ohne article-Element» erscheinen.

Schwache Semantik: allgemeine Fehlerbilder #

Die folgenden Fehler sind allgemeines Fachwissen. RankScan misst sie nicht.

Beispiele:

• mehrere sichtbare <main>-Elemente,
• <section> nur als Styling-Container ohne Thema,
• <article> für rein dekorative Cards,
• <button> für normale Links,
• <a> ohne href,
• klickbare <div>-Elemente,
• role-Attribute ersetzen unnötig native HTML-Elemente,
• Headings werden nur für Styling genutzt,
• Landmarken sind doppelt oder unbenannt,
• <aside> enthält eigentlich Hauptinhalt.

Solche Fehler sind oft schwieriger zu erkennen als ein fehlendes <main>. Der Code wirkt auf den ersten Blick modern, ist inhaltlich aber trotzdem unklar.

Die wichtigsten semantischen HTML5-Elemente #

Wichtig: Diese Elemente sind keine Design-Vorgaben. Das Aussehen steuerst du über Cascading Style Sheets (CSS)Cascading Style Sheets (CSS) ist die Sprache, mit der das Layout und die Gestaltung von Webseiten festgelegt werden. CSS bestimmt unter anderem Farben, Schriften, Abstände und Anordnung.Zum Glossareintrag →, die Sprache für das Layout von Webseiten. Die HTML-Elemente beschreiben die Rolle des Inhalts.

Warum semantisches HTML für Accessibility wichtig ist #

Semantisches HTML ist eine Grundlage für Barrierefreiheit.

Screenreader und andere assistive Technologien können LandmarksLandmark-Elemente sind semantische HTML-Bereiche wie <main>, <nav>, <header> und <footer>, die einer Seite klare Orientierungspunkte geben, besonders für Screenreader.Zum Glossareintrag → und native HTML-Strukturen nutzen, um Orientierung zu ermöglichen:

• direkt zum Hauptinhalt springen,
• Navigationen erkennen,
• Listen korrekt vorlesen,
• Buttons und Links richtig bedienen,
• Formulare besser verstehen,
• Tabellen korrekt interpretieren.

MDN betont, dass semantische HTML-Elemente eingebaute Accessibility-Hooks bereitstellen. Deshalb sollten Entwickler native HTML-Elemente nutzen, bevor sie Funktionen mit generischen Elementen und JavaScript (JS) nachbauen.
Quelle: MDN, HTML: A good basis for accessibility

Beispiel:

<button type="button">Menü öffnen</button>

ist von Haus aus tastaturbedienbar und als Button erkennbar.

Ein klickbares <div> dagegen braucht zusätzlichen Code für Rolle, Tastaturbedienung, Fokuszustand und Screenreader-Verständlichkeit. Das ist fehleranfälliger.

Warum semantisches HTML für SEO hilfreich sein kann #

Semantisches HTML hilft Suchmaschinen, Seitenstrukturen besser zu interpretieren. Es zeigt, was Hauptinhalt, Navigation, Abschnitt, Artikel oder ergänzende Information ist.

Trotzdem ist die SEO-Wirkung nicht absolut.

Google schreibt im SEO Starter Guide, dass eine semantische Heading-Reihenfolge für Screenreader sehr gut ist, Google Search aber selten allein auf semantische Bedeutungen aus der HTML-Spezifikation angewiesen ist, weil das Web allgemein nicht immer valides HTML nutzt.
Quelle: Google Search Central: SEO Starter Guide

Die realistische Einordnung:

• Semantisches HTML kann Google beim Verstehen unterstützen.
• Es ersetzt keine hilfreichen Inhalte.
• Es ersetzt keine Indexierbarkeit.
• Es ist kein «magischer Ranking-Booster».
• Es ist Teil sauberer technischer Website-Qualität.

Für RankScan bedeutet das:

Semantisches HTML ist ein Website-Health-Signal, kein isolierter Rankingfaktor.

Warum semantisches HTML für KI-Sichtbarkeit relevant ist #

KI-Systeme und Suchsysteme müssen Webseiten in sinnvolle Abschnitte zerlegen, verstehen und gewichten. Semantisches HTML kann helfen, Inhalte besser zu segmentieren:

• Hauptinhalt in <main>,
• eigenständiger Artikel in <article>,
• Themenabschnitte in <section>,
• Navigation in <nav>,
• Zusatzinhalte in <aside>,
• Seitenfuss in <footer>.

Das kann die maschinelle Extraktion erleichtern. Aber auch hier gilt:

Semantisches HTML garantiert keine KI-Erwähnung, keine Citation und keine bessere Antwortposition.

Google beschreibt AI OverviewsAI Overviews sind von Google KI-generierte Antwortboxen, die oberhalb der klassischen Suchergebnisse erscheinen. Sie fassen Informationen aus dem Web zusammen und können die Klickverteilung verändern.Zum Glossareintrag → und AI Mode als Suchfunktionen, in denen Inhalte aus dem Web erscheinen können. Website-Betreiber sollen weiterhin hilfreiche, verlässliche Inhalte bereitstellen und technische Zugänglichkeit sicherstellen.
Quelle: Google Search Central: AI features and your website

Für die Lesbarkeit durch KI-Systeme ist semantisches HTML deshalb ein Grundlagenbaustein. Es verbessert Struktur und Verständlichkeit. Es ersetzt aber keine FaktendichteFaktendichte beschreibt, wie viele konkrete, überprüfbare Informationen ein Text im Verhältnis zu allgemeinen Aussagen enthält. Sie ist ein redaktionelles Qualitätskriterium, kein offizieller Google-Messwert.Zum Glossareintrag →, QuellenqualitätQuellenqualität zeigt, ob wichtige Aussagen mit verlässlichen Belegen gestützt werden. Sie bedeutet nicht, wahllos Links einzubauen, sondern belastbare Belege für überprüfbare Aussagen zu liefern.Zum Glossareintrag →, Trust-SignaleTrust-Signale sind sichtbare Elemente einer Website, die Vertrauen schaffen, etwa Impressum, Kontakt, Datenschutz, Quellen, Bewertungen, Aktualisierungsdaten und transparente Unternehmensinformationen.Zum Glossareintrag → oder technische Erreichbarkeit.

Vorher/Nachher: Div-Wüste vs. semantisches Markup #

Schwach: Div-Wüste #

<div class="header">
  <div class="logo">Mein Blog</div>
  <div class="menu">
    <div onclick="location.href='/'">Home</div>
    <div onclick="location.href='/blog'">Blog</div>
  </div>
</div>

<div class="main-content">
  <div class="post">
    <div class="title">SEO-Tipps 2026</div>
    <div class="text">Hier steht der Inhalt...</div>
  </div>
</div>

<div class="footer">
  <div class="copy">© 2026 Mein Blog</div>
</div>

Probleme:

• Navigation ist kein echtes <nav>,
• Links sind klickbare <div>-Elemente,
• kein <main>,
• kein <article>,
• Titel ist keine echte Überschrift,
• Footer ist nur ein generischer Container.

Besser: semantisches HTML #

<header>
  <a href="/" class="logo">Mein Blog</a>

  <nav aria-label="Hauptnavigation">
    <a href="/">Home</a>
    <a href="/blog/">Blog</a>
  </nav>
</header>

<main>
  <article>
    <h1>SEO-Tipps 2026</h1>
    <p>Hier steht der Inhalt...</p>
  </article>
</main>

<footer>
  <p>© 2026 Mein Blog</p>
</footer>

Vorteile:

• Hauptinhalt ist klar markiert,
• Navigation ist maschinenlesbar,
• Links sind echte Links,
• Artikel ist als eigenständiger Inhalt erkennbar,
• Überschrift ist semantisch korrekt,
• Footer hat eine klare Rolle.

Die wichtigsten Regeln für semantisches HTML #

1. Bedeutung vor Optik #

Wähle HTML-Elemente nach Bedeutung.

<h2>Preise</h2>

nicht:

<div class="large-bold-title">Preise</div>

CSS steuert Aussehen. HTML steuert Bedeutung.

2. Genau ein sichtbares <main> #

Ein Dokument sollte genau einen sichtbaren Hauptinhalt haben.

Gut:

<body>
  <header>...</header>
  <main>...</main>
  <footer>...</footer>
</body>

Schlecht:

<main>Intro</main>
<main>Produkte</main>
<main>FAQ</main>

<main> steht für den zentralen, einzigartigen Inhalt dieser URL.

RankScan prüft nur, ob eine Seite ein <main> hat. Mehrere <main>-Elemente meldet RankScan nicht.

3. <article> für eigenständige Inhalte nutzen #

Nutze <article>, wenn ein Inhalt auch ausserhalb der Seite sinnvoll wäre.

Geeignet:

• Blogartikel,
• News-Beitrag,
• Produktkarte,
• Forumspost,
• Kommentar,
• Case Study.

Beispiel:

<main>
  <article>
    <h1>JavaScript-SEO: Rendering-Probleme erkennen</h1>
    <p>...</p>
  </article>
</main>

RankScan verlangt <article> nur bei Blog- und News-Beiträgen. Setze es innerhalb von <main>. Leistungs- und Übersichtsseiten bleiben, wie sie sind.

4. <section> nur für echte thematische Abschnitte #

Ein <section> sollte einen thematischen Abschnitt markieren und idealerweise eine Überschrift haben.

Gut:

<section>
  <h2>Vorteile von semantischem HTML</h2>
  <p>...</p>
</section>

Schwach:

<section class="spacing-large">
  <div>...</div>
</section>

wenn das Element nur Abstand oder Layout erzeugt.

Für reine Layout-Wrapper ist ein <div> weiterhin korrekt.

5. Echte Links und Buttons verwenden #

Links führen zu einer anderen URL. Buttons lösen eine Aktion aus.

Link:

<a href="/kontakt/">Kontakt aufnehmen</a>

Button:

<button type="button">Menü öffnen</button>

Schlecht:

<div onclick="openMenu()">Menü öffnen</div>

Google empfiehlt für crawlbare Links ein <a>-Element mit href-Attribut.
Quelle: Google Search Central: Links best practices

6. Listen als echte Listen auszeichnen #

Schwach:

<p>- Punkt 1<br>- Punkt 2<br>- Punkt 3</p>

Besser:

<ul>
  <li>Punkt 1</li>
  <li>Punkt 2</li>
  <li>Punkt 3</li>
</ul>

Das ist besser für Accessibility, Lesbarkeit und maschinelle Struktur.

7. Tabellen nur für Daten verwenden #

Tabellen sind für tabellarische Daten, nicht für Layout.

Gut:

<table>
  <thead>
    <tr>
      <th>Metrik</th>
      <th>Guter Wert</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>LCP</td>
      <td>≤ 2,5 s</td>
    </tr>
  </tbody>
</table>

Schlecht: Tabellenlayout für Spalten, Karten oder Navigation.

ARIA vs. semantisches HTML #

ARIA kann helfen, wenn native HTML-Elemente nicht ausreichen. Aber ARIA sollte nicht der erste Schritt sein.

Die W3C-Dokumentation «Using ARIA» formuliert als erste Regel: Wenn ein natives HTML-Element oder Attribut die benötigte Semantik und das Verhalten bereits hat, soll dieses genutzt werden, statt ein anderes Element mit ARIA umzubauen.
Quelle: W3C: Using ARIA

Einfach gesagt:

Erst natives HTML, dann ARIA.

Gut:

<nav aria-label="Hauptnavigation">
  ...
</nav>

Schwächer:

<div role="navigation" aria-label="Hauptnavigation">
  ...
</div>

Nicht alles braucht ARIA:

<nav role="navigation">

ist meist redundant, weil <nav> diese Rolle bereits implizit hat.

Ausnahme: role="main" als Ausweg #

Für den Hauptinhalt ist role="main" ein zulässiger Weg. Die W3C-Beispiele zu Landmarks nennen beide Wege für denselben Hauptbereich: das Element <main> oder das Attribut role="main".
Quelle: W3C WAI-ARIA Authoring Practices: Main Landmark

RankScan zählt role="main" wie ein <main>. Ist der Umbau der Vorlage zu aufwendig, genügt deshalb das Attribut am bestehenden Container:

<div class="main-content" role="main">
  ...
</div>

Der bestehende Container und seine CSS-Klassen bleiben dabei unverändert. Wer die Vorlage ohnehin umbaut, nimmt das native <main>.

Wichtig ist ARIA besonders bei komplexeren Komponenten wie:

• Tabs,
• Modals,
• Accordions,
• Autocomplete,
• dynamischen Menüs,
• Single-Page-App-Komponenten.

Dabei muss aber auch Tastaturbedienung, Fokusmanagement und Screenreader-Verhalten korrekt umgesetzt werden.

Semantisches HTML und Überschriftenstruktur #

Semantische Container ersetzen keine gute ÜberschriftenstrukturDie Heading-Hierarchie ist die logische Verschachtelung der Überschriften von H1 bis H6, die den Inhalt einer Seite gliedert, ähnlich einem Inhaltsverzeichnis.Zum Glossareintrag →.

Eine gute Seite braucht:

• eine klare H1,
• logische H2,
• passende H3,
• keine Überschriften nur für Styling,
• keine leeren Heading-Tags,
• keine Sprünge aus reiner Designlogik.

Beispiel:

<main>
  <article>
    <h1>Semantisches HTML</h1>

    <section>
      <h2>Was ist semantisches HTML?</h2>
      <p>...</p>
    </section>

    <section>
      <h2>Warum ist es wichtig?</h2>
      <p>...</p>
    </section>
  </article>
</main>

Der alte HTML5-Outline-Algorithmus, der theoretisch verschachtelte Sectioning-Elemente mit jeweils eigener H1Die H1 ist die Hauptüberschrift einer Webseite. Sie benennt das zentrale Thema, ist für Nutzer sichtbar und sollte pro Seite in der Regel nur einmal vorkommen.Zum Glossareintrag → sinnvoll auswerten sollte, wurde in der Praxis von Browsern nicht zuverlässig umgesetzt. Für heutige Websites ist deshalb eine klare, sichtbare H1-H6-Struktur weiterhin die robustere Lösung.

Semantisches HTML in modernen Frontends #

Semantisches HTML ist auch in React, Vue, Angular, Svelte, Astro oder Headless-Setups wichtig.

Häufige Probleme:

• Komponenten geben immer <div> zurück,
• Cards sind klickbare <div> statt Links,
• Buttons werden als Links genutzt,
• Navigation wird clientseitig ohne echte <a href> gebaut,
• Headings werden durch Designkomponenten ersetzt,
• modale Dialoge haben keine korrekte Semantik,
• Server-Side Rendering (SSRBeim Server-Side Rendering (SSR) erzeugt der Server das fertige HTML, bevor die Seite an Browser oder Crawler ausgeliefert wird. Inhalte sind dadurch sofort im Quelltext vorhanden.Zum Glossareintrag →), das serverseitige RendernJavaScript-Rendering bezeichnet den Vorgang, bei dem ein Browser oder Crawler JavaScript-Code ausführt, um daraus die fertige, sichtbare Seite zu erzeugen. Erst nach diesem Schritt entstehen Inhalte, die nicht bereits im ausgelieferten HTML stehen.Zum Glossareintrag →, bzw. Static Site Generation (SSG), die statische Seitengenerierung, fehlt und wichtige Struktur entsteht erst im Browser.

Beispiel in React:

Schwach:

<div className="card" onClick={() => navigate('/produkt')}>
  <div className="title">Produkt</div>
</div>

Besser:

<article className="card">
  <h2>
    <a href="/produkt">Produkt</a>
  </h2>
</article>

Das ist zugänglicher, crawlbarer und semantisch klarer.

Prüfen: Wie erkennst du semantische HTML-Probleme? #

1. Quelltext prüfen #

Suche im Seitenquelltext nach:

• <main>,
• <nav>,
• <article>,
• <section>,
• <aside>,
• <header>,
• <footer>,
• echten <a href>-Links,
• echten <button>-Elementen,
• echten Listen und Tabellen.

Wenn du fast nur verschachtelte <div>-Elemente findest, ist das ein Warnsignal.

2. DevTools und Accessibility Tree nutzen #

In Browser DevTools kannst du den Accessibility Tree prüfen.

Achte auf:

• Landmarks,
• Name der Navigation,
• Hauptbereich,
• Buttons,
• Links,
• Überschriften,
• Formulare,
• Tastaturfokus.

3. Lighthouse Accessibility prüfen #

LighthouseLighthouse ist ein quelloffenes Diagnosewerkzeug von Google, das Performance, Barrierefreiheit und weitere Qualitätsaspekte einer Seite in einer simulierten Laborumgebung prüft.Zum Glossareintrag → erkennt viele Accessibility-Probleme, zum Beispiel:

• fehlende Namen für Buttons,
• Links ohne Namen,
• ungültige ARIA-Attribute,
• fehlende Labels,
• schlechte Landmark-Struktur,
• Probleme bei Überschriften.

Lighthouse ersetzt kein manuelles Accessibility-Audit, ist aber ein guter Startpunkt.

4. Tastaturtest durchführen #

Nutze nur die Tastatur:

• Tab,
• Shift + Tab,
• Enter,
• Space,
• Escape,
• Pfeiltasten bei Menüs oder Tabs.

Wenn Navigation, Buttons, Modals oder Menüs nicht sauber funktionieren, ist oft nicht nur Accessibility, sondern auch Semantik betroffen.

5. Screenreader- oder Landmark-Test #

Prüfe mit Screenreader oder Browser-Erweiterungen:

• gibt es eine Hauptnavigation?
• gibt es einen Hauptbereich?
• sind Headings sinnvoll?
• sind Buttons als Buttons erkennbar?
• sind Links als Links erkennbar?

Priorisierung: Welche semantischen Probleme sind wichtig? #

Die folgende Tabelle ist eine allgemeine fachliche Einordnung. RankScan zeigt für beide Massnahmen eine einzige Schwere: niedrig.

Die wichtigste Regel:

Priorisiere Templates und Komponenten, die viele wichtige Seiten betreffen.

Was tun bei «Hauptinhalt nicht ausgezeichnet»? #

Die Aufgabe betrifft die Seitenvorlage, nicht jede Seite einzeln.

Vorgehen #

1. Gib die Aufgabe an Entwicklung oder Agentur weiter.
2. Lass den Container des Hauptinhalts durch <main> ersetzen. Jede Seite braucht genau ein <main>.
3. Ist der Umbau zu aufwendig, genügt role="main" am bestehenden Container.
4. Wer ohnehin an der Vorlage arbeitet, fasst Hauptmenü und Fusszeile in <nav> und <footer>. Nötig ist das nicht.
5. Prüfe, dass die Seiten danach gleich aussehen. CSS-Regeln auf die alten Container können brechen.
6. Melde die Massnahme als umgesetzt, sobald die Änderung online ist.

Vorher:

<div class="main-content">
  ...
</div>

Nachher, mit neuem Element:

<main class="main-content">
  ...
</main>

Behält das neue Element die alte Klasse, greifen Klassen-Regeln weiter. Regeln, die auf das Element div selbst zielen, etwa body > div, greifen danach nicht mehr. Deshalb gehört der Sichtvergleich in Schritt 5 dazu.

Prüfweg: Der nächste vollständige Crawl prüft alle betroffenen Seiten. RankScan meldet dann «Behoben» oder «Noch nicht behoben» mit der Zahl der Seiten, die noch fehlen.

Was tun bei «Beiträge ohne article-Element»? #

Die Aufgabe betrifft die Vorlage für Blog- und News-Beiträge.

Vorgehen #

1. Gib die Aufgabe an Entwicklung oder Agentur weiter.
2. Lass dort den Beitrag mit Titel, Datum und Text in <article> fassen, innerhalb von <main>.
3. Leistungs- und Übersichtsseiten bleiben, wie sie sind. Dort genügt <main>.
4. Prüfe, dass die Beiträge danach gleich aussehen.
5. Melde die Massnahme als umgesetzt, sobald die Änderung online ist.

<main>
  <article>
    <h1>Titel des Beitrags</h1>
    <time datetime="2026-10-01">1. Oktober 2026</time>
    <p>Text des Beitrags ...</p>
  </article>
</main>

Prüfweg: Der nächste vollständige Crawl prüft alle betroffenen Beiträge. RankScan meldet dann «Behoben» oder «Noch nicht behoben» mit der Zahl der Beiträge, die noch fehlen.

Optional: weitere Semantik in derselben Vorlage #

Wer die Vorlage ohnehin anfasst, kann weitere Punkte gleich mitprüfen. RankScan verlangt sie nicht und misst sie nicht:

• Links sind <a href>, Aktionen sind <button>.
• Formulare nutzen <label>.
• Menüs und modale Dialoge sind mit der Tastatur bedienbar.
• Die Überschriften folgen einer klaren Reihenfolge, siehe SEO-Überschriften.
• Lighthouse, der Accessibility Tree in den DevTools und ein HTML-Validator zeigen weitere Schwächen.

Was RankScan beim semantischen HTML prüft #

RankScan prüft beim Crawl zwei Befunde:

• Kein <main>: Die Seite hat weder ein <main> noch einen Container mit role="main". Daraus entsteht «Hauptinhalt nicht ausgezeichnet».
• Beitrag ohne <article>: Ein Blog- oder News-Beitrag hat ein <main>, aber kein <article>. Daraus entsteht «Beiträge ohne article-Element».

Alles Weitere in diesem Artikel misst RankScan nicht. Dazu gehören <nav>, <section>, <aside>, mehrere <main>-Elemente, klickbare <div>, ARIA-Rollen, Listen und Tabellen. Für diese Punkte dient die allgemeine Checkliste weiter unten.

Beispiel: Page-Builder erzeugt Div-Wüste #

Ausgangslage #

Eine B2B-Website wurde mit einem Page Builder erstellt. Optisch ist sie modern. Im Code besteht fast alles aus verschachtelten <div>-Containern.

RankScan meldet:

«Hauptinhalt nicht ausgezeichnet»
«Seiten ohne Hauptüberschrift (H1)»
«Wenig Inhalt im ausgelieferten HTML – Rendering prüfen»

«Beiträge ohne article-Element» erscheint noch nicht. Ohne <main> meldet RankScan nur die erste Massnahme.

Analyse #

• kein <main> in der Seitenvorlage,
• keine echte H1 im initialen HTML,
• Navigation teilweise als klickbare Divs,
• Karten sind keine Links,
• Blogartikel sind nicht als <article> ausgezeichnet.

Lösung #

1. Die Agentur fasst in der Seitenvorlage den Hauptinhalt in <main>. Das ist die Pflicht der Massnahme.
2. In der Beitragsvorlage fasst sie den Beitrag in <article>, innerhalb von <main>.
3. Weil sie die Vorlage ohnehin anfasst, setzt sie Hauptmenü und Fusszeile in <nav> und <footer>. Das ist freiwillig.
4. Klickbare Divs ersetzt sie durch <a> oder <button>. Auch das ist allgemeine Hygiene, RankScan misst es nicht.
5. Das Team vergleicht wichtige Seiten vor und nach dem Umbau. Ein Menü-Abstand ist verrutscht, weil eine CSS-Regel auf den alten Container zielte. Die Agentur korrigiert die Regel.
6. Das Team meldet die Massnahme als umgesetzt.

Ergebnis #

Der nächste vollständige Crawl meldet «Hauptinhalt nicht ausgezeichnet» als behoben. Fehlt das <article> in einzelnen Beiträgen noch, erscheint jetzt «Beiträge ohne article-Element». Die Seite sieht gleich aus, ist aber technisch verständlicher und zugänglicher. Rankings oder KI-Zitationen sind dadurch nicht garantiert.

Häufige Fehler bei semantischem HTML #

Fehler 1: Divs vollständig verbieten #

<div> ist nicht schlecht. Es ist korrekt, wenn du einen neutralen Layout-Container brauchst und kein semantisches Element passt.

Fehler 2: Semantik für Styling nutzen #

Ein <section> ist kein Abstandshalter. Nutze es für thematische Abschnitte.

Fehler 3: Buttons und Links verwechseln #

Link = Navigation zu URL. Button = Aktion auf der Seite.

Fehler 4: ARIA statt HTML verwenden #

ARIA kann ergänzen, aber native Elemente sind meist robuster.

Fehler 5: Headings als Design-Elemente verwenden #

Eine Überschrift ist eine Strukturinformation, nicht nur eine Schriftgrösse.

Fehler 6: Mehrere Hauptbereiche erzeugen #

Eine Seite sollte genau einen sichtbaren Hauptinhalt haben.

Fehler 7: Semantik nur auf Desktop prüfen #

Mobile Menüs, Accordions und Offcanvas-Navigationen sind oft die eigentlichen Problemstellen.

Checkliste: Semantisches HTML prüfen #

Die ersten zwei Punkte misst RankScan:

• Hat jede Seite ein <main> oder einen Container mit role="main"?
• Hat jeder Blog- oder News-Beitrag ein <article>?

Die übrigen Punkte sind eine allgemeine Checkliste. RankScan misst sie nicht:

• Gibt es genau ein <main> pro Seite?
• Steht das <article> innerhalb von <main>?
• Sehen die Seiten nach dem Umbau gleich aus?
• Gibt es ein <header> und <footer>?
• Ist die Hauptnavigation als <nav> ausgezeichnet?
• Sind Navigationslinks echte <a href>-Links?
• Gibt es eine klare H1?
• Werden thematische Abschnitte sinnvoll mit <section> und Überschrift strukturiert?
• Sind Zusatzinhalte in <aside>?
• Sind Listen echte <ul> oder <ol>?
• Sind Buttons echte <button>?
• Sind Tabellen nur für Daten im Einsatz?
• Gibt es klickbare <div>-Elemente?
• Sind ARIA-Rollen nötig oder redundant?
• Funktioniert die Seite mit Tastatur?
• Ist der Accessibility Tree verständlich?

Ist die Änderung online, melde die Massnahme als umgesetzt. Der nächste vollständige Crawl prüft die betroffenen Seiten.

Ergänzend dazu helfen Schema Markup und Zusammenfassungen und Key Takeaways, um die Ursache sauber einzugrenzen und die nächsten SEO-Massnahmen zu priorisieren.

Fazit: Semantisches HTML macht Inhalte verständlicher #

Semantisches HTML ist die unsichtbare Struktur einer Website. Es trennt Hauptinhalt von Navigation, Zusatzinformationen und Footer. Es macht Inhalte für Browser, Screenreader, Suchmaschinen, Entwickler und Crawler leichter verständlich.

Die RankScan-Massnahmen «Hauptinhalt nicht ausgezeichnet» und «Beiträge ohne article-Element» zeigen zwei konkrete Lücken: kein <main> auf einer Seite und kein <article> in einem Beitrag.

So gehst du vor:

1. Gib die Aufgabe an Entwicklung oder Agentur weiter. Sie betrifft die Vorlage, nicht jede Seite einzeln.
2. Lass den Hauptinhalt jeder Seite in <main> fassen. Ist das zu aufwendig, genügt role="main" am bestehenden Container.
3. Lass in der Beitragsvorlage den Beitrag in <article> fassen, innerhalb von <main>.
4. <nav>, <footer>, <section> und saubere Links und Buttons sind ein freiwilliger Zusatz.
5. Prüfe, dass die Seiten danach gleich aussehen.
6. Melde die Massnahme als umgesetzt. Der nächste vollständige Crawl prüft die betroffenen Seiten.

So wird aus einer Div-Wüste eine klare Struktur. Sie ist zugänglicher für Menschen und verständlicher für Maschinen.

Quellen und weiterführende Informationen #

• Google Search Central Blog: On web semantics
• Google Search Central: SEO Starter Guide
• Google Search Central: Links best practices
• Google Search Central: AI features and your website
• MDN: HTML elements reference
• MDN, HTML: A good basis for accessibility
• WHATWG HTML Standard: Sections
• W3C: Using ARIA
• W3C: ARIA in HTML
• W3C WAI-ARIA Authoring Practices: Main Landmark