Cómo agregar el atributo title a imágenes optimizadas vía CSS para mejorar el SEO

Waldd0 · 26 Abr 2014

Buenas...

Quería consultarles a los expertos de CSS un tema sobre imagenes que me tiene algo mal respecto al SEO.
Si para mejorar el rendimiento de las páginas, lo optimo es poner las imagenes vía CSS y cuando se llama al id, o class de determinados div de la página cargar automáticamente así ciertos íconos (o imágenes), quiero saber cómo meter el famoso title que es tan necesario para el SEO en esas imaganes que cargamos vía CSS.

Espero haberme podido dar a entender bien. Si no se entiende, me dicen y veo como explicarlo distinto :distant:
Se agradece cualquier idea y/u opinión al respecto.

Saludos

xeme · 1 Jun 2014

Waldd0 dijo:
Buenas...

Quería consultarles a los expertos de CSS un tema sobre imagenes que me tiene algo mal respecto al SEO.
Si para mejorar el rendimiento de las páginas, lo optimo es poner las imagenes vía CSS y cuando se llama al id, o class de determinados div de la página cargar automáticamente así ciertos íconos (o imágenes), quiero saber cómo meter el famoso title que es tan necesario para el SEO en esas imaganes que cargamos vía CSS.

Espero haberme podido dar a entender bien. Si no se entiende, me dicen y veo como explicarlo distinto :distant:
Se agradece cualquier idea y/u opinión al respecto.

Saludos

No termino de entender bien tu consulta. La única forma que yo conozco de cargar imágenes vía CSS es utilizando la propiedad "background-image". Del mismo modo se recomienda la utilización de CSS SPRITE para tener en una sola imagen .png todos los iconos que forman parte del diseño de la página web.

¿Te refieres a eso?

nullPointer · 2 Jun 2014

Buenas,

Por lo que he entendido, lo que quieres hacer es cambiar el valor del title con CSS, dependiendo de la clase CSS que se cargue.
Creo que con CSS esto no es posible. Tendrías que hacerlo dinámicamente utilizando JavaScript.

Es decir, el atributo title va asociado al elemento que carga la imagen, no a la imagen en sí. Si tienes un div que tiene un title y carga una determinada clase CSS, al cambiar dicha clase por otra, tendrías que utilizar JavaScript para modificar el title y ponerlo acorde a la nueva imagen que has cargado.
Si pusieras un ejemplo, nos aclararías mejor cuáles son tus intenciones, así podríamos echarte una mano

Un saludo.

Xkeeper · 2 Jun 2014

en SEO es mejor usar <img src="" alt="breve descripcion" /> en lugar de CSS

nullPointer · 2 Jun 2014

Xkeeper dijo:
en SEO es mejor usar <img src="" alt="breve descripcion" /> en lugar de CSS

Efectivamente, como dice Xkeeper, el atributo alt es el apropiado en SEO. De hecho, por lo que he podido leer, el atributo title no es tenido en cuenta por los motores de búsqueda de Google.

OS dejo un pequeño artículo de interés: Do Alt and Title Attributes Help With SEO?

Un saludo.

Añado un artículo más actual, ya que el anterior es de 2007 y es poco fiable.
- Image ALT vs TITLE: Using ALT & TITLE Attributes In Image Tags

Waldd0 · 2 Jun 2014

Gracias a todos por responder, mi consulta iba para el lado que indica [MENTION=109778]xeme[/MENTION] de los CSS SPRITE.
O cuando tenemos en CSS imagenes que usamos en el diseño de un sitio web.
Pero el SEO indica que las imagenes deben tener la propiedad ALT (quizás confundí de poner title).

En fin, cuando usamos CSS no podemos darle descripción (alt o title) a las imagenes, por eso me parece como una inconsistencia entre lo que piden los buscadores (SEO) y lo bueno que sería para el diseño usar CSS (Sprite o no), ya que no hay forma de unir ambos "consejos" sin que salga perjudicado algo (seo o velocidad de carga).

¿Los mareé más?

7:

xeme · 3 Jun 2014

Waldd0 dijo:
Gracias a todos por responder, mi consulta iba para el lado que indica [MENTION=109778]xeme[/MENTION] de los CSS SPRITE.
O cuando tenemos en CSS imagenes que usamos en el diseño de un sitio web.
Pero el SEO indica que las imagenes deben tener la propiedad ALT (quizás confundí de poner title).

En fin, cuando usamos CSS no podemos darle descripción (alt o title) a las imagenes, por eso me parece como una inconsistencia entre lo que piden los buscadores (SEO) y lo bueno que sería para el diseño usar CSS (Sprite o no), ya que no hay forma de unir ambos "consejos" sin que salga perjudicado algo (seo o velocidad de carga).

¿Los mareé más? 7:

Una alternativa, aunque no se hasta que modo es correcta esta técnica, sería utilizar una imagen transparente .gif de 1x1 en el lugar donde cargan las imágenes del sprite.png. Voy a tratar de explicarme mejor:

Supongamos que tenemos sprite.png donde tenemos todos los iconos que utilizamos para el diseño de la web (ejemplo: casita para el home, un puntito para los listados, un icono de 32x32 de facebook, etc.). A la hora de escribir el html podríamos utilizar algo así:

Insertar CODE, HTML o PHP:

<ul>
<li class="punto"><a href="#"><img src="ruta-imagen.gif" alt="" title="" /></a></li>
</ul>

La class home hace una llamada al sprite.png del siguiente modo:

Insertar CODE, HTML o PHP:

.punto{
background: url(ruta/sprite.png) "X" "X" no-repeat;
}

Donde "X" es la posición dentro de la imagen (serán valores negativos porque nos moveremos hacía abajo y hacia la derecha).

De este modo que comento utilizamos CSS Sprite y no dejamos de introducir imágenes en el html donde poder poner los atributos alt y title.

Espero haberme explicado bien.

Un saludo.

Cómo agregar el atributo title a imágenes optimizadas vía CSS para mejorar el SEO

Waldd0 Seguir

xeme

nullPointer

Xkeeper

nullPointer

Waldd0

xeme