Diferencia entre alt y título de img - cuál usar - e impacto

10

Durante años he estado escribiendo mi HTML para imágenes como esta:

<img src="picture.jpg" alt="my picture" >

Pero recientemente realicé una auditoría de mi sitio usando las herramientas de SEO de Raven e informó muchos errores con los que realmente me sorprendí.

Cuando revisé el informe, el 99% de estos errores se debieron a la falta del texto del título de la imagen.

Sé que el texto del título de una imagen puede mostrar una pequeña ventana emergente cuando pasas el cursor sobre una imagen, pero aparte de eso, ¿cuál es el propósito y tiene un efecto en el SEO?

Además, si lo implementaras, ¿qué pondrías allí? ¿Pondría la misma información que está en el altatributo? es deciralt="my picture" title="my picture"

sam
fuente
"¿Cuál usar?". No creo que haya dudas sobre si debe usar el altatributo. Esto es obligatorio y sus páginas fallarán en la validación sin él (¿a menos que tal vez en algunos casos extremos con HTML5?).
MrWhite
1
¿"Raven SEO" informa un "error" absoluto o una advertencia / aviso?
MrWhite
@ w3d está informando una advertencia / aviso
sam

Respuestas:

12

La etiqueta ALT es una etiqueta de accesibilidad que se introdujo para las personas que tienen dificultades visuales, incluso a través de Google, para usarla para determinar de qué se trata una imagen. Nunca debería considerar poner etiquetas alt para fines de SEO antes de sus visitantes.

Muchas personas e incluso Matt Cutts, que trabaja en Google, hablan de etiquetas alternativas como si estuvieran específicamente diseñadas para motores de búsqueda para informar a los bots de qué se trata la imagen, esto simplemente no es cierto.

Sin embargo, puede informar a Google de qué se trata la imagen mientras cuida a su audiencia, nunca solo ingrese palabras clave en la etiqueta alt, amortigua la experiencia del usuario y es muy poco natural.

Un buen ejemplo de esto es que, a menudo, alguien dice que quiere clasificar para la palabra clave 'Bournemouth' que tendrá Bournemouth en el título, en la H1, meta descripción y luego crea una imagen con la etiqueta alt 'Bournemouth', mientras que esto funcionará para El SEO amortigua la experiencia del usuario y pierde todo el punto de la etiqueta alt. La etiqueta alt es para personas que tienen problemas de visión o deshabilitan todas las imágenes. Entonces, la etiqueta ALT fue diseñada para informar al usuario de qué se trata la imagen.

Un buen ejemplo de esto se puede ver a continuación

<img src="i.jpg" alt="Bournemouth" />

vs

<img src="i.jpg" alt="Birdseye view of Bournemouth" />

El ejemplo anterior aún incluye su palabra clave mientras explica a Google y a su audiencia de qué se trata la imagen.

Entonces, ¿qué pasa con la etiqueta del título?

La etiqueta del título se diseñó para brindar más información cuando se pasa el mouse sobre un elemento, no es muy útil para IMG porque si tiene la intención de usar la misma información para ALT y TITLE, puede usar un script para leer la etiqueta alt y hacer que su propios desplazamientos usando JS. Solo recomendaría la etiqueta del título si va a proporcionar más información que la de la etiqueta ALT, como una descripción más larga; no es necesario proporcionar la información exacta en ambos elementos, ya que eso solo hincha el código.

La etiqueta del título es realmente útil para los enlaces, ya que al pasar el cursor sobre ella puede brindarle a su audiencia más información sobre el enlace en el que están a punto de hacer clic. Valdrá la pena leer más sobre la etiqueta del título aquí .

Simon Hayter
fuente
1
"si no se encuentra ningún título, leerá la etiqueta alt al pasar el mouse por encima" - El altatributo no se usa como "pasar el mouse por encima" en ningún navegador moderno. Solo IE7 y versiones anteriores mostraban el texto alternativo como información emergente emergente (cuando titlese omite el atributo).
MrWhite
Lo siento, eso no es lo que quise decir. Me refiero a que el texto no tiene la etiqueta alt. Para pasar el mouse, solo usa un jquery para leer la etiqueta alt y hacer el título. No es necesario escribir tanto alt como title, si son iguales, solo inflan su código.
Simon Hayter
1
@ w3d respuesta editada;)
Simon Hayter
1
Pero en cuanto al título en términos de título de SEO ofrece poco a las clasificaciones, Matt Cutts habla un poco sobre el título en este video googlewebmastercentral.blogspot.co.uk/2007/12/… pero más se centra en la etiqueta ALT. Personalmente, creo que puede contribuir a la experiencia del usuario, pero no de una manera enorme como cabría esperar, millones de sitios principales se clasifican sin ningún título en las imágenes.
Simon Hayter
Solo pensé que valía la pena aclarar ... los atributos alty en titlesí mismos nunca deberían ser "iguales", ya que esto confundiría a las personas que usan el alttexto para la accesibilidad. La solución jQuery crea un evento de mouseover, no simplemente copia el alttexto en el titleatributo.
MrWhite
3

altda una descripción alternativa de la imagen. Este atributo es obligatorio para img.

titleda información adicional sobre la imagen. Este atributo es opcional para img.

Nunca confíe en la información en title. Si la información es realmente importante, inclúyala en su propio elemento.

Estos dos atributos no deberían tener el mismo contenido.

unor
fuente
0

Su confusión es normal y sí, cada etiqueta (Título, ALT) representa su propio potencial, lo que ayuda al motor de búsqueda y al usuario a saber de qué se trata la imagen.

En algún momento, el texto ALT no es suficiente para describir la imagen, por lo que es mejor asignar más información en la medida de lo posible, usar variaciones en las palabras de asignación que también son más efectivas desde el punto de vista de SEO.

Rajesh Magar
fuente