Empfehlungen zum Webdesign: Umsetzung Google-Empfehlungen

Gegenstand dieser Rubrik sind Empfehlungen zum Web-Design auf der Grundlage von Googles Richtlinien und Empfehlungen (siehe Rubrik "Google-Quellen").
Diese Empfehlungen lassen sich mit wenig Aufwand umsetzen. Wer den Aufwand nicht scheut, erhält

• benutzerfreundlichere Webseiten - das ist unsere Motivation

• bessere Positionen in den Suchergebnissen der Suchmaschinen.

Übersicht:

Der Titel einer Seite wird mit dem Title-Tag (<title>) gesetzt und spielt eine grosse Rolle:
Der Seitentitel wird

• in der Kopfzeile (Titelzeile) des Browsers angezeigt
• im Bowser-Tab (-Register oder -Reiter) angezeigt
• beim Speichern von Favoriten / Lesezeichen / Bookmarks als Dateiname bzw. Lesezeichenname verwendet
• von Suchmaschinen als Linkname in den Suchergebnissen verwendet.

Jede Seite einer Website muss einen Titel haben, er soll über die gesamte Website einmalig sein.

Empfohlene Länge: maximal 65 bis 70 Zeichen (einschliesslich Leerschläge). Ist der Seitentitel länger, wird er von den meisten Suchmaschinen abgeschnitten.

Inhalt: Zusammenfassung des Inhalts der Seite. Der Titel sollte das Haupt-Schlüsselwort oder einige wenige (aber nur sehr wenige) Schlüsselwörter des Seitentexts enthalten. 
Zu vermeiden:

• mehrere inhaltlich einander sehr ähnliche Seitentitel
• viele Schlüsselwörter im Seitentitel.

zurück   |   nach oben

 

Die Kurzbeschreibung (Zusammenfassung) des Inhalts einer Webseite wird mit dem Meta-Tag Description (<meta name="description" content="...Kurzbeschreibung...">) erfasst und spielt ebenfalls eine sehr grosse Rolle.
Der Besucher der Seite sieht die Description nicht, sie ist im Quelltext verborgen.
Suchmaschinen übernehmen die Description in den Index und weisen sie in den Suchergebnissen als zweizeiligen Text aus (bei Google heisst das "Snippet").
Jede Seite einer Website soll eine über die gesamte Website einmalige Description haben. Ist die Description nicht einmalig, wird z. B. von G doppelter Inhalt beanstandet.

Empfohlene Länge: mindestens 50 Zeichen, maximal 150 bis 155 Zeichen (einschliesslich Leerschläge). Ist die Description länger, wird sie von den meisten Suchmaschinen abgeschnitten. Ist sie kürzer als 50 Zeichen, wird das von G beanstandet. Fehlt sie gar, übernehmen Suchmaschinen häufig den Anfangstext der Seite - oder einen Extrakt aus dem Text der Seite, den, den sie für "wichtig" halten.

Inhalt: Beschreibung des Inhalts der Seite, nach Möglichkeit in wohlgeformten Sätzen. Die Haupt-Schlüsselwörter des Seitentexts sollten auch in der Description enthalten sein. Bei Übereinstimmung der Schlüsselwörter der Description mit den Schlüsselwörtern im Seitentext kann eine Verbesserung der Position in den Suchergebnissen von Suchmaschinen festgestellt werden. Mehrfaches Aufführen von Schlüsselwörtern in der Description kann zur Verschlechterung der Position in den Suchergebnissen führen.
Schlüsselwörter in der Description, die im Seitentext nicht enthalten sind, werden nach unseren Untersuchungen von Suchmaschinen ignoriert. Beispiel: zwei Schlüsselwörter in der Description der Seite Hotels in der Rubrik Links dieser Website.

zurück   |   nach oben

 

Kurzfassung, wird später weiter ausgebaut:

• Überschriften werden mit den Heading-Tags <h1> bis <h6> markiert.
• Jede Seite einer Website soll genau eine Seitenüberschrift der Ebene h1 haben.
• Die Seitenüberschrift h1 einer Seite sollte für die gesamte Website einmalig sein.
• Schlüsselwörter in der Seitenüberschrift (Ebene h1) sollten auch im Seitentext enthalten sein.
• Die Überschriftenebenen sollen von oben nach unten lückenlos sein, also z. B. h1 - h2 - h3 - h3 - h4, nicht aber h1 - h3 - h5 - h3. Von unten, z. B. h4, kann direkt auf eine höhere Ebene, im ersten Beispiel h2, gewechselt werden (h1 ist aber in der gleichen Seite verboten).
• Der Inhalt der Seitenüberschrift h1 soll mit dem Inhalt des Browser-Titels übereinstimmen, aber nicht gleich dem Browser-Titel sein. (Soll-Vorschrift, deren Verletzung manchmal nicht zu umgehen ist).
• Suchmaschinen gewichten die Inhalte der Seitenüberschriften, die Überschriften der oberen Ebenen haben ein grösseres Gewicht als die der unteren Ebenen.

zurück   |   nach oben

 

Jedes Bild einer Webseite sollte mit den "alt"- und "title"-Attributen des <img>-Tags beschrieben werden.
Der Besucher der Seite sieht die Beschreibung, wenn er mit der Maus über das Bild fährt.
Suchmaschinen nehmen die Bildbeschreibung in den Index auf.

Empfohlene Länge: unklar, noch nicht getestet. Nach unserer Erfahrung kann die Bildbeschreibung mehr als 125 Zeichen lang sein (diesen Wert liest man hin und wieder als Längenbeschränkung) und Zeilenumbrüche enthalten. Originalton G: "avoid writing excessively long alt text that would be considered spammy".

Inhalt: Beschreibung des Inhalts des Bilds. Empfohlen: sollte, wenn zutreffend, auch ein Schlüsselwort enthalten.
Keinesfalls: Dateiname des Bildes - diesem gebricht es häufig an Aussagekraft (siehe dazu auch unten).

1. Beobachtung: auch Schlüsselwörter in der Bildbeschreibung, welche nicht im Seitentext enthalten sind, werden von Suchmaschinen in den Index aufgenommen.
Beispiel für diese Beobachtung: die Bildbeschreibung des Kopfbildes dieser Seite.
2. Beobachtung: der alt-Text zum Bild  wurde in den Index der Suchmaschine G aufgenommen - für jede Seite, in der dieses Bild enthalten ist.

zurück   |   nach oben

 

Ein HTML-Link (Weblink / Hyperlink) 
besteht typischerweise aus drei Komponenten:

1. URL = die "Internet-" oder "Web-Adresse", z. B. http://www.renate-steiner.ch,
2. TITEL = der Titel der Adresse, der in einem gelben Rahmen angezeigt wird, sobald der Cursor über dem Link steht,
3. ANKERTEXT = der für den Benutzer sichtbare Name des Links (der URL). Englischer Name: "anchor text".

Beispiel: Renate Steiner - Organistin  (bitte mit dem Cursor über den Link fahren)

Statt des Ankertexts kann auch eine Grafik angezeigt werden.

Welche Komponenten sind nun wichtig und wie sollen sie gestaltet werden?

Die Webadresse muss formal und inhaltlich korrekt sein - sonst ist der Link nicht funktionstüchtig.

Der Titel (im title-Attribut) ist Bestandteil des W3C-Standards - aber wenig gebräuchlich (nicht einmal das W3C-Konsortium wendet ihn an). Unsere Analysen und Tests haben gezeigt, dass der Ankertext von den Suchmaschinen nicht in den Index aufgenommen wird (weder von G, noch von B oder T). Gleiche Testergebnisse werden im deutschen Google-WMT-Forum berichtet.
Wird der Titel angewandt, sollte er nicht mit Text bzw. Schlüsselwörtern überladen werden - das Beispiel oben dient nur der Demonstration der Möglichkeiten und nicht als Vorbild.

Der Ankertext, also der klickbare unterstrichene Text des Links, hat grosse Bedeutung:

• der Benutzer sieht den Text, ohne den Cursor darüber bewegen zu müssen, und wird über das Link-Ziel informiert
• Suchmaschinen nehmen den Ankertext in den Index auf.

Also muss der Ankertext sehr sorgfältig formuliert werden:
Der Benutzer muss, bevor er klickt, eine klare Vorstellung über das Ziel des Links erhalten. Dazu muss das Linkziel mit wenigen aussagekräftigen Worten beschrieben werden.
Da Suchmaschinen den Ankertext indexieren, ist es vorteilhaft, ein oder zwei Schlüsselwörter in den Ankertext aufzunehmen. Auch für Ankertexte gilt: nicht mit Schlüsselwörten überladen.
Die Anzeige von Grafiken anstelle des Ankertexts hat verschiedene Nachteile, auf die hier zu einem späteren Zeitpunkt eingegangen wird.

(Über den Inhalt von Titel und Ankertext bei Anwendung beider Komponenten folgt hier gelegentlich mehr.)

Links sollten die gleiche Schriftgrösse wie der sie umgebende Text und eine gut lesbare Farbe haben.
Fast unsichtbare Links in sehr kleiner Schrift mit hellgrauer oder gar weisser Farbe sind unbedingt zu vermeiden. So formatierte Links werden von den Suchmaschinen als Linkspam gewertet, der nur zur Erhöhung der Zahl externer Links dienen soll. Solche Links können zur Löschung in den Suchmaschinenindizes führen.

Wo nötig und sinnvoll, kann ein Link mit dem rel-Attribut ergänzt werden. Damit werden Suchmaschinen angewiesen, Links nicht zu folgen oder zu indexieren.
Inhalt des rel-Attributs: "nofollow" oder "noindex", oder beide, getrennt mit einem Komma.
Beispiel: <a href="http://www.babox.ch/infrastruktur/index.html" rel="noindex, nofollow">BaBox-Infrastruktur</a> -
weil ich nicht will, dass der Link und der Inhalt der Ordners "infrastruktur" in den Index aufgenommen wird.

zurück   |   nach oben

 

• Schlüsselwörter und Suchbegriffe, allgemein
• Keywords: Stichwörter (oder auch Schlüsselwörter bzw. Suchbegriffe; Meta-Tag mit Meta-Daten, die für den Seitenbesucher nicht direkt sichtbar sind)
• Seiten- und Kapitel-Aufbau
• die Rolle von Text-Auszeichnungen
• Verwendung von Schlüsselwörtern im Seitentext
• Namen von Bild- und Dokumenten-Dateien.

 
Gut Ding will Weile haben ...

zurück   |   nach oben