Suchmaschinenoptimierung: Hypertext Markup Language

Die Hypertext Markup Language (HTML) ist eine textbasierte Auszeichnungssprache zur Strukturierung von Inhalten wie Texten, Bildern und Hyperlinks in Dokumenten. Im Gegensatz zu proprietären Formaten wie Adobe Flash oder der Darstellung von Schrift in Bildern können Suchmaschinen diese interpretieren und "verstehen". Suchmaschinen verstehen den Text nicht wirklich, aber sie indizieren diesen. Dabei versteht eine Suchmaschine auch die Logik von HTML.

Dieses Kapitel beschreibt aber nicht, wie man gutes HTML im eigentlichen schreibt, sondern nur auf Suchmaschinenoptimierung bezogen. Um HTML zu lernen sollte man mindestens SELFHTML (selfhtml.org) kennen.

head[Bearbeiten]

Der HTML-Kopf (<head>) enthält hauptsächlich technische oder dokumentarische Informationen, die nicht direkt im Browser sichtbar sind.

title[Bearbeiten]

Der title-Tag beschreibt den Seitentitel und wird sehr hoch^[1] bewertet. Hier ist darauf zu achten, dass der Titel eindeutig den Seiteninhalt beschreibt. Oft wird die Organisationsbezeichnung voran gestellt (Hansisschuhladen - Bergschuhe). Die Suchmaschine interpretiert den title-Tag aber von vorne. Das wichtige Keyword sollte so immer nach vorne (Bergschuhe in Hansisschuhladen).

Meta[Bearbeiten]

Meta-Tag sind (versteckte) HTML-Elemente auf einer Webseite, die Metadaten über das betreffende Dokument enthalten. So sagt <meta name="author" content="Markus Mayer" />, dass ein Markus Mayer der Autor dieser Seite ist. Es gibt die unterschiedlichsten Meta-Tags, aber nur ein paar sind für die Suchmaschine wichtig.

description: wird oft von Katalogen und Bookmark-Diensten als Kurzbeschreibung verwendet, aber auch Suchmaschinen zeigen die description oft als snippet auf der Ergebnisseite an. Meist wird jedoch die Textstelle mit dem gesuchten Keyword angezeigt.^[2]
robots: weist, neben der robots.txt, die Suchmaschine an, welche Inhalte indiziert (index) oder nicht indiziert (noindex) werden sollen. Mit follow wir eine Indizierung von ausgehenden (nicht externen) Links erlaubt. Mit nofollow dementsprechend verboten. Weiter gibt es noch (all), was alles erlaubt.^[3]
keywords: Der Tag keywords wurde ursprünglich genau für Suchmaschinen eingeführt, wird aber aufgrund rigorosen Missbrauchs nicht mehr verwendet^[4].
hreflang: Mit hreflang wird sichergestellt, dass die Suchmaschinen die jeweilige geografische Ausrichtung einer Webseite verstehen und die jeweils zutreffende Sprachversion oder regionale URL einer Webseite dem Nutzer ausliefert.
Canonical Link: Der Canonical Link ermöglicht es bei mehrfach verwendetem Inhalt die Originalressource auszuweisen und verhindert so Duplicate Content.

body[Bearbeiten]

Der HTML-Körper (<body>) ist der sichtbare Hauptteil der Webseite. Hier werden Text, Bilder und andere Element ausgezeichnet. Das bedeutet, dass besondere Textstellen wie Überschriften (<h1>) oder ein Zitat (<cite>) eigene Kennzeichnungen in HTML haben.

Wird bei der Erstellung von HTML nur auf die Erscheinung geachtet, interpretiert ein Such-Bot alles als Text, irgendwie:

<font size="5">Lorem Ipsum</font><br />

Lorem Ipsum is simply dummy text of the <font size="4">printing</font> and typesetting industry.

Lorem Ipsum

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Wird aber HTML verwendet, weiß der Bot was, in diesem Fall Überschrift und was eine Hervorhebung ist:

<h3>Lorem Ipsum</h3>
Lorem Ipsum is simply dummy text of the <bold>printing</bold> and typesetting industry.

Lorem Ipsum

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

(Letztlich kann mit Hilfe von CSS das exakt selbe visuelle Ergebnis erzielt werden.)

Anhand des <h1> und des <b>-Tags kann die Suchmaschinen nun die Relevanz von Textstellen erkennen. Nämlich nicht nur, dass beide verschieden aussehen, sondern auch, dass die erste eine Überschrift und die zweite hervorgehoben ist. In beiden Fällen attestiert die Suchmaschine mehr Gewichtung im Index.

Die Suchmaschine bewertet unterschiedliche HTML-Tags^[1]

h1, h2, h3 etc: Überschriften^[5] werden sehr hoch gewichtet, da sie vermutlich eine Aussage über den Text treffen^[6]. Inzwischen wird angeblich aufgrund von zu hoher Nutzung von H1, H2 genauso hoch bewertet.
b, bold, strong: Der klassische Schriftschnitt Fett deutet auch auf eine höhere Gewichtung
a: konforme URLs tragen zum richtigen internen wie ausgehenden Linkaufbau bei.
alt: ist ein alternativer, beschreibender Bild-Text für den Fall, dass ein Bild nicht angezeigt werden kann oder Systeme z.B. (Such)-Maschinen den Inhalt von Bildern nicht erkennen können. Es ist eine Pflichtangabe^[7] und wird sehr hoch gewertet. Bilder sollten den Text auf einer Webseite unterstützen und sollten daher auch das Objekt darstellen. Der Name oder die Beschreibung dieses Objekts dient im Suchprozess dann als Keyword. Wird auf einer Seite eine blaue Hose Angeboten sollte sinnvollerweise ein Bild auf der Seite diese auch abbilden. Das alt-Tag beschreibt dann den Inhalt des Bildes: <img src="http://example.net/pix/franz3411-jeans-blau.png" alt="blaue Hose Jeans Franz3411" />.

Struktur[Bearbeiten]

Der Content, also der echte Inhalt der Seite sollte im HTML möglichst weit oben stehen, untergeordnete Elemente (Navigation, Onside-Impressum etc.) sollen daher im DOM-Tree weiter unten stehen, da diese oft auf jeder Seite gleichartig (z.B. Onside-Impressum) oder sehr groß (geklappte Komplettnavigation bis zu 500 links) sind.

Allerdings kann es auch Vorteile haben, untergeordnete Elemente speziell nach oben zu sortieren. Eine kleine Navigation mit wenigen links kann, als Art sitemap, auch positiv wirken.

Tools[Bearbeiten]

Da es sich bei den meisten Projekten um CMS handelt ist die Entwicklung einer Site meist aufgeteilt in Arbeitsschritte wie Design, Technik und Content.

Meist bearbeitet man Script- (PHP, Ruby, etc) und Markup-Dateien (HTML) mit einem Texteditor, oder einem WYSIWYG Programm.

Zur Fehlersuche empfiehlt sich das Plugin firebug für Firefox.