Inhalt der aktuellen Seite

HTML-Optimierungen

Wenn man u.U. schonmal dabei ist, seine Seite zu optimieren oder beim Erstellen einer neuen Seite von Anfang an darauf achten möchte, dass sie optimiert erstellt wird, kann man neben Aspekten der Suchmaschinenoptimierung auch noch auf folgende Dinge achten.

Semantische Verwendung von HTML

Mit der semantischen Verwendung von HTML-Elementen meint man, dass HTML-Elemente ihrer eigentlichen Bedeutung entsprechend verwendet werden und somit auch Maschinen (u.U. auch Suchmaschinen) den Inhalt eines bestimmten Tags näher bringt. Man sollte also nicht bestimmte HTML-Elemente vermeiden oder extra verwenden, weil der Browser eine bestimmte Formatierung anzeigt, sondern man sollte die Elemente ihrer Bedeutung entsprechend benutzen – anders formatieren kann man dann immernoch per CSS.

Ein konkretes Beispiel hierfür ist, dass man die wichtigste Überschrift einer Seite mit <h1>wichtigste Überschrift</h1> deklarieren sollte und nicht einfach mit <p>-Tags, da diese für normale Textabschnitte/Absätze (wie dieser hier) gedacht sind. So weiß dann auch eine Maschine, dass es sich bei dem Inhalt zwischen <h1> und </h1> um die Hauptüberschrift der Seite handelt.

Genauso sollte man das Element <blockquote> nur für ein (längeres) Zitat verwenden und nicht einfach benutzen, weil man gerne einen Text etwas weiter einrücken möchte.
So gibt es in der HTML diverse Elemente, welche für bestimmte Deklarationen gedacht sind und so sollte man sie am besten auch einsetzen.
Links semantisch benennen

Apropos Semantik. Auf vielen Seiten (sicherlich auch noch irgendwo auf meiner) sind Links gerne – würde man sie gesondert vom Kontext betrachten – völlig sinnentleert. So ließt man häufig Texte wie "Klicken Sie hier um zur Startseite zurück zu kehren." und das "hier" ist dann der Link zur Startseite.

Viel besser – aus logischen Gründen, aber auch in Hinblick auf Suchmaschinenoptimierung und Barrierefreiheit – wäre es, wenn der Link im Text auf das Wort "Startseite" gelegt wäre und der Text dann auch entsprechend angepasst wäre, z.B. so: "Zurück zur Startseite."
Bilder mit alt- und title-Attribut versehen

Wenn man Bilder einbaut, sollte man darauf achten, das alt- und title-Attribut zu verwenden. Das alt-Attribut dient dazu, einen alternativen Text an zu zeigen, falls die Graphik nicht geladen werden kann, gerne wird dieser Text auch von Screenreadern ausgelesen, man sollte also darauf achten nicht solche Texte wie "Bild1" zu benutzen.

Angemerkt sei hier auch, dass nur der Internet Explorer den Inhalt des alt-Attributs als Tooltipp-Text anzeigt, wenn man die Graphik mit der Maus überfährt, daher ist es nicht gut, wenn man in diesem Text wichtige Informationen für den Besucher versteckt, wie z.B. den Nutzen einer Button-Graphik.

Um einem Tag einen Titel oder eine kurze Beschreibung zu geben, kann man diesem das title-Attribut zuweisen. Der Wert des title-Attributs wird übrigens von den meisten Browsern als Tooltipp beim Überfahren des Elements mit der Maus angezeigt. Zum Schluss noch ein Beispiel:
<img src="muehle.jpg" width="300" height="450" alt="Eine Windmühle" title="Eine alte Windmüle in Ostfriesland">
Links mit title-Attribut versehen

Im Grunde verhält es sich bei Links mit title-Attribut ebenso wie bei Bildern (übrigens ist das title-Attribut ein Universalattribut und kann in nahezu allen Tags verwendet werden). Der Vorteil dabei für Links liegt darin, das beim Überfahren der Maus ein Tooltipp angezeigt wird und somit dem Benutzer eine Zusatzinfo angeboten werden kann, was ihn bei Anklicken dieses Links erwartet (beispielsweise sind alle Links in meiner Navigation mit dem title-Attribut ausgestattet). Wieder ein Beispiel zum Schluss:
<a href="/html-einsteigerkurs.php" title="Ein HTML-Kurs für Einsteiger">HTML-Kurs</a>
Das Favicon

Ein Favicon ist ein kleines Icon (häufig das Firmenlogo), welches zum einen in der Adresszeile des Browsers vor dem "http://" angezeigt wird anstatt des Browserlogos oder anderen Standardgraphiken und zum anderen beim Hinzufügen der Seite zu den Favoriten/Lesezeichen mit gespeichert wird. Diese Graphik hebt die eigene Seite einerseits beim durchblättern der Favoriten/Lesezeichen hervor, zum anderen steigert sie den Wiedererkennungswert.

Man legt die Datei favicon.ico in das Stammverzeichnis (z.B. http://www.maczarr.de/favicon.ico), der Browser weiß dann schon, wie er es zu verwenden hat. Alternativ kann man auch noch zusätzlich – oder wenn man das Favicon nicht im Stammverzeichnis liegen hat – einen Verweis im head-Sektor des Quelltextes platzieren, der müsste wie folgt aussehen:
<link rel="shortcut icon" type="image/x-icon" href="/gfx/favicon.ico">
Das Favicon darf die Ausmaße 16x16 oder 32x32 Pixel haben (besser ist allerdings 16x16 Pixel) und muss als *.ico (Icon) abgespeichert werden. Die Farbtiefe sollte nicht zu hoch sein, 8-Bit (256 Farben) sollten reichen. Es bringt auch einfach nichts eine 16x16 Pixel große Graphik mit 24-Bit Farbtiefe (ca. 16,7 Mio. Farben) zu speichern, das treibt nur die Dateigröße in die Höhe und effektiv bringt es nichts, da man solche Details auf so einer kleinen Fläche gar nicht erkennt.