SEO para imágenes ¡Todo lo que necesitas saber para optimizarlas al máximo!
Las imágenes se han convertido en una forma de búsqueda natural que está cobrando cada vez más importancia. De ahí, que el SEO para imágenes sea un factor de posicionamiento esencial que hay que trabajar.
Los fragmentos enriquecidos, así como otras funciones SERP, contienen imágenes y es habitual encontrarse un «paquete de imágenes» en algún lugar de los resultados.
La búsqueda visual realizada directamente en Google, utilizando Google Images o mediante Google Lens se está expandiendo, lo que hace que cualquier proyecto que se precie deba trabajar también el posicionamiento de su contenido visual.
En este artículo, haremos un recorrido por las mejores prácticas de SEO para imágenes, para que las saques el máximo partido a esta práctica.
¿Qué es el SEO para imágenes?
El SEO para imágenes es una técnica de posicionamiento orgánico que consiste en trabajar la optimización del contenido visual de un sitio web con el fin de aparecer en los resultados de búsqueda de imágenes de Google, al mismo tiempo que enriquece la experiencia de los usuarios.
El contenido visual no solo juega un papel vital en la forma en que los usuarios perciben una página web y se relacionan con ella, sino que también permite que los sitios web sean más visibles en la búsqueda.
Dicho esto, para generar más tráfico y atraer visitantes objetivo a tu sitio web, es absolutamente necesario optimizar las imágenes.
Si apareces en los resultados de búsqueda por imagen, obtendrás más clics de los usuarios tanto en las imágenes como en las páginas que las contienen.
Diferentes formatos de imagen y su impacto en el SEO
Lo primero que debes saber sobre el contenido visual es que puede pesar mucho y, por tanto, afectar a la velocidad de carga y el rendimiento de tu sitio web.
En promedio, las imágenes representan el 21% del peso de una página.
Dado que la carga de la página es uno de los pilares del SEO On Page que, a su vez, es la base de cualquier otra estrategia de SEO, no subestimes la optimización del tamaño de las imágenes.
Los formatos de imagen difieren en su calidad y limitaciones de tamaño, así que echemos un vistazo a los principales:
JPEG
Es el tipo de imagen más común que permite equilibrar la calidad y el tamaño.
Es un archivo de imagen comprimido, lo que conlleva cierta pérdida de calidad.
PNG
Proporciona una mejor calidad, pero te deja con un tamaño de archivo más grande.
También te permite conservar la transparencia del fondo.
Por lo general, se recomienda utilizar JPEG para fotografías y PNG para prácticamente todo lo demás, incluidas infografías y varios elementos de diseño.
BMP
Es otro formato que permite gráficos de alta calidad y que Google indexa.
No podrás comprimir archivos BMP a menos que los conviertas a JPEG o PNG.
WebP
Es un formato relativamente nuevo que es prometedor en términos de compresión.
Una reducción impresionante en el tamaño puede mejorar la velocidad de tu sitio web: cuando YouTube empezó a usar WebP para miniaturas en el 2014, la velocidad de carga de la página aumentó 10 veces.
El problema es que no todos los navegadores son compatibles con WebP en este momento.
Hay plugins como EWWW Image Optimizer que muestran imágenes WebP en navegadores que las admiten y muestran otros formatos en los que no.
SVG
Se utiliza para logos e iconos.
Estos son los elementos visuales más pequeños presentes en un sitio web. Es un formato simple y universal, pero tiene algunas desventajas específicas del diseño, como posibles problemas con las fuentes.
Se recomienda no utilizar Inline SVG (con el código directamente en el HTML) para una mejor indexación en Google Images.
GIF
Es un tipo de contenido atractivo que puede atraer visitantes y se puede compartir.
Google rastrea GIFs como cualquier otro tipo de imagen, pero el inconveniente es que los GIFs pueden ralentizar un sitio web.
Los 5 pilares del SEO para imágenes
Independientemente del formato que elijas, debes optimizar tus imágenes para que los motores de búsqueda puedan entenderlas correctamente.
Los factores que afectan al ranking de los sitios web son:
Calidad y resolución
Los motores de búsqueda prefieren imágenes de alta resolución y calidad.
Se recomienda que tengan al menos 1200 píxeles de ancho por 800 px de alto (pero el tamaño exacto dependerá de tus objetivos en particular).
Puedes ofrecer la oportunidad de abrir la imagen en una nueva pestaña o ventana incrustada en una resolución más alta: si has creado fotografías, ilustraciones o infografías originales, brinda a los lectores la oportunidad de verlas con mejor calidad.
Accesibilidad
Los usuarios con discapacidad visual no podrán saber qué hay en la imagen a menos que proporciones un alt text descriptivo.
Alt es lo que se mostrará si la imagen no se carga, así que hace que el texto sea informativo y relevante para el usuario.
Hacer que las imágenes sean accesibles también permite una mejor búsqueda por voz y ayuda a los usuarios que utilizan móviles y que desactivan la carga de imágenes.
También debes evitar incrustar texto dentro de las imágenes porque no todos los usuarios pueden acceder al texto de las imágenes y las páginas no lo traducirán.
Contexto
Lo más importante que debes preguntarte antes de colocar una imagen en un sitio web es si encaja en el contexto de la página.
No tiene sentido rellenar tu contenido con imágenes solo porque se ve mejor con algunas imágenes.
Por ejemplo, si estás escribiendo un artículo sobre cómo hacer café sin una cafetera y pones imágenes de stock de tazas de café o granos de café, no añaden mucho valor a tu contenido. Pero si ilustras cada método de preparación de café con una imagen respectiva (como una foto de una bolsa de preparación de café), será más útil para tus lectores.
Originalidad
Las fotografías, ilustraciones e infografías hechas a medida para tu sitio web son siempre mejores que las imágenes de stock.
Google desaconseja el contenido no original, como se menciona en las directrices específicas de contenido.
Optimización de la velocidad e imágenes responsive
Es fundamental tener un sitio web que cargue rápido, especialmente ahora que las imágenes representan la mayoría de los bytes de una página.
Hacer que las imágenes se ajusten a cualquier pantalla también es crucial, ya que nunca se sabe qué tipo de dispositivo usarán las personas para acceder a tu contenido.
15 Factores Claves del SEO para imágenes
Ahora, como sabemos qué aspectos de las imágenes son importantes para el posicionamiento en la búsqueda, pasemos a las reglas básicas que debes seguir para mantener tus imágenes aptas para el SEO.
Las directrices oficiales de Google establecen que valorar una buena experiencia de usuario es la práctica de imagen número uno.
Por lo tanto, si tus imágenes brindan información adicional a los usuarios y se colocan cerca de un texto relevante, entonces estás en el camino correcto.
Otras recomendaciones de Google incluyen:
1. Crear una estructura de URL de imágenes entendible
Al igual que con la estructura de la URL de un sitio web, las URL de la imagen deben reflejar la jerarquía de contenido e indicar la esencia de la imagen.
Ten en cuenta que si decides cambiar las URL de las imágenes en algún momento, los motores de búsqueda tardarán más en procesarlas y volver a indexarlas.
Las URL de las imágenes deben seguir la estructura de tu sitio web: por ejemplo, yendo de una categoría a una subcategoría, luego a una página, hasta una imagen en particular.
2. Filename o nombre del archivo
Los motores de búsqueda también escanean los nombres de los archivos de la imagen, así que no pierdas la oportunidad de nombrarlos correctamente.
El nombre del archivo debe ser descriptivo, pero no muy largo, puede contener la palabra clave objetivo y debe tener palabras separadas por un guion.
Por ejemplo, si la foto muestra un batido verde tropical, es mejor nombrar el archivo «batido-verde-tropical» en lugar de dejar el nombre predeterminado generado por una cámara como IMG_7489.
El nombre del archivo, alt y title, así como los datos de ancho y alto, se incluyen en el atributo src que marca la imagen. Por ejemplo:
<img src=»batido-verde-tropical.png»
alt=»batido verde con frutas tropicales»
title=»receta de un batido verde saludable»
width=»500″ height=»600″>
3. Dimensión de las imágenes
Redimensiona tus imágenes al tamaño de visualización de tu sitio web.
Por ejemplo: imagina tu web tiene un ancho máximo de 900px y la imagen que quieres subir tiene 1500px.
Aquí pasarían dos cosas.
- Por un lado, hay un esfuerzo extra para adaptar el tamaño de la imagen a tu sitio (mayor tiempo de carga).
- Por otro lado, como la imagen no se va a mostrar a esa resolución, te arriesgas a que pierda calidad y aparezca incluso pixelada.
4. Usar múltiples proporciones para diferentes dispositivos
Antiguamente, bastaba con proporcionar una única versión de una imagen.
Ahora, Google recomienda especificar varios aspectos para que las imágenes se muestren correctamente en diferentes pantallas.
El atributo srcset se utiliza para especificar diferentes resoluciones, así como imágenes en miniatura.
Google indexará la imagen principal colocada en el atributo src, mientras que srcset dará a los navegadores la oportunidad de cargar el tamaño correcto de la imagen.
<img src=»image.jpg»
srcset=»small.jpg 500w,
medium.jpg 640w,
big.jpg 1024w»
alt=»descripción de la imagen»>
Los CMS más populares han evolucionado para hacer que las imágenes se adapten automáticamente.
WordPress fue el pionero en 2015: a partir de la versión 4.4., los usuarios solo necesitan cargar sus imágenes, y WordPress completará los atributos srcset y size.
Lo único que debes comprobar es si las imágenes tienen un atributo de tamaño exacto; es posible verificarlo en el archivo functions.php.
Shopify introdujo imágenes que se adaptan automáticamente en el 2018; Magento ofrece varios temas con esta opción.
Otros CMS que no hacen que las imágenes se ajusten a diferentes tamaños proporcionan automáticamente una herramienta especializada que establece los parámetros precisos.
Por ejemplo, Drupal 8 y versiones posteriores tienen el módulo de Responsive Image.
5. Peso de las imágenes
Las imágenes pesadas ralentizan la velocidad de tu sitio web. Por suerte, existen múltiples herramientas y plugins de optimización de imágenes SEO que reducen el peso de forma considerable sin renunciar a la calidad.
Entre ellos, tinypng o el plugin Imagify.
6. Alt text
Agregar un texto alternativo descriptivo te ayuda a mejorar tu posicionamiento al asociar tus imágenes con búsquedas relevantes.
También es un requisito de accesibilidad, ya que el texto alternativo es la única opción para que las personas que no pueden ver la imagen comprendan de qué se trata.
Si una imagen no tiene el atributo alt, los motores de búsqueda pensarán que no es importante y, por lo tanto, no la posicionarán bien. Y si una imagen tiene el atributo alt, pero sin texto, se mostrará con el contexto del texto en la imagen.
Así es como se puede añadir el texto alternativo en WordPress:
7. Título SEO o title de la imagen
El texto del título se muestra cuando un usuario se desplaza sobre una imagen.
No es tan crucial para el SEO como el atributo alt, pero Google recomienda incluirlo de todos modos. A diferencia del texto alternativo, puedes escribir un título que describa el contexto en lugar de una imagen individual. Pero sé breve y no coloques demasiadas palabras clave.
Como puedes ver en el siguiente ejemplo, el texto del título a menudo actúa como información sobre herramientas y no es muy útil, además, no agrega mucha información sobre lo que en realidad representa la imagen:
8. Caption o leyenda
Es una frase adicional que puedes poner debajo de una imagen para destacar información relacionada con la imagen y su contexto.
A veces, es mejor no usar caption, si no aporta nada importante a la imagen.
A continuación, se muestra un ejemplo de una leyenda colocada de forma natural:
9. Descripción
Es un campo que, aunque no es imprescindible, te permite ampliar información (y esto siempre es bienvenido).
10. Seguir las directrices de SafeSearch
La búsqueda de imágenes en Google tiene un filtro SafeSearch para que los usuarios bloqueen contenido explícito.
Ten cuidado con las imágenes que pueden tener algunos indicadores de contenido violento o para adultos porque si los algoritmos de Google identifican tu imagen como objetable, tu página será ocultada de los resultados de búsqueda para los usuarios que activan el filtro SafeSearch.
La herramienta Vision AI puede brindarte información sobre cómo Google detecta las imágenes.
Si tienes imágenes solo para adultos, agrúpalas por separado en la estructura de la URL y añade metadatos como <meta name=”rating” content=”adult” /> a tus páginas.
11. Crear un mapa del sitio con las imágenes
Puedes incluir información sobre las imágenes en el sitemap de la web o crear un archivo .xml por separado.
Esto ayudará a Google a navegar por tu contenido.
Hay muchos servicios y plugins que generan mapas del sitio y pueden ayudarte a crear un mapa del sitio de las imágenes.
12. Lazy Loading o carga aplazada
La técnica llamada Lazy Loading o de carga diferida hace que las imágenes se carguen de forma asíncrona: significa que un usuario no verá todo el contenido de la página a menos que se desplace hacia abajo hasta los lugares donde se encuentra dicha imagen.
Probablemente lo hayas visto varias veces, cuando los marcadores de posición de imagen se reemplazan con imágenes sincronizadas con tu movimiento en la página.
Si no se utilizan marcadores de posición, la carga diferida puede cambiar el diseño de la página y desorientar a los usuarios.
Si optas por la carga diferida de imágenes, asegúrate de utilizar marcadores de posición que ocupen la misma parte de la pantalla que la imagen real.
Usar la carga diferida solo tiene sentido si tienes muchas imágenes en una página.
Para aplicar esta técnica, puedes usar plugins como Native Image Lazy Loading o agregarlo manualmente al código.
Manualmente con código
Debes agregar la clase lazyload a la etiqueta img, especificar el marcador de posición y la imagen original en los atributos src y data-src:
<img class=»lazyload»
src=»placeholder.jpg»
data-src=»image.jpg»
alt=»descripción de la imagen»>
JavaScript procesa estas instrucciones y es responsable de la funcionalidad de carga diferida. Dado que es posible que no sea compatible con todos los navegadores, debes agregar la etiqueta <noscript> para que las imágenes se muestren cuando JavaScript no esté disponible.
Decodificación
Otra forma de cargar contenido de forma asíncrona es la decodificación: una imagen se convierte, se almacena en la memoria caché del navegador y se muestra a un usuario a medida que se desplaza por la página.
Con el atributo de decodificación, puedes distribuir la carga y decirle al navegador qué cargar y cuándo. Hay tres opciones:
<img decoding=”async” src=”image.png”> sugiere al navegador que el proceso de decodificación se puede diferir
<img decoding=”sync” src=”image.png”> dice lo contrario
<img decoding=”auto” src=”image.png”> permite que el navegador decida por sí mismo cuándo decodificar una imagen
13. Schema markup o datos estructurados para diferentes tipos de contenido
Las imágenes pueden ayudar a identificar un tipo específico de contenido en una página, como un producto, una receta o un video.
Cada uno de ellos tiene una etiqueta que se muestra en los resultados de búsqueda en dispositivos móviles y de escritorio:
Estas etiquetas se crean gracias a los datos estructurados, también llamados schema markup.
Es importante optimizar tus imágenes ubicadas en páginas con contenido específico para que los buscadores puedan navegar fácilmente por las SERP para encontrar exactamente lo que están buscando.
También se puede especificar el logo de la marca que podría mostrarse en el Knowledge Graph de Google con la ayuda del schema markup.
Para agregar los datos estructurados, puedes usar plugins como Schema App Structure Data, consultar Google Structured Data Markup Helper o insertar manualmente el código a tu sitio web.
Asegúrate de elegir JSON-LD en lugar de Microdata porque Google prefiere este lenguaje de secuencias de comandos.
Por ejemplo, Google Structured Data Markup Helper ofrece un proceso de 3 pasos y proporciona instrucciones en cada paso.
Tú eliges el tipo de contenido que representa tu página y luego seleccionas una imagen y completas los campos requeridos.
El sistema generará el código que debes insertar en el código fuente de tu página web.
14. Establecer la imagen adecuada para compartirla en redes sociales con etiquetas Open Graph
El protocolo Open Graph te ayuda a controlar qué contenido se mostrará en las redes sociales cuando tu página sea compartida.
Debes configurar una imagen determinada que muestren las plataformas porque, de lo contrario, pueden mostrar algo irrelevante o no mostrar nada en absoluto.
Fíjate en estos dos ejemplos de cómo compartir un artículo en Twitter:
Sin Open Graph
Con Open Graph
Las imágenes para compartir en redes sociales se pueden configurar automáticamente en el CMS, pero si no usas ninguno, deberás asignar manualmente la etiqueta og:image a cada página web.
Puedes crear una imagen separada solo para las redes sociales y no usarla en la página web.
Así es como se añade una imagen a la vista previa de Facebook y Twitter en WordPress:
15. Geolocalización
Se trata de que incorpores en los metadatos de las imágenes información geolocalizada. De esta forma, este contenido visual será candidato a aparecer en las búsquedas locales.
Para trabajar este aspecto del SEO local de tus imágenes tienes herramientas online como geoimgr o geosetter, para geo etiquetar tu contenido.
Comprobación de imágenes en SE Ranking
Las imágenes se escanean en las herramientas de Auditoría Web y Comprobador de SEO On-Page de SE Ranking.
La sección de análisis de Imágenes en la Auditoría Web mostrará una lista de imágenes a las que les falta el texto alternativo o que son demasiado grandes.
Asegúrate de completar el atributo alt para cada imagen en tu sitio web y reduce su tamaño para acelerar los tiempos de carga.
El Comprobador de SEO On-Page también comprueba si el texto alternativo existe. Además, la herramienta analiza si las imágenes son únicas y hace recomendaciones con respecto a los nombres de los archivos de imágenes.
Dado que el objetivo principal de la herramienta es evaluar lo optimizada que está una página determinada para una palabra clave objetivo, también verás si tus imágenes contienen esa palabra clave en alt.
Al mismo tiempo, y ya que las imágenes son elementos clave de la mayoría de las funciones SERP, puedes revisar qué funciones tiene tu sitio web usando la tabla de Rankings:
Conclusión
Cuando se optimizan correctamente, las imágenes pueden mejorar en gran medida la visibilidad de búsqueda de tu sitio web y mejorar la experiencia de usuario.
Con la búsqueda visual en aumento, no subestimes el valor de las imágenes y sigue todas las recomendaciones esenciales de Google con respecto a las resoluciones, alt, otros atributos, y los datos estructurados.
Pero antes que nada, añade elementos visuales a tus páginas solo si se ajustan al contexto y opta por contenido original que añada valor a los visitantes del sitio web.
¿Trabajas tú el SEO para imágenes en tu web?
Te leemos en los comentarios.
