¿Son los sprites CSS malos para el SEO?

18

Hoy en día, a menudo, lo que se logró con una <img>etiqueta ahora se hace con algo así como un <div>conjunto de imágenes de fondo CSS utilizando un 'sprite' CSS y un desplazamiento.

Me preguntaba qué tipo de efecto tiene el suyo en el SEO, ya que efectivamente perdemos el altatributo (que está indexado por Google) y estamos atascados con el atributo 'título' (que hasta donde yo entiendo no está indexado).

¿Es esta una desventaja significativa?

seo css

— Hasta el arroyo
fuente

25

Los sprites CSS solo se deben usar para elementos decorativos por este motivo: se usan <img>para elementos que son específicos de una página y se usan sprites para elementos decorativos que no son contextualmente relevantes para el contenido presentado.

Si necesita una imagen de botón para sus elementos de navegación, tiene mucho más sentido agregar esa imagen como fondo en el enlace de navegación en lugar de un marcado como este:

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

(es decir, donde el contenido de la imagen es redundante al contenido de texto en la página o el contenido de la imagen podría describirse mejor como "decoración")

Como una ventaja adicional de separar los elementos de la plantilla del sitio como sprites, más tarde podrá cambiar la "máscara" del sitio cambiando la hoja de estilo en lugar de sobrescribir los viejos archivos de imagen de diseño o reescribir todo su marcado HTML.

— danlefree
fuente

Estoy de acuerdo con sus puntos y agregaría que uno de los principales propósitos / ventajas de los sprites es su mayor velocidad de carga para el rendimiento general del sitio. Se supone que las cargas de páginas más rápidas ayudan con las clasificaciones de SEO, por lo que creo que es una herramienta adecuada para el trabajo correcto.

— digit1001

@ digit1001 - ¿los bots como googlebot realmente cargan todos los recursos asociados con una página?

— UpTheCreek 05 de

4

Puedes usar <img>etiquetas con sprites CSS:

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

sprite.png podría ser un píxel transparente 1x1 comprimido a <50 bytes.

Estilo:

#someSprite {

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

}

De esa manera, obtienes la optimización del rendimiento de los sprites y mantienes tus altetiquetas.

— JohnnyFaldo
fuente

Estoy bastante seguro de que si Google puede componer un motor de búsqueda con procesos complejos para clasificar e indexar 30 billones de páginas, puede detectar aserciones alternativas de 1x1 píxeles.

— Ricky Boyce

1

@Ricky B No es si lo detectarán, sino si lo penalizan de manera extraña por ello, lo cual sería extraño ya que lo penalizarían por reducir el tiempo de carga de la página y la cantidad de solicitudes, que es algo que tienden a alentar: )

— JohnnyFaldo

1

La altetiqueta está sobrevalorada. Creo que muchas personas se desviven para asegurarse de tener altetiquetas en sus páginas. No creo que te duela no tener uno. Es solo cuestión de asegurarse de que si tiene un img, tiene una altetiqueta asignada.

Creo que el tiempo de carga y el rendimiento del sitio tienen un mayor impacto en el SEO en general que las altetiquetas y para cada solicitud de imagen o solicitud HTTP, el sitio se ralentizará. El propósito de un sprite CSS es ayudar a minimizar esas solicitudes y acelerar el tiempo de carga de la página.

— Brandon Buttars
fuente

55

El alttexto también es utilizado por lectores de pantalla. Creo que podría tener una opinión diferente del texto alternativo si fuera ciego.

— MikeTheLiar 01 de

1

Tiendo a usar sprites para iconos decorativos, no tienen nada que ver con la página en su conjunto, por lo que para SEO está bien en ese caso. Cualquier conjunto de imágenes que tenga que tengan todas las mismas dimensiones que no contribuyan al significado de la página son buenos candidatos para sprites CSS.

— Novato ágil
fuente