Uno de los instrumentos más utilizados que casi siempre van de la mano de cualquier texto es la imagen. Esta no solo ayuda a enfatizar partes del texto que queremos destacar, sino que también aligera la lectura, haciendo que este momento sea mucho más ameno y agradable. Ayudan, sin duda, a ofrecerle al usuario la mejor experiencia posible y, dado que Google centra sus esfuerzos precisamente en mimarlo en este sentido para que continúe interactuando con él, ¿por qué nos olvidamos muchas veces de optimizar nosotros las imágenes para su motor de búsqueda?
Sin duda, merece la pena invertir algo de tu tiempo en trabajar sobre las imágenes para sacarles el máximo partido, así que presta atención a los siguientes 9 elementos que tendrás que tener en cuenta a la hora de comenzar con la optimización SEO para imágenes.
Índice de Contenidos
1. Líneas generales del SEO para imágenes
A menudo centramos todos nuestros esfuerzos en posicionar las URLs de valor SEO en las SERPs. Sin embargo, tal y como comentábamos al inicio de este post, es importante optimizar las imágenes con el fin de posicionar en los resultados de Google en el apartado de ‘Google Imágenes’ y ampliar las posibilidades de atraer más tráfico orgánico a través de las mismas.
Los robots de Google no son capaces de ‘leer’ las imágenes. Están pensados para leer el código e un sitio web, no de una animación en particular o de cualquier imagen en general. Por esto debemos facilitarle esta información implementando una sencilla serie de pautas de optimización SEO. De ellas dependerá que pueda interpretar o no la información que intentamos mostrarle, de que pueda o no poder valorarlas y que que puedan rankear en su sección de Google imágenes.
2. Peso y tamaño de las imágenes
Dos de los factores a tener en cuenta a la hora de optimizar las imágenes son el peso y el tamaño de las imágenes.
Peso:
Las imágenes pesadas subidas a la web ralentizan la velocidad de carga de la URL en la que están implementadas y, por ende, de la web completa. La velocidad de carga es uno de los factores de posicionamiento orgánico tanto para desktop como para mobile, por lo que es importante que estén optimizadas desde este punto de vista.
Herramientas para aligerar el peso:
Existen muchas herramientas que nos ayudan a aligerar el peso de las imágenes. Aunque no contemos con programas de edición y tratamiento de imágenes a nivel profesional como Photoshop o Illustrator, podemos hacer uso de plataformas online tales como:
- ImageOptim o TinyJPG, que comprime las imágenes sin perjudicar su calidad.
- Website Speed Test Image Analysis Tool nos permite descargar los nuevos formatos de imagen de forma fácil.
Tamaño:
Además, es también importante guardar diferentes tamaños de una misma imagen para que se muestre la más adecuada en función del dispositivo en que se muestra. Si bien existen plugins que reescalan el tamaño de la imagen, debemos tener cuidado a la hora de poner en práctica esta opción. Esto es porque, por ejemplo, una imagen de 1000 px reescalada a 400 px de forma automática hará que se fuerce la vista de la imagen a 400 px; sin embargo, la imagen seguirá cargándose en el tamaño inicial (1000 px) y afectará al rendimiento y velocidad de la web.
Herramientas:
El punto más importante a la hora de escoger las imágenes es saber la plataforma en la cual trabajaremos. Si trabajamos en WordPress por ejemplo, contamos con herramientas como SmushIt, un plugin que nos permite definir el ancho y alto máximo que queremos que tengan nuestras imágenes y las redimensiona y comprime al subirlas al servidor.
Si por el contrario trabajamos con plataformas de código propias, deberemos de crear un proceso manual o automatizado que nos permita optimizar las imágenes antes de subirlas al servidor.
3. Formatos de las imágenes SEO-friendly
En la actualidad, existen cuatro formatos para guardar las imágenes para web de la manera más óptima:
- WebP: Puede ahorrar hasta un 25-35% del peso inicial de la imagen. Es el formato más recomendado en estos momentos, aunque algunas versiones de navegadores no son todavía capaces de leerlo. Es uno de los formatos que más compresión permite sin perjudicar la calidad de la imagen.
- Formato .png: Es la más idónea para imágenes de pocos colores y con fondos transparentes. Se utiliza mucho para logotipos.
- Formato .jpg: Es el formato que se debería utilizar para fotografías e imágenes en general. Se pierde un poco de calidad al comprimir las imágenes, pero, no se pierden colores o tonalidades.
- Formato .gif: Utilizado para animaciones e imágenes en movimiento.
Recomendaciones:
- Utiliza siempre el formato que mejor le venga a la imagen en cuestión de peso y compatibilidad.
- Comprime siempre las imágenes ya sea con una herramienta que automatice el proceso o de forma manual.
- Si en la web hay varios iconos, agrúpalos en una única imagen mediante CSS Sprites con el fin de reducir el número de peticiones al servidor y mejorar el rendimiento de la web.
4. Campos SEO imágenes
Cada imagen tiene una serie de campos asociados a ella que ayudarán a los robots de los motores de búsqueda (y, por supuesto, a los usuarios) para poder disponer de una mejor accesibilidad.
Nombre de la imagen
El nombre de la imagen hace referencia al nombre del archivo. Es el título de la imagen con guiones altos o bajos para separar las distintas palabras. Se recomienda incluir en él la palabra clave por la que queremos posicionar la imagen evitando tildes y caracteres extraños (tales como la ‘ñ’, ‘?’, etc.).
También es recomendable obviar las preposiciones u otro tipo de caracteres vacíos que no aportan información alguna al nombre del archivo con el fin de acortar lo máximo posible la URL y hacerla lo más SEO friendly posible.
Título (title)
Es el texto que aparece al poner el cursor encima de una imagen. Se recomienda cumplimentarlo para dotar un título semántico a la imagen añadiendo la palabra clave principal por la que queremos posicionar.
Este puede ser el mismo que el texto alt, aunque no lleva mucho tiempo extra redactarlo haciendo una ligera variación de este otro atributo.
Atributo ‘alt’
Es el elemento más importante, ya que es lo que lee Google. Debe contener la keyword principal por la que queremos posicionar una URL y está pensado para descripciones cortas.
Su sintaxis es la siguiente:
<img src=”ENLACE DE LA IMAGEN” alt=”DESCRIPCIÓN ALT DE LA IMAGEN” />
Ejemplo de una imagen optimizada:
Veamos cómo se podrían rellenar los campos para optimizar la imagen en base al término objetivo ‘ciberseguridad pymes’, cuyo promedio de búsquedas mensuales es de 90 búsquedas (en España):
Nombre archivo:
- mal: 04745892595295.jpg
- bien: ciberseguridad-pymes.jpg
Título: Consejos de ciberseguridad para empresarios y pymes
Alt text: Ciberseguridad para pymes y empresarios: consejos
De esta manera, conseguiremos que todos los campos estén optimizados y tendremos una imagen lista para luchar por las primeras posiciones. Por supuesto, optimizar las imágenes no es garantía de que aparecerán en lo más alto, pero es un primer paso para conseguirlo 🙂
5. Contexto semántico
Google considera más relevantes las imágenes cuanto mayor relación tengan con el contenido que las rodea. Por eso, es recomendable que estén rodeadas de texto relacionado. De este modo, conseguiremos ampliar el contexto semántico total de la URL.
6. Sitemap específico de imágenes
Con el fin de que el robot de Google rastree las imágenes de un modo más eficaz, es necesario crear un sitemap.xml exclusivo con este tipo de archivos. Desde WordPress puede generarse automáticamente a través de herramientas (plugins) como Yoast o RankMath. En el caso de no trabajar con WordPress, se pueden utilizar herramientas alternativas o hacerlo de forma manual con herramientas de programación (rastreo de urls).
A continuación, puedes ver un ejemplo de sitemap con dos imágenes dentro de un artículo:
<?xml version=»1.0″ encoding=»UTF-8″?>
<urlset xmlns=»http://www.sitemaps.org/schemas/sitemap/0.9″
xmlns:image=»http://www.google.com/schemas/sitemap-image/1.1″>
<url>
<loc>http://example.com/sample.html</loc>
<image:image>
<image:loc>http://example.com/image.jpg</image:loc>
</image:image>
<image:image>
<image:loc>http://example.com/photo.jpg</image:loc>
</image:image>
</url>
</urlset>
Algunas de las etiquetas más comunes a la hora de crear un sitemap para imágenes son:
→ El título de la imagen.
→ La URL o ruta del archivo donde está alojado
→ El pie de la página
→ El tipo de licencia
→ Aporta información de geolocalización
- Documentación: En el blog de Google, se puede encontrar una extensa cantidad de información sobre el sitemap de imágenes con ejemplos, guías para implementarlo y mucho más.
Una vez hayamos realizado toda la implementación, podremos comprobar el estado de la cobertura de la indexación a través de la Search Console.
7. Lazy Load (carga diferida) para imágenes
La imagen es uno de los recursos que normalmente más se utilizan en los sitios web. Y es que, como se suele decir, ‘una imagen vale más que mil palabras’. De ahí que se cuide mucho el aspecto visual de cada una de las páginas a través de la implementación de estos elementos multimedia. Sin embargo, no trabajarlas puede conllevar un impacto negativo sobre la experiencia del usuario y sobre la velocidad de carga de una web, por lo que es recomendable cargarlas a través de lo que se conoce como lazy load o carga diferida.
Gracias al lazy load, las imágenes solo se cargan cuando se ven en pantalla. Es decir, si se encuentran en una parte inferior aún no visible en la pantalla del dispositivo, estas no llegarán a cargarse hasta que el usuario haga scroll. Esto reduce en gran medida el número de solicitudes HTTP, por lo que el tiempo de carga será mejor y a Google le gustará(s) más.
Plugins para implementar Lazy Load en WordPress
Si eres de los que trabajan con esta aplicación software para gestionar sitios web, existe una serie de plugins que seguro te interesan si necesitas optimizar las imágenes mediante la implementación de la carga diferida. Eso sí, recuerda revisar primero si el theme que está instalado lleva o no esta función. En caso negativo, aquí te proponemos algunos muy interesantes:
- BJ Lazy Load: de fácil instalación y configuración, es uno de los más populares, con más de 90.000 instalaciones. Gracias a este complemento se pueden realizar imágenes escaladas para que se vean en distintos tamaños de pantallas.
- Lazy Load by WP Rocket: sencillo y sin complicaciones a la hora de configurarlo (básicamente porque no te da opciones), este plugin cuenta con la ventaja de no utiliza una biblioteca de JavaScript como jQuery.
8. Utilizar un CDN para imágenes
Una Red de distribución de contenido o CDN (Content Delivery Network) es un conjunto de servidores distribuidos por todo el mundo que facilitan el contenido de un sitio web cacheado en función de la ubicación de quien hace la solicitud. Gracias a esta red de alojamiento, será el servidor más cercano al que solicita la información el que disponga de una copia de la página web demandada.
El uso de una CDN (Content Delivery Network), por tanto, nos ayuda a que una URL se descargue de forma más rápida, por lo que mejora los tiempos de carga de nuestro site y favorece también su posicionamiento orgánico.
Si hacemos uso de una CDN (como, por ejemplo, Cloudflare) para servir las imágenes, las descargará y mostrará más rápido, por lo que, como se sobreentiende una vez más, dicha fluidez mejorará nuestro SEO.
9. Otras consideraciones
Las imágenes con valor SEO o, lo que es lo mismo, que queremos posicionar, deben incluirse en el código fuente de una URL. Aquellas que están implementadas como propiedad background en CSS no serán visibles para Google, ya que no tiene la capacidad de entender las hojas de estilo.
Además, existen otros pequeños detalles a tener en cuenta a la hora de optimizar nuestras imágenes que no debemos olvidar:
- Exif: Con cada imagen, se guardan una serie de atributos como la fecha en la cual se tomó la fotografía y otro tipo de información relevante para los profesionales de este campo. Sin embargo, a nivel de SEO, esta información no es relevante y tan solo ocupa espacio. Eliminar esta información será otra manera de optimizara las imágenes y hacer que sean menos pesadas.
- «longdesc«: Este atributo muchas veces está olvidado pero también será muy interesante implementarlo en nuestras imágenes. Se trata de una descripción larga de la imagen.
- Enlazado: De la misma manera que el linkbuilding juega un papel fundamental en el crecimiento orgánico de nuestras páginas, lo mismo sucede con las imágenes. Estas también pueden ser enlazas y por lo tanto pueden conseguir un mejor reconocimiento en los buscadores.
¿Nos hemos dejado algún consejo que consideres esencial? Nos encantaría saber tu opinión. ¡Escribe tu comentario a continuación y siéntete libre de aportar todos tus conocimientos!
