Vorteile von HTML5 aus SEO-Sicht

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ß! :)