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

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"

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í .

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.

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.