Das Problem ist nicht HTML. Das Problem ist, wenn alles gleich aussieht
Sie können eine komplette Seite mit <div>-Containern bauen, und technisch läuft sie trotzdem. Der Browser rendert sie. Nutzer merken oft keinen Unterschied. Für Suchmaschinen sieht eine solche Vorlage aber schnell nach einem großen Block ohne klare Prioritäten aus.
Genau dort helfen semantische HTML5-Tags. Elemente wie <header>, <main>, <article>, <aside> und <section> sagen nicht nur, wo etwas steht, sondern was diese Fläche auf der Seite überhaupt bedeutet.
Das ist für SEO nicht theoretisch, sondern praktisch relevant. Wenn Google besser erkennt, was Hauptinhalt und was Begleitmaterial ist, sinkt das Risiko, dass Boilerplate, Navigation oder Seitenspalten das eigentliche Thema verwässern.
Warum das für SEO wirklich etwas verändert
Google kann viel selbst ableiten. Trotzdem ist es keine gute Idee, dem Crawler unnötig Rätsel aufzugeben.
Auf vielen Seiten laufen gleichzeitig:
- Hauptinhalt,
- globale Menüs,
- Teaserboxen,
- Empfehlungen,
- Werbeflächen,
- Footer-Links.
Wenn diese Bereiche semantisch nicht voneinander getrennt sind, muss die Suchmaschine stärker raten, welcher Teil das Thema der URL tatsächlich trägt. Auf kleinen Seiten fällt das oft weniger auf. Auf Magazinen, Shops oder stark templatisierten Websites schon eher.
Ein typisches Beispiel ist eine Testseite zum BMW X5. Im Haupttext geht es um das Fahrzeug. Daneben stehen Links zum Mercedes GLE, zum Audi Q7 und zu allgemeinen Wartungstipps. Diese Zusatzinhalte sind nicht falsch, aber sie sollten nicht dasselbe thematische Gewicht bekommen wie der eigentliche Testbericht.
Beginnen Sie mit den großen Bereichen: <header>, <main> und <footer>
Die erste Strukturstufe ist einfach:
<header>für Kopfbereich und Hauptnavigation,<main>für den einzigartigen Inhalt dieser URL,<footer>für Abschluss, rechtliche Links und Kontaktpunkte.
1<body> 2 <header> 3 <!-- Logo, Hauptnavigation, Suche --> 4 </header> 5 6 <main> 7 <!-- Einzigartiger Hauptinhalt dieser Seite --> 8 </main> 9 10 <footer> 11 <!-- Copyright, Rechtliches, Kontakt --> 12 </footer> 13</body>
Wichtig sind zwei Dinge:
- Pro Seite sollte es nur ein
<main>geben. - Diese Tags regeln Bedeutung, nicht Styling. Wenn Sie sie nur für Layout verwenden, verschenken Sie den eigentlichen Nutzen.
Mit <article> markieren Sie den Kern der Seite
Innerhalb von <main> lohnt sich oft eine weitere Abgrenzung. Sobald eine Seite ein in sich geschlossenes Stück Inhalt enthält, ist <article> meist die richtige Wahl.
Das gilt zum Beispiel für:
- Blogbeiträge,
- Nachrichten,
- Produkt- oder Kategorieseiten mit eigenständigem Haupttext,
- Ratgeber,
- Reviews.
In der Praxis sitzt die wichtigste <h1> meist innerhalb dieses Elements.
1<main> 2 <article> 3 <h1>BMW X5 im Test: Fahreindruck und Stärken</h1> 4 <p>Hier steht der eigentliche Hauptinhalt...</p> 5 </article> 6</main>
Für den Crawler ist damit viel klarer: Das ist die inhaltliche Einheit, wegen der diese URL existiert.
Ergänzende Inhalte gehören oft in <aside>
Nicht jeder zusätzliche Block ist störend. Vieles ist hilfreich, nur eben nicht zentral. Genau dafür ist <aside> gedacht.
Sinnvolle Einsätze sind zum Beispiel:
- Autoreninfos,
- kurze Hintergrundkästen,
- Listen mit verwandten Beiträgen,
- Werbeblöcke,
- Sidebar-Widgets.
1<main> 2 <article> 3 <h1>BMW X5 im Test: Fahreindruck und Stärken</h1> 4 <p>Hauptinhalt...</p> 5 6 <aside> 7 <p>Technische Eckdaten und kurze Zusatzinfos.</p> 8 </aside> 9 </article> 10 11 <aside> 12 <h2>Verwandte Beiträge</h2> 13 <ul> 14 <li><a href="/mercedes-gle-review">Mercedes GLE im Test</a></li> 15 <li><a href="/audi-q7-review">Audi Q7 im Test</a></li> 16 </ul> 17 </aside> 18</main>
Damit bekommt Google ein saubereres Signal: Der BMW-X5-Test ist das Hauptthema. Die Links rechts daneben sind Zusatzmaterial.
<section> bitte nicht als schickes <div> missbrauchen
Hier passieren die meisten Fehlgriffe.
<section> ist sinnvoll, wenn Sie innerhalb eines größeren Inhalts thematisch getrennte Abschnitte mit eigener Überschrift haben. In einem langen Ratgeber kann das sehr hilfreich sein. Als bloßer Ersatz für jeden beliebigen Container bringt es wenig.
1<article> 2 <h1>Semantische HTML5-Tags richtig einsetzen</h1> 3 4 <section> 5 <h2>Welche Aufgabe hat main?</h2> 6 <p>...</p> 7 </section> 8 9 <section> 10 <h2>Wann ist article sinnvoll?</h2> 11 <p>...</p> 12 </section> 13</article>
Eine gute Faustregel lautet: Wenn der Block keine eigene klare Zwischenüberschrift verdient, braucht er oft auch kein <section>.
Was Sie an Templates zuerst prüfen sollten
Wenn Sie semantische Struktur unter SEO-Gesichtspunkten bewerten wollen, starten Sie mit dieser Liste:
- gibt es genau ein
<main>pro Seite, - liegt der suchrelevante Kerninhalt in
<article>, - sind Sidebar, Empfehlungen und Promo-Elemente sauber abgesetzt,
- wird
<section>nur für echte Themenabschnitte verwendet, - passen visuelle Reihenfolge und semantische Reihenfolge zusammen,
- sehen Blog, Landingpages, Kategorieseiten und Ressourcenbereiche strukturell konsistent aus.
Gerade auf größeren Websites wiederholen sich solche Fehler templateweit. Eine Korrektur kann deshalb deutlich mehr als nur eine einzelne URL verbessern.
Fazit
Semantisches HTML5 ersetzt weder Suchintention noch gute Inhalte noch eine saubere interne Verlinkung. Es hilft aber dabei, dass Suchmaschinen schneller erfassen, welcher Teil der Seite die eigentliche Antwort liefert und welche Bereiche nur Navigation, Kontext oder Template-Rauschen sind.
Wenn Seiten bereits Sichtbarkeit haben, aber unter ihren Möglichkeiten bleiben, lohnt sich dieser Blick fast immer. In einem technischen Check mit SeoSpeedup Site Audit fallen solche Strukturprobleme meist schneller auf, als viele Teams erwarten.
