Formato nuevo
Atributos alt y title de imagen: cómo escribirlos bien
`alt` describe la imagen si el archivo no carga o un lector de pantalla la lee. `title` en `img` es una pista al hover en algunos navegadores; apenas afecta al SEO y a la accesibilidad.
Abajo: cómo escribir alt, cuándo usar `alt=""` vacío, si hace falta title y qué evitar (keyword stuffing, «image1»). Los banners clicables están en el artículo de imagen como enlace.
Por qué existen los atributos de img
Los bots y la tecnología asistiva no ven píxeles como una persona. `alt` da un equivalente de texto. Para la gente, el alt aparece si la imagen se rompe; para SEO — una señal sobre la imagen y el tema de la página junto al contenido.
`title` históricamente se trató como otro campo de keywords. Hoy es una capa opcional floja; en dispositivos touch a menudo no hay hover.
Roles:
- `src` — el archivo
- `alt` — sentido / vacío para decoración
- `width`/`height` — espacio en el layout
- `title` — tip opcional, no un reemplazo del alt
Cómo escribir alt
Describe qué hay en la imagen y por qué está ahí — sin «la imagen muestra…». Para un producto — modelo/tipo; para un diagrama — qué explica; para una foto de oficina — corto y honesto.
Si la imagen lleva texto (screenshot, meme con una línea), el alt debe transmitir la esencia o la decisión del texto — o se pierde el sentido para el lector de pantalla.
Ejemplos:
- malo: `photo`, `img_4521`, `comprar nevera barata oferta`
- mejor: `Nevera americana blanca, estantes abiertos`
- para una línea decorativa: `alt=""`
- para un botón icono de búsqueda: `alt="Buscar"` o texto visible + alt vacío
Alt y SEO: con realismo
El alt ayuda a transmitir el tema de la imagen y a veces a aparecer en la búsqueda de imágenes. No es indexación más rápida de todo el sitio ni una garantía de primera página. Más importa: una página relevante, un archivo ligero, contexto claro alrededor.
No dupliques el Title de la página en cada alt. No escondas la oferta principal solo en una imagen sin texto HTML.
Más fuerte que el alt:
- contenido de calidad en la página
- compresión y formatos modernos
- pies de foto con sentido
- enlaces internos en el texto
Title en una imagen
Puedes dar una tip corta al hover en desktop. No tires ahí una hoja de keywords. Muchos usuarios nunca ven el title.
No confundas `title` en `img` con el `<title>` del documento ni con un pie `<figcaption>`.
Cuándo encaja el title:
- aclaración extra sin sentido crítico
- no como única fuente de descripción
- no en lugar del texto accesible del enlace
Enlaces de imagen y decoración
Si `img` va dentro de un enlace sin texto cerca, el alt debe describir el destino («Catálogo de bombas»), no solo «botón azul».
Las imágenes de fondo en CSS no tienen alt — no pongas ahí el único sentido importante.
Checklist:
- informativa — alt con sentido
- decor — alt vacío
- enlace de imagen — alt = acción/destino
- sin bulk de keywords
Práctica de despliegue
En el CMS haz el alt obligatorio para fotos de contenido. Crawl de alts vacíos y de plantilla. En auditorías de accesibilidad revisa iconos decorativos.
Ejemplo: `<img src="/images/pump.webp" alt="Bomba centrífuga de pozo, carcasa de acero inoxidable" width="800" height="600">`.
Playbook editorial:
- escribe el alt al subir, no «luego»
- prohíbe `image`, `photo`, `banner`
- revisa galerías comerciales
- no uses title como vertedero de keywords
FAQ
¿El alt es obligatorio?
Para imágenes informativas — sí, texto con sentido. Para las puramente decorativas — `alt=""` vacío para que el lector de pantalla no lea basura.
¿El title de img es obligatorio para SEO?
No. No cuentes con title como factor de ranking. Céntrate en alt, contexto de la página y calidad del archivo.
¿Cuántos caracteres debe tener el alt?
Los que hagan falta para describir el sentido con brevedad. Suele bastar una frase corta; un vertedero de keywords no.
¿Ayudan las keywords en el alt?
Moderadas y al punto — bien. Meter «comprar X barato foto» en cada alt duele a la accesibilidad.
¿El alt es lo mismo que un pie de foto?
No necesariamente. El pie es visible para todos; el alt es texto alternativo. Pueden compartir sentido, pero no hace falta que coincidan palabra por palabra.
¿Los iconos de botón necesitan alt?
Si hay texto visible del botón al lado — a menudo `alt=""`. Si el icono es el único sentido — el alt debe nombrar la acción.
¿Puedo usar el nombre de archivo en lugar del alt?
No. El nombre de archivo ayuda a la organización, pero no sustituye al alt.
¿Alt en español o en inglés?
En el idioma de la página y de la audiencia.
¿Alts de galería que dicen «comprar barato» — e iconos decorativos leídos como ruido?
Fijamos alt con sentido (o vacío para decor) — accesibilidad primero, no vertederos de keywords en title.
Hablar del proyecto
