Auch, wenn HTML-Code so schlicht, übersichtlich und standardgemäß wie möglich sein sollte: Eine strikte W3C-Konformität benötigt häufig mehr Energie als sie Nutzen bringt. Deshalb empfehlen wir nicht, diese Konformität als Ziel zu nehmen. Wichtig ist, dass der Google Robot verstehen kann, wo die Inhalte stehen, ihre Wertigkeit bewerten kann und sich durch möglichst wenig Code arbeiten muss.
Im zweiten Teil unserer Serie SEO Check möchten wir die Punkte zusammenfassen, die bei der Erstellung der Seiten bzw. des HTML-Codes beachtet werden sollten.
HTML-Code
- Tabellen vs. Div-Container: Zur Strukturierung einer Seite wurden früher mangels anderer Mittel Tabellen eingesetzt. Diese Zeiten sind vorüber – der Seitenaufbau erfolgt am besten mit <div>-Elementen und Tabellen-Tags werden dort verwendet, wo der Einsatz von Tabellen sinnvoll ist.
- Überschriften: Die Gliederung des Contents sollte mit Hilfe der HTML-Tags zur Formatierung von Überschriften vorgenommen werden. Diese deuten eine absteigende Relevanz an, wobei die mit <h1> ausgezeichnete Überschrift die wichtigste darstellt. Bei der Verwendung von Überschriften haben sich folgende Regeln bewährt:
- <h1> und <h2>sollten jeweils nur einmal pro Seite verwendet werden.
- Zumindest die <h1>-Überschrift sollte das Hauptkeyword und ggfs. Nebenkeywords der (Unter-)Seite enthalten. Häufig wird <h1> auch für den Namen der Seite bzw. das Logo verwendet. Dann muss natürlich die <h2> das Keyword enthalten.
- Die Überschriften sollten möglichst kurz, aber nicht nur auf die Keywords beschränkt sein.
- Alle weiteren Überschriften dienen der Strukturierung des Inhalts und können auch mehrfach verwendet werden. Sie bieten die Möglichkeit, Nebenkeywords zu unterzubringen.
- Navigation: die Navigation durch die Webseite ist für die Suchmaschinen sehr wichtig. Einerseits, weil darüber die einzelnen Unterseiten erreicht werden und andererseits weil sich anhand der Navigation die Gewichtung der einzelnen Unterseiten ableiten lässt. Zu beachten sind deshalb folgende Punkte:
- Die Navigation sollte idealerweise als HTML-Liste angelegt werden.
- Technologien wie Flash und AJAX sollten möglichst nicht verwendet werden.
- Gibt es mehrere Ebenen (Kategorie / Subkategorie / Sub-Subkategorie usw.) ist es sinnvoll, dass die gesamte Navigationstiefe nicht überall sondern jeweils nur in der gerade ausgewählten Kategorie angezeigt wird.
- AJAX: Wer um die Verwendung von AJAX nicht herum kommt oder einfach gerne AJAX-Features auf seiner Seite einsetzen möchte, der sollte sich an den AJAX-Crawling-Leitfaden von Google halten. Darin wird detailliert beschrieben, was bei AJAX-Seiten zu beachten ist. Ergänzt wird der Leitfaden durch ein FAQ, welches die am häufigsten gestellten Fragen zum Crawlen von AJAX-Seiten beantwortet.
- Einbau von Bildern:Bei der Verwendung von Bildern sollten folgende Punkte beachtet werden:
- Bilder sollten mit den Standard-HTML-Befehlen eingebunden werden. Auf den Einsatz von JavaScript sollte möglichst verzichtet werden.
- Bilder sollten mit dem “alt”-Parameter versehen werden, welcher das Keyword und/oder die Nebenkeywords der Seite enthalten sollte.
- Nach Möglichkeit sollten Bilder auch eine Bildunterschrift erhalten, welche das Keyword der Seite enthält.
- Das Hauptbild ist idealerweise im Code zwischen Überschrift und Text zu finden und wird möglichst “einfach” eingebunden. Etwa Javascript-Konstruktionen zur Anzeige von Bildergalerien sollten möglichst ausgelagert werden.
- Die Großversion eines Bildes wird am besten direkt verlinkt und etwa über das CSS “gestaltet”. Komplizierte Javascript-Konstruktionen für die Anzeige einer Großversion sollten vermieden werden.
- Listen: Aufzählungen sollten mit den HTML-Tags <ul> (ungeordnete Liste) oder <ol> (geordnete Liste) ausgezeichnet werden. Listenelemente sollten in <li>-Tags eingeschlossen werden.
- Hervorhebungen: Wie Listen werten auch Hervorhebungen längere Texte auf. Sie verbessern den Lesefluss und unterstützen den Leser beim Scannen des Textes. Auch für Hervorhebungen sollten die Standard-HTML-Tags (z. B. <b> und <i> bzw. <strong> und <em>) benutzt werden.
- Absatzgestaltung: Inhalte sollten idealerweise mit dem HTML-Tag <p> für Textabsätze strukturiert werden.
- Abfolge: Da wir den Code möglichst einfach und kurz gestalten, nicht allzu viele Links in der Navigation haben, gibt es keinen Grund, die Abfolge des Codes zu beeinflussen.
- Sonstiges: Es gibt Seiten, für die der Einsatz von Flash, Frames oder andere eigensinnige Technologien sinnvoll ist. Der Google-Optimierung helfen diese aber in keinem Fall. Alle Informationen die gecrawlt werden sollen, müssen im HTML zu finden sein.
Wir empfehlen darüber hinaus schon jetzt den Einsatz der strukturierenden Elemente von HTML5. Diese helfen dem Robot zu verstehen, welche Elemente im Header, in der Randspalte und im eigentlichen Content stehen.
Über diese “Basics” hinaus gibt es sehr viele Möglichkeiten, SEO mit Code-Optimierung zu unterstützen. Dies gilt vor allem für Maßnahmen, die die Performance einer Seite verbessern. Hierzu gehört z. B. die Verwendung von Sprites für die Einbindung von kleinen Bild-Elementen, Abkoppelung von fremden Servern usw.
Hier eine Übersicht über alle Teile unserer “SEO Check“-Serie:
