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“.
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 <html>-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 <p>Text</p>. Daneben gibt es sogenannte Void Elements wie <img> oder <br>, die keinen schließenden Tag benötigen.
Ein vereinfachter Aufbau sieht so aus:
<html>
<head>
<title>Seitentitel</title>
</head>
<body>
<p>Hier steht der sichtbare Inhalt der Website</p>
</body>
</html>
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
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 () 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 <h2> und endet mit dem entsprechenden schließenden Tag </h2>. 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 <br>, ein thematischer Trennbereich <hr> oder Bilder <img>. Einige HTML-Elemente kommen typischerweise nur einmal pro Seite vor, andere können mehrfach verwendet werden.
| HTML-Element | Typische Verwendung |
| <title> | 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 |
Jetzt wollen wir euch einige für SEO besonders relevante HTML-Tags und Elemente vorstellen.
HTML-Tags im Head-Bereich
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.
Title
Der Title, also der Seitentitel, 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 Suchergebnissen ausspielt.
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 präzise, verständlich und eindeutig beschreiben.
Der Title wird mit <title>Inhalt</title> in HTML ausgezeichnet. Im Quellcode sieht das so aus:
Meta-Title im Quellcode
In den Google SERPs sieht der Nutzer das:
Meta-Title in der Google Suchergebnisseite
Im Browser-Tab wird der Title so 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
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 <meta name="robots" content="index,follow"> 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
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 <link rel="canonical" href="https://www.luna-park.de/beispiel/"> 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
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
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 <p> und endet mit </p>. Das <p>-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
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: <h1> <h2> <h3> <h4> <h5> <h6>
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 |
| <strong>fett</strong> | fett |
| <b>fett</b> | fett |
| <i>Kursiv</i> | Kursiv |
| <em>Kursiv</em> | Kurisv |
| <u>Unterstrichen</u> | Unterstrichen |
| <sub>tief</sub> | tief |
| <sup>hoch</sup> | 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. <strong> kennzeichnet Inhalte mit besonderer Wichtigkeit und wird von Browsern üblicherweise fett dargestellt. <em> steht für eine sprachliche Betonung und wird üblicherweise kursiv dargestellt. Die gleiche sichtbare Darstellung haben <b> und <i>. Diese haben dagegen andere semantische Einsatzbereiche und sind keineswegs einfach veraltete Varianten von <strong> und <em>. 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. <span> 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 <strong> besitzt ein <span> für sich genommen keine besondere semantische Bedeutung.
Span innerhalb eines p-Tag
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 <h1>- bis <h6>-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 <ul> (unordered list) beziehungsweise <ol> (ordered List) ausgezeichnet. Die einzelnen Listenpunkte stehen jeweils in einem <li>-Element. Diese Formatierung ist beispielsweise auch dann wichtig, wenn man für ein Listen Featured Snippet optimieren möchte.
Eine ungeordnete Liste sieht beispielsweise so aus:
<ul>
<li>Erster Punkt</li>
<li>Zweiter Punkt</li>
</ul>
Listen eignen sich besonders für Inhalte, bei denen mehrere gleichartige Punkte, Schritte oder Eigenschaften übersichtlich dargestellt werden sollen. Eine saubere HTML-Auszeichnung macht diese Struktur sowohl für Nutzer als auch maschinell leichter nachvollziehbar. Das kann für klassische Suchergebnisse ebenso hilfreich sein wie für Systeme, die Inhalte automatisiert extrahieren und zusammenfassen.
Listendeklarierung im Quellcode
Liste auf der Website
Links
Links (intern wie auch extern) sind aus SEO-Sicht sehr wichtig, da durch die Verlinkungen die Crawler der Suchmaschinen durch die Webseite navigiert und geleitet werden können. In HTML werden Links mit der Bezeichnung <a href=“https://www.domain.de“>Linktext/Ankertext</a> gekennzeichnet. So kann z.B. ein Wort mit einem Link versehen werden. Im HTML-Code steht erst der Link und dann der Ankertext. Also beispielsweise so:
Links in HTML werden mit a href= deklariert
In dem Beispiel steht hinter „hreflang-Auszeichnung“ der Link zur Seite https://www.luna-park.de/blog/25771-tipps-zur-erstellung-und-einbindung-von-hreflang-tags/. Auf der Seite selbst sieht das so aus:
Sichtbare Verlinkung im Text
Links können auch mithilfe von JavaScript erzeugt werden. Google kann solche Links grundsätzlich erkennen, wenn sie nach dem Rendern als crawlbare <a>-Elemente mit einem href-Attribut im DOM vorhanden sind. Für eine zuverlässige Crawlbarkeit empfiehlt sich deshalb weiterhin eine klassische HTML-Verlinkung nach dem Muster <a href="https://www.domain.de/">Ankertext</a>.
Image-Tag
Blder werden über das Image-Tag eingebunden. Dies ist folgendermaßen aufgebaut: <img src="https://www.luna-park.de/bild.png" alt="Alt-Text" width="605" height="477"> Nach dem öffnenden Tag kommt der Pfad zum Bild sowie der alt-Text, gefolgt von weiteren Attributen wie Größe und Breite. Vor dem Link zum Pfad des Bildes steht „src=“, dies steht für Source, also die Quelle des Bildes. Danach folgen die alt-Angaben, also das Alt-Attribut. Diese beiden Angaben sollten immer vorhanden sind. Weitere Attribute wie die Größe oder Breite beispielsweise sind optimal. Das Alt-Attribut, auch Alt-Tag oder Alternativ-Tag genannt, gibt durch die Deklarierung im Quellcode Informationen darüber, was auf dem jeweiligen Bild zu sehen ist. Auch wenn ein Bild nicht geladen werden kann, wird das Alt-Attribut stattdessen angezeigt. Gerade aus Suchmaschinensicht ist das Alt-Attribut sehr wichtig. Mehr zur Bildoptimierung findet ihr in unserem Blog.
Bilder werden über das <img>-Element eingebunden. Dies kann beispielsweise folgendermaßen aussehen: <img src="https://www.luna-park.de/bild.png" alt="Beschreibung des Bildes" width="605" height="477">
Das src-Attribut gibt die Quelle beziehungsweise den Pfad zur Bilddatei an. Das alt-Attribut liefert eine textliche Alternative für den Bildinhalt. Das ist insbesondere für die Barrierefreiheit wichtig, weil Screenreader diese Beschreibung nutzen können. Auch Suchmaschinen erhalten darüber Informationen zum Bildinhalt. Kann ein Bild nicht dargestellt werden, kann der Alternativtext ebenfalls als Ersatz dienen.
Der Alt-Text (auch Alt-Attribut oder Alternativ-Tag genannt) sollte deshalb den relevanten Inhalt oder die Funktion eines Bildes knapp und verständlich beschreiben. Rein dekorative Bilder benötigen dagegen keine inhaltliche Beschreibung und können beispielsweise mit einem leeren alt="" ausgezeichnet werden. Attribute wie width und height sind ebenfalls sinnvoll, weil der Browser dadurch bereits vor dem Laden des Bildes Platz reservieren und Layout-Verschiebungen reduzieren kann. Mehr zur Bildoptimierung findet ihr in unserem Blog.
Alt-Tag im Quellcode
Auch ein Bild kann verlinkt werden. Dabei werden zwei HTML-Elemente ineinander verschachtelt: Das <img>-Element befindet sich innerhalb eines <a>-Elements. Dies sieht man beispielsweise häufig bei Teaserboxen. Klickt ein Nutzer auf das Bild, wird die im Link hinterlegte Seite aufgerufen. Bei einem verlinkten Bild kann der Alternativtext zusätzlich dabei helfen, den Zweck des Links verständlich zu machen. Deshalb sollte das Alt-Attribut auch hier inhaltlich passend und nicht mit Keywords überladen formuliert werden.
Fazit
Viele HTML-Elemente sind für SEO relevant. Dazu gehören unter anderem Title, Meta-Description, Robots-Angaben und Canonicals sowie Überschriften, Links und Bilder. Entscheidend ist dabei nicht, möglichst viele vermeintlich „SEO-relevante“ Tags einzusetzen. Vielmehr geht es darum, Inhalte technisch korrekt und semantisch sinnvoll auszuzeichnen.
Grundlegende HTML-Kenntnisse helfen SEOs deshalb auch heute dabei, Webseiten besser zu analysieren, Crawling- und Indexierungsprobleme zu erkennen und die Zusammenarbeit mit Entwicklern zu erleichtern. Gerade wenn Inhalte von Suchmaschinen und KI-Systemen automatisiert verarbeitet werden, ist eine nachvollziehbare Seitenstruktur eine wichtige Grundlage.
FAQ zur HTML für SEO
Welche HTML-Tags sind für SEO besonders wichtig?
Für SEO sind unter anderem das <title>-Element, die Meta-Description, Meta-Robots-Angaben, Canonical und hreflang sowie Überschriften, Links und Bilder relevant. Entscheidend ist weniger die Anzahl bestimmter Tags als ihre korrekte und semantisch sinnvolle Verwendung. Sauberes HTML hilft Suchmaschinen dabei, Inhalte, Beziehungen und technische Anweisungen einer Seite zu verstehen.
Muss ein SEO HTML programmieren können?
SEOs müssen in der Regel keine kompletten Webseiten in HTML programmieren können. Grundkenntnisse sind aber sehr hilfreich. Wer HTML lesen und wichtige Elemente im Quellcode erkennen kann, findet technische SEO-Probleme schneller und kann Anforderungen an Entwicklung und Content Management präziser formulieren.
Ist die H1 für SEO wichtiger als andere Überschriften?
Die H1 sollte das Hauptthema einer Seite klar beschreiben und bildet üblicherweise die oberste Ebene der Überschriftenstruktur. H2-, H3- und weitere Überschriften strukturieren die darunterliegenden Inhalte. Für SEO ist vor allem eine logische und verständliche Hierarchie entscheidend.
Was ist für SEO wichtiger: Quellcode oder gerendertes HTML?
Beides kann relevant sein. Der ursprüngliche HTML-Quellcode zeigt, welche Inhalte und Anweisungen der Server direkt ausliefert. Das gerenderte HTML beziehungsweise der DOM zeigt zusätzlich Änderungen, die beispielsweise durch JavaScript entstehen. Für technische SEO-Analysen sollte deshalb je nach Fragestellung sowohl der ursprüngliche Quellcode als auch die gerenderte Seite geprüft werden.
Kann Google JavaScript-generierte HTML-Inhalte lesen?
Ja. Google kann JavaScript ausführen und das anschließend gerenderte HTML für die Indexierung verarbeiten. Trotzdem ist es sinnvoll, zentrale Inhalte und Links möglichst zuverlässig bereitzustellen, da Rendering zusätzliche Verarbeitung erfordert und nicht jeder Crawler JavaScript gleichermaßen verarbeitet.
Welche HTML-Fehler können SEO-Probleme verursachen?
Problematisch werden HTML-Fehler vor allem dann, wenn sie die Interpretation wichtiger Elemente beeinträchtigen. Dazu gehören beispielsweise fehlerhafte Canonical-Angaben, unbeabsichtigte noindex-Anweisungen, nicht crawlbare Links, fehlende oder unpassende Seitentitel sowie eine unklare Überschriftenstruktur. Nicht jeder HTML-Validierungsfehler führt dagegen automatisch zu einem SEO-Problem.
