Deine Website sieht gut aus, aber Google findet sie trotzdem nicht so richtig? Ein Grund kann im Code liegen, den du nie siehst. Semantische HTML Tags sagen Suchmaschinen und Hilfsprogrammen, was auf deiner Seite was ist: Überschrift, Navigation, Hauptinhalt, Fußzeile. Nach diesem Artikel weißt du, was das bedeutet, was es für dein Ranking bringt und wie du in fünf Minuten prüfst, ob deine Seite sauber gebaut ist.
Was HTML Tags überhaupt sind
Jede Website besteht aus HTML. Das ist die Sprache, in der Browser lesen, was auf einer Seite steht. HTML arbeitet mit Tags, also Markierungen, die Inhalte einschließen. Ein Tag sagt: Hier beginnt ein Absatz, hier endet er. Hier ist ein Bild, hier ein Link.
Lange Zeit haben viele Websites fast nur ein einziges Tag benutzt: das div. Ein div ist ein neutraler Kasten ohne Bedeutung. Man kann damit alles bauen, aber der Kasten verrät niemandem, was drin ist. Entwickler nennen das div-Suppe. Für den Browser ist das kein Problem, er zeigt alles korrekt an. Für alle anderen, die den Code lesen müssen, schon.
Was semantische HTML Tags anders machen
Semantisch heißt: mit Bedeutung. Ein semantisches Tag beschreibt nicht, wie etwas aussieht, sondern was es ist. Mozilla, die Organisation hinter dem Firefox-Browser, bringt es in der Definition von Semantik im Web auf den Punkt: HTML sollte so geschrieben werden, dass es die Daten repräsentiert, die eingefügt werden, und nicht nach seiner Standard-Darstellung.
Die wichtigsten semantischen Tags für eine Firmenwebsite:
- header: der Kopfbereich mit Logo und Menü
- nav: die Navigation, also das Menü
- main: der eigentliche Hauptinhalt der Seite
- article: ein in sich abgeschlossener Beitrag, etwa ein Blogartikel oder eine Referenz
- section: ein thematischer Abschnitt innerhalb einer Seite
- aside: Nebeninhalte wie eine Infobox oder ein Kontaktkasten am Rand
- footer: die Fußzeile mit Impressum, Adresse und Öffnungszeiten
- h1 bis h6: Überschriften in einer Rangfolge, h1 ist der Seitentitel, h2 die Kapitel, h3 die Unterpunkte
Dazu kommen kleinere Helfer wie time für Datumsangaben, figure mit figcaption für Bilder mit Bildunterschrift oder address für Kontaktdaten.
Der Unterschied ist einfach zu verstehen: Ein div mit einem grauen Balken unten auf der Seite ist für Google irgendein Kasten. Ein footer mit deiner Adresse drin ist für Google eindeutig die Fußzeile eines Unternehmens, in der Kontaktdaten stehen.
Was semantische HTML Tags für SEO bringen
Hier lohnt sich Ehrlichkeit. Es gibt keinen Rankingfaktor namens „semantisches HTML“. Wer dir verspricht, dass ein paar geänderte Tags deine Seite auf Platz eins bringen, verkauft dir etwas. Der Nutzen ist indirekt, aber er ist real und kommt über mehrere Wege.
Google versteht schneller, was wichtig ist
Google lädt deine Seite und muss entscheiden, welcher Teil der Inhalt ist und welcher Teil nur Beiwerk wie Menü und Fußzeile. Mit semantischen Tags ist diese Entscheidung sofort klar. Bei einer div-Suppe muss Google raten, und Raten kostet Zeit und geht manchmal schief.
Ein konkretes Beispiel sind die Titel in den Suchergebnissen. Google beschreibt in seiner Dokumentation zu Titellinks, woraus der blaue Titel im Suchergebnis gebildet wird: aus dem title-Element, dem sichtbaren Haupttitel auf der Seite und aus Überschriftselementen wie h1. Wenn deine Seite keine echte h1 hat, sondern nur einen fett formatierten Text in einem div, fehlt Google diese Quelle.
Überschriften strukturieren Inhalt für Mensch und Maschine
Der SEO-Leitfaden für Einsteiger von Google sagt klar: Eine semantische Reihenfolge für Überschriften ist ideal für Screenreader. Für die Google Suche selbst spielt die Reihenfolge laut Google keine Rolle. Das ist eine wichtige Einordnung. Eine saubere Überschriftenhierarchie ist also kein Ranking-Trick, sondern eine Frage der Lesbarkeit. Und gut lesbare Seiten werden länger gelesen, öfter geteilt und öfter verlinkt. Das zahlt sehr wohl auf dein Ranking ein.
Für dich als Betriebsinhaber bedeutet das: Deine Seite braucht genau eine h1, die sagt, worum es geht. Darunter h2 für die großen Themen, h3 für Details. Überschriften sollten nicht danach gewählt werden, welche Größe schön aussieht. Die Größe regelt das Design, die Bedeutung regelt das Tag.
Bilder und Links tragen Bedeutung
Semantik hört nicht bei Überschriften auf. Ein Bild braucht ein alt-Attribut, also einen kurzen Text, der beschreibt, was zu sehen ist. Google schreibt im selben Leitfaden, dass der Alt-Text hilft, zu verstehen, worum es in einem Bild geht. Für einen Dachdecker heißt das: Das Foto vom fertigen Dach in Rain bekommt einen Alt-Text wie „Neu gedecktes Satteldach mit Tonziegeln, Rain am Lech“ und nicht „IMG_4711“.
Das Gleiche gilt für Links. Ein Link mit dem Text „hier klicken“ sagt niemandem, wohin er führt. Ein Link mit dem Text „unsere Preise für Wartungsverträge“ schon. Google nennt das aussagekräftigen Ankertext und empfiehlt ihn ausdrücklich.
Barrierefreiheit: Der zweite Grund, der immer wichtiger wird
Menschen mit Sehbehinderung nutzen Screenreader. Das sind Programme, die eine Website vorlesen. Ein Screenreader kann mit einem nav-Tag direkt zum Menü springen und mit einem main-Tag direkt zum Inhalt. Bei einer div-Suppe muss der Nutzer sich Kasten für Kasten durchhören.
Googles Entwicklerplattform beschreibt das in ihrem Kurs zu semantischem HTML sehr direkt: Nutzer von Bedienungshilfen verlassen sich auf die Semantik, um durch Inhalte zu navigieren und deren Bedeutung zu verstehen. Und weiter: Semantisches Markup ist vor allem für automatisierte Tools einfacher zu lesen, die Markup interpretieren müssen. Diese automatisierten Tools sind Screenreader, aber eben auch der Google-Crawler und inzwischen die Systeme hinter KI-Suchen.
Seit Juni 2025 gilt in Deutschland das Barrierefreiheitsstärkungsgesetz. Es betrifft nicht jeden Handwerksbetrieb, aber die Richtung ist klar. Was das Gesetz für deine Website bedeutet und wo die Grenzen liegen, erklären wir auf unserer Seite zu barrierefreien Websites. Semantisches HTML ist dabei die Grundlage, ohne die alles andere nicht funktioniert.
Der Bonus: KI-Suche und Assistenten lesen Struktur
Wenn jemand ChatGPT oder die KI-Übersicht von Google fragt „Welcher Elektriker in Donauwörth macht Wallbox-Installationen?“, dann lesen diese Systeme Websites maschinell aus. Sie brauchen dieselbe klare Struktur wie Google: Wo steht die Leistung, wo der Ort, wo der Kontakt. Eine sauber aufgebaute Seite hat hier einen Vorteil gegenüber einer, die nur optisch gut aussieht. Wie du deine Inhalte für diese neue Art der Suche vorbereitest, zeigen wir auf unserer Seite zur Optimierung für KI-Suchmaschinen.
So prüfst du deine eigene Website in fünf Minuten
Du musst dafür keinen Code lesen können. Drei einfache Tests:
- Öffne deine Startseite und drücke die Tastenkombination Strg+U, auf dem Mac Cmd+Alt+U. Du siehst den Quelltext. Suche mit Strg+F nach „<main“ und „<nav“. Findest du beides, ist das ein gutes Zeichen. Findest du fast nur „<div“, ist die Seite wahrscheinlich div-Suppe.
- Suche im Quelltext nach „<h1“. Es sollte genau ein Treffer sein. Null Treffer oder fünf Treffer sind beides ein Problem.
- Suche nach „alt=“““. Jeder Treffer ist ein Bild ohne Beschreibung. Bei Logos und Zierbildern ist das in Ordnung, bei Fotos deiner Arbeit nicht.
Mehr solche Prüfpunkte findest du in unserer Website-Checkliste für 2026.
Was das für einen Relaunch oder eine neue Website heißt
Semantisches HTML kostet nichts extra. Es ist keine Zusatzleistung, sondern handwerklich sauberes Arbeiten. Eine Agentur, die das nicht von sich aus macht, arbeitet nicht sorgfältig. Frag beim Angebot ruhig nach: Wird die Seite mit semantischen HTML Tags gebaut, hat jede Seite genau eine h1, bekommen alle Bilder Alt-Texte?
Bei Baukästen und vielen fertigen WordPress-Themes ist das ein echtes Problem. Sie erzeugen oft verschachtelte div-Strukturen, weil das für den Drag-and-drop-Editor bequemer ist. Wir bauen unsere Themes deshalb selbst, mit sauberem Code und ohne überflüssige Verschachtelung. Wie unsere Websites technisch aufgebaut sind und warum wir auf WordPress ohne Page-Builder setzen, beschreiben wir im Artikel über WordPress für lokale Unternehmen.
Fazit
Semantische HTML Tags sind kein Zaubertrick fürs Ranking, aber die Grundlage dafür, dass Google, Screenreader und KI-Systeme deine Seite überhaupt richtig verstehen. Sie kosten nichts extra und gehören zu jeder sauber gebauten Website dazu. Wer sie weglässt, spart nicht, sondern baut ein Fundament mit Rissen. Prüf deine Seite mit den drei Tests oben, und wenn dabei viel div-Suppe rauskommt, reden wir gerne darüber, was eine saubere Struktur für deine Sichtbarkeit bringt.
Kontakt aufnehmen und Website prüfen lassen
FAQ
Verbessern semantische HTML Tags direkt mein Google-Ranking?
Nein, es gibt keinen Rankingfaktor dafür. Sie helfen Google aber, deinen Inhalt korrekt zu erfassen, liefern die Quelle für den Titel im Suchergebnis und machen die Seite für Screenreader nutzbar. Der Effekt ist indirekt, aber er ist Teil jeder sauberen SEO-Arbeit.
Wie viele h1-Überschriften darf eine Seite haben?
Eine pro Seite. Sie benennt das Thema der Seite und steht in der Regel ganz oben. Alle weiteren Überschriften sind h2 oder tiefer.
Kann ich das in meiner bestehenden WordPress-Seite nachträglich ändern?
Teilweise. Überschriften und Alt-Texte kannst du selbst im Editor anpassen. Die Grundstruktur mit header, nav, main und footer legt das Theme fest. Wenn das Theme nur divs erzeugt, hilft nur ein Theme-Wechsel oder ein Relaunch.
Reicht semantisches HTML für eine barrierefreie Website?
Nein, es ist die Basis. Dazu kommen ausreichende Kontraste, Bedienbarkeit per Tastatur, verständliche Formulare und Alt-Texte. Ohne semantische Struktur funktionieren die anderen Punkte aber nicht richtig.