Sind CSS-Sprites schlecht für SEO?

18

Heutzutage wird häufig das, was mit einem <img>Tag erreicht wurde, mit so etwas wie einem <div>CSS-Hintergrundbild ausgeführt, das ein CSS-Sprite und einen Offset verwendet.

Ich habe mich gefragt, welche Auswirkungen er auf die Suchmaschinenoptimierung hat, da wir das altAttribut (das von Google indiziert wird) verlieren und beim Attribut "title" hängen bleiben (das meines Wissens nicht indiziert wird).

Ist das ein erheblicher Nachteil?

seo css UpTheCreek
quelle

Antworten:

25

CSS-Sprites sollten aus diesem Grund nur für dekorative Elemente verwendet werden - verwenden Sie sie <img>für Elemente, die für eine Seite spezifisch sind, und verwenden Sie Sprites für dekorative Elemente, die für den dargestellten Inhalt nicht kontextbezogen sind.

Wenn Sie ein Schaltflächenbild für Ihre Navigationselemente benötigen, ist es viel sinnvoller, dieses Bild als Hintergrund für den Navigationslink hinzuzufügen, anstatt wie folgt ein Markup zu erstellen:

<a href="/">
  <img src="/images/home.gif" title="Home" alt="Home Button" /> 
  Home
</a>

(dh überall dort, wo der Inhalt des Bildes redundant zum Textinhalt auf der Seite ist oder der Inhalt des Bildes am besten als "Dekoration" beschrieben werden kann)

Als zusätzlichen Vorteil beim Trennen von Websitevorlagenelementen als Sprites können Sie später die "Skin" der Website ändern, indem Sie das Stylesheet ändern, anstatt die alten Designbilddateien zu überschreiben oder das gesamte HTML-Markup neu zu schreiben.

danlefree
quelle
Ich stimme Ihren Punkten zu und möchte hinzufügen, dass einer der Hauptzwecke / -vorteile von Sprites die schnelleren Ladegeschwindigkeiten für die Gesamtleistung der Website sind. Schnelleres Laden von Seiten wird vorausgesetzt, um bei SEO-Rankings zu helfen. Ich denke, es ist eine Frage des richtigen Tools für den richtigen Job.
digit1001
@ digit1001 - Laden Bots wie der Googlebot wirklich alle Ressourcen, die einer Seite zugeordnet sind?
UpTheCreek
4

Sie können <img>Tags mit CSS-Sprites verwenden:

<img alt="description of image" src="images/sprite.png" id="someSprite" />

sprite.png könnte ein 1 x 1 transparentes Pixel sein, das auf <50 Bytes komprimiert ist.

Stil:

#someSprite {

     width:74px;
     height:38px;
     background:url('/images/sprites.png') left 0px top 84px;

}

Auf diese Weise erhalten Sie die Leistungsoptimierung von Sprites - und behalten Ihre altTags.

JohnnyFaldo
quelle
Ich bin mir ziemlich sicher, dass Google, wenn es eine Suchmaschine mit komplexen Prozessen zum Einordnen und Indizieren von 30 Billionen Seiten kann, Behauptungen in einer Höhe von 1 x 1 Pixel erkennen kann.
Ricky Boyce
1
@Ricky B Es ist nicht so, ob sie es erkennen, aber wenn sie Sie dafür bizarr bestrafen, wäre das seltsam, da sie Sie dafür bestrafen würden, dass Sie die Ladezeit der Seite und die Anzahl der Anfragen reduziert haben. )
JohnnyFaldo
1

Das altTag wird überbewertet. Ich denke, zu viele Leute geben sich alle Mühe, um sicherzustellen, dass sie altTags auf ihren Seiten haben. Ich glaube nicht, dass es dir weh tut, keinen zu haben. Es muss nur sichergestellt werden, dass imgIhnen ein altTag zugewiesen ist.

Ich glaube, Ladezeit und Website-Leistung haben einen größeren Einfluss auf die SEO insgesamt als altTags und für jede Bildanforderung oder HTTP-Anforderung wird die Website langsamer. Der Zweck eines CSS-Sprites besteht darin, diese Anforderungen zu minimieren und die Ladezeit Ihrer Seite zu beschleunigen.

Brandon Buttars
quelle
5
Der altText wird auch von Screenreadern verwendet. Ich denke, Sie könnten eine andere Meinung zu alt text haben, wenn Sie blind wären.
MikeTheLiar
1

Ich neige dazu, Sprites für dekorative Symbole zu verwenden. Sie haben nichts mit der gesamten Seite zu tun. Für SEO ist das in diesem Fall in Ordnung. Alle Bilder mit denselben Abmessungen, die nicht zur Bedeutung der Seite beitragen, sind gute Kandidaten für CSS-Sprites.

Agile Noob
quelle