Textos alternativos y nombres de archivo: guía práctica de SEO para imágenes

El texto alternativo, el nombre y el pie de foto tienen funciones distintas

Al preparar una imagen puedes encontrar varios campos que parecen pedir lo mismo. Cada uno tiene su función: el nombre identifica el archivo, el texto alternativo explica la imagen a quienes no la ven y el pie de foto aparece junto a ella para todos los lectores.

El texto alternativo se guarda en la página web, normalmente en el atributo alt. No está dentro del JPG o PNG. Un lector de pantalla, que lee el contenido en voz alta o lo presenta en braille, puede usarlo para explicar la imagen. Consulta la explicación de MDN sobre el atributo alt.

Una misma foto puede necesitar descripciones distintas según su ubicación. En una ficha de producto importan el asa y el acabado. En un artículo sobre fotografiar superficies reflectantes, quizá importe la luz reflejada en el esmalte. Describe lo útil para quien lee esa página concreta.

Decide qué necesita el lector de la imagen

Antes de escribir, pregúntate qué faltaría si la imagen no estuviera disponible. ¿Muestra un detalle, explica un paso, contiene palabras importantes o es la única etiqueta de un enlace? ¿O solo decora la página? El árbol de decisión del W3C para textos alternativos ayuda a elegir según la función de la imagen.

• Imagen que aporta información: describe el detalle que necesita el lector.
• Enlace o botón sin otra etiqueta: explica el destino o la acción.
• Decoración: deja el texto alternativo vacío si no aporta información necesaria ni actúa como enlace o control.
• Gráfico o diagrama detallado: resume lo que muestra y añade los detalles en un texto cercano o una tabla.

Piensa en una foto de una taza sobre un escritorio. En su página de venta, la forma y el aspecto son útiles. Detrás de un formulario de suscripción puede ser decoración. Lo importante es por qué la has colocado allí.

Escribe una descripción útil con lenguaje sencillo

Empieza por el sujeto y añade el detalle necesario. La vista lateral de una mochila puede mostrar una botella en el bolsillo de malla. En una ficha de producto eso ayuda más que enumerar todos los colores visibles.

Céntrate en lo relevante. No describas fondo, ángulo e iluminación salvo que ayuden a explicar la imagen. La guía del W3C sobre imágenes informativas explica cómo describir lo útil sin enumerar cada detalle.

Son descripciones de ejemplo, no de las imágenes de este artículo. En tus imágenes comprueba que cada detalle sea visible. No inventes material, modelo, ubicación o característica para que la descripción parezca más completa. Una foto de una silla marrón no demuestra que sea de cuero.

Lee la descripción junto a las frases anteriores y posteriores. ¿Añade algo útil o repite lo mismo sin necesidad? Adáptala a la página completa. Si el pie de foto ya explica todo lo que aporta la imagen, valora si necesita otra descripción. Conserva en el texto alternativo los detalles útiles que el pie no cubre.

Usa texto alternativo vacío para las decoraciones

Un adorno junto al título o una ilustración de fondo puede servir solo para embellecer la página. Si no aporta información necesaria, usa un atributo alt vacío: alt="". El lector de pantalla podrá omitirlo. No elimines el atributo: algunos lectores podrían leer el nombre del archivo. Consulta la guía del W3C sobre imágenes decorativas.

<img src="/images/adorno-amarillo.svg" alt="">

No escribas «imagen decorativa» como descripción. Añade un anuncio sin información útil. Vacío significa que no se anunciará una descripción.

Ten cuidado con imágenes que parecen decorativas pero contienen la única copia de información importante. Un banner con descuento y fecha de caducidad no es solo decoración si esos datos no están en la página. Escribe la oferta como texto normal o incluye el mensaje en el texto alternativo. Un icono de error también necesita explicación escrita si es el único aviso del problema.

Describe la función de enlaces y botones formados solo por imágenes

Si la imagen es el único contenido del enlace, su texto alternativo debe indicar el destino. En un botón de imagen, debe describir la acción. «Buscar» explica la función; «Lupa» solo describe la forma. La guía del W3C sobre imágenes funcionales explica estos casos.

Supongamos que el logotipo es el único contenido del enlace a la portada de una tienda. «Inicio de la tienda North Shore» le da una etiqueta útil. Describir la forma de ola del logo no dice a dónde va el enlace.

Si el mismo enlace ya contiene texto visible claro, la imagen puede tener texto alternativo vacío para evitar repeticiones. Depende de si añade información importante. Revisa la imagen y el texto del enlace juntos.

<a href="/">
  <img src="/images/north-shore-logo.svg"
       alt="Inicio de la tienda North Shore">
</a>

En una galería de productos, piensa qué hace cada miniatura. «Ver el bolsillo lateral de la mochila» puede ayudar más que repetir el nombre del producto en todas. La galería puede tener campos separados para etiquetas de botones y descripciones. Comprueba que cada control tenga una etiqueta clara en la versión publicada.

Trata los gráficos, capturas y textos dentro de imágenes

Un gráfico puede contener demasiada información para una descripción corta. Resume lo que muestra y pon resultados y valores en un texto cercano o una tabla que se pueda leer sin verlo. La guía del W3C sobre imágenes complejas describe estas opciones.

Imagina un gráfico que compara el peso de tres exportaciones de una foto. El texto alternativo puede identificar la comparación, mientras una tabla da cada formato y tamaño. El resultado debe entenderse sin interpretar alturas de barras. Usa medidas reales y aclara que se refieren a esa foto.

En una captura de un tutorial, describe el ajuste o paso que explica. Decir dónde está la calidad puede ayudar, pero escribe también la instrucción en la página. Si hacen falta varias etiquetas, inclúyelas en las instrucciones en lugar de esconder un procedimiento largo en el texto alternativo.

Si la imagen contiene un texto corto importante que no aparece en otro lugar, inclúyelo en su texto alternativo. Los pasajes largos deben estar directamente en la página. Nuestra guía de exportación de Canva explica por qué los títulos y botones importantes suelen funcionar mejor como contenido de página.

Elige nombres de archivo cortos y descriptivos

Google recomienda nombres cortos y descriptivos y dice que dan una pequeña pista sobre el tema. También utiliza el texto alternativo y la página que rodea a la imagen. Eso no justifica llenar el nombre de frases de búsqueda. Consulta la guía de Google sobre SEO de imágenes.

Nombra primero el sujeto, luego un detalle útil o la vista. En una galería, mochila-verde-bolsillo-lateral.webp es más reconocible que IMG_4821.webp. Añade un identificador de producto si ayuda a distinguir artículos similares. No pongas un año si no identifica realmente la imagen.

Para un sistema sencillo, usa minúsculas y palabras separadas por guiones. Ayuda a organizar archivos, pero no garantiza posiciones mejores. Mantén la extensión correcta: cambiar .png por .jpg en el nombre no convierte la imagen. Usa un convertidor para cambiar de formato.

Renombra antes de subir si es posible. Si cambiar el nombre de una imagen publicada modifica su dirección, las páginas que usan la antigua pueden perderla. Actualiza esas páginas y redirige la dirección anterior cuando haga falta. No renombres una biblioteca que funciona solo para añadir palabras clave.

Añade la descripción a la imagen de la página

Busca «texto alternativo» o «alt» en el editor. Guarda la descripción y revisa la página publicada. Cambiar título, pie de foto o nombre en la biblioteca no cambia necesariamente el texto alternativo de la página. Los editores y las plantillas tratan esos campos de formas distintas.

No necesitas escribir HTML si el editor ofrece el campo adecuado. Si editas el código directamente, una imagen informativa sencilla sería así:

<img src="/images/mochila-verde-bolsillo-lateral.webp"
     alt="Mochila verde con una botella de agua en el bolsillo lateral de malla">

Comprueba la página después de guardar. En un navegador de ordenador puedes inspeccionar la imagen y buscar su valor alt. Una herramienta de accesibilidad puede detectar atributos ausentes, pero no juzga de forma fiable la utilidad de la descripción. Léela tú mismo junto al contenido.

En sitios multilingües, escribe la descripción en el idioma de la página. Traduce el significado con naturalidad en lugar de copiar una lista inglesa de palabras clave. Un mismo archivo puede tener distinto texto alternativo en cada página, porque cada una guarda su descripción.

Ejemplo: describe una foto de producto de forma útil

Vas a añadir una foto del bolsillo lateral a la ficha de una mochila verde. La idea es mostrar cómo cabe una botella, no repetir todas las especificaciones.

1. Elige la vista útil. Usa una foto donde botella y bolsillo se vean claros. No describas detalles ocultos.
2. Prepara el archivo. Recorta espacio innecesario y elige dimensiones que mantengan visible el bolsillo. Consulta el proceso completo en nuestra guía de imágenes de producto.
3. Nombra el archivo final. Usa, por ejemplo, mochila-verde-bolsillo-lateral.jpg con una extensión que coincida con el formato guardado.
4. Añade texto alternativo específico para la página. Describe la botella en el bolsillo de malla. Precios, promesas de envío y búsquedas sin relación pertenecen al contenido de la página.
5. Revisa la galería publicada. Comprueba la descripción guardada y las etiquetas de los controles, tanto en móvil como en ordenador.

Este proceso separa preparar el archivo de escribir el texto alternativo. Ambas tareas importan, pero resuelven problemas distintos. Aplícalo a capturas y gráficos adaptando la descripción a lo que muestran.

Evita estos errores habituales

• Repetir frases de búsqueda. «Mochila mejor mochila mochila barata mochila de senderismo» no describe el bolsillo ni ayuda a entender la foto.
• Usar el nombre del archivo como descripción. Ayuda a encontrarlo, pero no siempre explica lo que el lector necesita saber.
• Poner el mismo texto en toda la galería. Describe las distintas vistas si aportan información diferente.
• Adivinar detalles. Verifica materiales, etiquetas y características en vez de inventarlos por su aspecto.
• Escribir descripciones largas para decoraciones. Los anuncios innecesarios pueden dificultar seguir el contenido útil.
• Revisar solo la biblioteca de medios. La plantilla quizá no use el campo editado. Comprueba la imagen publicada.

Preguntas frecuentes

¿Qué longitud debe tener el texto alternativo?

Lo más corto posible sin omitir información útil. Una foto sencilla puede necesitar una frase breve. No hay un límite único de caracteres que haga útil una descripción. Pon las explicaciones largas de gráficos en el texto de la página.

¿Todas las imágenes necesitan una descripción?

No. Describe las que aportan información útil y deja vacío el texto de las decoraciones. Si es la única etiqueta de un enlace o botón, explica su destino o acción.

¿Puedo usar IA para redactar borradores?

Sí como punto de partida, pero compáralos con la imagen real y la página. Quita suposiciones, detalles innecesarios y palabras clave repetidas. Una descripción generada puede sonar segura y mencionar algo que no se ve.

¿Comprimir elimina el texto alternativo?

Está en la página, no en el archivo. Comprimir un JPG o PNG local no modifica esa página. Pero sustituir la imagen en el editor puede cambiar o restablecer los campos. Revisa la descripción publicada después.

¿Los nombres mejores garantizan más tráfico de búsqueda?

No. Los nombres claros y las descripciones útiles apoyan una página bien preparada, pero no garantizan indexación, posiciones o clics. Google también trata el texto cercano, el acceso de sus rastreadores y la carga. Nuestra guía de rendimiento de imágenes explica esa parte del trabajo.

Resumir conChatGPT (se abre en una pestaña nueva)Grok (se abre en una pestaña nueva)Google (se abre en una pestaña nueva)Perplexity (se abre en una pestaña nueva)Claude (se abre en una pestaña nueva)