¿Qué es la optimización SEO de las imágenes?

La Optimización SEO de Imágenes ses el proceso de mejorar imágenes con el objetivo de aumentar el tráfico desde los motores de búsqueda.

Esta optimización se centra en perfeccionar imágenes con el propósito de incrementar la visibilidad y las visitas a nuestro site desde los motores de búsqueda.

Como ejemplo, al aplicar la optimización SEO a las imágenes, se puede lograr que un sitio web figure en posiciones más destacadas dentro de los resultados de Google Imágenes.

Por ejemplo, si buscamos «bolso de piel marrón» en Google imágenes, encontramos un montón de e-commerces que venden este producto y que Google nos muestra gracias a haber incluido un alt correcto.

¿Por qué son tan relevante las imágenes?

Casi un cuarto de las consultas que se realizan en Google, están hechas a través de Google imágenes.

Este dato resalta la relevancia de prestar especial atención al SEO de imágenes, ya que descuidar este aspecto implicaría perder una parte sustancial del tráfico.

El SEO de imágenes tiene la capacidad de atraer tráfico valioso a tu sitio de dos maneras distintas:

1. En primera instancia, optimizar las imágenes aumenta las probabilidades de mejorar la posición en Google Imágenes.
2. En segundo lugar, las imágenes desempeñan un papel crucial en el SEO on-page.

Google muestra cada vez más imágenes en los resultados de búsqueda, a menudo ubicándolas por encima de los resultados orgánicos convencionales.

Por ejemplo, al buscar la palabra clave «opel astra 2023», podemos notar que Google nos presenta diversas imágenes antes del primer enlace web.

Optimizar el SEO de las imágenes de tu web paso a paso

1. Optimiza el alt de las imágenes

El «alt text» o «texto alternativo» es una descripción concisa y relevante que se asigna a una imagen en una página web. Este atributo proporciona información sobre el contenido de la imagen y se incluye en el código HTML. El «alt text» es especialmente crucial para la accesibilidad web y el SEO.

El alt de las imágenes te permite decirle a Google, de manera detallada, qué se muestra en la imagen, favoreciendo la accesibilidad a tu web.

En este post de la Universidad de Dayton podrás ver el impacto que tiene para el usuario que una imagen contenga un texto alt.

Para agregar «alt text» a una imagen en HTML, se utiliza la siguiente estructura:

<img src="nombre-de-la-imagen.jpg" alt="Texto alternativo descriptivo">

A continuación te enseñamos cómo incluir el alt de una imagen en el caso de que no sepas editar el código HTML de tu web.

¿Cómo se optimiza el alt de una imagen?

Optimizar el texto alternativo de una imagen es crucial para mejorar la accesibilidad y la comprensión de los motores de búsqueda. A continuación se muestran algunas pautas clave:

1. Sé conciso: Describe la imagen de manera clara y concisa, como si estuvieras explicándola por teléfono en 125 caracteres o menos.
2. Incluye palabras clave relevantes: Añade una o dos palabras clave importantes relacionadas con la imagen, pero evita el exceso que pueda parecer spam.
3. Ejemplo de texto descriptivo: «Vista lateral zapatilla negra con detalles rojos Air Max 97»
4. Evita el spam: No sobrecargues el texto alternativo con palabras clave innecesarias. Ejemplo no recomendado: «Nike Air Max 97 estilosas para el día a día.»

Al seguir estas pautas, garantizarás que el texto alternativo sea informativo sin comprometer la experiencia del usuario ni dar señales de spam a los motores de búsqueda.

Ejemplo de texto alternativo

A continuación, te mostramos un ejemplo sobre un texto alternativo bien optimizado.

Para la siguiente foto:

Texto alt pobre: alt=»rosas»

Alt aceptable: alt=»jarrón con rosas»

Buen alt: alt=»jarrón gris con ramo de rosas «

Muy buen alt: alt=»jarrón ovalado gris con ramo de rosas blancas y rosas»

¿Cómo añadir texto alt en WordPress?

Método 1: Durante la subida de la imagen

1. Sube la imagen:
   • Ve a tu panel de WordPress.
   • Selecciona «Entradas» o «Páginas» según donde desees añadir la imagen.
   • Crea una nueva entrada o edita una existente.
   • Haz clic en «Añadir multimedia» o «Añadir elemento» según tu versión de WordPress.
2. Selecciona la imagen:
   • Haz clic en «Seleccionar archivos» y escoge la imagen que deseas subir.
3. Añade texto alternativo:
   • En el lado derecho, verás un cuadro llamado «Texto alternativo». Ingresa una descripción concisa y relevante para la imagen.
4. Inserta la imagen:
   • Una vez añadido el texto alternativo, haz clic en «Insertar en la entrada» o «Insertar en la página».

Método 2: Modificar una Imagen Existente

1. Accede a la Biblioteca de Medios:
   • Ve a «Medios» en el panel de WordPress.
   • Selecciona «Biblioteca».
2. Encuentra la imagen:
   • Localiza la imagen a la que deseas añadir texto alternativo.
3. Edita la imagen:
   • Haz clic en la imagen para abrir sus detalles.
4. Añade o edita el texto alternativo:
   • En el lado derecho, encontrarás el campo «Texto alternativo». Ingresa o edita la descripción.
5. Guarda los cambios:
   • Después de añadir el texto alternativo, asegúrate de hacer clic en «Actualizar» o «Guardar cambios» para aplicar los cambios.

2. Ponle nombres descriptivos a las imágenes

Cuando se trata de optimizar tus imágenes para la web, el primer paso crucial es asignarles nombres de archivo significativos. A menudo, al guardar imágenes, los dispositivos generan nombres genéricos como «IMG0004527.JPG», lo cual no proporciona información útil a los motores de búsqueda.

Por qué es importante:

Los nombres descriptivos, como «zapatillas-nike-air-jordan-altas-blancas.jpg», sirven como una comunicación instantánea sobre el contenido visual de la imagen, tanto para los usuarios como para los motores de búsqueda.

Cómo hacerlo:

1. Sé Descriptivo: Elige nombres que describan claramente el contenido de la imagen. Por ejemplo, si estás mostrando zapatillas, un nombre como «zapatillas-converse-rojas.jpg» es mucho más informativo.
2. Evita Genéricos: Elimina nombres de archivo genéricos como «IMG» o «DSC». Estos no contribuyen a la comprensión del contenido.
3. Uso de Guiones: Google recomienda el uso de guiones en lugar de guiones bajos para separar palabras en los nombres de archivo. Por ejemplo, «fondo-de-pantalla-playa.jpg» en lugar de «fondo_de_pantalla_playa.jpg».
4. Preparado para Traducciones: Si tu página web se traducirá o localizará, considera la posibilidad de ajustar los nombres de los archivos para mantener la coherencia y facilitar la adaptación a diferentes idiomas.

Al adoptar esta práctica, no solo mejoras la optimización de tus imágenes para la web, sino que también contribuyes a una experiencia de usuario más enriquecedora y favoreces una comprensión más profunda de tu contenido por parte de los motores de búsqueda.

3. Redimensiona el tamaño de las imágenes

Cuando se trata de la experiencia del usuario, la velocidad de carga de la página es crucial. Ajustar las dimensiones de tus imágenes al tamaño de la pantalla es esencial para lograrlo.

Por qué es importante:

• Carga Rápida: Imágenes del tamaño correcto se cargan más rápido, mejorando significativamente la velocidad de tu página.
• Experiencia del Usuario: Las imágenes bien dimensionadas se adaptan perfectamente a la pantalla, ofreciendo una experiencia visual sin inconvenientes.

Cómo hacerlo:

1. Conoce las Dimensiones: Descubre las dimensiones ideales para las imágenes en tu sitio web, considerando diferentes dispositivos y pantallas.
   Imagina que tomas una foto con tu teléfono, algo común ya que la mayoría de los teléfonos inteligentes capturan imágenes con dimensiones como 4032 píxeles por 3024 píxeles. Si el ancho máximo permitido para las imágenes en tu página web es de solo 600 píxeles, esa imagen es considerablemente más grande de lo necesario. Este exceso de tamaño puede provocar una desaceleración en la carga
   de tu página, afectando negativamente la experiencia de navegación.
2. Herramientas de Edición: Utiliza herramientas de edición de imágenes para ajustar las dimensiones antes de subirlas. Muchas plataformas, como WordPress, ofrecen opciones integradas para redimensionar imágenes.
3. Optimización: Al reducir el tamaño del archivo, también mejoras la velocidad de carga. Emplea formatos de imagen eficientes, como JPEG o WebP, para mantener una calidad aceptable con tamaños más pequeños.
4. Responsive Design: Asegúrate de que tu sitio tenga un diseño responsive, permitiendo que las imágenes se ajusten automáticamente al tamaño de la pantalla del usuario.

Consejos adicionales:

• Cambio de Tamaño Automático: Si utilizas WordPress, considera el uso de plugins como «Resize Image After Upload«. Simplemente habilita la función de cambio de tamaño, selecciona las dimensiones deseadas y estarás listo para comenzar.
• Escalado Receptivo para CSS: Asegúrate de que estás escalando las imágenes de manera receptiva para CSS, garantizando una experiencia visual óptima en todos los dispositivos.

3. Comprime las imágenes

Otra manera de reducir el peso de las imágenes es mediante la compresión.

Existen numerosas herramientas de compresión de imágenes en línea, como iloveimg, JPEG-Optimizer, además de plugins de WordPress como EWWW Image Optimizer. Todas estas tools te ayudarán a comprimir las imágenes sin perder apenas calidad de las mismas.

4. Elige formato de próxima generación en las imágenes

La velocidad de carga de las páginas web es crucial, y una elección fundamental para optimizarla radica en seleccionar el formato adecuado para las imágenes en línea. En la vanguardia de los formatos de nueva generación, destacan dos opciones prometedoras: WebP y AVIF. Estos formatos no solo priorizan la eficiencia en la compresión de imágenes, sino que también elevan la calidad visual, contribuyendo así a una experiencia de usuario más veloz y atractiva.

¿Qué hace WebP el formato de próxima generación?

1. Compresión Avanzada: WebP utiliza algoritmos inteligentes para reducir el tamaño de los archivos de imágenes sin comprometer la calidad visual. Esto significa páginas web más rápidas y una experiencia del usuario mejorada.
2. Transparencia y Versatilidad: A diferencia de sus predecesores, WebP ofrece soporte completo para transparencia, permitiéndote jugar con fondos sin sacrificar el rendimiento. Además, ¡puedes dar vida a tus contenidos con animaciones ligeras!
3. Compatibilidad Universal: Aunque nació en el laboratorio de Google, WebP ha sido adoptado rápidamente por muchos navegadores populares, asegurando que tu contenido visual se vea optimizado independientemente del navegador que utilicen los usuarios de tu web.

AVIF: la revolución de la compresión

1. Alta Eficiencia de Compresión: AVIF proporciona una compresión superior incluso a otros formatos de nueva generación como WebP.
2. Soporte para HDR: Admite imágenes de alto rango dinámico (HDR), lo que resulta en una calidad visual excepcional para contenido multimedia avanzado.
3. Adaptabilidad a la Red: Se adapta inteligentemente a la calidad de la red, lo que lo hace ideal para entornos con ancho de banda variable.

Algunos plugins de WordPress que te permitirán cambiar las imágenes de tu web a estos nuevos formatos son WebP Express o ShortPixel.

5. Implementa la carga diferida

La carga diferida en una página web es esencial para optimizar la experiencia del usuario y mejorar el rendimiento del sitio. Al retrasar la carga de elementos como imágenes hasta que el usuario los necesita, se logra una velocidad de carga inicial más rápida, generando una experiencia más positiva y favoreciendo la retención de usuarios. Además, la carga diferida contribuye al ahorro de ancho de banda, especialmente crucial en dispositivos móviles, donde se reduce el consumo de datos. Esta técnica no solo mejora la eficiencia energética, sino que también impacta positivamente en el SEO al cumplir con la importancia que los motores de búsqueda otorgan a la velocidad de carga como factor de clasificación. En resumen, la carga diferida equilibra la presentación atractiva de contenido visual con un rendimiento óptimo del sitio web, satisfaciendo las expectativas modernas de rapidez y accesibilidad.

Aquí te dejamos toda la información de Google para desarrolladores para implementar la carga diferida en imágenes.

El SEO de las imágenes, crucial para la visibilidad de tu web

La optimización SEO de imágenes es un componente esencial para aumentar la visibilidad y el tráfico de un sitio web a través de motores de búsqueda, centrándose en mejorar la calidad y la accesibilidad de las imágenes. Dada la creciente importancia de las búsquedas de imágenes, descuidar la optimización de imágenes puede resultar en la pérdida de una parte significativa del tráfico web. La implementación paso a paso de prácticas como la optimización del texto alternativo (alt), el uso de nombres descriptivos de archivos, el redimensionamiento y compresión adecuados, la elección de formatos de nueva generación como WebP y AVIF, y la carga diferida contribuyen en conjunto a una experiencia de usuario optimizada y a un rendimiento web eficiente. Al adoptar estas estrategias, no solo se mejora la posición en Google Imágenes, sino que también se garantiza una experiencia de usuario enriquecedora y se cumplen las expectativas modernas de rapidez y accesibilidad.