Texto alt de imágenes en WordPress: ejemplos buenos y malos
El texto alt de imágenes en WordPress es una descripción corta que lee en voz alta un lector de pantalla y que ayuda a Google a entender la imagen. Se escribe en la Biblioteca de medios o en el bloque Imagen. Un buen alt describe lo que se ve en pocas palabras. Cambiarlo en la Biblioteca no corrige las imágenes ya insertadas.
Autor: El equipo de TellMyShop. Una guía para dueños de sitios WordPress y tiendas WooCommerce: la causa, el arreglo manual y el mismo trabajo en una conversación con el chat.
Última actualización: · 6 min de lectura
Quién lee el alt y por qué
El alt tiene dos lectores. El primero es una persona que no puede ver la imagen: alguien ciego, con baja visión o con una conexión lenta en la que la imagen no cargó. El lector de pantalla lee el alt en voz alta en lugar de la imagen. Sin alt, a menudo oyen el nombre del archivo, como «IMG_4471», o nada.
El segundo lector es Google. Según las directrices de Google sobre imágenes, el alt es una de las fuentes importantes de información sobre lo que muestra una imagen, y ayuda a Google Imágenes a mostrarla para las búsquedas adecuadas. Google también señala que un alt lleno de palabras clave perjudica.
Estas dos necesidades no chocan. Un alt escrito para una persona suele ser bueno también para Google.
Alt buenos y malos, con ejemplos
Los ejemplos vienen de una tienda de iluminación de jardín. Cada alt malo tiene un error típico que se encuentra en los sitios WordPress.
| Imagen | Alt malo | Por qué es malo | Alt bueno |
|---|---|---|---|
| Farol en una terraza por la tarde | IMG_4471 | el nombre del archivo no dice nada | Farol de hierro forjado encendido en una terraza de madera al atardecer |
| La misma imagen | farolillos jardín farolillos baratos tienda farolillos | relleno de palabras clave | igual que arriba |
| La dueña en una mesa con muestras | la imagen muestra a una mujer | «la imagen muestra» sobra, sin contenido | La dueña de la tienda ordena muestras de pantallas en una mesa del taller |
| Producto sobre fondo blanco | producto | demasiado genérico | Aplique LED de jardín color grafito, vista lateral |
| Línea ornamental entre secciones | línea | gráfico decorativo | alt vacío |
| Gráfico en una guía | gráfico | oculta la información | Gráfico: consumo anual de lámparas LED y halógenas, el LED consume menos |
Más a menudo que alt malos, lo que encontrarás es que no hay alt. Si el sitio tiene cientos de imágenes sin descripción, empieza por las que se ven en páginas con tráfico: productos, la página de servicios, las entradas más populares.
Cuándo el alt debe quedar vacío
El consejo «toda imagen debe tener alt» es una simplificación. Los gráficos que solo decoran, como adornos, fondos o un icono junto a un texto que dice lo mismo, deben tener un alt vacío. El lector de pantalla los salta entonces y no cansa al oyente con la descripción de una línea decorativa. Es lo que recomienda el tutorial del W3C sobre imágenes.
Un alt vacío es distinto de un alt que falta. Uno vacío dice «esto es solo decoración». Uno que falta obliga al lector a adivinar, a menudo leyendo el nombre del archivo.
Dónde escribir el texto alt en WordPress
Tienes tres sitios. Cada uno funciona de forma un poco distinta.
- Biblioteca de medios. Medios → Biblioteca, haz clic en la imagen y escribe la descripción en el campo Texto alternativo. WordPress guarda el cambio solo. Este alt se propone cada vez que insertas la imagen y suele usarse para la imagen destacada (más sobre esto en la guía sobre la imagen destacada en WordPress).
- El bloque Imagen del editor. Selecciona la imagen en la entrada y escribe el Texto alternativo en el panel de ajustes del bloque. Este cambio solo se aplica a esa entrada. La descripción del bloque está en la documentación del bloque Imagen.
- Imágenes de producto de WooCommerce. La imagen principal y la galería del producto vienen de la Biblioteca de medios, así que el alt se escribe ahí. En un tema típico, la página del producto lo toma directamente de la Biblioteca.
El campo Título de la Biblioteca es algo distinto del alt. El título sirve sobre todo para encontrar archivos y no sustituye a la descripción para un lector de pantalla.
La trampa: las entradas antiguas no ven el alt nuevo
Aquí mucha gente pierde tiempo. Completas los alt en la Biblioteca de medios, revisas una entrada antigua y el código de la página sigue con el alt vacío.
La razón es técnica pero sencilla. Cuando insertas una imagen en una entrada con el editor de bloques, WordPress copia el alt en el contenido de la entrada. A partir de ahí la entrada tiene su propia copia. Un cambio posterior en la Biblioteca corrige las imágenes destacadas y las inserciones nuevas, pero no cambia la copia de las entradas antiguas.
Con unas pocas entradas, abre cada una, selecciona la imagen y corrige el alt en el bloque. Con muchas entradas, empieza por las que reciben más tráfico.
Cómo completa el chat los alt por lotes
La tarea «Texto alternativo de las imágenes» del plugin TellMyShop para WordPress y WooCommerce empieza por la Biblioteca de medios. Tu chat (Claude o ChatGPT) encuentra ahí las imágenes sin alt y propone una descripción para cada una a partir del nombre del archivo, el título y la página a la que está adjunta la imagen. En las imágenes de producto tiene en cuenta los datos del producto. Cuando no sabe qué hay en la imagen, no adivina y añade el archivo a una lista para ti.
Tú: Completa los alt de imagen que faltan.
Tu chat: La Biblioteca de medios tiene 37 imágenes sin alt. Las tres primeras, para que apruebes el estilo:
Hay dos archivos que no puedo describir por su nombre y su contexto, así que te los dejo a ti. ¿Te sirve el estilo?
Tú: Sí, haz el resto.
Tu chat: Vista previa del lote: 35 alt. Lo guardaré después de tu «sí», y podrás deshacer todo el lote desde el historial de cambios.
Estado de la tarjeta: esperando tu «sí»farol-hierro-forjado-02.jpg
versión anterior: alt: ninguno
versión nueva: alt: Farol de hierro forjado con la puerta abierta, vista frontal
farol-cristal-terraza.jpg
versión anterior: alt: ninguno
versión nueva: alt: Farol de cristal con una vela sobre una mesa de terraza
DSC_0193.jpg, adjunta al producto Farol colgante pequeño
versión anterior: alt: ninguno
versión nueva: alt: Farol colgante pequeño en negro con cadena
En la versión gratuita TellMyShop Free el chat muestra la lista de imágenes sin alt y las descripciones propuestas. Guardar requiere TellMyShop Pro. Entonces el chat cambia los alt en la Biblioteca de medios, hasta 50 archivos por lote, después de que apruebes la vista previa. Las copias de los alt en las entradas antiguas son un cambio aparte en el contenido de la entrada: el chat puede corregirlas en las entradas que elijas, también con una vista previa «antes → después» y la opción de deshacer.
Los detalles y la lista de alta están en la página TellMyShop para WordPress y WooCommerce, y los precios en precios. Los alt son un punto de una revisión más amplia del sitio, que describimos en la guía de auditoría SEO de WordPress.
Una chuleta corta
Describe lo que ves, como describirías la imagen a alguien por teléfono. Sáltate «la imagen muestra». Usa una palabra clave solo cuando encaja con la imagen. Da a los gráficos decorativos un alt vacío. Después de cambiar la Biblioteca, revisa también las entradas antiguas. Hay más guías en el blog.
Preguntas y respuestas
¿Dónde escribo el texto alt en WordPress?
En dos sitios. En la Biblioteca de medios, al hacer clic en la imagen, en el campo Texto alternativo, y entonces el alt se propone cada vez que insertas la imagen. O en el bloque Imagen del editor, en el panel de ajustes del bloque, y entonces cambias el alt solo en esa entrada.
He cambiado el alt en la Biblioteca de medios, pero la entrada sigue con el antiguo. ¿Por qué?
Porque el editor de bloques guarda el alt en el contenido de la entrada en el momento de insertar la imagen. Un cambio en la Biblioteca sirve para las imágenes destacadas y las inserciones nuevas, pero no corrige las imágenes insertadas antes. En las entradas antiguas tienes que cambiar el alt en el bloque Imagen o en el contenido de la entrada.
¿Toda imagen necesita texto alt?
Toda imagen que transmite algo, sí. Los gráficos puramente decorativos, como líneas ornamentales o fondos, deben tener un alt vacío para que el lector de pantalla los salte. Un alt vacío debe ser una decisión consciente para un gráfico concreto.
¿Debo poner una palabra clave en el alt?
Solo cuando describe de forma natural lo que hay en la imagen. Google advierte contra llenar los alt de palabras clave. El alt «farol de jardín de hierro forjado en una terraza» es mejor que «farolillos jardín farolillos baratos tienda».
¿El chat reconoce por sí mismo lo que hay en la imagen?
El chat escribe el alt a partir del nombre del archivo, el título y la página a la que está adjunta la imagen. Cuando esos datos no le dicen qué hay en la imagen, no adivina. Esos archivos van a una lista para que los describas tú.
WordPress es una marca de la WordPress Foundation. WooCommerce es una marca de Automattic Inc. Claude es una marca de Anthropic PBC. ChatGPT y OpenAI son marcas de OpenAI. TellMyShop no está afiliado a estas empresas.