Was hat „gutes“ HTML mit SEO zu tun?

Geschichte, Mythen und Erkenntnisse

In den vergangenen Jahren hat sich die Weblandschaft und das Verhalten von Suchmaschinen rapide verändert. Ich selbst bin mit HTML 3 und den ersten Suchmaschinen aufgewachsen. Wenn ich daran zurück denke, waren wir weit von dem entfernt was heute möglich ist. In den Anfängen der Internet-Suchmaschinen gab es nur die so genannten Meta-Crawler. Das hat hier nichts mit dem sozialen Riesen aus den USA zu tun, sondern vielmehr damit, wie damals Webseiten in den Index einer Suchmaschine kamen. Ich möchte hier nicht nur einige Mythen entkräften, sondern vielmehr auf das was mir als Webentwickler immer wichtig ist (und war) eingehen. Semantik, Semantik und nochmals Semantik. Auch wenn sie im Laufe des Artikels den Punkt finden, das dies für SEO (vermeintlich) unwichtig ist, es ist für SIE und IHRE Besucher wichtig um gut strukturierte Webseiten und Artikel zu schreiben. Auch die Suchmaschinen werden es Ihnen danken.

Einleitung: HTML – Die Sprache des Webs

Zunächst um den Mythos des „HTML-Programmieren“ zu entkräften: HTML ist keine Programmiersprache, sie kennt keine „Logiken“ wie: „Wenn das eintrifft, mach dieses und jenes, sonst mach was anderes“. HTML wird „geschrieben“ nicht programmiert! HTML ist eine (semantische) Strukturierungs-/Auszeichnungssprache, nicht mehr und nicht weniger. Das geht auch aus der vollen Schreibweise hervor „HyperText Markup Language“. Und wer hat’s erfunden? Die Schweizer? Nicht ganz! HTML wurde am CERN entwickelt um den Austausch von Dokumenten/Informationen über das „Internet“ mit anderen Forschungsstandorten zu erleichtern.

Am 3. November 1992 erschien die erste Version der HTML-Spezifikation. Sir Timothy John Berners-Lee, Physiker und Informatiker, gilt heute als der „Vater“ von HTML und ist Mitbegründer des World Wide Web Consortium (kurz W3C), welches 1994 gegründet wurde und dem er heute noch vorsteht.

Wenn in einem WordPress-System eine Seite, einen Beitrag (ob mit oder ohne Page-Builder) erzeugt wird, ist am Ende immer HTML die Ausgabe. Der Browser „versteht“ die Sprache im Bezug auf die Struktur und den Inhalt. CSS mach das Ganze „hübsch“ und ein wenig verspielt (z.B. mit CSS3 Animations). Interaktion findet mittels JavaScript statt. Alles auf dem Endgerät.

Auch Suchmaschinen „sehen“ nur die HTML Auszeichnungen und das dazwischen als „Inhalt“ an und indizieren ihn. Wie es aussieht, ist absolut zweitrangig. Dennoch ist die Menge an zusätzlichen Informationen, zusätzlichen Dateien die eingebunden werden und das Aufkommen der HTML-Auszeichnung inklusiver ihrer „Tiefe“ (innerhalb des DOM – Document Object Modell) entscheidend für die Ladezeit, was zusätzlich ein Rankingfaktor ist.

Der HTML Kopfbereich

Jedes HTML-Dokument, ob nun selbst geschrieben oder durch eine Websoftware erstellt, teil sich in mehrere Bereiche auf. Hierzu gehört der Dokument-Kopf (head), den man vergleichen kann mit den Dokument/Datei Informationen und der Inhaltsbereich (body). Der Head-Bereich (mit Ausnahme des <title>) wird im Browser nicht angezeigt, wohl aber vom Browser (und der Suchmaschine) verarbeitet.

Im Kopfbereich werden (nicht nur) der Titel (<title>), die Beschreibung des Inhaltes (<meta name=“description“ content=“Hier steht eine Beschreibung“>) sondern auch spezielle, für Soziale Medien relevante Informationen (z.B. <meta name=“og:image“ src=“https://einedoma.in/img/titelbild.jpg“> für das Bild beim Teilen) hinterlegt. Diese speziellen Meta-Tags wurden 2020 von Facebook vorgestellt und werden seitdem von vielen anderen sozialen Medien (X (vormals Twitter), LinkedIn, uvm) auch in Abwandlungen unterstützt. Ebenso können sie z.B. den Zwischenspeicher (Cache) steuern und enthalten viele weitere maschinenlesbare Informationen. Diese werde ich in einem separaten Artikel vorstellen und auch die Relevanz für Suchmaschinen darin behandeln.

In der Vergangenheit gab es einen „meta Tag“ der speziell für die damaligen Suchmaschinen eingesetzt wurde: <meta name=“keywords“ content=“Keyword 1, Keyword 2, …“>. Hier wurden alle Keywords die für das (damalige) Suchverhalten relevant waren genannt. Demzufolge waren auch die Suchmaschinen zu jener Zeit nur bessere Datenbankabfragen, weil sie sich ausschließlich auf diese Information stützten. Die heutigen Suchmaschinen verarbeiten diesen Meta-Tags schon seit 15 Jahren nicht mehr (Google seit 2009, Bing und Yandex noch ein paar Jahre länger). Denn auch das Suchverhalten hat sich verändert.

Der HTML Body

Hier findet der eigentliche Inhalt sein „Zuhause“. Dieser wird durch HTML-Auszeichnungen (Tags) entsprechend strukturiert. Hier kommen z.B. Elemente wie die Überschriften, Absätze, Listen (geordnet und ungeordnet) und Bilder zum Einsatz. Im Gegensatz zum Kopfbereich, hat der Inhalt eine wesentlich höhere Bedeutung als damals die Meta-Beschreibung oder die Meta Keywords. Dies möchte ich an nachfolgendem Beispiel einmal etwas genauer darlegen.

Beobachtung: Das (eigene) Suchverhalten

Wenn ich gezielt nach Informationen suche, verwende ich immer noch das Schema der Keywords. Als Beispiel nenne ich hier: „php date timezone“ um die Informationen zur PHP Funktion Date und deren Parameter für die Zeitzone zu erhalten. Das Ergebnis dieser Suche liefert mir einen direkten Link zur PHP Funktions-Dokumentation mit den unterstützen Zeitzonen. Wenn ich die Suchanfrage verändere z.B. in „Wie kann ich die Zeitzone in der PHP Funktion date verwenden?“ erhalte ich andere Ergebnisse, die hier auch auf weitere Funktionsweisen verweisen (date_default_timezone_set, danach direkt der Link zur PHP-Date Funktion).

Wie man also sieht, die Suchmaschinen arbeiten sowohl mit den Keywords als auch mit Kontextbezogenem Inhalt (wobei ich letzteres manchmal eher als „raten“ mit hoher Trefferquote empfinde). Es kommt auch darauf an in welcher Sprache die Anfrage gestellt wird. Hier könnten wieder andere Ergebnisse angezeigt werden. Es ist ähnlich der heutigen KI’s: Je genauer ich die Anfrage definiere, desto präziser ist auch das Ergebnis.

Content is King – Darstellung der Ergebnisse und Auffindbarkeit in der Suchmaschine

Was in dem o.g. Beispiel (nach Analyse der Ergebnisse) spannend ist, ist die Tatsache das die Meta-Beschreibung und die Anzeige innerhalb des Suchmaschinen-Ergebnisses eine Andere ist. In der Webseite zur Funktion „Date“ ist im meta-name „Description“ ist folgender Wert hinterlegt:

 „PHP is a popular general-purpose scripting language that powers everything from your blog to the most popular websites in the world.“ 

im Suchergebnis wird jedoch der erste Absatz genannt:

„Unix-Zeitstempel berücksichtigen keine Zeitzonen. Mit der Klasse DateTimeImmutable und ihrer Formatierungsmethode DateTimeInterface::format() können Datums- und ...“ 

und das auch noch in der richtigen Sprache. Interessant, nicht wahr?

Bei dieser Ergebnis-Anzeige sind die „Keywords“ hervorgehoben. Da auf jeder dieser Webseiten die selbe „Description“ verwendet wird, versucht die Suchmaschine sich mehr auf den Inhalt zu konzentrieren um ein „relevantes“ Ergebnis zu präsentieren. Womit also der „Beweis“ erbracht ist, das die Meta-Beschreibungen hier nur zum Teil die Ergebnisse beeinflussen und der Inhalt eine höhere Gewichtung / Relevanz hat. Content ist also doch immer noch King, selbst bei einer PHP-Funktionsbeschreibung.

Im Regelfall ist es bei WordPress-Webseiten, die mit Tools wie YOAST oder RankMath arbeiten, dass hier gezielt darauf geachtet wird das jede Seite oder Beitrag eine eigene (individuelle) Beschreibung hat. Was Sinn macht und hier mehr „Vielfalt“ angeboten wird und auch die Relevanz verbessert wird. Auch hier werden die „Keywords“ innerhalb der Beschreibung ausgewertet und hervorgehoben. Weitere Faktoren sind natürlich auch: Lesbarkeit, Verlinkungen (Intern/Extern), Keyword-Dichte, Titel usw. Auch hier werde ich in einem gesonderten Artikel meine Erkenntnisse teilen.

Mythos: „Sauberes“ HTML ist für das SEO nicht wichtig

Viele „SEO-Spezialisten“ sprechen seit Jahren davon das die HTML Struktur unrelevant für die Suchmaschine ist. Das ist „eingeschränkt“ richtig. In der Vergangenheit wurden „unsaubere“ (nicht W3C valide) Webseiten abgestraft. Webseiten bleiben immer noch Dokumente, zumindest war das der Plan für die „Erfindung“ dieser Sprache. Sie ist dazu gedacht, (sauber) strukturierte Informationen zu transportieren. Der HTML Standard macht hierzu ganz deutliche Vorgaben:

„meaning, rather than presentation“
(Übers.: Bedeutung statt Darstellung)

„Elements, attributes, and attribute values in HTML are defined (by this specification) to have certain meanings (semantics).“
(Übers.: Elemente, Attribute und Attributwerte in HTML werden (durch diese Spezifikation) mit bestimmten Bedeutungen (Semantik) definiert.)

Die Wahrheit bzw. (m)eine Erkenntnis

Auch wenn eine „saubere“ HTML Struktur eher ein „Soft-Skill“ für die Suchmaschine ist, so ist es dennoch ein „Qualitätsmerkmal“. Wer sauber arbeitet, liefert auch gute (semantisch korrekte) inhaltliche Qualität und das kann durchaus als Bonus gewertet werden. Die Suchmaschinen haben es leichter den Inhalt zu indexieren, kategorisieren und zu bewerten. Dies kann auch die SERP (Search Engine Result Page (Suchmaschinenergebnisseite)) beeinflussen.

Aus meiner täglichen Arbeit als Webentwickler, sind mir die Grundregeln eines „sauberen“ HTML-Codes nicht nur bekannt und werden auch immer wieder angewendet und „gelebt“. Unarten wie eine Überschrift der vierten Ordnung (h4) als „Subheadline“ zu einer Überschrift der zweiten Ordnung (h2) zu verwenden, gehören sich einfach nicht. Optik hin oder her, sie sind semantisch falsch. Man schreibt ja auch nicht in einem Buch ein Unterkapitel VOR das eigentliche erste Kapitel und ein Buch ohne einen Titel ist ebenso sinnlos.

Die „saubere“ Struktur der Überschriften

Stellen Sie sich nachfolgend ein Buch vor, das einen Titel, mehrere Kapitel und Abschnitte hat. In den Anfängen von HTML wurde festgelegt das es IMMER nur eine Überschrift der ersten Ordnung per HTML-Dokument zu geben hat (Frei nach „Highlander“: Es kann nur eine(n) geben). Sie bestimmt den „Titel“ (h1) des Dokumentes. Darunter gliedern sich die „Kapitel“ bzw. „Abschnitte“ die es mehrfach geben kann. Diese werden in mit einer Überschrift der zweiten Ordnung (h2) eingeleitet. Darunter kommen dann (je nach Inhalt) Unterkapitel oder Abschnitte, die sich dann numerisch (h3, h4, h5, h6) und in der richtigen (aufsteigenden) Reihenfolge unterordnen. Auch diese dürfen mehrfach verwendet werden, müssen aber im Kontext zueinander stehen. Ein Beispiel:

<html lang="de">
   <head>
      <title>HTML Überschriften und ihre Verwendung</title>
      <meta name="descripiton" value="HTML Überschriften dienen der Strukturierung von Inhalten">
   </head>
   <body> 
      <h1>HTML Überschriften und ihre Verwendung</h1>
         <h2>Ein Kapitel</h2>
             <h3>Ein Unterkapitel</h3>
                 <h4>Ein weiteres Unterkapitel</h4>
             <h3>Ein Unterkapitel</h3>
         <h2>Ein weiteres Kapitel</h2>
             <h3>Ein Unterkapitel</h3>
   </body>
</html>

Wie zu erkennen, entsteht hier eine Gliederung des Dokumentes. Somit ist es auch für die Suchmaschine mitunter hilfreich die Informationen gemäß ihrer Relevanz einzuordnen. Für den Besucher ist es wesentlich einfacher dem Inhalt zu folgen, Zusammenhänge zu erkennen, wenn diese z.B. durch eine Onsite-Navigation (Navigation auf dem gleichen Dokument) unterstützt werden. Dieses wird zum Beispiel bei Wikipedia (und auch auf dieser Webseite) verwendet, um gezielt zu Abschnitten zu navigieren. Neu ist das Ganze nicht. Machen Sie in Microsoft-Word ein Inhaltsverzeichnis aus einem Artikel wie diesem hier. Das funktioniert identisch, auch in einem daraus erzeugtem PDF.

Gestaltungstechnisch hat jede Überschrift eine andere Größe. Merksatz: Je höher die Zahl hinter dem „h“ desto kleiner die Überschrift.

Auch wenn der HTML Standard mittlerweile mehrere H1 Überschriften „gestattet“ so ist es weder für eine „saubere“ Strukturierung noch für das SEO ein Vorteil. Mehrere Überschriften der obersten Ebene können im SEO die eigentliche Hauptüberschrift „entwerten“, das Ranking somit (negativ) beeinflussen. Siehe auch: https://developers.google.com/search/docs/appearance/title-link?hl=de#no-clear-main-title

Eine Kuriosität, welche ich bei meiner Recherche entdeckte

Ich finde es schon mehr als unglaublich, das sich eine Firma/Seite, die sich mit SEO beschäftigt nicht die genaue Anzahl der Überschriften-Ebene kennt und hier von „ungefähr“ spricht. HTML ist ein Standard der klare Regeln / Definitionen hat und nicht mit „ungefähr“ arbeitet. Wenn der Leser also die Qualität einer Agentur überprüfen möchte, sollte er mal diese Frage stellen: „Wie viele Überschriften-Ebenen kann ich verwenden?“ Wenn hier ein „ungefähr“ oder „da muss ich erst nachsehen/nachfragen“ herauskommt, dann sollten Sie ernsthaft überlegen, ob Sie dort ihr Geld lassen. SEO ist nicht nur Content, sondern auch Content-Qualität. Anmerkung: es sind genau 5, wenn wir die H1 außen vor lassen, die für einen „sauberen“ Content zumeist automatisch durch das CMS erzeugt wird (oder erzeugt werden sollte)

Artikel / Abschnitte / Bereiche / Inhaltselemente (seit HTML 5)

Unter HTML 1-3 war es nur schwer und nahezu unmöglich, ein Dokument in verschiedene „logische“ Bereich zu unterteilen. Man behalf sich mit der Vergabe des HTML Attributes „id“ (welche auch nur einmal pro Dokument verwendet darf) innerhalb eines „<div>“-Containers (ab HTML 4). So wurden diese mit den id’s „Main“, „Nav“, „Content“ oder ähnlichen Begriffen benannt. HTML5 hat die Id’s die von einem Großteil der Webentwickler verwendet wurden, als „Auszeichnung“ (tags) übernommen. Die Masse hat an der Veränderung teil gehabt und als Vorlage gedient, unwissentlich. Man sieht: HTML „lebt“ vom „machen“

HTML 5 – Auszeichnungen zur Strukturierung

<header></header>
<footer></footer><
<main></main>
<aside></aside>
<nav></nav>
<article></article>
<section><section>
<figure></figure>

um nur einige zu nennen. Wenn wir nun ein Dokument aufbauen, können wir diese Elemente zur Strukturierung heranziehen. Auch hier gilt, in einem sinnvollen Kontext! Beispiel für die Struktur einer einfachen Webseite im Blog-Stil (ohne Formatierung)

<html lang="de">
   <head>
      <title>HTML Überschriften und ihre Verwendung</title>
      <meta name="descripiton" value="HTML Überschriften dienen der Strukturierung von Inhalten">
   </head>
   <body>
      <header>
         <h1>Titel der Webseite</h1>
      </header>
      <nav>Haupt-Navigation</nav>
      <main>
         <article>
            <h2>Artikel 1</h2>
              <section>
                 <h3>Abschnitt</h3>
              </section>
              <section>
                 <h3>Abschnitt</h3>
              </section>
        </article>
        <article>
           <h2>Artikel 2</h2>
             <section>
                <h3>Abschnitt</h3>
             </section>
             <section>
               <h3>Abschnitt</h3>
             </section>
         </article>
      </main>
      <aside>
         <nav>Sidebar-Navigation</nav>
         <section></section>
      </aside>
      <footer>
        <section></section>
        <section></section>
        <section></section>
      </footer>
    </body>
</html>

Durch den Einsatz von CSS-Frameworks, wie z.B. Bootstrap kann hier dann die Gestaltung übernommen werden. Ein vollständiges Beispiel, mit diesem Framework folgt.

Zugänglichkeit, was hat das mit SEO zu tun?

Um diese Frage zu beantworten, gehe ich erneut zurück in die Geschichte von HTML. In den Anfängen wurden Menschen mit „Beeinträchtigungen“ nicht berücksichtigt, schlichtweg weil das Medium „Internet“ noch nicht so verbreitet war. Erst mit dem immer verbessertem Ausbau, erreichte man auch mehr Menschen und ermöglichte ihnen den Zugang zu weltweiten Informationen. Damals eher optisch rudimentär und mit viel Bling-Bling (GIF’s, Marquees – wenn sich daran noch jemand erinnert).

HTML historisch – und schon ein wenig Barrierefrei (ungeplant)

Wie jede Sprache entwickelte sich HTML weiter. Hervorhebungen gab es in Fett (<b>) und Kursiv (<i>). Das war allerdings rein optischer Natur (und die Browser verstehen das bis heute). Auch konnten schon in der ersten Veröffentlichung Bilder in ein Dokument eingefügt werden.

Während die optischen Hervorhebungen zu der Zeit noch keine Zugänglichkeit ermöglichten, war das HTML-Tag für Bilder zumindest schon vorbereitet, auch wenn es ursprünglich eine andere Funktion hatte. Der <img> – Tag hatte neben dem Attribut für die Quelle (src) auch einen Hinweis für den Fall das die Datei nicht gefunden/geladen werden konnte. Dieses Attribut nennt sich „alt“ für Alternative. Sie zeigt dann (neben einem Icon) das an, was eigentlich zu sehen wäre. Mit der Entwicklung der Screenreader wurde dieses Attribut zum „Inhalt“ für Menschen mit eingeschränktem Sehvermögen.

Bitte Beachten!

Vergessen Sie deshalb NIEMALS ihre Bilder mit diesem Attribut auszuzeichnen (in WordPress lässt sich das nach dem Hochladen in den Medien-Details schnell bewerkstelligen). Ausnahme: Es handelt sich um ein „dekoratives“ Element wie z.B. „For Sale“ – Banner oder ähnliches. Beschreiben sie mit ein paar Worten was zu sehen wäre, wie z.B. „Mensch vor Spiegel“ oder Ähnliches.

<img sc="/img/mensch-vor-spiegel.jpg" alt="Mensch vor Spiegel"> 

HTML 4 – Erste Schritte in die richtige Richtung

Während dieser Entwicklung überarbeitete man auch HTML um dieser Personengruppe gerecht zu werden. So hielten die Tags <strong></strong> und <em></em> Einzug in die HTML 4 Spezifikation. Der Tag <strong> steht hier für optisch „fett“ und einer starken Betonung, während das <em> für optisch „kursiv“ und einer leichten Betonung steht.

Auch die Suchmaschinen reagierten verstärkt auf die Änderungen und zielen mehr auf den eigentlichen Inhalt eines Dokumentes ab. Auch heute gilt, das die richtige Auszeichnung von Keywords mit o.g. Formatierungen/Auszeichnungen eine Relevanz für Suchmaschinen darstellen kann. Es macht demnach durchaus Sinn, gezielt seine Keywords hervorzuheben. Übertreiben sollte man es jedoch nicht (Stichwort Keyword-Bashing).

HTML 5 und ARIA

Der HTML Standard wird um weitere Attribute ergänzt um die Zugänglichkeit eines HTML Dokumentes zu verbessern. Die WAI-ARIA Initiative setzt sich dafür ein, um Webseiten für Menschen mit Beeinträchtigungen zugänglicher zu machen und ist seit März 2014 ein empfohlener Webstandard des W3C. Gerade im Bezug auf die Barrierefreiheit sollten sie darauf achten diese zu verwenden. Einen umfassenden Bericht zum BFSG finden Sie bei Bunte-TK: https://www.bunte-tk.de/blog/barrierefreiheitsstaerkungsgesetz-was-sie-wissen-muessen/7005

Zusammenfassung

Wie man unschwer erkennen kann, besteht durchaus ein Zusammenhang zwischen „sauberem“, semantisch korrektem HTML und SEO. Auch wenn es mehr ein „Soft-Skill“ für Google & Co ist, so ist er zumindest für die Besucher ihrer Webseite ein „Mehrwert“. Gute HTML Struktur = Gutes SEO = Gute Barrierefreiheit, am Ende können Sie nur gewinnen. Längere Verweildauer auf der Webseite ist schließlich auch ein Rankingfaktor und zeugt von einer guten Content-Qualität.

Es lohnt sich ein wenig Zeit zu investieren und auch einen HTML-Kurs zu machen. Für das „schicke Äußere“ kann man sich mit CSS beschäftigen. Auch moderne WordPress Page-Builder wie Elementor, DiVi oder WP-Bakery arbeiten mit der manuellen Vergabe von CSS-Eigenschaften. Das Wissen hierum ist kein Hexenwerk. HTML ohne CSS ist einfach nicht „hübsch“ und wer will das schon.

Nachwort

Es wird immer Agenturen & SEO-Experten geben, die meinen, das wäre alles überholt. Tun Sie sich selbst einen Gefallen: Probieren Sie es einfach und berichten Sie mir über die Ergebnisse, gerne auch in Form eines Kommentares. Auch konstruktives Feedback ist durchaus willkommen. Ich freue mich von Dir/Ihnen zu hören

---

Kursempfehlungen