¿Qué son las etiquetas alt?

Una etiqueta alt, también conocida como “atributo alt” y “descripción alt”, es un atributo HTML aplicado a las etiquetas de imagen para proporcionar una alternativa de texto para los motores de búsqueda.

El texto alternativo (texto alternativo), también conocido como “atributos alternativos”, “descripciones alternativas” y coloquialmente pero técnicamente incorrectamente como “etiquetas alternativas”, se utilizan dentro de un código HTML para describir la apariencia y la función de una imagen en una página.

El texto alternativo usa:

1. Agregar texto alternativo a las fotos es ante todo un principio de accesibilidad web. A los usuarios con discapacidad visual que usen lectores de pantalla se les leerá un atributo alt para comprender mejor una imagen en la página.

2. Las etiquetas Alt se mostrarán en lugar de una imagen si no se puede cargar un archivo de imagen.

3. Las etiquetas Alt proporcionan un mejor contexto de imagen / descripciones para los rastreadores de motores de búsqueda, ayudándoles a indexar una imagen correctamente.

El texto resaltado muestra el texto alternativo (atributo alt) de la imagen a la izquierda.

Muestra de código

Cachorros bailando

Formato óptimo

El mejor formato para el texto alternativo es suficientemente descriptivo, pero no contiene ningún intento de spam en el relleno de palabras clave. Si puedes cerrar los ojos, que alguien te lea el texto alternativo e imagina una versión razonablemente precisa de la imagen, estás en el camino correcto.

Veamos algunos ejemplos de texto alternativo para esta imagen de una deliciosa pila de panqueques de arándanos:

Bien: pancakes

Este texto alternativo solo está “bien” porque no es muy descriptivo. Sí, esta es una imagen de una pila de panqueques. Pero, hay más que decir sobre esta imagen.

Mejor: Pila de panqueques de arándanos con azúcar en polvo

Este texto alternativo es una mejor alternativa porque es mucho más descriptivo de lo que hay en la imagen. Esto no es solo una pila de “panqueques” (como lo demostró el primer ejemplo de texto alternativo); ¡Es una pila de panqueques de arándanos con una capa de azúcar en polvo!

No recomendado:

o

panqueques panqueques pastel de pan hotcakes hotcake desayuno comida mejor desayuno top desayunos recetas de desayuno receta de panqueques

Ninguno de estos ejemplos es recomendable. La primera línea de código en realidad no contiene ningún texto alternativo (observe que las comillas están vacías), mientras que el segundo ejemplo muestra el relleno de palabras clave en el texto alternativo.

¿Por qué es importante el texto alternativo?

1. Accesibilidad

El texto alternativo es un principio de diseño web accesible. Su propósito original (y aún primario) es describir imágenes a los visitantes que no pueden verlas. Esto incluye lectores de pantalla y navegadores que bloquean imágenes, pero también incluye usuarios con discapacidad visual o que de otra manera no pueden identificar visualmente una imagen. La inclusión de texto alternativo con sus imágenes garantiza que todos los usuarios, independientemente de su capacidad visual, puedan apreciar el contenido de su sitio.

2. Imagen SEO

El uso de texto alternativo en sus imágenes puede mejorar la experiencia del usuario, pero también puede ayudarlo a obtener beneficios de SEO explícitos e implícitos. Junto con la implementación del título de imagen y las mejores prácticas para nombrar archivos, el texto alternativo también puede contribuir al SEO de la imagen.

Si bien la tecnología de reconocimiento de imágenes de motores de búsqueda ha mejorado enormemente a lo largo de los años, los rastreadores de búsqueda aún no pueden “ver” las imágenes en un sitio web como nosotros, por lo que no es aconsejable dejar la interpretación únicamente en sus manos. Si no entienden, o se equivocan, es posible que pueda clasificarse por palabras clave no deseadas o no clasificarse por completo.

Aquí hay un ejemplo: Google podría ver la siguiente imagen y ser capaz de descifrar que es un hombre con corbata y anteojos, sentado en un escritorio.

Sin embargo, si está tratando de clasificar para “la personificación de Jim Halpert de Dwight Schrute”, tendrá que ayudar al motor de búsqueda.

En ese sentido, el texto alternativo le ofrece otra oportunidad para incluir su palabra clave objetivo. Dado que el uso de palabras clave en la página sigue ganando peso como factor de clasificación del motor de búsqueda, le conviene crear texto alternativo que describa la imagen y, si es posible, incluya una palabra clave o frase de palabras clave a la que se dirige.

¿Cómo escribo un buen texto alternativo?

  • Describa la imagen lo más específicamente posible. El texto alternativo está, en primer lugar, diseñado para proporcionar explicaciones de texto de imágenes para usuarios que no pueden verlas. Si una imagen realmente no transmite ningún significado / valor y solo está ahí para fines de diseño, debe vivir dentro del CSS, no del HTML.
  • Manténgalo (relativamente) corto. Los lectores de pantalla más populares cortan el texto alternativo en alrededor de 125 caracteres, por lo que es aconsejable mantenerlo en ese recuento de caracteres o menos.
  • Usa tus palabras clave. El texto alternativo le brinda otra oportunidad para incluir su palabra clave objetivo en una página y, por lo tanto, otra oportunidad para indicar a los motores de búsqueda que su página es muy relevante para una consulta de búsqueda en particular. Si bien su primera prioridad debe ser describir y proporcionar contexto a la imagen, si tiene sentido hacerlo, incluya su palabra clave en el texto alternativo de al menos una imagen en la página.
  • Evite el relleno de palabras clave. Google no le asignará puntos por texto alternativo mal escrito, pero tendrá problemas si utiliza su texto alternativo como una oportunidad para incluir tantas palabras clave relevantes como pueda pensar en él. Concéntrese en escribir texto alternativo descriptivo que proporcione contexto a la imagen y, si es posible, incluya su palabra clave objetivo y déjelo así.
  • No uses imágenes como texto. Esto es menos una mejor práctica específica de texto alternativo y más un principio general de desarrollo web compatible con SEO. Debido a que los motores de búsqueda no pueden leer el texto dentro de sus imágenes, debe evitar usar imágenes en lugar de palabras. Si debe hacerlo, explique lo que dice su foto dentro de su texto alternativo.
  • No incluya “imagen de”, “imagen de”, etc. en su texto alternativo. Ya se supone que su texto alternativo se refiere a una imagen, por lo que no es necesario especificarlo.
  • No olvides longdesc = “”. Explore utilizando la etiqueta longdesc = “” para obtener imágenes más complejas que requieren una descripción más larga.
  • No descuides los botones de formulario. Si un formulario en su sitio web usa una imagen como botón de “enviar”, dele un atributo alt. Los botones de imagen deben tener un atributo alt que describa la función del botón, como “buscar”, “solicitar ahora”, “registrarse”, etc.

¿Cómo se ve un buen texto alternativo?

Echemos un vistazo a un par de ejemplos de texto alternativo en acción:

Ok alt text: Gallo

Mejor texto alternativo: Gallo cantando

Mejor texto alternativo: Canto del gallo de cresta roja

Espero que ayude !!!

Referencias – Qué es el texto alternativo (texto alternativo)

Las etiquetas Alt son dos atributos de imagen:

El atributo alt es una descripción de imagen que consta de varias palabras, leídas por el rastreador cuando se indexa la página. Si el usuario ha deshabilitado la función de soporte de gráficos en el navegador, se mostrará el contenido de la etiqueta en lugar de la imagen. El texto para este atributo no debe ser demasiado largo.

El atributo de título es una descripción para el visitante. Si el usuario coloca el cursor del mouse sobre la imagen durante un par de segundos, aparecerá el atributo title. Por lo general, para completar esta etiqueta se utiliza una descripción detallada de 1-2 propuestas.

¿Por qué necesitamos etiquetas alt?

Sin duda, la imagen gráfica se cargará correctamente incluso si las etiquetas de imagen no tienen img alt y título. Pero en este caso, las posibilidades de las imágenes de SEO permanecerán inactivas. Después de pasar un poco de tiempo creando una descripción alternativa, el webmaster podrá:

  • transmitir los datos necesarios para buscar robot;
  • atraer nuevos visitantes;
  • Aumentar la lealtad de los lectores.

Los motores de búsqueda examinan la unicidad de las imágenes gráficas, pero no pueden analizar su identidad temática. Por lo tanto, si un webmaster quiere que un robot clasifique una imagen, entonces debe componer un texto para la etiqueta alt.

Además de la búsqueda principal, Google y Yandex tienen un servicio de “imágenes”. Al crear descripciones optimizadas de etiquetas imag, el webmaster aumenta las posibilidades de que los usuarios de Internet puedan encontrar su sitio web utilizando este servicio. En consecuencia, se garantizará el crecimiento del tráfico.

¿Cómo usar etiquetas en la promoción SEO?

Para atraer clientes potenciales a las solicitudes promocionadas, el webmaster tiene que inventar descripciones usando frases clave para alt y title. El texto creado para la etiqueta alt puede verse así: “adjetivo + frase clave”. Para el atributo de título, se recomienda crear una oración compleja “adjetivo + clave + adición”.

Por ejemplo, tomemos una clave “inmobiliaria de Nueva York”. Para tal clave, puede dibujar una descripción alt “Nueva York de bienes raíces de lujo”, así como el título “bienes raíces de lujo en Manhattan, Nueva York”. Una descripción optimizada de la imagen debe contener palabras como “foto”, “imagen “.

La etiqueta Alt es un atributo de imagen, se usa para describir la imagen, también es muy útil para que los motores de búsqueda comprendan la descripción de la imagen …

También te ayuda en la optimización de SEO y aumenta un poco tu ranking, recuerda que un poco crea un gran impacto …

Además, cuando agregue una imagen al sitio web, también actualice su nombre de archivo, que también será negativo …

Una etiqueta alt es una alternativa de texto para una imagen u objeto en su página. Los lectores de pantalla y otros lectores del sitio leerán la etiqueta alt como alternativa a la imagen misma.

Las palabras clave utilizadas en el atributo ALT de una imagen se tratan como texto de anclaje. Las etiquetas ALT cortas y genuinamente descriptivas también mejoran la accesibilidad general y tienen un impacto extremadamente fuerte en las imágenes que aparecen en línea con las búsquedas de Google Image Search.

Reglas para etiquetas alt:

  • Nombra tus imágenes en inglés simple.
  • Si vende productos en su sitio que tienen números de serie o número de modelo, asígnelos como nombre en las etiquetas Alt
  • No use palabras clave como etiquetas alt (por ejemplo: alt = “Cómo crear etiquetas Alt automáticamente”).
  • No use etiquetas Alt para imágenes decorativas en el blog. Puede penalizar su blog por sobre-optimización.

Finalmente, siempre revise su sitio web de vez en cuando. Vea la fuente de sus páginas web y compruebe si sus etiquetas alternativas están completas o no.

Lee mas

Las etiquetas ALT son descripciones invisibles de imágenes que se leen en voz alta a usuarios ciegos en un lector de pantalla. Agregar texto ALT permite a los autores incluir imágenes, pero aún así proporcionar el contenido en un formato alternativo basado en texto.

imagen de personas hablando

Aquí se invoca alt si blabla.jpg no se procesa (por alguna razón). Por lo tanto, cuando mueva el mouse sobre la imagen rota, verá una especie de información sobre herramientas que dice “imagen de personas hablando”. También puede ser útil para lectores de pantalla.

Las etiquetas Alt son muy importantes cuando los usuarios deciden incluir imágenes dentro de las páginas web. Ayuda a reforzar algunas de las palabras clave más importantes dentro de los motores de búsqueda. También es muy útil para proporcionar a los usuarios con discapacidad visual una mayor accesibilidad a su sitio web. Tiene un papel pequeño pero bastante importante en la mejora de las clasificaciones de búsqueda dentro de los motores de búsqueda.

El atributo HTML especificado en la etiqueta IMG para proporcionar texto alternativo cuando no se puede mostrar una imagen en una página web.

Ejemplo : alt = “Esta es la descripción de la imagen ( ALT TAG )” src = “webopedia.jpg”>

Alt Tag describe tus imágenes a personas que no pueden ver bien y también al motor de búsqueda.