Título de la imagen vs. Texto alternativo: ¿Cuál es mejor?
Publicado: 2020-12-09Incluso con las nuevas tendencias de optimización de motores de búsqueda, la afirmación de que una imagen vale más que un millón de palabras sigue vigente. Una sola imagen de alta calidad puede potencialmente dar vida al contenido de un sitio web. Además, un título de imagen HTML bien escrito es una forma segura de mejorar la experiencia del usuario.
Pero si pensabas que las imágenes tienen que ver con hacer coincidir contenido e imágenes, te sorprenderás. Puede usar imágenes para atraer no solo a los visitantes de la web, sino también a los motores de búsqueda. Pero para liberar todo el poder que presenta una imagen, debe mirar un poco debajo del capó y comprender el código HTML que muestra las imágenes en su sitio web.
Una vez que revise los componentes de una etiqueta de imagen, puede pasar a optimizar aquellos que afectarán su clasificación en los motores de búsqueda. Por lo general, los elementos a los que apuntar son el título img src y el título HTML img alt. ¿Conoces el papel que juegan estos dos en tu sitio web? La respuesta será el tema de este artículo.
Comprender el título de la imagen y el texto alternativo de la imagen
La forma más fácil de saber la diferencia entre un título y un texto alternativo es mirar una etiqueta de imagen HTML. Supongamos que su sitio web es una tienda en línea que vende muebles, una etiqueta de muestra sobre la imagen de una mecedora puede verse así:
img src=”silla-mecedora.jpg” alt=”silla mecedora marrón a la venta” title=”silla mecedora marrón”
En diseño web, los elementos con un signo igual obtienen los atributos de nombre. Tenga en cuenta que el ejemplo anterior es solo una ilustración. En las aplicaciones del mundo real, los atributos son mucho más y pueden incluir una clase, una identificación, altura, ancho, etcétera.
Desde la etiqueta, identificar el texto alternativo y el título es sencillo. Puede notar que el atributo alt es más informativo en comparación con la etiqueta de imagen de título HTML. Un vistazo a los usos de ambos atributos revela por qué esto es así.
¿Para qué se utiliza el título de la imagen?
El título aparece cuando un usuario pasa el cursor sobre una imagen en su sitio web. Por lo tanto, aparece solo después de que se cargan las imágenes. Cuando un usuario ve el título, ya ha visto la imagen. Como tal, no tiene que ser muy descriptivo. Por ejemplo:
Sin embargo, los títulos son bastante importantes cuando se trata de mejorar la experiencia del usuario. Lo crea o no, los visitantes pueden tener dificultades para entender por qué algunas imágenes en su sitio web aparecen en ciertas partes de su sitio. Un título es útil para proporcionar una respuesta.
Algunos navegadores no muestran el título después de pasar el cursor sobre una imagen. Pero como nunca sabe qué usarán sus visitantes para navegar por su sitio web, es mejor que incluya un atributo de título en su etiqueta de imagen.
¿Para qué se utiliza el texto alternativo?
El texto alternativo sirve para más de un propósito. Puedes desglosarlo de la siguiente manera:
- El texto alternativo se muestra cada vez que una imagen no se carga. Casi todos los navegadores permiten descripciones alternativas para representar imágenes vacías. Puede deberse a un nombre de archivo de imagen incorrecto o a una URL rota. Las malas conexiones a Internet también pueden impedir que las imágenes se carguen correctamente. En tal caso, aparece el título alternativo de img y explica al visitante todo sobre la imagen.
- El texto alternativo también se muestra cuando los usuarios apagan las imágenes. Por mucho que las imágenes embellecen las páginas web, algunos usuarios prefieren las versiones de solo texto. Por lo tanto, pueden conocer las imágenes leyendo el texto alternativo.
- Los usuarios ciegos también se benefician de los títulos alternativos de img bien escritos. Los lectores de pantalla los usan para describir una imagen a los visitantes que no pueden verla. En general, los textos alternativos ayudan a aumentar la accesibilidad de su sitio. La importancia de la máxima accesibilidad es tan grande que el W3C aboga por los textos alternativos. Una línea de sus pautas dice: "Al usar el elemento img, especifique una alternativa de texto corto con el atributo alt".
- Finalmente, los motores de búsqueda usan textos alternativos para comprender mejor de qué se trata una imagen. Por lo tanto, los textos alternativos se pueden rastrear, al igual que otros contenidos en su sitio web. La siguiente imagen muestra un ejemplo de texto alternativo:
(Crédito de la imagen: MDN-Mozilla)
¿Qué es más importante: el título de la imagen o el texto alternativo?
Es seguro etiquetar el atributo alt como más importante después de mirar las listas de usos de títulos y textos alternativos. Sin embargo, sería un error pensar que los títulos no sirven para nada. En verdad, cualquiera de los elementos puede ser significativo según sus objetivos.
Si su principal preocupación es mejorar la experiencia del usuario, entonces los títulos serían su principal área de enfoque. Como se mencionó, puede dar detalles adicionales sobre una imagen usando títulos. Una vez que el usuario se desplaza sobre él, debería aparecer la descripción.
usted estará interesado
Cómo escalar con éxito su negocio
Velocidad de carga del sitio web: herramientas para la optimización
Comprobación del estado del sitio web: herramientas y consejos
¿Qué significa UX?
Pero, ¿por qué los motores de búsqueda no prestan mucha atención a los títulos de las imágenes?
Bueno, la respuesta tiene mucho que ver con el desarrollo de los motores de búsqueda. Los desarrolladores escribieron la mayor parte del código base de Google en 1999. También hubo adiciones significativas al año siguiente. Sin embargo, nunca consideraron elementos HTML impopulares y no descubiertos. Como los diseñadores web no usaban títulos con frecuencia, no había razón para proporcionarlos. Las actualizaciones del código central nunca hicieron que la etiqueta de imagen de título HTML fuera tan importante como otros atributos.
Si está pensando en SEO, entonces su enfoque debe ser el texto alternativo. Recuerde, Google trata la información dentro del atributo alt como contenido normal de una página web. Por lo tanto, lo indexa. Además, los motores de búsqueda pueden tener problemas para rastrear una imagen. Los textos alternativos presentan una excelente manera para que sepan de qué se trata una imagen.
Además, los textos alternativos llevan la accesibilidad del sitio web a un nivel completamente nuevo. A pesar de técnicas como la carga diferida, es casi imposible garantizar que todas las imágenes de su sitio se carguen el 100 % del tiempo. Un visitante puede apagar las imágenes o tener una conexión tan lenta que las imágenes nunca se cargan. Armado con un texto alternativo, puede estar seguro de que un usuario sabrá de qué se trata una imagen, ya sea que se cargue o no.
En conclusión, la importancia del texto alternativo supera con creces los atributos del título. Sus usos son relativamente numerosos y su impacto en la clasificación de un sitio web es notable. Si bien es importante optimizar tanto el título como el texto alternativo, es bueno dar más importancia a la información del atributo alternativo.
Optimización del texto alternativo para SEO
El SEO sigue siendo uno de los medios más seguros para generar tráfico de alta calidad de forma orgánica. Si bien existen numerosas formas de optimizar un sitio web, perfeccionar el texto alternativo es ideal para configurar las imágenes de su sitio para un mayor tráfico. Afortunadamente, el proceso es sencillo. Algunas de las prácticas a tener en cuenta son:
¡Prueba el SEO y el rendimiento de tu sitio en 60 segundos!
Un buen diseño del sitio web es fundamental para la participación de los visitantes y las conversiones, pero un sitio web lento o errores de rendimiento pueden hacer que incluso el sitio web mejor diseñado tenga un rendimiento inferior. Diib es una de las mejores herramientas de monitoreo de SEO y rendimiento de sitios web del mundo. Diib utiliza el poder de los grandes datos para ayudarlo a aumentar rápida y fácilmente su tráfico y clasificaciones. Como se ve en Emprendedor!
- Herramienta SEO automatizada fácil de usar
- Monitoreo de palabras clave y backlinks + ideas
- Garantiza la velocidad, la seguridad y el seguimiento de Core Vitals
- Sugiere inteligentemente ideas para mejorar el SEO
- Más de 250,000k miembros globales
- Comparación integrada y análisis de la competencia
Utilizado por más de 250 000 empresas y organizaciones:
sincroniza con 
escribir para humanos
Cuando se trata de escribir textos alternativos, la regla general es: “escribe como si estuvieras escribiendo para una persona ciega”. Teniendo en cuenta las ocasiones en que se muestra el texto alternativo, observar la regla en todo momento no hace daño. Como se mencionó, la información contenida en el título alternativo de img aparece cuando las imágenes no se pueden mostrar. Por lo tanto, desea que cuente todo sobre la imagen oculta.
Como tal, escriba una declaración que un humano pueda leer y comprender. Más importante aún, redacta una oración descriptiva. Una persona ciega puede estar navegando por su sitio, y lo que escribió sería lo único que pasaría. La siguiente imagen muestra un buen y un mal ejemplo de texto alternativo para la misma imagen:
(Crédito de la imagen: Centro de alojamiento web)
Escribir para motores de búsqueda
Un texto alternativo no solo proporciona una descripción de la imagen a los usuarios, sino también a los motores de búsqueda. Por lo tanto, incluya una palabra clave en él. Al igual que otros contenidos, asegúrese de tener en cuenta que contiene una palabra clave que rima con el flujo general de la página web en la que se encuentra la imagen.
De la misma manera, manténgase alejado de las malas prácticas de SEO, como el relleno de palabras clave. Los motores de búsqueda marcarán su contenido como spam, lo que mantiene su clasificación baja. Es mejor escribir mal un texto alternativo que llenarlo de palabras clave. Como verificación, asegúrese de no usar la palabra clave en más del 70% de sus imágenes.
Que sea breve
El texto alternativo describe una imagen, y puede ser tentador poner muchas palabras en las comillas del atributo alternativo. Pero abstente de hacerlo. Los motores de búsqueda no lo castigarán por ello, pero su interés está en las primeras dieciséis palabras de la descripción alternativa. Un texto alternativo de 125 caracteres debe describir adecuadamente una imagen sin comprometer la experiencia del usuario.
Sin embargo, si cree que una imagen requiere una descripción larga, es aconsejable utilizar el atributo "longdesc". HTML4 y sus sucesores permiten este atributo en la etiqueta de la imagen.
Ejemplos de texto alternativo
Cuando recién está comenzando con SEO, puede ser un poco difícil entender la diferencia entre un texto alternativo bueno y uno mal escrito. Por lo tanto, mirar ejemplos es útil. Con fines ilustrativos, imagine una imagen de un automóvil rojo a toda velocidad en su sitio web.
Su etiqueta de imagen puede ser algo como:
img src=”auto-a-velocidad.jpg” alt=”auto rojo” title=”auto”
En tal caso, el texto alternativo no es ideal. Proporciona muy poca información sobre la imagen. Una mejor versión puede aparecer como:
img src=”speeding-car.jpg” alt=”auto rojo acelerando en una autopista” title=”auto”
Si conoce el nombre de la carretera, no hay nada de malo en mencionarlo en el texto alternativo. A toda costa, evite comprometer sus palabras clave o el relleno de palabras clave. Por ejemplo, si la frase clave de su página web es "coche rojo", evite una descripción como:
img src=”speeding-car.jpg” alt=”Este es un coche rojo. El auto rojo se mueve muy rápido y es un auto rojo tan hermoso” title=”auto”
Si bien la descripción anterior se enfoca únicamente en la imagen, el relleno de palabras clave la contamina. Los motores de búsqueda fruncirán el ceño ante tales frases de spam. La segunda oración no proporciona información útil sobre la imagen para el usuario. En consecuencia, lo astuto que se puede hacer es excluirlo.
Cómo agregar un texto alternativo
El procedimiento para incluir un texto alternativo en la etiqueta de la imagen depende de lo que haya usado para crear un sitio web. Si escribió el código duro del sitio web, es mejor agregar el atributo alternativo manualmente. Por ejemplo:
Sin embargo, el desarrollo web de hoy en día apenas implica una codificación dura. Lo más probable es que haya utilizado un sistema de gestión de contenido (CMS) o un creador de sitios web. Asegúrese de averiguar qué proceso utiliza su herramienta de diseño web al agregar todos los textos. Por lo general, la metodología presenta dos o tres pasos.
En el CMS más popular del mundo, WordPress, agregar un título alternativo HTML img es pan comido. Una vez que inicie sesión en su cuenta, busque la imagen en cuestión y haga clic en el botón "Editar". Aparece un campo de entrada listo para recibir los datos del atributo alternativo.
Puede incluir textos alternativos en la biblioteca multimedia de WordPress. Después de seleccionar una imagen, ubique el campo de entrada de descripción alternativa que se muestra debajo de los detalles del archivo adjunto de la imagen. Por ejemplo:
(Crédito de la imagen: WPBeginner)
Cuándo dejar el atributo Alt vacío
Dada la importante función que desempeñan los atributos alt en el SEO, es posible que le resulte difícil creer que a veces es una buena idea dejarlos vacíos. Imagine una imagen colocada en un sitio web solo con fines posicionales. La imagen no rima con el contenido ni le aporta valor. Un diseñador web puede usar dichas imágenes con el único propósito de decorar una página.
Estas imágenes de solo diseño pueden tener un atributo alternativo nulo. Describirlos sería imprudente ya que no agregan valor al contenido disponible. Los lectores de pantalla se saltarán las imágenes, lo cual está en orden ya que no ayudan al usuario a comprender mejor la página.
También es una buena práctica excluir el texto alternativo de las imágenes que contienen palabras. Toda la información está en la imagen. Por lo tanto, una descripción de las palabras sería irrelevante.
Optimización del título
Como el título no afecta el ranking de búsqueda, no hay mucho que hacer al respecto. En la mayoría de los casos, es más breve y menos descriptivo que el texto alternativo. En lugar de dar más información sobre una imagen, un título le da un nombre.
Sin embargo, W3C aboga abiertamente por la inclusión de un título en una etiqueta de imagen. Su código HTML puede no ser válido para W3C si no pone el título a sus imágenes.
Al escribir el título, redacte un texto que no solo sea breve sino también atractivo. Dicho esto, los títulos de una sola palabra están prohibidos. Una frase que describe una imagen y consta de no más de diez palabras debería ser suficiente. Por ejemplo:
A diferencia de la etiqueta alt, que puede omitir en ocasiones, no hay eventos especiales que justifiquen la exclusión de los títulos de las imágenes. Las imágenes sin título solo sirven para comprometer la experiencia del usuario. En consecuencia, lo mejor para cualquier especialista en SEO es no generar una etiqueta de imagen de título HTML nula.
Esperamos que este artículo le haya resultado útil.
Si desea obtener más información interesante sobre el estado de su sitio, obtener recomendaciones y alertas personales, escanee su sitio web por Diib. Solo toma 60 segundos.
Otras consideraciones de imagen
Indudablemente, hay más en las imágenes que textos alternativos y títulos. Optimizar lo primero y perfeccionar lo segundo es solo una parte de la ecuación. Para aprovechar al máximo el impacto de las imágenes en el SEO, tenga en cuenta las siguientes mejores prácticas de imágenes web:
Mantenga los datos de texto vitales fuera de las imágenes
Es mejor escribir palabras que pintarlas en una imagen. Recuerde, los motores de búsqueda no rastrean una imagen en profundidad y no pueden acceder a las palabras de una imagen. A menos que HTML no pueda generar datos de texto de la manera que desea, por ejemplo, al escribir ecuaciones químicas complejas, evite las imágenes llenas de palabras.
Sin embargo, no hay ningún daño en el uso de imágenes para mostrar gráficos. HTML puede proporcionar la funcionalidad, pero las imágenes son una solución superior.
Cuidado con el contexto
La imagen que muestre debe combinarse con la información que proporciona una sección. Sería una mala idea incluir la imagen de un automóvil en una página que habla sobre ropa para exteriores. Al mismo tiempo, deja que tus imágenes sean lo más originales posible. Los motores de búsqueda valoran las imágenes originales como valoran el contenido auténtico.
Escriba un buen nombre de archivo de imagen
Los nombres de archivo aparecen en el atributo de título img src de la etiqueta de imagen. Los motores de búsqueda lo utilizan para saber más sobre las imágenes de su sitio.
De forma predeterminada, las imágenes tienen nombres de archivo alfanuméricos, como:
A00002.jpg
Asegúrese de cambiar los nombres para que reflejen el contenido de la imagen. Mientras lo hace, recuerde separar los nombres de archivo que excedan una palabra. Un nombre como red-car-on-highyway.jpg sería difícil de leer para los motores de búsqueda si faltan los guiones. Sin embargo, no cambie el formato de la imagen, es decir, letras después del punto. Los navegadores pueden confundirse si un formato es diferente al dado por el nombre del archivo.
Deje que sus imágenes creen la diferencia de SEO
Cuando se trata de SEO, no hay argumento de que el contenido sea el rey. Pero las imágenes son una parte tan importante del contenido de su sitio web como lo son las palabras. Al aprender el arte de perfeccionar el título HTML img y optimizar el título alternativo HTML img, puede comenzar a usar imágenes para aumentar la clasificación de su sitio.
Diib: ¡Optimice los títulos de sus imágenes hoy!
Si te quedas atascado con el uso de imágenes para SEO, recuerda consultar los cientos de herramientas dedicadas a optimizar imágenes. También puede contratar a un especialista en SEO para que lo ayude con su sitio web mientras se enfoca en su negocio. Pero antes de pensar tan lejos, tome la primera y comience a usar imágenes para aumentar el tráfico por su cuenta. Luego, asóciese con Diib Digital para aprovechar al máximo los títulos de sus imágenes. Nuestro panel de usuario le dará alertas y objetivos diseñados para optimizar, entre otras cosas, los títulos de sus imágenes.
Estas son algunas de las características que nos diferencian de la multitud:
- Objetivos personalizados diseñados para mejorar el rendimiento del sitio web
- Alertas que le informan sobre su autoridad de dominio, otros problemas técnicos de SEO
- Páginas rotas donde tienes backlinks (verificador 404)
- Herramientas de monitoreo y seguimiento de palabras clave, backlinks e indexación
- Experiencia de usuario y optimización de la velocidad móvil
- Optimización del título de la imagen
- Rendimiento posterior específico de la plataforma
Haga clic aquí para obtener su escaneo gratuito o simplemente llame al 800-303-3510 para hablar con uno de nuestros expertos en crecimiento.