es
English Español Deutsch Français Italiano Português (Brasil) Русский 中文 日本語
Ir a Blog
Ricardo Mendoza Castro

SEO para imágenes y atributos alt: 7 consejos avanzados

98
Wow-Score
La Wow-Score muestra si una entrada de un blog crea o no interacción. Se calcula en base a la correlación entre el tiempo de lectura activo de los usuarios, su velocidad de desplazamiento y la longitud del artículo.
Este post está en Español
Ricardo Mendoza Castro
Este post está en Español
SEO para imágenes y atributos alt: 7 consejos avanzados

Cuando se trata del SEO para imágenes lo primero en que piensa la mayoría es optimizar los atributos alt. Sin embargo, existen muchas tareas por descubrir para optimizar las imágenes.

De hecho, se puede decir con seguridad que la optimización de imágenes es una de las áreas más ignoradas del SEO. Una tendencia que puede ser evitada. 

Es muy común encontrar un sitio que tenga imágenes con tamaños de archivos enormes, o nombres de archivos sin descripción. Y además, que aparezcan en dimensiones mucho más pequeñas en el sitio que la imagen original. 

A menudo, el problema es que las guías para principiantes de SEO solo cubren los conceptos básicos, y eso significa que la optimización de los atributos alt es prácticamente lo único que se menciona.

No olvidemos que la búsqueda de imágenes, en sí misma, es muy importante y puede generar cantidades significativas de tráfico a tu sitio. Nuestra reciente guía de búsqueda visual hace un gran trabajo al mostrar lo importante que es la búsqueda de imágenes.

Y seamos sinceros, ¿quién no lo ha usado para buscar fotos de gatos?

ejemplo de imágenes de Google

El SEO para imágenes no es algo que deba ignorarse, y en esta guía, te indicaremos los pasos que puedes dar para optimizar las imágenes de tu sitio y obtener las posiciones más altas en las búsquedas de imágenes. 

En esta guía de SEO para imágenes cubrimos:

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

Las imágenes ayudan a dar contexto a tu contenido.

Las imágenes correctas pueden ayudar al usuario a comprender e interactuar mejor con el contenido escrito y ayudan a dividir bloques de texto grandes.

Hay pocas cosas menos atractivas que solo párrafos de miles de palabras. 

Pero, si ponemos a los usuarios aparte, la visión de Google para el futuro es avanzar hacia la búsqueda visual, que comenzó con una renovación completa de Imágenes de Google hace un par de años.

Cada vez vemos más imágenes que ocupan un lugar destacado en las SERPs, a menudo por encima de los resultados orgánicos habituales.

Optimized images showing on the SERPs

Punto importante: las imágenes deben ser elegidas con cuidado. 

Todos estamos acostumbrados a ver la misma imagen de stock en cualquier otro sitio web. El verdadero valor viene cuando usas imágenes hechas a tu medida que acompañen la historia que quieres contar.

Es difícil ignorar la importancia y búsqueda de imágenes. La optimización de las imágenes debe formar parte de tu estrategia SEO actual y debe ser considerada como una de las mejores prácticas que debes seguir.

¿Qué es el SEO para imágenes? 

Comúnmente conocido como optimización de imágenes, esta práctica busca mejorar las imágenes de tu sitio por dos razones principales:

  1. Para obtener posiciones más altas en la búsqueda de imágenes de Google.

  2. Para mejorar la visibilidad general y la optimización de una página web.

Esto significa que necesitas llevar a cabo una serie de tareas que ayudarán a Google a entender mejor las imágenes de tu sitio. Tales tareas pueden ser: incluir un nombre adecuado a los archivos, agregar y optimizar texto alt, reducir el tamaño de los archivos y más. 

Una de las preguntas que surge a menudo en relación con el SEO para imágenes es: ¿si estas tareas aún son necesarias? dado que el avance de Google en el uso de IA y machine learning para el reconocimiento de imágenes es acelerado. La respuesta corta es sí.

Google todavía no puede leer todo tipo de imágenes, a pesar de que su capacidad para hacerlo ha mejorado significativamente en los últimos años. También es importante saber que el SEO para imágenes no se trata solo de ayudar a los motores de búsqueda a comprender lo que muestra una imagen. 

Las imágenes mal optimizadas son una de las principales causas de páginas web lentas, y al mejorarlas puedes tener un gran impacto en la velocidad de carga de tu sitio y el puntaje de PageSpeed.

Es importante mencionar que el SEO para imágenes a menudo se detiene con la optimización de atributos alt. Si bien es cierto, es una parte importante del proceso, no es la única práctica que existe. 

Dicho esto, comprender el concepto y el propósito de los atributos alt y el texto alt es un excelente punto de partida.

¿Qué es el atributo alt y el texto alt? 

A menudo puedes escuchar a los SEOs hablar sobre la optimización de atributo alt o texto alt. A veces también se les conoce como descripción alt o etiqueta alt. Se usan para referirse a la misma cosa.

Pero, ¿qué son?

Así es como Matt Cutts lo explicó hace mucho tiempo de una manera fácil de entender. (Todos extrañamos a Matt)

Los atributos Alt proporcionan una alternativa en texto de una imagen para los motores de búsqueda, y también, para aquellas personas que usen lectores de pantalla para acceder a una página web. El propósito original y el uso del texto alt era ayudar a que las imágenes fueran accesibles para los ciegos y las personas con discapacidad visual.

En pocas palabras, son una descripción en texto para cada imagen que describe claramente lo que muestra. 

Forman parte del código HTML dentro de una etiqueta de imagen, y se ven así:

<img src="gatos-jugando-en-el-jardin.png" alt="gatos jugando en el jardín" />.

El texto alt es el contenido descriptivo que se encuentra dentro del atributo alt al que pertenece a una etiqueta de imagen.

El texto alt puede ayudar a mejorar el rendimiento SEO de tu sitio. Ya que puede agregar más señales de relevancia a una página web y puede ayudar a Google a comprender mejor el contenido de una imagen y a clasificarla.

Pero muchos se equivocan en esta práctica, y no tendrías que buscar demasiado para encontrar una página donde todas las imágenes usen el mismo texto alt, una coincidencia exacta de la palabra clave objetivo principal de una página.

Cómo optimizar el texto alt 

Existen buenas prácticas que debes seguir para optimizar el texto alt de tu imagen. 

Crear atributos alt descriptivos no tiene por qué ser difícil. Es mejor no pensar demasiado y dejarte llevar por el contenido de la imagen.

A menudo, escribir un buen texto alt significa usar el sentido común para describir lo que muestra la imagen. Podemos dividir esto en solo tres reglas que debes seguir.

LAS 3 REGLAS DE ATRIBUTOS ALT 

1. Sé descriptivo y específico 

El texto alt siempre debe describir el contenido de una imagen con el mayor detalle posible.

Cuanto más específico seas al describir una imagen, mejor, ya que esto ayudará a clasificarte en la Búsqueda de imágenes de Google y le dará contexto sobre cómo se relaciona con el contenido de tu página.

2. Sé relevante

Los atributos alt no son un lugar para generar spam con las palabras clave de concordancia exacta y deben usarse para describir exactamente lo que muestra una imagen. 

Los atributos alt deberían ser absolutamente relevantes.

Intenta escribir un texto alt que describa imágenes de una manera que se relacione con el tema de la página en la que se encuentra, especialmente cuando una imagen es de naturaleza más genérica y no es tan específica como otras. 

3. Sé único

No uses las palabras claves que son objetivo de tu página como el atributo alt para cada imagen.

Siempre asegúrate de escribir un texto alt único que describa el contenido específico de la imagen, en lugar de repetir el contenido de otra. 

Pero, ¿cómo es un texto alt bien optimizado en la práctica? Vamos a escribir uno para esta imagen de dos gatitos:

kittens alt tags

Un atributo alt que sea descriptivo, relevante y único podría ser así:

alt="dos lindos gatitos pelirrojos durmiendo con bolas de lana"

Esto es descriptivo para motores de búsqueda, lectores de pantalla, y que incluye palabras clave.

Cómo agregar atributos alt en plataformas de sitios web populares 

Varias plataformas de sitios web ya tienen configuradas opciones de texto alt, solo tienes que accederlos. 

Cómo agregar texto alt a imágenes en WordPress

Si utilizas WordPress, es realmente fácil agregar texto alt a tus imágenes.

Simplemente haz clic en una imagen en la ventana del editor y verás que aparece un campo para esto en la pestaña Configuración de imagen.

Showing how to add alt text to WordPress

O bien, haz clic en una imagen de la biblioteca de multimedia y verás las opciones aquí también.

Showing how to add alt text through the WordPress media library.

Cómo agregar texto alt a imágenes en Shopify

Si utilizas Shopify, puedes agregar texto alt a las imágenes de tu tema como, y también, a las imágenes del producto. 

Para optimizar el texto alt en las imágenes de productos, dirígete a Productos> Todos los productos y haz clic en la lista de productos que deseas editar. 

En la página de detalles del producto, haz clic en un elemento multimedia y busca la página de previsualización de multimedia. Ahora puedes hacer clic para agregar texto alt.

Showing how to add alt text in Shopify

Para agregar texto alt a las imágenes de temas, dirígete a Online Store> Temas y haz clic para personalizar el tema de tu tienda.

Verás el menú de secciones en la parte izquierda de la página donde puedes hacer clic en bloques de imágenes y, desde allí, en imágenes individuales.

Verás un cuadro de texto donde puedes agregar tu texto alt.

Showing how to add alt text to a Shopify theme.

Cómo agregar texto alt a imágenes en Magento

Agregar texto alt a las imágenes en una tienda de Magento es realmente fácil:

Primero necesitarás hacer clic en Catálogo> Productos, luego, elegir el producto al que quieres agregar texto alt, y desplazarte a la sección Imágenes y videos.

Haz clic en una imágen y podrás editar el texto alternativo.

Alt text option in Magento. Image Credit: 121 eCommerce

Cómo agregar texto alt a imágenes en Wix

Hace algún tiempo, no era posible agregar texto alt a las imágenes en una tienda en Wix. No obstante, la plataforma ha invertido recursos para solucionar estas frustraciones comunes de SEO en los últimos años, y la edición de texto alt ahora es posible.

Puedes agregar texto alt a las imágenes en la ventana de edición. Para ello haz clic en la imagen donde quieres agregar texto alt y abre las opciones de configuración. 

Desde aquí verás el campo “¿Qué hay en la imagen?”. Ahí es donde puedes agregar tu texto alt.

Wix settings for alt text.


Cómo influyen las imágenes en el puntaje de PageSpeed 

Es común ver que se cita con frecuencia la optimización de imágenes como una de las principales formas de mejorar el puntaje de PageSpeed de tu sitio cuando se utiliza la herramienta de Google PageSpeed Insights.

Las imágenes grandes son el mayor problema aquí. Y eso es algo que tiene sentido.

Las imágenes grandes tardan más en descargarse, y esto, a su vez, ralentiza el tiempo de carga de tu página.

google pagespeed insights images

Puedes leer más sobre cómo mejorar tu puntaje de PageSpeed en esta guía.

7 Consejos avanzados de optimización de imágenes: más allá del texto alt

La optimización de imágenes debería ir más allá de simplemente agregar atributos alt. 

Existen varias actividades que puedes ejecutar para mejorar el rendimiento orgánico general de tu sitio. Por ejemplo, optimizar las imágenes para obtener una clasificación más alta en la Búsqueda de imágenes de Google.

Muchos problemas surgen simplemente de cargar imágenes en bruto a tu sitio sin poner un poco de trabajo primero. Eso es nunca una buena idea.

Te presentamos 7 consejos para optimizar las imágenes de tu sitio web que puedes usar:

1. Nombra tus imágenes correctamente

Google publica una guía de sus mejores prácticas de imagen, y una de las conclusiones más simples de esto es que debes asegurarte de que estás utilizando nombres de imágenes descriptivos.

Por ejemplo usar "jordan-air-1-mid-front.jpg” es mejor que “IMG00353.JPG".

Cuando exportas imágenes desde una cámara o smartphone (o incluso cuando haces una captura de pantalla), estas obtienen nombres de archivo genéricos. No cargues una imagen con el nombre de archivo que obtuvo de forma predeterminada. En cambio, agrega un nombre descriptivo que ayude a dar contexto a lo que muestra y separa las palabras con guiones, no guiones bajos. 

Haz esta tarea una parte de tu checklist al cargar imágenes. 

Si ya has cargado imágenes a una página, continúa y actualiza los nombres de los archivos para que sean descriptivos. No te tomará mucho tiempo y obtendrás valiosos resultados.

2. Cambia el tamaño de las imágenes según las dimensiones de la pantalla

Otro problema común con las imágenes es que el tamaño del archivo de la imagen es mucho más grande que las imágenes utilizas en tu sitio. 

Por ejemplo la cámara principal en un iPhone X produce imágenes de 4032px x 3024px. 

Pero supongamos que el ancho máximo que esta imagen mostrará en tu sitio es de 600 px. 

La diferencia en el tamaño del archivo entre una imagen de 4032 píxeles de ancho en comparación con 600 píxeles será significativa, y el uso de múltiples imágenes que son más grandes que su tamaño de pantalla puede contribuir rápidamente a un tamaño de archivo de página enormemente aumentado. 

Asegúrate entonces de cambiar el tamaño de las imágenes a sus dimensiones máximas de visualización. 

Si utilizas WordPress, puedes usar un plugin como Resize Image After Upload que te ayudará a hacerlo. De lo contrario, cambiar el tamaño de las imágenes en Photoshop funciona, al igual que con una herramienta como Canva.

También debes asegurarte de escalar las imágenes de manera receptiva con CSS.

3. Reduce tamaños de archivos de imágenes

Una de las formas más simples de reducir el tamaño de archivo de tus imágenes es redimensionarlas a dimensiones máximas de visualización, pero esa no es la única forma.

De hecho, esto es nuevamente algo que Google recomienda en su guía de optimización de imágenes:

Para obtener mejores resultados, experimenta con varias configuraciones de calidad para tus imágenes y no tengas miedo de reducir la calidad: los resultados visuales a menudo son muy buenos y el ahorro en el tamaño del archivo puede ser bastante grande.

— Google

¿Cómo puedes reducir el tamaño de archivo de tus imágenes?

Usa una de las tres herramientas de código abierto recomendadas por Google: 

Pero si no estás familiarizado con el uso de herramientas como estas o quieres una solución web más rápida, puedes usar una herramienta como Optimizilla que permite comprimir tus imágenes.

Si utilizas WordPress, prueba el plugin Smush.

4. Crea un sitemap de imágenes

Si tomas en serio que Google descubra todas las imágenes en tu sitio y haga que estas funcionen en la Búsqueda de imágenes de Google, debes crear un sitemap dedicado que incluya las URLs de todas las imágenes.

En pocas palabras, la creación de un sitemap de imágenes aumenta la posibilidad de que tus imágenes aparezcan en los resultados de búsqueda. Y si bien puedes hacer referencia a imágenes en un sitemap existente, tiene más sentido crear un mapa dedicado que los motores de búsqueda puedan usar.

Aquí hay un ejemplo que ofrece Google para ayudarte a comprender el formato que necesitas usar.

<?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> 

Existe una diferencia clave entre crear un sitemap de imágenes y crear uno que incluya tus páginas web.

Como dice Google, "los sitemaps de imágenes pueden contener URLs de otros dominios, a diferencia de los sitemaps normales, que imponen restricciones entre dominios. Esto permite usar CDNs (redes de distribución de contenidos) para alojar imágenes".

Y esto lleva a comprender muy bien por qué deberías alojar imágenes en un CDN.

5. Aloja imágenes en un CDN

Con mayor frecuencia, la totalidad de un sitio web se alojará en un servidor. 

Pero imaginemos una situación cuando un sitio web está alojado en los Estados Unidos pero es visitado por un usuario en algún lugar de Europa. 

Los activos como las imágenes deberán viajar más lejos para el usuario en Europa, lo que ralentizará el tiempo de carga de la página. 

Un CDN (red de distribución de contenidos) funciona almacenando en caché las imágenes de tu sitio web en varios servidores en diferentes ubicaciones en todo el mundo, lo que significa que estas pueden ser entregadas a un usuario desde la ubicación más cercana a ellos.

Los CDNs populares incluyen Cloudflare, Fastly, KeyCDN y Amazon CloudFront.

Puedes configurar fácilmente un CDN en WordPress a través de plugins como W3 Total Cache, o para obtener más orientación, puedes encontrar guías de integración útiles de cada proveedor como este de Cloudflare.

También te recomendamos que consultes nuestra guía sobre prácticas de SEO imprescindibles para CDNs.

6. Implementa una carga diferida (lazy loading)

No podemos ignorar el hecho de que las imágenes son generalmente archivos de una página con un tamaño más grande y, por lo tanto, la causa de velocidad de sitio más lenta. 

No podemos simplemente prescindir de las imágenes; esa no es una opción porque son demasiado importantes para proporcionar una excelente experiencia de usuario. 

Afortunadamente podemos usar una carga diferida (lazy loading) para permitir que un navegador cargue una imagen hasta que sea necesaria.

La carga diferida significa que los archivos no se cargan hasta que se necesitan. Es decir que la página se carga cuando un usuario llega por primera vez mucho más rápido. Y no solo se usa para imágenes; activos como JavaScript también pueden cargarse de esta manera.

Piénsalo de esta manera: si un usuario nunca se desplaza hacia la segunda mitad de una página, esos activos nunca se cargarán. Y esto trae notables mejoras de rendimiento. 

Miremos nuevamente a lo que Google dice sobre esto, junto con la carga diferida como recomendación en PageSpeed Insights:

La carga diferida (Lazy loading) puede acelerar significativamente la carga en páginas largas que incluyen muchas imágenes debajo de la primera pantalla cargándolas según sea necesario o cuando el contenido principal haya terminado de cargarse y renderizarse.

— Google

Para aprender cómo implementar la carga diferida en tu sitio, echa un vistazo a esta guía.

7. Aprovecha el almacenamiento en caché del navegador

A menudo Google PageSpeed Insights te recomendará aprovechar el almacenamiento en caché del navegador.

En pocas palabras, el almacenamiento en caché del navegador es cuando los archivos son almacenados en el navegador de un visitante, lo que significa que los activos se cargan más rápido la próxima vez que visitan la página.

Cuando visitas una página, las imágenes se descargan y luego se muestran en el navegador. Sin el almacenamiento en caché del navegador, la próxima vez que este usuario visite la página, será necesario volver a descargarlos. Pero con el almacenamiento en caché, el navegador ya los tendrá almacenados, ¡lo que significa que la página se carga mucho más rápido!

El almacenamiento en caché del navegador tiene un impacto en sitios donde los usuarios visitan con frecuencia las mismas páginas. 

Puedes obtener más información sobre cómo Google recomienda usar el almacenamiento en caché aquí

Si utilizas WordPress, uno de los plugins de caché populares puede ayudarte a implementarlo rápidamente. Sino, esta guía de GTmetrix te ayudará a hacerlo.

Optimización de imágenes y actualización de Google sobre la experiencia (navegación) de la página

Google anunció recientemente que están listos para implementar su actualización de la experiencia de la página en algún momento en 2021.

Esta actualización tendrá en cuenta una serie de factores de posicionamiento existentes, que incluyen la penalización de navegación segura, la penalización de intrusivos intersticiales, HTTPS como factor de posicionamiento, la actualización de optimización para dispositivos móviles, la actualización de Page Speed y las Core Web Vitals.

Si has perdido el anuncio, esto esencialmente significa que, como se define en Search Engine Land, "En igualdad de circunstancias, esta actualización significa que es más probable que Google clasifique tus páginas más arriba si proporcionan una buena experiencia de usuario".

Pero, ¿cómo se relaciona esto con la optimización de imágenes?

core web vitals

Primero, notarás que las Core Web Vitals es uno de los factores que tendrán en cuenta, y esto incluye LCP: Largest Contentful Paint. Esto esencialmente muestra qué tan rápido se siente una página, cuando un usuario cree que la página se ha cargado.

LCP es calculado por Google al cronometrar la renderización del elemento de contenido más grande en la página, y esto a menudo son imágenes.

CLS (Cumulative Layout Shift) es otra Core Web Vital, y esto es lo que sucede cuando el contenido sigue moviéndose incluso cuando una página parece haberse cargado por completo. En términos simples, esto se puede optimizar al incluir atributos de tamaño en tus imágenes (y videos).

Por último, debemos recordar que la actualización de la experiencia de la página también tiene en cuenta la velocidad de la página, y hemos visto anteriormente las formas en que las imágenes pueden afectarla.

Encuentra problemas con las imágenes de tu sitio 

We have now looked at how you can optimize your site's images, but how can you find issues that already exist on your site?

You can use the SEMrush Site Audit Tool to highlight these issues. The issues tab of your site audit is perhaps the quickest way to get started, showcasing the following issues:

Imágenes internas y externas rotas

Las imágenes rotas crean una experiencia de usuario deficiente. Debes priorizar arreglar las imágenes que no se visualizan. 

La herramienta de auditoría del sitio resaltará claramente cualquier imagen rota en tu sitio para que puedas actualizar las URLs incorrectas o reemplazar la imagen.

Broken images report from SEMrush site audit tool

La auditoría también resaltará las imágenes externas rotas. La mejor práctica aquí es reemplazar esta imagen, dado que no controlas la fuente. 

Imágenes sin atributos alt

Hemos visto la importancia del texto alt optimizado para tus imágenes. El informe de auditoría del sitio te dará una lista de todas las imágenes que no los tienen actualmente en tu sitio.

Esto hace que el trabajo de agregar texto alt sea un poco más fácil, brindándole una lista para trabajar página por página.

missing alt tags

 


Tomar en serio el SEO para imágenes es de gran importancia para la experiencia del usuario y los motores de búsqueda

Tomarte el tiempo para optimizar tus imágenes correctamente puede tener un impacto notable en el tráfico de tu sitio desde la Búsqueda de imágenes, así como mejorar la experiencia del usuario a través de tiempo de carga más rápido. 

Y no olvidemos que optimizar los nombres de los archivos de imágenes y los atributos alt también ayuda a dar relevancia contextual al resto de tu página, mejorando la visibilidad orgánica de la página como resultado. 

Muchos SEOs pasan por alto la optimización de imágenes, pero con la actualización de Page Experience de Google que se lanzará el próximo año, nunca ha habido un mejor momento para priorizarlo.

Optimización de imágenes - Infográfico

*Este artículo ha sido escrito por el equipo de SEMrush y adaptado al español de su versión original en inglés

Ricardo Mendoza Castro
SEMrush

Empleado de SEMrush.

Ricardo is the International Lead for Spain and Latinamerica at SEMrush. He has experience in different international markets and is acquainted with negotiations with cross-international stakeholders. Currently he is in charge of marketing for the Iberoamerican region.
Enviar opinión
Tu opinión debe contener al menos 3 palabras (10 caracteres).

Solo utilizaremos este e-mail para responder a tus comentarios. Política de privacidad

¡Gracias por tu opinión!