Bilder für SEO perfekt einbauen
Häufig habe ich beruflich mit fremdem HTML-Code zu tun und häufig wundere ich mich über die riesigen Mengen von HTML. Das Verhältnis zwischen Text und Code ist für Suchmaschinen durchaus auch ein Kriterium für das Ranking.
Dieses Post konzentriert sich auf die Verwendung des IMG-Tags und insbesondere auf schlechte Beispiele für dessen Verwendung. Also los, das erste Beispiel wartet:
Beispiel 1
- <img src="bild.jpg">
Ganz schön kurz. Aber leider auch falsch. Wenn man versucht, dieses Stück HTML im W3C-XHTML-Validator zu prüfen, so erhält man zwei Fehlermeldungen. Zum einen erlaubt der XHTML-Standard keine öffnenden Tags ohne eine schließende Entsprechung. Zum Anderen benötigt jedes IMG-Tag das ALT-Attribut. Das Minimum an korrektem XHTML-Code sieht also folgendermaßen aus:
- <img src="bild.jpg" alt="" />
Das ALT-Attribut muss immer angeführt werden, selbst wenn es leer sein soll. Nur in seltenen Fällen macht es aber Sinn, das ALT-Attribut wirklich leer zu lassen. Im Regelfall sollte es eine sinnvolle Beschreibung des Bildinhaltes beinhalten.
Beispiel 2
- <img src="bild.jpg" alt="" border="0" />
Häufig wird das BORDER-Attribut verwendet um Probleme mit den Browsern zu verhindern, wenn das Bild verlinkt wird. Dann erscheint nämlich um das Bild herum eine blaue Linie, die den Surfer über die Tatsache informiert, dass das Bild auch ein Link ist. Doch das ist tatsächlich nur ein schmutziger Trick und keine SEO-optimale Lösung.
Statt des Setzens des BORDER-Attributs sollte man das folgende Stück CSS-Code verwenden:
- a img {
- border: none;
- }
Beispiel 3
- <img src="bild.jpg" alt="" height="100" width="100" />
Und noch ein Beispiel für schlechte Auszeichnung des IMG-Tags. Auch hier wird wieder eine Aufgabe im HTML-Code bewältigt, die eigentlich im CSS zu finden sein sollte: Das Verkleinern des Bildes auf 100x100 Pixel.
Korrekt ist hingegen, das Auszeichnen in HTML und CSS wie folgt:
- <img src="bild.jpg" alt="" class="thumbnail" />
- .thumbnail {
- width: 100px;
- height: 100px;
- }