SEO Imágenes | nueve elementos Imprescindibles

Uno de los instrumentos más usados que casi siempre y en toda circunstancia van de la mano de cualquier texto es la imagen. Esta no solo ayuda a enfatizar unas partes del texto que deseamos destacar, sino que también aligera la lectura, haciendo que este instante sea mucho más ameno y agradable. Ayudan, indudablemente, a ofrecerle al usuario la mejor experiencia posible y, puesto que Google centra sus esfuerzos exactamente en mimarlo en este sentido a fin de que continúe interactuando con él, ¿por qué nos olvidamos muy frecuentemente de optimar 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 tomar en consideración a la hora de empezar con la optimización posicionamiento web para imágenes.

Back to top

1) 1. Líneas generales del posicionamiento web en buscadores para imágenes

A menudo centramos todos nuestros esfuerzos en posicionar las URLs de valoren las Search Engines Ranking Positions. No obstante, como comentábamos al comienzo de este blog post, es importante optimizar las imágenes con la intención 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.

Captura de pantalla de los actuales resultados de Google Imágenes para la palabra clave «posicionamiento web».

Los robots de Google no son capaces de ‘leer’ las imágenes. Están pensados para leer el código e un sitio, no de una animación particularmente o de cualquier imagen en general. Por esto debemos facilitarle esta información implementando una fácil serie de pautas de optimización posicionamiento en buscadores. De ellas dependerá que pueda interpretar o no la información que procuramos mostrarle, de que pueda o no poder valorarlas y que que puedan rankear en su sección de Google imágenes.

Back to top

2) 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 lo tanto, de la página web completa. La velocidad de carga es uno de los factores de posicionamiento orgánico tanto para desktop para mobile, por lo que es importante que estén optimados 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 empleo de plataformas on line semejantes como:

Tamaño:

Además, es también importante guardar diferentes tamaños de una misma imagen a fin de que se muestre la más adecuada en función del dispositivo en que se muestra. Aunque existen complementos que reescalan el tamaño de la imagen, debemos llevar cuidado en el momento de poner en práctica esta opción. Esto es porque, por servirnos de un ejemplo, una imagen de 1000 px reescalada a cuatrocientos 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 desempeño y velocidad de la web.

Herramientas:

El punto más importante en el momento de seleccionar las imágenes es saber la plataforma en la que trabajaremos. Si trabajamos en Wordpress por ejemplo, contamos con herramientas como, un plugin que nos permite definir el ancho y alto máximo que deseamos que tengan nuestras imágenes y las redimensiona y comprime al subirlas al servidor.

Si al contrario trabajamos con plataformas de código propias, deberemos crear un proceso manual o automatizado que nos deje optimizar las imágenes ya antes de subirlas al servidor.

Ejemplo de las sugerencias de optimización de las imágenes de la home de SEO Alive en WebSpeedTest.

Back to top

3) 3. Formatos de las imágenes posicionamiento web-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-treinta y cinco por cien del peso inicial de la imagen. Es el formato más recomendado en estos instantes, aunque ciertas versiones de navegadores no son todavía capaces de leerlo. Es uno de los formatos que más compresión deja sin perjudicar la calidad de la imagen.
• Formato .png:Es la más idónea para imágenes de pocos colores y con fondos trasparentes. Se emplea mucho para logotipos.
• Formato .jpg:Es el formato que se debería emplear para fotografías y también imágenes en general. Se pierde un poco de calidad al comprimir las imágenes, pero, no se pierden colores o bien tonalidades.
• Formato .gif:Utilizado para animaciones e imágenes en movimiento.

Ejemplo de los diferentes pesos de las imágenes dependiendo del formato utilizado.

Recomendaciones:

1. Utiliza siempre el formato que mejor le venga a la imagen en cuestión de peso y compatibilidad.
2. Comprime siempre y en todo momento las imágenes así sea con una herramienta que automatice el proceso o bien de forma manual.
3. Si en la página web hay varios iconos, agrúpalos en una única imagen mediante CSS Sprites con el fin de reducir el número de solicitudes al servidor y mejorar el desempeño de la web.

Back to top

4) 4. Campos posicionamiento web en buscadores 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, como es natural, a los usuarios) para poder contar con de una mejor accesibilidad.

Nombre de la imagen

El nombre de la imagen hace referencia al nombre del fichero. Es el título de la imagen con guiones altos o bien bajos para separar las diferentes palabras. Se aconseja incluir en él la palabra clave por la que deseamos posicionar la imagen evitando tildes y caracteres extraños (como la ‘ñ’, ‘?’, etcétera).

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 aconseja 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 exactamente el mismo que el texto alt, si bien no lleva bastante tiempo extra redactarlo haciendo una ligera variación de este otro atributo.

Atributo ‘alt’

Es el elemento más importante, en tanto que es lo que lee Google. Debe contener la palabra clave principal por la que deseamos posicionar una URL y está concebido 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: .jpg
• bien: ciberseguridad-pymes.jpg

Título: Consejos de ciberseguridad para empresarios y pymes

Alt text:Ciberseguridad para pymes y empresarios: consejos

De esta forma, lograremos que todos los campos estén optimados y tendremos una imagen lista para luchar por las primeras posiciones. Naturalmente, optimar las imágenes no es garantía de que aparecerán en lo más alto, mas es un primer paso para conseguirlo :)

Back to top

5) 5. Contexto semántico

Google considera más relevantes las imágenes cuanto mayor relación tengan con el contenido que las rodea. De ahí que, es conveniente que estén rodeadas de texto relacionado. De esta manera, lograremos ampliar el contexto semántico total de la URL.

Back to top

6) 6. Sitemap específico de imágenes

Con el fin de que el robot de Google rastree las imágenes de una manera más eficiente, es preciso crear un sitemap.xml exclusivo con esta clase de ficheros. Desde Wordpress puede producirse automáticamente a través de herramientas (plugins) como Yoasto RankMath. En el caso de no trabajar con WP, se pueden utilizar herramientas alternativas o bien hacerlo de forma manual con herramientas de programación (rastreo de urls).

A continuación, puedes ver un ejemplo de sitemapcon dos imágenes en un artículo:

<?xml version=»1.0″ encoding=»UTF-8″?>
<urlset xmlns=»/schemas/sitemap/0.9″
xmlns:image=»/schemas/sitemap-image/1.1″>
<url>
<loc>/sample.html</loc>
<image:image>
<image:loc>/image.jpg</image:loc>
</image:image>
<image:image>
<image:loc>/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, se puede hallar una extensa cantidad de información sobre el sitemap de imágenes con ejemplos, guías para incorporarlo 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.

Back to top

7) 7. Lazy Cargar (carga diferida) para imágenes

La imagen es uno de los recursos que generalmente más se usan en los sitios web. Y es que, como se acostumbra a 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. No obstante, no trabajarlas puede conllevar un impacto negativo sobre la experiencia del usuario y sobre la velocidad de carga de una web, con lo que es conveniente cargarlas a través de lo que es conocido como lazy cargar o carga diferida.

Gracias al lazy cargar, las imágenes solo se cargan cuando se ven en pantalla. Es decir, si se encuentran en una parte inferior aún no perceptible en la pantalla del dispositivo, estas no llegarán a cargarse hasta que el usuario haga scroll. Esto reduce en buena medida el número de solicitudes HTTP, por lo que el tiempo de carga será mejor y a Google le gustará(s) más.

7.1) Plugins para implementar Lazy Cargar en WordPress

Si eres de los que trabajan con esta aplicación software para administrar sitios web, hay una serie de plugins que seguro te resultan de interés si precisas optimizar las imágenes a través de la implementación de la carga aplazada. Eso sí, recuerda comprobar primero si el tema 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 noventa instalaciones. Merced a este complemento se pueden efectuar imágenes escaladas a fin de que se vean en diferentes tamaños de pantallas.
• Lazy Cargar by WP Rocket:sencillo y sin complicaciones en el momento de configurarlo (básicamente porque no te da opciones), este complemento cuenta con el beneficio de no utiliza una biblioteca de JavaScript como jQuery.

Back to top

8) 8. Usar 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 planeta que facilitan el contenido de un sitio cacheado en función de la ubicación de quien hace la solicitud. Merced a esta red de alojamiento, será el servidor más próximo 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), en consecuencia, 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 usamos una CDN (como, por servirnos de un ejemplo, Cloudflare) para servir las imágenes, las descargará y mostrará más rápido, con lo que, como se sobreentiende una vez más, dicha fluidez mejorará nuestro SEO.

Back to top

9) 9. Otras consideraciones

Las imágenes con valor posicionamiento web en buscadores o bien, 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, en tanto que no tiene la capacidad de comprender las hojas de estilo.

Además, hay otros pequeños detalles a tomar en consideración en el momento de optimar nuestras imágenes que no debemos olvidar:

• Exif: Con cada imagen, se guardan una serie de atributos como la data en la cual se tomó la fotografía y otro género de información relevante para los profesionales de este campo. No obstante, a nivel de posicionamiento en buscadores, esta información no es relevante y solo ocupa espacio. Quitar esta información será otra manera de optimizara las imágenes y hacer que sean menos pesadas.
• « longdesc«: Este atributo en muchas ocasiones está olvidado pero también será muy interesante incorporarlo en nuestras imágenes. Se trata de una descripción larga de la imagen.
• Enlazado: De exactamente la misma manera que el linkbuilding juega un papel fundamental en el desarrollo 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 web.

¿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!

9.0.1) Comparte este artículo por favor. ¡Mil gracias!

Back to top