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
Und wieso stellst du dann nicht selber auf HTML5 um?
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 :)
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.
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 ;-)
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)
[…] Vorteile von HTML5 aus SEO-Sicht var szu=encodeURIComponent(location.href); var […]
„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
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.
[…] Grundstein spielt aus Sicht von T. Leuschner eine bedeutende Rolle, wenn es um das Thema SEO geht – zumindest soll er bald eine bedeutende […]
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
[…] HTML5 und Suchmaschinenoptimierung widmet sich ein aktueller Torben Leuschner in seinem aktuellen Blogbeitrag. Er beleuchtet hierbei unterschiedliche Aspekte wie z.B. die sehr wichtige Semantik von Websites. […]
[…] Die Vorteile von HTML5 für SEO […]
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
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 ;)
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,..
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.
@Seowebdesigns: Deine Argumentation und Aussagen kann ich zu 100% unterschreiben ;-)
Hallo!
Habe mit die Vorlage gerade geholt…Danke!
Bin schon gespannt auf meine Tests damit…werde Dir dann berichten!
MfG
Csaba
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?
[…] Torbenleuschner – Vorteile von HTML 5 aus SEO sicht […]
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 ;)
[…] und die Onsite-Optimierung im Speziellen informiert hat weiß, dass eine ordentliche Struktur bzw. Semantik im Code eines der grundlegendsten Dinge sind, die es zu beachten gilt. Die Auszeichnung von […]
[…] SEOs viel Wirbel. Gerade was die Semantik angeht, klingt das ja erst Mal nach etwas Gutem, auch in Bezug auf Suchmaschinen. Fakt ist aber das es keinerlei belegte Studien dazu gibt, aus denen hervorgeht, das HTML5 (richtig […]