Por qué importa
Google ha documentado que usa el texto alternativo, junto con el contenido de la página y su propio análisis de la imagen, para entender de qué trata. Es lo que te da opciones de aparecer en Google Imágenes cuando alguien busca un producto concreto. Y si la imagen es un enlace, su alt hace el papel del texto del enlace.
También es accesibilidad básica: sin alt, un lector de pantalla suele leer el nombre del archivo (“IMG_4032.jpg”) o simplemente “imagen”, y quien no ve la foto no sabe qué estás vendiendo. En una tienda, eso es un cliente que se va.
Cómo lo comprueba Posiciona
Revisamos todas las etiquetas <img> de la página. Cuenta como problema la imagen sin atributo alt y la que lo tiene vacío (alt="") pero parece de contenido: está dentro de un enlace a un producto, es lo único que contiene un enlace o declara un ancho (width) de 300 píxeles o más. El alt="" en imágenes decorativas se da por bueno. La puntuación es el porcentaje de imágenes sin problema; sin imágenes, 100.
En la nota de SEO esta comprobación cuenta como “importante” (peso 3 de 5).
Cómo solucionarlo
Localiza las imágenes afectadas: el informe te da ejemplos, y en el navegador puedes hacer clic derecho sobre una imagen y elegir “Inspeccionar” para ver su etiqueta.
Describe lo que se ve y lo que importa en ese contexto, en una frase corta: “Zapatilla de trail azul con suela de tacos, vista lateral” en lugar de “zapatilla”. No empieces por “Imagen de”: el lector de pantalla ya avisa de que es una imagen.
Si encaja de forma natural, incluye la palabra con la que te buscan, pero sin repetir la misma en todas las fotos ni meter listas de palabras clave: Google lo considera relleno y puede tratarlo como spam.
En imágenes que son enlaces o botones (el logo que lleva al inicio, el icono del carrito), describe el destino o la acción: “Inicio de Tienda Ejemplo”, “Ver carrito”.
Deja
alt=""(vacío, pero presente) solo en imágenes decorativas: fondos, separadores o iconos que acompañan a un texto que ya dice lo mismo.
<img src="zapatilla-trail-azul.jpg" alt="Zapatilla de trail azul con suela de tacos, vista lateral" width="800" height="600">
<img src="separador.svg" alt="">En WordPress
- En el editor de bloques, selecciona la imagen y rellena “Texto alternativo” en la barra lateral de ajustes del bloque.
- En Medios → Biblioteca también puedes rellenarlo, pero se aplica a las imágenes que insertes a partir de ese momento: las que ya están en entradas y páginas conservan el alt con el que se insertaron. Las fotos de producto de WooCommerce, en cambio, suelen tomarlo de la biblioteca.
En Shopify
- En Shopify, abre el producto desde Productos, pulsa sobre la imagen en el bloque de multimedia y usa la opción para añadir o editar el texto alternativo.
- Las imágenes de banners y secciones del tema suelen tomar el texto alternativo del archivo, que puedes editar en Contenido → Archivos.
Preguntas frecuentes
¿Qué diferencia hay entre el alt y el title de una imagen?
El alt sustituye a la imagen cuando no se ve: lo leen los lectores de pantalla y Google lo usa para entenderla. El atributo title solo muestra una etiqueta flotante al pasar el ratón, no se ve en móvil y los lectores de pantalla no lo leen de forma fiable. Si tienes que elegir, rellena siempre el alt; el title es opcional.
¿Qué longitud debe tener el texto alternativo?
No hay un límite oficial. Piensa en una frase: lo que dirías por teléfono para describir la foto. Si la imagen necesita una explicación larga, como un gráfico, una infografía o un cartel con texto, resume lo esencial en el alt y pon el detalle como texto en la página, junto a la imagen.
¿Tengo que poner alt a los iconos y al logo?
Depende de su función. El logo que enlaza al inicio necesita un alt con el nombre de la marca, porque es el único texto de ese enlace. Un icono decorativo junto a un texto que ya dice lo mismo, como una lupa al lado de “Buscar”, debe llevar alt="" para que el lector de pantalla no lo repita.
Guías relacionadas
- Formato y dimensiones de imágenesQue las imágenes declaren su ancho y alto y se sirvan en formatos modernos como WebP o AVIF.
- Etiquetas accesibles (ARIA)Que botones, enlaces y campos de formulario tengan un nombre que puedan leer los lectores de pantalla.
- Datos estructuradosQue la página tenga datos Schema.org válidos: Product en las fichas y Organization o WebSite en general.