Guía completa de SEO para imágenes - Mejorar el tráfico de búsqueda con texto Alt, nombres de archivo y optimización de tamaño

Por qué importa el SEO de imágenes - Captar tráfico de Google Images

Google Images representa más del 20% de todo el tráfico de búsqueda. Optimizar el SEO de imágenes permite captar visitantes de este enorme pool de tráfico, mientras se mejora el posicionamiento general de la página.

Valor del SEO de imágenes:

• Google Images es el segundo motor de búsqueda más grande
• Los resultados de imágenes aparecen en los resultados de búsqueda general (paquete de imágenes)
• Las imágenes optimizadas mejoran la velocidad de carga, mejorando indirectamente el posicionamiento
• El texto alt de las imágenes proporciona señales de palabras clave adicionales para la página

Cómo entiende Google las imágenes: Google comprende el contenido de las imágenes a través del texto alt, texto circundante, nombre de archivo, título de página y datos estructurados. Aunque Google tiene capacidad de reconocimiento de imágenes, las señales de texto siguen siendo el factor de posicionamiento más importante.

Mejores prácticas para el atributo Alt - Equilibrar SEO y accesibilidad

El atributo alt sirve simultáneamente al SEO y la accesibilidad, necesitando encontrar un equilibrio entre ambos.

Principios de escritura:

• Describir el contenido de la imagen, no su función o naturaleza decorativa
• Incluir palabras clave relevantes sin saturar
• Ser conciso y claro, generalmente 5-15 palabras
• No comenzar con "la imagen es" o "esta es una foto de"

Ejemplos:

• ❌ alt="imagen" - Sin información
• ❌ alt="WebP formato compresión imagen Web optimización rendimiento velocidad" - Saturación de palabras clave
• ✅ alt="Gráfico comparativo de tamaño de archivo entre formato WebP y JPEG" - Descriptivo con palabras clave

Casos especiales:

• Imágenes decorativas: alt="" (cadena vacía, no omitido)
• Imágenes enlazadas: alt describe el destino del enlace, no el contenido de la imagen
• Gráficos/infografías: alt resume los puntos de datos clave
• Imágenes de producto: incluir nombre del producto, modelo, color, etc.

Nombres de archivo y estructura de directorios - Optimización a nivel de URL

Los nombres de archivo de imagen y las rutas URL proporcionan señales de contenido adicionales a los motores de búsqueda.

Reglas de nomenclatura:

• Usar palabras descriptivas en inglés separadas por guiones: webp-compression-comparison.jpg
• Evitar: IMG_20240101.jpg, photo1.png, untitled.webp
• Incluir palabras clave manteniendo naturalidad
• Todo en minúsculas, sin espacios ni caracteres especiales

Estructura de directorios:

• Organizar por categoría: /images/tutorials/, /images/products/
• La ruta URL también es una señal de posicionamiento: /images/webp-format/comparison-chart.webp

Optimización de tamaño de archivo:

• Google prefiere páginas de carga rápida; imágenes grandes ralentizan la velocidad
• Usar formatos WebP/AVIF para reducir el tamaño de archivo
• Calidad de compresión 75-85 suele ser el punto óptimo para SEO

Datos estructurados y sitemaps de imágenes - Comunicar información clara a Google

Mediante datos estructurados y sitemaps de imágenes, proporcionar proactivamente a Google información detallada sobre las imágenes.

Imágenes en datos estructurados Article:

{"@type": "Article",
"image": ["https://example.com/photo-1x1.jpg",
"https://example.com/photo-4x3.jpg",
"https://example.com/photo-16x9.jpg"]}

Proporcionar imágenes en múltiples relaciones de aspecto; Google elegirá la más adecuada según la posición de visualización.

Sitemap de imágenes:

<url>
<loc>https://example.com/page</loc>
<image:image>
<image:loc>https://example.com/image.webp</image:loc>
<image:title>Título descriptivo</image:title>
</image:image>
</url>

Nota: Los sitemaps de imágenes ayudan a Google a descubrir imágenes cargadas mediante JavaScript o imágenes de fondo CSS que podrían no ser descubiertas por el rastreo normal.

Core Web Vitals y optimización de imágenes - Soluciones para LCP y CLS

Las imágenes son el factor que más afecta a los Core Web Vitals; optimizar imágenes mejora directamente las puntuaciones de LCP y CLS.

Optimización de LCP (Largest Contentful Paint):

• La imagen grande del primer pliegue suele ser el elemento LCP
• Usar <link rel="preload" as="image"> para precargar la imagen LCP
• No usar loading="lazy" en la imagen LCP
• Usar fetchpriority="high" para elevar la prioridad
• Asegurar que la URL de la imagen sea directamente visible en el HTML (no cargada dinámicamente por JavaScript)

Prevención de CLS (Cumulative Layout Shift):

• Siempre establecer atributos width y height
• Usar CSS aspect-ratio para reservar espacio
• Evitar que el contenedor cambie de tamaño después de cargar la imagen

Consideraciones INP: Gran cantidad de imágenes no optimizadas ocupan tiempo de decodificación del hilo principal, afectando la respuesta a interacciones. Usar decoding="async" para que la decodificación de imágenes no bloquee el hilo principal.

SEO の実践書は Amazon で探せます

Carga diferida y precarga - Optimizar la estrategia de carga

Una estrategia de carga adecuada asegura que las imágenes críticas se muestren rápidamente sin desperdiciar ancho de banda en imágenes no críticas.

Carga diferida nativa:

<img src="photo.webp" loading="lazy" alt="...">

• El navegador carga automáticamente cuando la imagen se acerca al viewport
• Sin necesidad de JavaScript, cero sobrecarga de rendimiento
• No usar en imágenes del primer pliegue (retrasaría el LCP)

Precarga de imágenes críticas:

<link rel="preload" as="image" href="hero.webp" type="image/webp">

• Indica al navegador que comience la descarga lo antes posible
• Usar solo para la imagen LCP o imágenes críticas del primer pliegue
• Precargar en exceso puede ser contraproducente (competencia por ancho de banda)

Precarga responsiva:

<link rel="preload" as="image" imagesrcset="small.webp 400w, large.webp 800w" imagesizes="100vw">

Combinado con srcset, precarga la imagen del tamaño correcto, evitando descargar versiones demasiado grandes.