Blog zu den Themen Webentwicklung, technisches Online Marketing und Suchmaschinenoptimierung

Vorteile von HTML5 aus SEO-Sicht

Montag Morgen, 6 Uhr, Feiertag – beste Voraussetzungen um mich mal wieder einem ausführlichen Blogbeitrag zu widmen. In den letzten Wochen ist es leider etwas still hier geworden, aber die Launch-Phase des CMS fokus fordert mir leider alles ab. Gut also, dass es Feiertage wie diese gibt. :)

Das Thema für den heutigen Artikel kam mir vor ca. zwei Wochen auf den Schirm, als ich von Christian ein Interview für zweidoteins.de bekam. Eine Frage die Christian mir stellte lautete: „Hast du dich schnell in das neue HTML5 einarbeiten können?„. Die Frage fand ich damals schon schwierig, da hinter dem Begriff HTML5 keine exakte Definition hängt. Das Erbe von HTML4 besteht nämlich aus vielen bunt zusammengewürfelten neuartigen Webtechnologien – wobei manche natürlich weitaus wichtiger sind als andere.

Ich antwortete Christian also, dass es mir vor allem die neuen HTML5-Elemente wie footer, header oder section angetan haben. In diesem Artikel möchte ich noch mal detaillierter darauf eingehen, warum das so ist und welche Vorteile die HTML5-Elemente für die Suchmaschinenoptimierung bringen.

Warum könnten die HTML5-Elemente für Google & Co. sinnvoll sein?

Ich behaupte an dieser Stelle einfach mal, Google ist in Sachen Algorithmus relativ Hype-resistent. Auch wenn es für manche auf Grund der Einführung des +1-Buttons anders erscheinen mag, glaube ich nicht, dass Google den Suchalgorithmus kurzfristig gestaltet sondern eine nachhaltige Indexierung von Inhalten anstrebt. Daraus ziehe ich auch den Schluss, dass Webseiten in den Google SERPS nicht automatisch ein besseres Ranking erhalten, wenn der Doctype des Dokuments mit HTML5 anstatt XHTML1.0 ausgeliefert wird.

Um zu verstehen wie eine Suchmaschine auf Onsite-Basis arbeitet, kann man selbst wie folgt vorgehen: Öffnet eine Webseite im Browser und gewichtet die Inhalte auf Grund der visuellen Gestaltung. Anschließend öffnet ihr den Quelltext der entsprechenden Webseite und versucht, die Inhalte an Hand des Quellcodes zu gewichten. Gar nicht so einfach, oder?

Genau mit solchen Problemen schlagen sich Suchmaschinenbetreiber wie Google seit jeher herum. Selbstverständlich arbeiten im kalifornischen Unternehmen mit die klügsten IT-Köpfe der Welt und selbstverständlich wurden über die Jahre hinweg komplexeste Algorithmen entwickelt, die genau diese Gewichtung vornehmen sollen.

Die Schlüsselfrage lautet in diesem Falle aber: Kann die Suchmaschine Inhalte an Hand des Quelltextes exakt genauso bewerten wie ein Mensch an Hand der visuellen Darstellung der Webseite? Ich behaupte nicht – zumindest nicht ohne HTML5!

Semantik – die Augen der Suchmaschine

Schauen wir uns zuerst im groben an, welche HTML-Elemente in der fünften Version der Auszeichnungssprache neu dazugekommen sind. Da wären beispielsweise header, footer, details, aside, section, article oder auch nav.

Diese Elemente haben gegenüber dem klassischen div-Element alle samt einen entscheidenden Vorteil: Sie klassifizieren, deklarieren und werten den zu tragenden Inhalt! Der (technische) Fachbegriff dafür ist Semantik…

Um zu verstehen, warum Semantik für Computer im Allgemeinen und Suchmaschinen-Crawler im Speziellen so wichtig ist, muss man sich klar machen, wie Informationen aufgenommen werden. Der Mensch gewichtet Inhalte auf einer Webseite größtenteils auf visueller Ebene. Einem Text der einen höheren Schriftgrad und Kontrastwert hat, weißt er beispielsweise einen größeren Wert zu. Die klitzekleine Footer-Information hingegen wird er nur in den seltensten Fällen wahrnehmen. Somit kann der Webdesigner Inhalte für den Menschen aufbereiten und gleichzeitig gewichten.

Auch wenn Google und Co. mittlerweile mit Sicherheit schon gut CSS lesen können, haben sie es deutlich schwerer. Die Programmierer müssen Algorithmen entwickeln, welche die Inhalte an Hand des zugrundelegenden Quelltextes bewerten. Und diese Techniken sollen möglichst auf jeder Webseite korrekt greifen – ein schwieriges Unterfangen.
Genau aus diesem Grund spielten bislang auch Überschriften eine so große Rolle bei der Onsite-Suchmaschinenoptimierung.  Man teilte den Search Engines mit, dass der Inhalt zwischen den beiden <h1>-Tags besonders wichtig ist. Dafür muss Google nicht erst komplexe Algorithmen über die Seite laufen lassen, um die Überschrift zu finden, sondern kann sich absolut sicher sein – denn die Deklaration kommt ja direkt vom Entwickler.

Hier kommt die Navigation, hier die Sidebar, …

Und genau dieses Prinzip wurde in HTML5 weiterverfolgt. Es sind neue (semantischere) Elemente hinzugekommen, die Inhalte tragen und dabei automatisch eine Gewichtung vornehmen.

So kann man beispielsweise festlegen, wann es sich um den Kopfbereich oder die Sidebar handelt. Man kann festlegen, wo die Hauptnavigation oder der Footer liegt. Alles Punkte, die man vorher nur dem Besucher auf visueller Ebene mitteilen konnte, aber nicht der Suchmaschine.

Meines Erachtens liegen die Vorteile der neuen HTML5-Elemente bei der Suchmaschinenoptimierung auf der Hand. Obwohl es mit Sicherheit tausende von Algorithmen gibt, eine genaue Deklaration seitens des Entwicklers kann durch keinen Algo ersetzt werden. Ansonsten wäre auch das h1-Element nicht so verdammt wichtig für Suchmaschinen!

Die wichtigsten HTML5-Elemente im Überblick

Abschließen möchte ich den heutigen Blog-Artikel mit einer kleinen Übersicht der wichtigsten neuen HTML5-Elemente. Mittels einiger kleiner Hacks & Tricks (kommen im nächsten Artikel) lassen sich die Elemente bereits heute in jedem Browser (auch IE6) perfekt nutzen. Probiert es doch einfach mal aus, subjektiv habe ich bis jetzt sehr gute Erfahrung in der Onsite-Suchmaschinenoptimierung mit HTML5-Elementen gemacht.

header

Deklariert den Kopfbereich einer Webseite. Hier könnte man beispielsweise die h1-Überschrift, ein Logo und die Navigation platzieren.

footer

Das footer-Element legt den Fußbereich der Seite fest. Im Fußbereich befinden sich meistens abschließende Informationen über den Autor oder die Webseite, welche mit dem eigentlichen Inhalt in keinem direkten Zusammenhang stehen.

nav

Ein Element zum Auszeichnen der Navigation. Ob man anschließend ein ul-Element öffnet oder gleich die Links platziert ist egal. Ich persönlich würde das nav-Element jedoch nur für die Hauptnavigation verwenden.

section

Dieses HTML5-Element ist sehr wichtig, es differenziert nämlich verschiedene Bereich innerhalb der Webseite und kann somit mehrfach verwendet werden. Beispielsweise um zwei Inhaltsbereiche voneinander zu trennen.

article

Das article-Element eignet sich perfekt, um direkt den wichtigsten Content auszuzeichnen. Im Falle eines Blogs würde es beispielsweise unmittelbar den Artikeltext umschließen.

aside

Wenn wir nochmal auf den Blog zurückkommen, ließe sich mit dem aside-Element zum Beispiel eine Sidebar realisieren. Der Inhalt des Element muss nicht zum eigentlichen Inhalt der Webseite passen.

details

Das HTML5-Element details deklariert ergänzende Informationen zu einem Thema. In manchen Browsern wird dieser Inhalt bereits standardmäßig ausgeblendet und muss erst über einen Klick eingeblendet werden.

HTML5-Vorlage für SEO-Boost

Außerdem habe ich noch eine kleine HTML5-Vorlage zum Download parat, mit der ihr sofort starten könnt. Im Dokument befindet sich außerdem ein kleiner Hack, der die Webseite abwärts kompatibel bis zum Internet Explorer 6 macht. Viel Spaß! :)

DOWNLOAD: HTML5-VORLAGE

 

 

Dieser Artikel wurde am 13.06.2011 veröffentlicht

Wer schreibt hier?

Torben Leuschner - Webentwickler

Hi, ich bin Torben und baue leidenschaftlich gerne Webseiten. Also habe ich mein Hobby zum Beruf gemacht und bin seit 2008 als Webentwickler Selbständig tätig. Obwohl ich schwerpunktmäßig für Kunden arbeite habe ich auch sehr viel Freude an der Realisierung eigener Projekte. Daraus resultierend hat sich eine große Affinität zu den Themen Online Marketing und Suchmaschinenoptimierung entwickelt. Gelegentlich schreibe ich auf Twitter, viel aktiver bin ich allerdings auf Facebook. Gerne können wir uns dort vernetzen!

Wie stehst du dazu?

  2. Hehe sehr schöner Einwand. Ich kann nur sage, dass sich das Redesign meines Blogs bereits in der Entwicklung befindet. Dazu kommt dann auch eine komplette Umstellung des Templates auf HTML5 :)

  3. Hallo Torben. Deine Vermutung bezüglich der Auswirkungen von HTML5 auf die Onpage-Optimierung ist bereits mehrfach untersucht und getestet worden und messbare Vorteile besitzen Webseiten mit HTML5-Elementen (noch) nicht. Das wäre auch zu einfach. Denn dann würden nur noch HTML5-Webseiten die SERPs dominieren.

  4. Trotzdem bin ich fest davon überzeugt, dass sich dies in den nächsten Monaten definitiv ändern wird. Es ist auch sehr einfach für die Headline statt eines p-Elements eine h1-Überschrift zu nehmen; die Auswirkungen jedoch sind deutlich spürbar.

    Zumal es definitiv keine negativen Auswirkungen hat ;-)

  5. Davon überzeugt sind viele, aber Auswirkungen haben sie eben noch nicht ;o) Ist auf jeden Fall interessant was da auf uns zukommt, denn wenn HTML5-Seiten besser ranken als gleichwertige Nicht-HTML5-Seiten, dürfte dies einige Relaunches zur Folge haben ;o)

  7. „denn wenn HTML5-Seiten besser ranken als gleichwertige Nicht-HTML5-Seiten, dürfte dies einige Relaunches zur Folge haben“

    Da will ich mich nicht drüber beschweren :D

  8. Hi Torben,

    ich bin auch ein großer Freund von semantisch gutem Markup und muss mir trotz dessen eingestehen, dass ich dieses bei meinen eigenen Projekten wesentlich weniger beachte als bei vielen Kundenprojekten.

    In Sachen Suchmaschinenoptimierung bin ich allerdings ganz anderer Meinung. Die Chance ist meiner Meinung nach höher, als dass die Algorithmen der Suchmaschinen daraufhin weiterentwickelt werden, Tabellenlayouts noch besser verarbeiten zu können als den aktuellsten Standard besser zu bewerten.

    Nein, dies soll KEIN Argument pro Tabellenlayouts sein.

    In diesem Bezug hat vor einiger Zeit mal jemand einen Versuch mit der Benennung von Bildern gemacht, das auf ein ähnliches Ergebnis hinauslief. Weiß jemand noch wer das war?

    Sicherlich ist semantisch korrektes Markup viel Wert, allerdings hat es für einen für einen oft vergessenen Bereich einen viel höheren Stellenwert als für die Suchmaschinen, nämlich für die Barrierefreiheit und hier insbesondere für die Screenreader.

    Meiner Meinung nach ist HTML5 noch lange kein wirkliches Ranking-Kriterium und Google und Co. werden sich bestimmt nicht darauf verlassen, dass jeder Frontend-Entwickler mit HTML5 semantisch korrektes Markup erstellen kann und genau das „betont“, was für den User wichtig ist.

  10. Das früher oder später HTML5 auch für SEO interessant sein wird, steht außer Frage und wird kommen. Welchen Umfang das „früher oder später“ haben wird und ob deine Vermutung „in den nächsten Monaten“ zutrifft ist allerdings die Frage! Bedenkt man doch das HTML5 aktuell erst 2022 den recommendation Status erhalten wird! ;)
    LG

  13. Hi Torben,

    danke für den Artikel.
    Habe noch fleißig recherchiert, worin sich und unterscheiden.
    Die Bezeichnung scheint zumindest im dt. verwirrend. Nach meinem Verständnis ist der das übergeordnete Element, welches z.B. ein Widget beschreibt.

    Hier habe ich eine sehr gute Zusammenfassung gefunden http://html5doctor.com/the-article-element/

    VG
    Jens

  14. Ich bin irgendwie skeptisch. Ich kann mir nicht vorstellen das Google ein Element benötigt anstatt einer oder einer einfachen ul mit weiteren Links zu Unterseiten. Natürlich macht HTML5 dies alles schöner und einfacher, aber das es wirklich konkrete Vorteile (selbst in der Zukunft) aus SEO-Sicht bringen wird bezweifel ich. Google sollte und ist doch schon lange in der Lage Footer, Header, Sidebar, Commentsbereich usw. von einander unterscheiden zu können. Trotzdem hat HTML5 natürlich eine Reihe von anderen Vorteilen, weshalb wir ja auch nicht immer alles aus SEO-Sicht betrachten sollten ;)

  15. Ich finde es so oder so schwachsinn. Jeder will derzeitig auf HTML5 umschwenken, soll ja so toll sein.

    HTML5 ist noch nichtmals fertig. Abgesehen davon werden hierdurch auch Benutzer ausgeschlossen! Man merke dass es noch zig Webbrowser gibt, die derartige Schematik eventuell falsch intepretieren. Das Resultat: Die Website ist garantiert zerschossen.

    Auch in 10 Jahren wird es immer noch Nutzer geben, die Beispielsweise mit dem Internet Explorer 6 surfen. Solange derartige Generationen nicht komplett vom Markt verschwunden ist (Was eh bicht so einfach ist – IE6 ist vom hause aus in XP integriert, schaltet man die Automatischen Updates ab *weiter denk*..) wird man nie das erreichen was man möchte.

    Sinnvoll wäre hier nur: Man passt NUR für die Aktuellste Version an, andernfalls wird man als User ausgesperrt mit der Meldung „Update mal endlich“. Wenn aber da niemand mitzieht, werden ältere Webbrowser IMMER existieren. Die meisten machen es halt nicht, weil diese niemanden ausschließen möchten, meckern dann aber dass die Anpassung nervt. Wenn dann sollte Jede-Seite hierbei mitwirken. Steht man alleine da, geht nur der Kunde weg,..

  16. Man muss halt vorsichtig sein was man mit HTML5 anstellt. Aber ich denke es ist im großen und ganzen trotzdem sinnvoll es schon heute einzusetzen, denn erst durch die early adopter wird eine Technologie irgendwann in der Maße eingesetzt..

    Beispiel mit CSS3: Bei Kundenprojekten arbeite ich oft mit CSS3 für bestimmte Effekte die so einfach schneller und besser umzusetzen sind. Falls Sie in „älteren“ Browsern (zu denen in dem Fall sogar der IE8 zählen kann) nicht angezeigt werden ist das ja kein Weltuntergang. Es geht ja meistens nur um optische Effekte. Da ich der Meinung bin das optische Effekte die Ladezeit einer Webseite nicht wesentlich erhöhen sollte ist hier der beste Weg CSS3 zu verwenden. Wenn in älteren Browsern das Design trotzdem funktioniert und einfach einige kleine Details fehlen, tut das dem Nutzer und der Seite keinen abbruch.

  19. Toller Artikel!

    Ich lasse gerade meine komplette Webseite auf html5 umstellen.

    Bringt denn hmtl5 auch speedtechnisch Verbesserungen, also z.B. das Google und Browser die Seite schneller durchforsten können bzw. anzeigen?

  21. Hallo Torben,
    der Artikel ist gut geschrieben und du gehst auch auf einige „gute“ Aspekte des HTML 5 Standards ein. Sicherlich ist HTML5 die Zukunft und es ist auch wirklich gut strukturiert und übersichtlich.

    Auch die Möglichkeiten sind Zukunftsweisend…

    Aber ich denke nicht das Google dieses „momentan“ als ein Rankingfaktor betrachtet, auch wird dieses mit Sicherheit noch eine ganze Weile in Anspruch nehmen.
    Nach meinen Analysen ist es so, dass der eingesetzte HTML Standard absolut keine Rolle spielt. Anhand von Projekten und Mitbewerbern könnte ich das auch belegen.
    Aber dennoch könnten deine Gedankengänge und deine Ideen zum Erfolg führen ;)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

* Die Checkbox für die Zustimmung zur Speicherung ist nach DSGVO zwingend.

Ich stimme zu.