Alt text (texto alternativo), también conocido como «atributos alt», «descripciones alt», o técnicamente incorrectamente como «etiquetas alt», se utilizan dentro de un código HTML para describir la apariencia y función de una imagen en una página.
el texto alternativo utiliza:
1. Añadir texto alternativo a las fotos es, ante todo, un principio de accesibilidad web. A los usuarios con discapacidad visual que utilicen lectores de pantalla se les leerá un atributo alt para comprender mejor una imagen en página.
2., El texto alternativo se mostrará en lugar de una imagen si no se puede cargar un archivo de imagen.
3. El texto alternativo proporciona un mejor contexto/descripción de la imagen a 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 de la izquierda.
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, hacer que alguien te lea el texto alternativo e imaginar una versión razonablemente precisa de la imagen, estás en el camino correcto.
veamos un par de ejemplos de texto alternativo para la imagen de un delicioso buscando pila de panqueques de arándanos:
Este texto alt es sólo «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.,
bueno:
<img src="https://moz.com/learn/seo/pancakes.png" alt="Stack of blueberry pancakes with powdered sugar">
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 demostró el primer ejemplo de texto alternativo); ¡es una pila de panqueques de arándanos con un polvo de azúcar en polvo!
<img src="https://moz.com/learn/seo/pancakes.png" alt="pancake pancakes pan cake hotcakes hotcake breakfast food best breakfast top breakfasts breakfast recipes pancake recipe">
Ninguno de estos ejemplos se recomienda., 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?
accesibilidad
El texto alternativo es un principio del diseño web accesible. Su propósito original (y aún principal) es describir las imágenes a los visitantes que no pueden verlas. Esto incluye los lectores de pantalla y los navegadores que bloquean las imágenes, pero también incluye a los usuarios con discapacidad visual o que no pueden identificar visualmente una imagen., Incluir texto alternativo con las imágenes garantiza que todos los usuarios, independientemente de su capacidad visual, puedan apreciar el contenido de su sitio.
SEO de imágenes
usar texto alternativo en tus imágenes puede mejorar la experiencia del usuario, pero también puede ayudarte a obtener beneficios SEO explícitos e implícitos. Junto con la implementación del título de la imagen y las mejores prácticas de nomenclatura de archivos, incluido el texto alternativo, también puede contribuir al SEO de imágenes.,
mientras que 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 todavía no pueden «ver» las imágenes en una página web como nosotros, por lo que no es prudente dejar la interpretación únicamente en sus manos. Si no lo entienden, o se equivocan, es posible que puedas clasificarte por palabras clave no deseadas o perderte el ranking 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 gafas, sentado en un escritorio.,
Jim Halpert de la Oficina (versión de EE.UU.)
Si usted está tratando de clasificar para «la imitación de Jim Halpert de Dwight Schrute,» sin embargo, tendrá que prestar el motor de búsqueda Una Una mano amiga.
en ese sentido, el texto alternativo te ofrece otra oportunidad para incluir tu palabra clave objetivo., Con el uso de palabras clave en la página todavía tirando de peso como un factor de clasificación del motor de búsqueda, es en su mejor interés para crear texto alternativo que describe la imagen y, si es posible, incluye una palabra clave o frase de palabra clave que está apuntando.
¿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 las imágenes para los usuarios que no pueden verlas. si una imagen realmente no transmite ningún significado/valor y solo está ahí para propósitos 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 a ese número de caracteres o menos.
Use your keywords el texto alternativo le proporciona otra oportunidad para incluir su palabra clave objetivo en una página, y por lo tanto otra oportunidad para señalar a los motores de búsqueda que su página es altamente 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 te atraerá puntos por texto alternativo mal escrito, pero estarás en problemas si usas tu texto alternativo como una oportunidad para incluir tantas palabras clave relevantes como puedas imaginar. 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 utilice imágenes como texto., Esto es menos de una mejor práctica específica de texto alternativo y más de un principio general de Desarrollo Web amigable para SEO. Debido a que los motores de búsqueda no pueden leer texto dentro de sus imágenes, debe evitar usar imágenes en lugar de palabras. Si tiene que hacerlo, explique lo que dice su foto dentro de su texto alternativo.
no incluyen «imagen» imagen «de», etc. en tu texto alternativo. Ya se asume que el texto alternativo se refiere a una imagen, por lo que no es necesario especificarlo.
no olvides longdesc=»». Explore usando la etiqueta longdesc=» » para imágenes más complejas que requieren una descripción más larga.,
No descuides los botones de formulario. Si un formulario en tu sitio web utiliza una imagen como botón «enviar», dale un atributo alt. Los botones de imagen deben tener un atributo alt que describa la función del botón como «buscar», «Aplicar ahora»,» registrarse», etc.
¿cómo se ve un buen texto alternativo?,3″>
Okay alt text: <img src="https://moz.com/learn/seo/kwe.png" alt="kw explorer">
Better alt text: <img src="https://moz.com/learn/seo/kwe.png" alt="keyword research in Keyword Explorer">
mejor texto alternativo: <img src="https://moz.com/learn/seo/kwe.png" alt="Moz Keyword Explorer tool for SEO keyword research">
sigue aprendiendo
pautas de publicación de imágenes de Google
Factores de clasificación en la página
meta descripción
ponga sus habilidades a trabajar
la optimización de la página sección de Moz Pro destaca las páginas que no están a la altura del potencial de visibilidad de búsqueda completa (e incluye cosas como si a una página le falta texto alternativo)., Pruébalo >>
