Auch wenn HTML auf den ersten Blick eher das Metier von Entwicklern ist, sind grundlegende HTML-Kenntnisse für SEO durchaus nützlich und an einigen Stellen sogar wichtig. Denn HTML strukturiert nicht nur die sichtbaren Inhalte einer Webseite. Die Auszeichnungen liefern Suchmaschinen wichtige Informationen über Seitentitel, Überschriften, Links, Bilder und die Indexierung einer Seite.

Doch was ist HTML genau und welche HTML-Tags sollten SEOs kennen? Hier gibt’s die Antworten.

Was ist HTML?

HTML steht für „Hypertext Markup Language “ und ist eine textbasierte Auszeichnungssprache , die zur Strukturierung von Webseiten genutzt wird. Dabei werden unterschiedliche HTML-Elemente verwendet, um Inhalte und ihre Bedeutung auszuzeichnen. Durch den HTML-Code werden Eigenschaften und Strukturen einer Webseite festgelegt, die auch für die Suchmaschinenoptimierung relevant sind. Wie wird aus dem HTML-Dokument die sichtbare Webseite? Ganz einfach: Der Browser, zum Beispiel Chrome, Firefox, Edge oder Safari, verarbeitet den Code und stellt ihn für die Nutzer grafisch dar.

Für Suchmaschinen ist HTML ebenfalls eine wichtige Grundlage, um Inhalte, Links und weitere Informationen einer Seite zu erfassen und zu verarbeiten.

Übrigens: Für den Google Crawler ist der HTML-Code essenziell, um die Seite samt Content auszulesen. Den HTML-Code einer Seite könnt ihr über den Browser aufrufen, in Google Chrome zum Beispiel mit der Tastenkombination Strg. + U oder per Rechtsklick auf die Webseite und anschließend im Dialogfeld „Seitenquelltext anzeigen“.

SEOs sollten immer den Seitenquellcode nutzen SEOs sollten immer den Seitenquellcode nutzen

Seitenquellcode einer Webseite im Browser anzeigen

Für SEOs ist es wichtig, zwischen dem ursprünglich ausgelieferten HTML und dem gerenderten HTML zu unterscheiden. Über die Entwickler-Tools, kurz DevTools, im Chrome-Browser könnt ihr euch den aktuellen DOM einer Seite ansehen. Dazu klickt ihr ein Element auf der Website mit der rechten Maustaste an und wählt „Untersuchen“ aus. Der dort angezeigte Code kann sich vom ursprünglichen Seitenquelltext unterscheiden, da der Browser beispielsweise JavaScript bereits ausgeführt und dadurch Inhalte oder Elemente ergänzt beziehungsweise verändert hat.

Auch Google verarbeitet Webseiten in mehreren Schritten. Googlebot ruft zunächst die URL und den ausgelieferten HTML-Code ab. Anschließend kann Google die Seite rendern, JavaScript ausführen und das gerenderte HTML für die Indexierung verarbeiten. Für SEO-Analysen können deshalb beide Ansichten relevant sein. Im ursprünglichen Quellcode erkennt ihr, welche Informationen direkt vom Server ausgeliefert werden. Im gerenderten HTML seht ihr dagegen, welche Inhalte und Elemente nach der Ausführung von JavaScript tatsächlich vorhanden sind.

Wichtige Inhalte sollten möglichst bereits im initial ausgelieferten HTML verfügbar sein. Das erleichtert nicht nur Suchmaschinen die Verarbeitung, sondern erhöht auch die Wahrscheinlichkeit, dass andere Crawler und KI-Systeme die Inhalte vollständig erfassen. Denn nicht alle Bots können JavaScript ausführen oder nachgeladene Inhalte gleichermaßen zuverlässig verarbeiten.

Aufbau einer HTML-Seite

Eine Webseite folgt im HTML grundsätzlich einer festen Grundstruktur. Das HTML-Dokument beginnt mit dem -Element. Innerhalb davon befinden sich ein Head-Bereich und ein Body-Bereich. Viele HTML-Elemente bestehen aus einem öffnenden und einem schließenden Tag, zum Beispiel

Text

. Daneben gibt es sogenannte Void Elements wie oder
, die keinen schließenden Tag benötigen.

Ein vereinfachter Aufbau sieht so aus:

Seitentitel

Hier steht der sichtbare Inhalt der Website

Nach dem öffnenden HTML-Tag folgt der Head, also der „Kopf“ der Webseite. Dort befinden sich unter anderem Informationen und Verweise, die für Funktionen, Darstellung und Suchmaschinenoptimierung wichtig sein können. Nicht alle Angaben im Head sind dabei für SEO relevant. Im folgenden Beispiel seht ihr zunächst Informationen zur Gestaltung der Seite. Auf die für SEOs besonders wichtigen Elemente im Head, wie Title, Meta-Description, Robots-Angaben oder Canonical, gehen wir in den folgenden Abschnitten genauer ein.

Informationen zum Design befinden sich im Head Informationen zum Design befinden sich im Head

Informationen zum Design befinden sich im Head

Hier sehen wir beispielsweise die Informationen über das Design der Seite. Diese sind für uns als SEO jedoch nicht wirklich relevant. Die Informationen im Head werden auf der Webseite selbst nicht angezeigt. Das Head-Tag steht immer nach dem HTML-Tag und vor dem Body-Tag. Der Body, also der Körper der Webseite , kommt immer nach dem Head und beinhaltet den sichtbaren Inhalt der Webseite. Also Text, Bilder, Verlinkungen usw. das, was der Nutzer nachher sieht.

Schließender head-Tag (</head>) und direkt im Anschluss öffnender body-Tag (<body>) Schließender head-Tag () und direkt im Anschluss öffnender body-Tag ()

Schließender head-Tag () und direkt im Anschluss öffnender body-Tag ()

Im Body selbst werden weitere HTML Klassifizierungen angewandt, um die Seite technisch und optisch zu strukturieren.

HTML-Tags

Ein HTML-Tag , also eine Auszeichnung z.B. für eine Überschrift, startet in der Regel mit einem öffnenden Tag wie

und endet mit dem entsprechenden schließenden Tag

. Zwischen den beiden Tags befindet sich dann beispielsweise ein Textabschnitt, eine Überschrift oder eine Textformatierung. Zusätzlich gibt es HTML-Elemente, die keinen schließenden Tag benötigen. Hierzu zählen beispielsweise ein Zeilenumbruch
, ein thematischer Trennbereich
oder Bilder . Einige HTML-Elemente kommen typischerweise nur einmal pro Seite vor, andere können mehrfach verwendet werden.

HTML-Element Typische Verwendung
| Seitentitel im Head <meta name="description"> | Beschreibung der Seite im Head <meta name="robots"> | Hinweise zur Indexierung und Verarbeitung <link rel="canonical"> | Angabe der bevorzugten kanonischen URL <h1> bis <h6> | Überschriften und inhaltliche Hierarchie <p> | Textabsätze <a> | Links <img> | Bilder <strong>, <em> | Semantische Hervorhebungen <p>Jetzt wollen wir euch einige für SEO besonders relevante HTML-Tags und Elemente vorstellen.</p> <h2 id="html-tags-im-head-bereich">HTML-Tags im Head-Bereich</h2> <p>Die HTML-Tags im Head werden auf der Website selbst nicht angezeigt. Trotzdem gibt es einige wichtige Elemente, von denen jeder SEO wissen sollte, wie sie aussehen und wo sie zu finden sind.</p> <h3 id="title">Title</h3> <p>Der Title, also der <strong>Seitentitel</strong> , ist aus SEO-Sicht besonders relevant. Das <title>-Element wird im Head des HTML-Codes hinterlegt und unter anderem im Browser-Tab angezeigt. Außerdem ist es eine wichtige Quelle für den Titellink, den Google in den <strong>Suchergebnissen</strong> ausspielt.</p> <p>Allerdings muss der sichtbare Titellink in der Google-Suche nicht exakt dem hinterlegten <title> entsprechen. Google erzeugt Titellinks automatisiert und kann dafür neben dem <title> weitere Informationen der Seite berücksichtigen. Deshalb sollte der Title den Inhalt der jeweiligen Seite <strong>präzise, verständlich und eindeutig</strong> beschreiben.</p> <p>Der Title wird mit <strong>< title>Inhalt in HTML ausgezeichnet. Im Quellcode sieht das so aus:

Meta-Title im Quellcode Meta-Title im Quellcode

Meta-Title im Quellcode

In den Google SERPs sieht der Nutzer das:

Meta-Title in der Google Suchergebnisseite Meta-Title in der Google Suchergebnisseite

Meta-Title in der Google Suchergebnisseite

Im Browser-Tab wird der Title so angezeigt:

Title wird auch im Browser-Tab angezeigt Title wird auch im Browser-Tab angezeigt

Title wird auch im Browser-Tab angezeigt

Gut zu wissen ist außerdem, dass für die Darstellung geteilter URLs in sozialen Netzwerken häufig eigene Social-Media-Metadaten wie Open-Graph-Tags verwendet werden. Sind diese nicht vorhanden, können Plattformen auf andere Seitendaten zurückgreifen. Wie ihr einen guten Seitentitel und ein überzeugendes Suchergebnis gestaltet, erfahrt ihr in unserem Artikel zur Snippet Optimierung.

Meta-Description

Auch die Meta-Description sollte jedem SEO ein Begriff sein. Sie wird im Head der Webseite hinterlegt und beschreibt den Inhalt einer Seite kurz und prägnant. Google kann diese Beschreibung für das Snippet in den Suchergebnissen verwenden. Allerdings wird die hinterlegte Meta-Description nicht zwangsläufig ausgespielt. Abhängig von der Suchanfrage kann Google stattdessen einen passenden Ausschnitt aus dem Seiteninhalt als Snippet verwenden.

Im HTML-Code wird die Description beispielsweise so hinterlegt: < meta name=“description” content=“Beschreibung der Seite”>

Eine gute Meta-Description sollte den Seiteninhalt treffend zusammenfassen und Nutzern einen konkreten Grund liefern, das Suchergebnis aufzurufen.

Meta-Description im Quellcode Meta-Description im Quellcode

Meta-Description im Quellcode

Description wird in der Google Suche angezeigt Description wird in der Google Suche angezeigt

Description wird in der Google Suche angezeigt

Meta-Robots-Tag

Das Meta-Robots-Tag gehört zu den Meta-Daten im Head-Bereich. Es gibt Suchmaschinen Hinweise darauf, wie eine einzelne Seite indexiert und in den Suchergebnissen behandelt werden soll. Für SEOs ist insbesondere die Steuerung der Indexierung wichtig. Mit “index” beziehungsweise “noindex” lässt sich angeben, ob eine Seite indexiert werden darf. “follow “ beziehungsweise “nofollow “ betrifft die Behandlung der Links auf einer Seite. Darüber hinaus gibt es weitere Angaben, mit denen sich beispielsweise die Darstellung von Snippets oder Vorschauen beeinflussen lässt.

Eine noindex-Anweisung kann beispielsweise bei bestimmten internen Suchergebnisseiten oder anderen Seiten sinnvoll sein, die nicht in den Suchergebnissen erscheinen sollen. Wichtig ist dabei: Damit Google ein Meta-Robots-Tag auslesen kann, muss die betreffende URL zunächst crawlbar sein. Im Beispiel gibt der Code-Schnipsel an, dass die Seite indexiert werden darf und Links grundsätzlich berücksichtigt werden können. “index “ und “follow “ entsprechen allerdings dem Standardverhalten und müssen deshalb nicht ausdrücklich angegeben werden.

Meta-Robots steuern die Indexierung einer Seite Meta-Robots steuern die Indexierung einer Seite

Meta-Robots steuern die Indexierung einer Seite

Canonical-Tag

Das Canonical-Tag wird verwendet, um Suchmaschinen bei gleichen oder sehr ähnlichen Inhalten die bevorzugte URL zu signalisieren. Es befindet sich im Head der Seite und verweist auf die URL, die als kanonische Version betrachtet werden soll.

Mit wird Suchmaschinen beispielsweise signalisiert, dass die angegebene URL die bevorzugte Version des Inhalts ist. Das ist unter anderem dann hilfreich, wenn derselbe oder sehr ähnliche Inhalt über unterschiedliche URLs erreichbar ist. Das Canonical ist dabei ein starkes Signal für Suchmaschinen, aber keine Garantie dafür, dass exakt diese URL als kanonische Version ausgewählt wird.

Canonical-Tag verweist auf die Standardressource Canonical-Tag verweist auf die Standardressource

Canonical-Tag verweist auf die Standardressource

Mehr zur Funktion eines Canonical-Tags findet ihr in unserem Blogartikel.

Hreflang-Tag

Das hreflang-Attribut wird auf mehrsprachigen oder multinational ausgerichteten Websites verwendet und liefert Suchmaschinen Informationen darüber, welche Sprach- beziehungsweise Länderversionen eines Inhalts verfügbar sind. So kann Google Nutzern eine geeignete Version der Seite anzeigen.

Die hreflang-Auszeichnung besteht unter anderem aus rel=“alternate”, der Sprach- beziehungsweise Länderkennung und der URL der jeweiligen Variante. Wichtig ist eine wechselseitige Auszeichnung: Verweist Seite A per hreflang auf Seite B, sollte Seite B auch auf Seite A zurückverweisen. Außerdem sollte jede Sprachversion sich selbst referenzieren. Beispiel:

Hreflang-Tag im Head einer Webseite Hreflang-Tag im Head einer Webseite

Hreflang-Tag im Head einer Webseite

In dem Beispiel gibt es von einer Seite 9 Sprachversionen. Mehr Informationen zur Erstellung von hreflang findet ihr in diesem Blogartikel.

HTML-Tags im Body

Mit den HTML-Tags im Body, die für SEOs relevant sind, werden Teile des sichtbaren Inhalts ausgezeichnet. Sie helfen Suchmaschinen-Crawlern dabei, die Inhalte richtig zu gliedern und ihre Hierarchien zu erkennen.

P-Tags

Der P-Tag steht für einen Paragrafen, also einen Textabschnitt. Was in einem Textdokument einem eigenen Absatz entspricht, wird in HTML mit einem öffnenden und schließenden P-Tag ausgezeichnet. Ein Absatz beginnt also mit

und endet mit

. Das

-Element ist für zusammenhängende Textabsätze vorgesehen und kann neben Text auch passende Inline-Elemente wie Links oder Hervorhebungen enthalten.

P-Tags umschließen eine Text-Paragrafen P-Tags umschließen eine Text-Paragrafen

P-Tags umschließen eine Text-Paragrafen

Text-Paragraf auf der Webseite Text-Paragraf auf der Webseite

Text-Paragraf auf der Webseite

H-Tags für Überschriften

Die H-Tags sollten jedem SEO ein Begriff sein. Mit ihnen werden Überschriften semantisch ausgezeichnet. Sie strukturieren den Inhalt einer Seite und helfen Nutzern und Suchmaschinen dabei, den Aufbau und die Zusammenhänge eines Dokuments besser zu verstehen.

In HTML stehen dafür sechs Ebenen zur Verfügung:

Die Zahlen beschreiben dabei die Hierarchie der Überschriften. Die H1 bildet üblicherweise die Hauptüberschrift beziehungsweise das zentrale Thema einer Seite. H2-Überschriften strukturieren die wichtigsten Unterthemen, H3-Überschriften wiederum einzelne Aspekte innerhalb eines H2-Abschnitts. Interessant zu wissen ist, dass sich diese Struktur gut mit einer wissenschaftlichen Arbeit vergleichen lässt: Die H1 entspricht dem Titel, H2-Überschriften den Kapiteln und H3-Überschriften den Unterkapiteln. Entsprechend sollten H-Tags auch auf Webseiten logisch und hierarchisch eingesetzt werden.

Aus SEO-Sicht ist dabei nicht entscheidend, dass bestimmte Keywords möglichst oft in Überschriften vorkommen. Vielmehr sollten Überschriften den jeweiligen Abschnitt treffend beschreiben und eine nachvollziehbare Inhaltsstruktur schaffen. Die H1 sollte das Hauptthema der Seite klar benennen. Weitere Überschriftenebenen können je nach Umfang und Struktur des Inhalts mehrfach eingesetzt werden. Wie ihr Überschriften und andere Seitenelemente optimiert, erfahrt ihr in unserem Blogartikel zur Content Optimierung.

Textformatierungen

In HTML stehen zahlreiche Möglichkeiten zur Textformatierung zur Verfügung. So kann der Text markiert, Wörter hervorgeheben und unterstrichen werden. Im Folgenden wurden verschiedene Möglichkeiten zur Textformatierung vorgestellt.

Auszeichnung Formatierung
fett fett
fett fett
Kursiv Kursiv
Kursiv Kurisv
Unterstrichen Unterstrichen
tief tief
hoch hoch

Gerade in längeren Fließtexten können Formatierungen dabei helfen, wichtige Aussagen hervorzuheben und Inhalte leichter erfassbar zu machen. Dabei sollte zwischen Darstellung und semantischer Bedeutung unterschieden werden. kennzeichnet Inhalte mit besonderer Wichtigkeit und wird von Browsern üblicherweise fett dargestellt. steht für eine sprachliche Betonung und wird üblicherweise kursiv dargestellt. Die gleiche sichtbare Darstellung haben und . Diese haben dagegen andere semantische Einsatzbereiche und sind keineswegs einfach veraltete Varianten von und . Welche Auszeichnung sinnvoll ist, hängt deshalb davon ab, welche Bedeutung der jeweilige Inhalt hat. Formatierungen sollten nicht eingesetzt werden, um Keywords künstlich ein stärkeres SEO-Gewicht zu geben. Ihr eigentlicher Nutzen liegt darin, Bedeutung und Lesbarkeit eines Inhalts zu verbessern.

Ein weiteres Element ist das Span-Tag. kann genutzt werden, um einzelne Bereiche innerhalb eines Textes gezielt anzusprechen, beispielsweise um ihnen über CSS eine bestimmte Darstellung zuzuweisen. Anders als eine Überschrift oder besitzt ein für sich genommen keine besondere semantische Bedeutung.

Span innerhalb eines p-Tag Span innerhalb eines p-Tag

Span innerhalb eines p-Tag

Wort, das durch ein Span-Tag und einen dazu definierten Style, pink gefärbt wurde Wort, das durch ein Span-Tag und einen dazu definierten Style, pink gefärbt wurde

Wort, das durch ein Span-Tag und einen dazu definierten Style, pink gefärbt wurde

Mit einem Span-Element lassen sich über CSS unterschiedliche Darstellungen umsetzen. Überschriften sollten allerdings nicht lediglich optisch wie Überschriften gestaltet werden. Wenn ein Text tatsächlich eine Überschrift darstellt, sollte dafür ein passendes

- bis

-Element verwendet werden. So bleibt die semantische Struktur des Inhalts auch für Suchmaschinen und assistive Technologien nachvollziehbar.

Listen

Ungeordnete und geordnete Listen werden in HTML mit