Suchmaschinenoptimiertes HTML
Suchmaschinen lesen und bewerten HTML Code. Im Normalfall interessieren sie Angaben die sich nicht auf den wiedergebaren Inhalt beziehen nicht. Darum sollte sich der HTML Code möglichst auf seine eigentliche Aufgabe zu reduzieren - Der Strukturierung von Inhalten. Durch die Trennung von Inhalt und Layout via CSS ist dies ohne Einschränkungen möglich.
Leider war es nicht immer so. In Zeiten von Tabellen-Layouts und Spacer-GIFs war HTML einfach nur Mittel zu Zweck. An den Folgen haben wir bis heute zu leiden. Leider sieht man, auch bei aktuellen Seiten, dass häufig alte Tabellen-Layouts einfach durch vielfach verschachtelte DIVs ersetzt werden. Jedem Element wird eine Klasse oder eine ID zugewiesen, Styleangaben werden direkt in das Dokument geschrieben, viele Inhalte werden durch nichtssagende DIV oder SPAN Container umschlossen.
Doch damit bleibt man weit hinter den Möglichkeiten. HTML ist eine Auszeichnungssprache und sollte auch so genutzt werden. Angaben zum Layout müssen, wann immer es möglich ist, in die CSS Dateien verlagert werden. Leider sind sich viele Web-Entwickler nicht bewusst welche Möglichkeiten sich durch CSS ergeben.
Des weiteren ist es wichtig das die Inhalte mit den dafür vorgesehenen HTML Tags ausgezeichnet werden. Nur so kann eine Maschine die Inhalte vollständig auswerten. Dieser Einsatz reduziert sich im übrigen nicht nur auf die Überschriften (H1 - H6). Auch andere andere Elemente wie Listen und Zitate sollten genutzt werden.
Die Verwendung von semantisch korrekten Elementen ist keine zusätzliche Arbeit. Und auch die effektive Vergabe von IDs und Klassen verbessert die Übersichtlichkeit des Quellcodes deutlich.
Ein kleines (natürlich etwas überspitzes) Beispiel sollte verdeutlichen dass mit wenigen Änderungen viel erreicht werden kann:
Beispiel
Vorher:
HTML
<div id="nav_box">
<div id="liste">
<span class="listen_punkt">
<a class="link" href="#">Link</a>
</span>
<span class="listen_punkt" id="aktiv>
<a class="link" id="link_aktiv" href="#">Link</a>
</span>
</div>
</div>
CSS
#nav { ... }
#list { ... }
.link { ... }
.aktiv { ... }
#aktiv { ... }
#link_aktiv { ... }
Nachher
HTML
<div id="nav">
<ul>
<li><a href="">Link</a></li>
<li class="aktiv"><a href="">Link</a></li>
</ul>
</div>
CSS
#nav { ... }
#nav ul { ... }
#nav li { ... }
#nav li a { ... }
#nav li.aktiv { ... }
#nav li.aktiv a { ... }
Fazit
Wer seine Inhalte mit den semantisch passenden Elementen versieht erleichtert sich nicht nur die Arbeit sondern kommt auch bei den Suchmaschinen besser an. Durch die geschickte Verschachtelung von CSS Regeln kann man den Einsatz von Layout bezogenen Angaben stark reduzieren.
11 Kommentare
UsualRedAnt
schrieb am 6.05.08 um 2:08 Uhr:
Hm... Leider hast du das Beispiel nicht zu Ende gedacht.
Wenn es eh nur eine Liste gibt, ist das umschließende Div unnötig. Immerhin kann man Listen ja (beinahe) wie Divs formatieren. Und die braucht dann auch keinen Bezeichner. So lange es eh nur eine Liste gibt, ist sie ja durch das ul-Tag hinreichend bezeichnet.
Eine Stilfrage scheint es mir da eher zu sein, ob man wie du den Listenpunkt oder den Link formatiert. Ich halte mich lieber an die Links, schließlich sind die es ja in der Regel auch, die "aktiv" werden.
Der Klassenname "aktiv" ist für meinen Geschmack auch nicht glücklich gewählt. Schnell schreibt man da mal versehentlich active. Den gleichen Zweck erfüllt ja auch eine Klasse "tutwas" oder so, deren Namen man bewußter tippt. ;)
Mit hanfigen Grüßen
Steffen
Tobias
schrieb am 6.05.08 um 9:18 Uhr:
Hey Steffen,
nicht zu Ende gedacht stimmt nicht ganz, sondern wohl zu weit. Theoretisch wäre es natürlich möglich den DIV Container zu streichen. Ich gehe aber davon aus das sich in der Navigationsspalte noch mehr Elemente befinden sollen. Die Kürzungen sollten nicht auf Kosten der Erweiterbarkeit gehen.
Dem Listenpunkt den aktiv Status zu geben ist weniger eine Stilfrage sondern viel mehr eine ganz praktische. Wenn man den Listenpunkt die Klasse gibt hat man die Möglichkeit auch die Eigenschaften dieses Punktes speziell anzupassen und nicht nur die des Links.
Den Klassenname "aktiv" habe ich mir einfach angewöhnt. Das ist wohl einfach eine Geschmacksfrage ;-).
designtrends
schrieb am 6.05.08 um 14:08 Uhr:
Ohne Zweifel sollte man HTML und CSS richtig anwenden. Die suggerierte Aussage in der Überschrift oder in Sätzen "Nur so kann eine Maschine die Inhalte vollständig auswerten." halte ich weit übertrieben und auch nicht nachweisbar. Und wie weit sich Primus Google darum schert kann man ausprobieren indem man "AdSense für Suchergebnisseiten" in seine Seite einpflegt.
Torsten
Tobias
schrieb am 6.05.08 um 14:45 Uhr:
In wie weit den übertrieben? Wie soll eine Maschine den sonst die Inhalte auswerten wenn nicht durch die passenden HTML Tags?
Und auch Google gewichtet Überschriften anders als normale Absätze.
designtrends
schrieb am 7.05.08 um 13:51 Uhr:
Hallo Tobias,
das ist schon klar, das war aber auch nicht die Intention Deines Artikels, sondern das Validität und ein besseres Ergebnis in den SERPs ursächlich zusammenhängt und das konnte ich bisher nicht feststellen.
Torsten
Tobias
schrieb am 7.05.08 um 14:06 Uhr:
Validität bringt kaum Vorteile, das ist richtig.
Ein schlanker Code mit semantisch korrekten Tags verschafft einem aber definitiv Vorteile. Das andere Faktoren eine noch viel größere Rolle spielen ist klar. Auch das eine schlecht gecodete Seite besser ranken kann als eine saubere ist bekannt. Aber das der Code überhaupt keinen Einfluss hat kann ich nicht beobachten.
Andreas D.
schrieb am 10.07.08 um 20:47 Uhr:
Also ich schreib statt:
<li class="aktiv"><a href="">Link</a></li>
immer:
<li><strong><a href="">Link</a></strong></li>
Dann kann man auch ohne Stil sehen welcher Link „aktiv“ ist und zugreifen kann man dann entsprechend über:
#nav li strong a { ... }
Tobias
schrieb am 10.07.08 um 21:30 Uhr:
Eine interessante Anmerkung. Das ist zwar zusätzliches Markup, erhöht aber die Zugänglichkeit.
shibumi
schrieb am 11.03.09 um 17:13 Uhr:
ich dachte immer, das html von sich aus suchmaschinenoptimiert ist. wie immer oder meistens habe ich zu kurz gedacht.
Francesco
schrieb am 21.04.09 um 14:06 Uhr:
Ich finde es reicht aus einen aktiven Navigationspunkt einfach nicht als Link anzugeben. So unterscheidet er sich von den anderen, die ja Links sind.
Feivel
schrieb am 13.10.09 um 15:01 Uhr:
Lieber Tobias,
ich würde dafür plädieren (siehe E-Mail-Adresse), nicht nur semantisches (X)HTML, sondern auch gleich semantisches Deutsch zu schreiben. Welch eine Unsitte, dass in beinahe allen Kommentaren, sowohl von Dir, als auch von anderen Kommentatoren nicht auf Rechtschreibung und Grammatik (Morphologie und Syntax) geachtet wird. Beispiel: "Ein schlanker Code mit semantisch korrekten Tags verschafft einem aber definitiv Vorteile. Das andere Faktoren eine noch viel größere Rolle spielen ist klar". Richtig wäre natürlich: "Ein schlanker Code mit semantisch korrekten Tags verschafft einem aber definitiv Vorteile. Dass andere Faktoren eine noch viel größere Rolle spielen, ist klar".
Gruß,
Feivel
