15%

Ahorra 15%<\/span> en todos los servicios de hosting

Pon a prueba tus habilidades y obtén Descuento<\/span> en cualquier plan de hosting

Usa el código:

Skills
Comenzar
23.10.2024

Texto Alt de Imagen vs. Título en WordPress: La Guía Técnica Completa

Comprender la diferencia entre el texto alternativo y los atributos de título de las imágenes en WordPress es esencial tanto para la optimización en motores de búsqueda como para el cumplimiento de la accesibilidad web. El texto alternativo es un atributo HTML que describe el contenido de la imagen a los lectores de pantalla y a los rastreadores de motores de búsqueda, influyendo directamente en la indexación y las clasificaciones. El atributo de título, por el contrario, es una etiqueta opcional que algunos navegadores muestran como información emergente al pasar el cursor y no tiene ningún peso SEO medible.

Estos dos campos se confunden, se usan incorrectamente o se dejan en blanco con frecuencia — una combinación que erosiona silenciosamente la visibilidad orgánica, incumple los estándares de accesibilidad WCAG y deja los datos estructurados incompletos. Esta guía cubre la distinción técnica, la implementación correcta, los casos límite del mundo real y el contexto del lado del servidor que afecta la rapidez con que sus imágenes optimizadas llegan realmente a los usuarios.

¿Qué es el texto alternativo de imagen en WordPress?

El texto alternativo (el atributo alt en HTML) fue introducido en la especificación HTML 2.0 y ha sido un atributo obligatorio en los elementos <img> desde entonces. Su función principal es proporcionar un sustituto textual de una imagen cuando el contenido visual no puede percibirse — ya sea porque la imagen no se cargó, el usuario utiliza un lector de pantalla, o el cliente es un rastreador de motores de búsqueda sin capacidad de representación visual.

El HTML renderizado tiene este aspecto:

<img src="golden-retriever-ball.jpg" alt="Golden retriever playing with a red ball on a grass lawn" title="Playful Golden Retriever">

Por qué el texto alternativo es importante para el SEO

El proceso de indexación de imágenes de Google depende en gran medida del atributo alt. Según la propia documentación de Google Search Central, el texto alternativo es una de las señales en página más importantes para el posicionamiento en la búsqueda de imágenes. Cuando Googlebot rastrea una página, no puede “ver” las imágenes como lo hace un humano — lee el atributo alt para entender qué representa la imagen y luego lo contrasta con el texto circundante, el título de la página y los datos estructurados.

Las implicaciones prácticas para el SEO incluyen:

  • Visibilidad en Google Imágenes: Las páginas con texto alternativo descriptivo y relevante para las palabras clave se clasifican consistentemente más alto en los resultados de búsqueda de imágenes, lo que puede generar un tráfico de referencia significativo.
  • Impacto indirecto en Core Web Vitals: Las imágenes correctamente atribuidas con atributos width y height explícitos evitan el desplazamiento de diseño (CLS), una señal de clasificación directa.
  • Elegibilidad para resultados enriquecidos: Las imágenes de productos con texto alternativo preciso tienen más probabilidades de aparecer en los paneles de Google Shopping y en las funciones de búsqueda visual.
  • Inclusión en AI Overview: Los resúmenes de IA generativa de Google extraen cada vez más imágenes junto con fragmentos de texto. El texto alternativo descriptivo aumenta la probabilidad de que su imagen sea seleccionada.

Por qué el texto alternativo es importante para la accesibilidad

Las Pautas de Accesibilidad para el Contenido Web (WCAG) 2.1 exigen texto alternativo significativo para todas las imágenes informativas bajo el Criterio de Conformidad 1.1.1 (Contenido no textual). El incumplimiento no es solo un problema de UX — en muchas jurisdicciones, incluida la UE bajo la Ley Europea de Accesibilidad y los EE. UU. bajo el Título III de la ADA, los sitios web inaccesibles enfrentan responsabilidad legal.

Los lectores de pantalla como JAWS, NVDA y VoiceOver leen el atributo alt en voz alta a los usuarios con discapacidad visual. Si el atributo falta, el lector de pantalla normalmente lee el nombre del archivo en su lugar — produciendo una salida como “imagen guion bajo 2024 guion bajo final guion copia punto jpeg”, que carece de significado y resulta desorientadora.

Mejores prácticas técnicas para el texto alternativo

  • Sea específico y contextual: Describa lo que está visualmente presente y por qué es relevante para el contenido circundante. “Perro” es inadecuado. “Golden retriever atrapando un frisbee durante el entrenamiento de agilidad” es correcto.
  • Integre palabras clave de forma natural: Incluya su frase de palabra clave objetivo si describe genuinamente la imagen. No fuerce palabras clave que tergiversen el contenido de la imagen — los algoritmos de calidad de imágenes de Google detectan esto.
  • Respete la directriz de 125 caracteres: La mayoría de los lectores de pantalla truncan el texto alternativo en aproximadamente 125 caracteres. Mantenga las descripciones dentro de este límite.
  • Las imágenes decorativas deben tener texto alternativo vacío: Si una imagen es puramente decorativa (una textura de fondo, un gráfico divisor), establezca alt="" explícitamente. Esto indica a los lectores de pantalla que la omitan. Nunca omita el atributo por completo en imágenes decorativas, ya que el lector de pantalla recurrirá al nombre del archivo.
  • No comience con “Imagen de” o “Foto de”: Los lectores de pantalla ya anuncian el tipo de elemento. Comenzar con estas frases desperdicia el presupuesto de caracteres.

Cómo añadir texto alternativo en WordPress

WordPress expone el campo de texto alternativo en dos ubicaciones:

A través de la Biblioteca de medios:

  1. Navegue a Medios > Biblioteca en el panel de administración de WordPress.
  2. Haga clic en cualquier imagen para abrir su panel de detalles del archivo adjunto.
  3. Localice el campo Texto alternativo en la barra lateral derecha.
  4. Introduzca su texto descriptivo y haga clic en Actualizar.

A través del Editor de bloques (Gutenberg):

  1. Inserte o seleccione un bloque de imagen.
  2. En el panel Bloque de la derecha, busque el campo Texto alternativo (texto alt) bajo Configuración de imagen.
  3. Introduzca el texto alternativo directamente. Esto anula cualquier valor establecido en la Biblioteca de medios para esa instancia de bloque específica.

A través del Editor clásico:

  1. Haga clic en una imagen dentro del editor.
  2. Seleccione Editar (icono de lápiz).
  3. Introduzca el texto alternativo en el campo Texto alternativo.

¿Qué es el atributo de título de imagen en WordPress?

El atributo de título en un elemento de imagen proporciona una etiqueta complementaria. En los navegadores compatibles — principalmente las versiones de escritorio de Chrome, Firefox y Edge — al pasar el cursor sobre la imagen se muestra el valor del título como información emergente. Los navegadores móviles lo ignoran casi universalmente, ya que no existe interacción de desplazamiento en las pantallas táctiles.

<img src="server-rack.jpg" alt="1U rack-mounted server with NVMe drives installed" title="NVMe Server Rack">

Lo que el atributo de título no hace

Aquí es donde la mayoría de los usuarios de WordPress desarrollan conceptos erróneos:

  • No influye en las clasificaciones de Google. Google ha confirmado explícitamente que el atributo title en las imágenes no se utiliza como señal de clasificación. Rellenarlo con palabras clave no proporciona ningún beneficio SEO.
  • La mayoría de los lectores de pantalla no lo leen de forma predeterminada. NVDA y JAWS pueden configurarse para anunciar atributos de título, pero este no es el comportamiento predeterminado. WCAG no acepta el atributo de título como sustituto del texto alternativo.
  • No se muestra en dispositivos móviles. Dado que los dispositivos móviles representan más del 60% del tráfico web mundial, una información emergente que solo aparece al pasar el cursor en el escritorio llega a una minoría de su audiencia.

Usos legítimos del atributo de título

A pesar de su alcance limitado, el atributo de título tiene casos de uso válidos:

  • Organización de la Biblioteca de medios: WordPress rellena automáticamente el campo de título a partir del nombre del archivo al subir. Mantener los títulos limpios y descriptivos facilita significativamente la gestión masiva de medios, especialmente en sitios con miles de recursos.
  • Contexto complementario para usuarios de escritorio: Para diagramas o gráficos complejos, una información emergente de título puede proporcionar una breve etiqueta sin saturar el diseño visible de la página.
  • Metadatos de flujo de trabajo del CMS: Algunos flujos de trabajo editoriales utilizan el campo de título como identificador de referencia interno, separado del texto alternativo orientado al público.

Cómo añadir o editar el título en WordPress

A través de la Biblioteca de medios:

  1. Vaya a Medios > Biblioteca.
  2. Haga clic en la imagen para abrir sus detalles del archivo adjunto.
  3. El campo Título aparece en la parte superior del panel derecho (se rellena automáticamente con el nombre del archivo).
  4. Edite según sea necesario y haga clic en Actualizar.

A través del Editor de bloques:

El editor de bloques Gutenberg no expone el atributo de título en la interfaz de usuario estándar. Para establecerlo, debe editar el HTML subyacente directamente usando la opción Editar como HTML en la barra de herramientas del bloque, o usar un plugin como Image Attributes Pro o filtros de bloque personalizados.

Texto alternativo vs. Título: Comparación lado a lado

AtributoElemento HTMLImpacto SEOImpacto en accesibilidadVisible para los usuariosCompatibilidad móvilRequerido por WCAG
alt<img alt="...">Alto (indexación de imágenes, clasificaciones)Crítico (lectores de pantalla)Solo en caso de fallo de carga de imagenSí (1.1.1)
title<img title="...">NingunoMínimo (no predeterminado)Información emergente al pasar el cursor (solo escritorio)NoNo

Errores comunes y casos límite

Error 1: Usar el mismo texto para ambos campos

Duplicar el texto alternativo en el campo de título es redundante y puede hacer que los lectores de pantalla configurados para leer ambos atributos anuncien la misma descripción dos veces, degradando la experiencia del usuario para los visitantes con discapacidad visual.

Error 2: Dejar el texto alternativo en blanco en imágenes funcionales

Los botones representados como imágenes (por ejemplo, un botón “Enviar” que usa un gráfico personalizado), las imágenes enlazadas y las infografías son imágenes funcionales o informativas — deben tener texto alternativo descriptivo. Dejarlas en blanco es un incumplimiento de WCAG y una brecha de rastreabilidad.

Error 3: Saturar el texto alternativo con palabras clave

Un atributo alt como alt="VPS hosting cheap VPS server VPS Moldova best VPS" es una señal de spam clara. Las directrices de evaluadores de calidad de imágenes de Google señalan explícitamente este patrón. Use una frase de palabra clave natural que describa con precisión la imagen.

Error 4: Describir en exceso imágenes simples

Un icono o logotipo simple no necesita una descripción de 120 caracteres. Para el logotipo de una empresa, alt="AlexHost logo" es suficiente y correcto.

Error 5: Ignorar el texto alternativo en imágenes con carga diferida

WordPress 5.5 introdujo la carga diferida nativa mediante el atributo loading="lazy". Algunos temas o plugins mal configurados eliminan el atributo alt durante el procesamiento de carga diferida. Audite siempre su HTML renderizado — no solo el editor de WordPress — usando las DevTools del navegador o un rastreador como Screaming Frog para confirmar que el texto alternativo está presente en el DOM final.

El contexto del lado del servidor: por qué su entorno de alojamiento afecta al SEO de imágenes

El texto alternativo y los títulos correctamente escritos son necesarios pero no suficientes para el rendimiento SEO de las imágenes. La velocidad a la que sus imágenes se entregan a los navegadores afecta directamente las puntuaciones de Core Web Vitals, que son un factor de clasificación confirmado de Google.

Varios factores del lado del servidor determinan el rendimiento de entrega de imágenes:

  • I/O de almacenamiento: El almacenamiento basado en NVMe reduce el tiempo hasta el primer byte para los archivos de imagen en comparación con los SSD SATA o los HDD de disco giratorio. En un sitio WordPress con mucho tráfico, esta diferencia se acumula bajo solicitudes concurrentes.
  • Compatibilidad con HTTP/2 y HTTP/3: Los protocolos modernos permiten la entrega multiplexada de imágenes, eliminando la sobrecarga por conexión de HTTP/1.1.
  • Conversión WebP del lado del servidor: Herramientas como cwebp o módulos como mod_pagespeed pueden convertir imágenes JPEG y PNG al formato WebP a nivel de servidor, reduciendo el tamaño de los archivos entre un 25 y un 35% sin pérdida de calidad.
  • Cabeceras de caché: Las cabeceras Cache-Control y ETag adecuadas garantizan que los navegadores y los nodos perimetrales de CDN almacenen en caché las imágenes de forma agresiva, reduciendo la carga del servidor de origen.

Ejecutar WordPress en un entorno de Alojamiento VPS correctamente configurado le da control total sobre estos parámetros — algo que los entornos compartidos no pueden proporcionar. Puede instalar y configurar nginx con ngx_http_image_filter_module, establecer TTL de caché granulares y habilitar la compresión Brotli para activos SVG.

Para los equipos que gestionan múltiples propiedades de WordPress o bibliotecas de medios de alta resolución, los Servidores dedicados eliminan la contención de recursos que causa tiempos de entrega de imágenes inconsistentes durante los picos de tráfico.

Si gestiona un sitio más pequeño y desea un entorno administrado con un panel de control familiar, el VPS con cPanel proporciona una interfaz sencilla para configurar los límites de memoria PHP, habilitar OPcache y gestionar instalaciones de WordPress con muchas imágenes sin acceso directo a la línea de comandos.

Implementación de texto alternativo a escala: automatización y auditoría

Para sitios con grandes bibliotecas de medios, auditar y actualizar manualmente el texto alternativo es poco práctico. Los siguientes enfoques abordan esto de forma sistemática:

Auditoría masiva con WP-CLI

Use WP-CLI para identificar todas las imágenes sin texto alternativo:

wp post list --post_type=attachment --post_mime_type=image --fields=ID,post_title --format=csv | while IFS=',' read id title; do
  alt=$(wp post meta get "$id" _wp_attachment_image_alt 2>/dev/null)
  if [ -z "$alt" ]; then
    echo "Missing alt text: ID=$id Title=$title"
  fi
done

Establecer texto alternativo mediante WP-CLI

wp post meta update 1234 _wp_attachment_image_alt "Golden retriever playing with a red ball on a grass lawn"

Reemplace 1234 con el ID de archivo adjunto real.

Screaming Frog SEO Spider

Configure Screaming Frog para rastrear su sitio y filtre la pestaña Imágenes por Texto alternativo faltante. Exporte el informe como CSV y úselo como lista de verificación de corrección. Este enfoque detecta el texto alternativo que falta en el HTML renderizado incluso si parece estar establecido en el editor de WordPress — una discrepancia que puede ocurrir con los constructores de páginas o los plugins de carga diferida.

Informe de indexación de imágenes de Google Search Console

El informe Search Console > Resultados de búsqueda filtrado por Tipo de búsqueda: Imagen revela qué imágenes están generando impresiones y clics. Las imágenes con muchas impresiones pero bajas tasas de clics a menudo tienen texto alternativo genérico o faltante. Cruce estos datos con su exportación de Screaming Frog para obtener una lista de correcciones priorizada.

Datos estructurados e imágenes: la siguiente capa

Más allá del texto alternativo, implementar el marcado de datos estructurados (schema.org) para las imágenes proporciona contexto adicional a los motores de búsqueda y aumenta la elegibilidad para los resultados enriquecidos. Para WordPress, los plugins Yoast SEO o Rank Math añaden automáticamente el esquema ImageObject a las imágenes de las publicaciones cuando se configuran correctamente.

Un esquema ImageObject correctamente implementado incluye:

{
  "@type": "ImageObject",
  "url": "https://example.com/images/golden-retriever-ball.jpg",
  "width": 1200,
  "height": 800,
  "caption": "Golden retriever playing with a red ball on a grass lawn",
  "name": "Playful Golden Retriever"
}

Tenga en cuenta que la propiedad caption en el esquema corresponde funcionalmente al texto alternativo, mientras que name corresponde al atributo de título. Ambos deben ser coherentes con los atributos HTML del elemento de imagen.

Lista de verificación de decisiones: implementación de texto alternativo y título

Use esta lista de verificación antes de publicar cualquier página o entrada de WordPress que contenga imágenes:

  • Cada imagen informativa tiene un atributo alt descriptivo de menos de 125 caracteres
  • Las imágenes decorativas tienen alt="" (vacío, no faltante)
  • Ningún texto alternativo comienza con “Imagen de”, “Foto de” o frases redundantes similares
  • El texto alternativo contiene la frase de palabra clave objetivo solo donde describe con precisión la imagen
  • El texto alternativo y el texto del título no son idénticos
  • Las imágenes funcionales (imágenes enlazadas, botones de imagen) tienen texto alternativo que describe su acción, no su apariencia
  • Los nombres de archivo de imagen son descriptivos (por ejemplo, golden-retriever-ball.jpg, no IMG_4821.jpg) antes de subirlos
  • Las dimensiones de la imagen (width y height) están establecidas explícitamente en HTML para evitar CLS
  • El HTML renderizado se verifica mediante DevTools o un rastreador — no solo la vista del editor de WordPress
  • Los datos estructurados (ImageObject) están implementados para las imágenes de contenido principal en páginas de alto valor

Preguntas frecuentes

¿Afecta el atributo de título de imagen a las clasificaciones de búsqueda de imágenes de Google?

No. Google ha confirmado que el atributo title en los elementos <img> no se utiliza como señal de clasificación. Solo el atributo alt, el texto circundante, el título de la página y los datos estructurados influyen en las clasificaciones de búsqueda de imágenes.

¿Cuál debe ser el texto alternativo para una imagen puramente decorativa en WordPress?

Establezca alt="" — un atributo alt explícitamente vacío. Esto indica a los lectores de pantalla que omitan la imagen por completo. No omita el atributo, ya que el lector de pantalla leerá entonces el nombre del archivo, que carece de significado para el usuario.

¿Puedo usar el mismo texto alternativo en múltiples imágenes en mi sitio WordPress?

Solo si las imágenes son genuinamente idénticas. El texto alternativo duplicado en imágenes diferentes es tratado como una señal de calidad por el sistema de indexación de imágenes de Google y puede suprimir una o ambas imágenes en los resultados de búsqueda de imágenes. Cada imagen única debe tener un texto alternativo único y descriptivo.

¿Por qué mi texto alternativo se muestra correctamente en WordPress pero falta en el HTML renderizado?

Esto suele ser causado por un constructor de páginas (Elementor, Divi, WPBakery), un plugin de carga diferida o un plugin de caché que elimina o sobreescribe el atributo alt durante la generación de HTML. Audite la fuente renderizada en vivo usando las DevTools del navegador (Ctrl+U o clic derecho > Ver código fuente de la página) y compárela con el editor de WordPress. Si existen discrepancias, deshabilite los plugins uno por uno para aislar el conflicto.

¿Cómo se relaciona el rendimiento del servidor con el SEO de imágenes?

Las métricas de Core Web Vitals — en particular Largest Contentful Paint (LCP) y Cumulative Layout Shift (CLS) — son factores de clasificación directos de Google. LCP frecuentemente es activado por una imagen principal. Si su servidor entrega esa imagen lentamente debido a una alta latencia de I/O o memoria insuficiente para los trabajadores PHP-FPM, su puntuación LCP se degrada independientemente de lo bien escrito que esté su texto alternativo. Alojar WordPress en un entorno de Alojamiento VPS de alto rendimiento con almacenamiento NVMe y RAM adecuada apoya directamente unas sólidas puntuaciones de Core Web Vitals junto con una implementación correcta del texto alternativo.

15%

Ahorra 15%<\/span> en todos los servicios de hosting

Pon a prueba tus habilidades y obtén Descuento<\/span> en cualquier plan de hosting

Usa el código:

Skills
Comenzar