Für SEOs

Grafiken

  1. Verstecken Sie keinen Text, insbesondere keine wichtigen Suchbegriffe in Grafiken. Suchmaschinen können nur Text lesen.
  2. Geben Sie jeder Grafik einen sprechenden Dateinamen.

    Schlecht: bild05.jpg
    Gut: eiffelturm.jpg
  3. Geben Sie jeder Grafik einen aussagekräftigen Alternativ-Text, der ihren Inhalt im Kontext beschreibt. Der Alt-Text ist nicht nur für Besucher wichtig, die das Laden von Bildern deaktiviert haben, sondern wird auch von Suchmaschinen ausgewertet, z.B. von Google. Missbrauchen Sie aber den Alt-Text nicht, um Keyword-Spam darin unterzubringen.

    Falsch: <img src="eiffelturm.jpg">
    Richtig: <img src="eiffelturm.jpg" alt="Eiffelturm">
    Clever: <img src="eiffelturm.jpg" alt="Eiffelturm Paris">
    SPAM: <img src="eiffelturm.jpg" alt="Paris Urlaub Hotel Zimmer Unterkunft">

    Wenn ein Bild als Link verwendet wird, ist der Alternativ-Text besonders wichtig, da er zum Ankertext wird.

    Generell sollten Sie bei Keywords in Alt-Texten auf folgendes achten:
    • Wenn eine Grafik Text enthält, sollte dieser auch im Alt-Attribut vorkommen, und nicht ein völlig anderer Alt-Text angegeben werden.
    • Die Alt-Texte von Layout-Grafiken (Hintergründe, Verläufe, Blind-Gifs usw.) sollten keine Keywords enthalten. Richtig ist hier alt="".
    • Eine Grafik, die auf mehreren Seiten eingebunden ist, sollte nicht unterschiedliche Alt-Texte haben, sondern immer den gleichen.
  4. Wenn es sich nicht vermeiden lässt, dass eine Überschrift eine Grafik ist, dann zeichnen Sie sie mittels HTML auch als solche aus, selbst wenn es die Darstellung nicht beeinflusst. Vergessen Sie auch hier den Alternativtext nicht:

    Falsch: <img src="ueberschrift.gif">
    Besser: <img src="ueberschrift.gif" alt="Überschrift">
    Perfekt: <h3><img src="ueberschrift.gif" alt="Überschrift"></h3>

    Falls die Grafik Teil eines grafischen Layouts ist, kann es sein, dass durch die Auszeichnung als HTML-Überschrift Abstände bzw. Lücken entstehen. In diesem Fall müssen Sie noch mit CSS Innen- und Außenabstand auf 0 setzen:

    h3 {margin:0;padding:0}

  5. Die Darstellung, Abmessungen und Dateigröße von Grafiken sollte auch für Smartphones optimiert sein, da mobile Endgeräte ein kleines Display und eine langsamere Internetverbindung haben.