SEO de Imágenes y Etiquetas Alternativas: 10 Consejos para Optimizar Imágenes

Ricardo Mendoza Castro

may 24, 202316 min de lectura
SEO para imágenes y atributos alt: 7 consejos avanzados

TABLA DE CONTENIDOS

¿Qué es el SEO de Imágenes?

El SEO de imágenes hace referencia a la optimización de imágenes para obtener más tráfico en los motores de búsqueda.

Por ejemplo, la optimización SEO de imágenes puede ayudar a que una web aparezca más arriba en Google Imágenes.

Como puedes ver a continuación, Semrush ocupa el segundo lugar en Google Imágenes para la palabra clave "herramienta de investigación de palabras clave de ecommerce":

img-semblog

El SEO de imágenes también puede mejorar la accesibilidad en tu web, la cual se está convirtiendo en un requisito legal en muchos países.

En este artículo, te mostramos cómo agregar el texto alternativo (alt), reducir el tamaño de los archivos de imagen para acelerar los tiempos de carga, aprovechar los datos de imagen estructurados, y mucho más.

Antes de nada, analicemos por qué optimizar el SEO de imágenes es importante. Y luego, ahondaremos en consejos prácticos que puedes implementar en tu web. 

Crea mejor contenido más rápido y supera a tu competencia.

  • Haz que tus imágenes estén optimizadas para SEO
  • Mejora la legibilidad y el interés
  • Mantén un tono de voz constante
  • Utiliza el poder de la IA para generar contenido único

¿Por qué Son tan Importantes las Imágenes?

Las búsquedas de Google Imágenes representan el 22,6% de todas las búsquedas de Google. 

Esta es la razón por la que es crucial prestar atención al SEO de imágenes. De lo contrario, estaremos perdiendo una gran cantidad de tráfico.

El SEO de imágenes puede atraer un tráfico significativo a tu web de dos maneras diferentes:

En primer lugar, optimizar imágenes aumenta la posibilidad de mejorar el posicionamiento en Google Imágenes.

Y, en segundo lugar, las imágenes son una parte importante del SEO on-page.

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

Por ejemplo, si buscamos la palabra clave “ford raptor azul”, podemos ver que Google nos da muchas imágenes antes del primer enlace web.

img-semblog

Además, las imágenes pueden ayudar a los usuarios a comprender e interactuar mejor con el contenido escrito. Y, por supuesto, ayudan a dividir grandes bloques de texto.

Hay pocas cosas menos atractivas que un bloque de texto con varios cientos de palabras

Ahora hablemos de una de las partes más importantes del SEO de imágenes: el texto alternativo.

¿Qué es el Texto Alternativo?

El alt text (o texto alternativo) es una descripción escrita de una imagen.

Los profesionales del SEO a veces se refieren al texto alternativo como "atributos alternativos" o "etiquetas alternativas".

Optimizar el texto alternativo es crucial para que Google posicione tus imágenes en Google Imágenes.

El texto alternativo te permite decirle a Google qué se ve en la imagen. 

Puede contribuir a la accesibilidad de tu web para los usuarios. Además, también sirve para explicarles qué muestra la imagen en caso de que no se visualice. 

Échale un vistazo a este ejemplo de la Universidad de Dayton. Nos explican cómo se ve una imagen cuando se carga correctamente, cuando está rota y no tiene texto alternativo y cuando está rota, pero tiene texto alternativo:

img-semblog

El texto alternativo ayuda a mejorar el SEO de tu web, ya que agrega información. Esto ayuda a Google a comprender mejor el contexto de la imagen a la hora de posicionar la página.

El texto alternativo se usa dentro del código HTML para describir imágenes específicas en una página.

Como esto:

<img src="lindo-gatito-jugando-a-la-pelota.png" alt="lindo gatito jugando con una pelota" />.

img-semblog

Pero no te preocupes: no tienes que saber HTML para optimizar tus etiquetas alt.

Te contamos más a continuación. Primero, profundicemos en escribir un buen texto alternativo y aprendamos cómo añadir el texto alternativo a tus imágenes.

Cómo Optimizar el Texto Alternativo de la Imagen

Al añadir texto alternativo, es mejor describir sin explayarnos.

Imagina que estás hablando por teléfono con alguien y necesitas explicarle lo que ves en una imagen. ¿Cómo se la describirías?

En general, cuando escribes un texto alternativo, lo mejor es ceñirse a un máximo de 125 caracteres. Esto se debe a que la mayoría de los lectores de pantalla (tecnologías de asistencia para ayudar a las personas con discapacidad visual) dejan de leer el texto alternativo después de 125 caracteres.

También es útil incluir palabras clave relevantes en tu texto alternativo, pero hay una delgada línea entre ser específico y ser spam.

Aquí hay un ejemplo de texto alternativo descriptivo versus spam para este par de botas de L.L. Bean:

img-semblog

✅ Descriptivo: botas L.L. Bean de cuero marrón

❌ Spam: L.L. Bean botas de invierno para senderismo de cuero marrón

El ejemplo descriptivo simplemente describe la imagen de forma detallada. Incluye una o dos palabras clave (como "botas L.L. Bean" y "botas de cuero L.L. Bean"). Pero sigue siendo una descripción natural.

El ejemplo de spam intenta incluir demasiadas palabras clave relacionadas que no sirven para describir la imagen.

El texto alternativo optimizado puede ayudar a Google a comprender el contexto de tus imágenes, pero el "relleno de palabras clave" puede crear una experiencia de usuario deficiente. E incluso indicarle a Google que tu página es spam.

Ahora que hemos visto qué evitar, profundicemos en algunos ejemplos más.

Ejemplos de Texto Alternativo

¿Cómo se ve en la práctica un texto alternativo bien optimizado? Veamos algunos ejemplos de malas, buenas, mejores y mejores opciones.

Comencemos con esta foto de Shutterstock:

img-semblog

Mal texto alternativo: alt="gatos"

Buen texto alternativo: alt="gatos durmiendo con ovillo de lana"

Mejor texto alternativo: alt="gatitos pelirrojos durmiendo con ovillo de lana"

Aún mejor texto alternativo: alt="dos gatitos pelirrojos durmiendo con ovillos de lana rosa y morado"

Ahora, ¿qué tal esta captura de pantalla?

img-semblog

Mal texto alternativo: alt="backlinks"

Buen texto alternativo: alt="Backlinks de Adidas"

Mejor texto alternativo: alt="Descripción general de los backlinks de Adidas"

Aún mejor texto alternativo: alt="Descripción general de backlinks de Adidas de Semrush Backlink Analytics"

¿Qué pasa con la imagen de esta freidora de aire?

img-semblog

Mal texto alternativo: alt="freidora de aire"

Buen texto alternativo: alt="freidora de aire plateada"

Mejor texto alternativo: alt="Freidora de aire plateada Cuisinart"

Aún mejor texto alternativo: alt="Freidora de aire plateada Cuisinart cocinando patatas fritas"

Como puedes ver, en cada caso, el mejor texto alternativo es el más descriptivo y más natural.

Agregar Texto Alternativo en WordPress

Puedes añadir texto alternativo optimizado a tu web de WordPress sin saber nada sobre HTML.

Una vez hayas subido una imagen a tu galería de fotos, puedes añadirle los detalles, incluido el texto alternativo.

Aquí tienes ejemplo de Insider de cómo se ve:

img-semblog

Una vez que escribas el texto alternativo, esa imagen tendrá texto alternativo cada vez que se use en la web (también puedes editarla más tarde).

Añadir texto alternativo a la imagen también es fácil en otros sistemas de administración de contenido, como Wix, Squarespace o Shopify.

10 Consejos para Optimizar tus Imágenes para SEO

Si bien las etiquetas alt son importantes, optimizar tus de imágenes para SEO implica mucho más. 

Hay una serie de cosas que pueden mejorar el rendimiento orgánico general de tu web y ayudarte a posicionar mejor en Google Imágenes.

Aquí tienes diez consejos para mejorar el SEO de tus imágenes:

1. Nombra tus Imágenes Correctamente

De acuerdo con la Guía de SEO de imágenes de Google, es importante utilizar nombres de archivo descriptivos.

Veamos esta imagen de unas zapatillas Nike Fuerza Aérea 1 como ejemplo:

img-semblog

Tu ordenador puede generar el nombre de archivo “IMG00353.JPG” cuando guardas la imagen, pero eso no le dice a Google qué se ve en la fotografía. 

Un nombre de archivo descriptivo sería: blanco-air-force-1-rayas-pastel.jpg.

Ponles nombres descriptivos a tus imágenes antes de subirlas a tu web.

Además, Google recomienda usar guiones en lugar de guiones bajos para separar palabras.

Y si planeas traducir o localizar una página web, acuérdate de cambiar los nombres de los archivos en consecuencia.

2. Cambia el Tamaño de las Imágenes a las Dimensiones de la Pantalla

Cuando se trata de la experiencia del usuario, la velocidad de carga de la página es crucial. Es fácil ralentizar accidentalmente una página si no se presta atención al tamaño de los archivos.

Digamos que sacas una foto con tu teléfono. La mayoría de los teléfonos inteligentes sacan fotos de al menos 4032 píxeles por 3024 píxeles.

Si el ancho máximo de la imagen en tu web es de 600 píxeles, esa imagen es mucho más grande de lo que debería ser. Lo que puede ralentizar tu página.

Para evitar este problema, cambia el tamaño de las imágenes a las dimensiones de visualización máximas antes de cargarlas.

Puedes cambiar el tamaño de las imágenes manualmente con Photoshop o una herramienta más simple como Canva.

O si usas WordPress, puedes usar un plugin como Resize Image After Upload.

Simplemente, selecciona la función "Habilitar cambio de tamaño", elige los tamaños que quieras y estarás listo para comenzar:

img-semblog

También te tienes que asegurar de que estás escalando las imágenes de forma receptiva para CSS.

3. Comprime Imágenes

Cambiar el tamaño de tus imágenes no es la única forma de reducir el tamaño de los archivos.

También puedes comprimir las imágenes para disminuir los tiempos de carga de la página.

Comprimir una imagen significa minimizar el tamaño del archivo sin comprometer la calidad en un grado inaceptable.

Esencialmente, el objetivo es minimizar cualquier redundancia en los datos de la imagen a favor de la eficiencia y velocidades de carga más rápidas cuando usa la imagen.

¿Cómo puedes reducir el tamaño de archivo de una imagen?

Existe una gran variedad de herramientas fáciles de usar como Optimizilla, TinyPNG, o ImageOptim para comprimir tus imágenes.

O, si estás usando WordPress, puedes probar Smush.

img-semblog

Arrastra y suelta tus archivos en ImageOptim y automáticamente obtendrás un nuevo archivo con una imagen comprimida.

También puedes utilizar una de las tres herramientas de código abierto recomendadas por Google:

4. Elige el Formato Correcto

Ahora que hemos hablado de la compresión de imágenes, toca revisar los formatos de imagen más comunes.

No existe un formato correcto y único para usar. Depende de la imagen que quieras usar y de cómo planeas usarla.

Aquí tienes un desglose básico de cómo elegir:

  • jpeg: es el formato de imagen más popular. Úsalo para fotos o ilustraciones. También puede ser útil para enviar imágenes con vista previa por correo electrónico, ya que se pueden comprimir a tamaños muy pequeños.
  • PNG: úsalo si necesitas usar transparencia en el fondo de la imagen.
  • WebP: úsalo si quieres una compresión más alta que un JPEG o PNG. Sirve para imágenes e imágenes animadas sin sacrificar la profundidad de color, marcos animados, etc., pero no funciona con navegadores más antiguos.
  • SVG: se utiliza para iconos o logotipos.

5. Crea un Sitemap de 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.

Un sitemap de imágenes es muy parecido a un sitemap regular, sitemap XML, salvo que un sitemap de imágenes solo incluye las URL de las imágenes.

La creación de un sitemap que incluya las URL de todas las imágenes de tu web ayuda a Google a descubrir esas imágenes e incluirlas en los resultados de búsqueda de imágenes.

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

Los sitemaps de imágenes pueden contener direcciones URL de otros dominios, lo que significa que puede alojar imágenes en una red de entrega de contenido o CDN (te contamos más sobre esto más adelante).

Cómo Crear un Sitemap de Imágenes

Puedes crear un sitemap de imágenes manualmente o con un generador de sitemaps.

Para crear uno manualmente, puedes seguir las instrucciones de Google.

En este ejemplo de sitemap, se incluyen dos imágenes:

img-semblog

Con un sitemap de imágenes, puedes incluir hasta 1000 imágenes para cada página.

Google también ofrece una lista de etiquetas de imágenes.

Deberás usar los marcados como "Requeridos". 

Las etiquetas opcionales, por otro lado, están ahí para proporcionar más contexto para los motores de búsqueda, así como para mejorar la experiencia de usuario.

img-semblog

Si bien existen plugins para generar sitemaps, Google anunció recientemente que algunas etiquetas de extensión del sitemap desaparecerá en cuestión de meses.

No se necesita ninguna acción actualmente si administras tu propio sitemap, pero deberías tener cuidado al usar extensiones en el futuro en caso de que no se actualicen para que tu posicionamiento siga funcionando correctamente. 

6. Utiliza una Red de Entrega de Contenido

Una red de distribución de contenido (Content Distribution Network, o CDN, en inglés) hace que las imágenes y otros contenidos se carguen más rápido.

Una CDN es un grupo de servidores ubicados en diferentes lugares del mundo. Esto permite una distribución más rápida del contenido a ubicaciones separadas.

Supongamos que te encuentras en Estados Unidos. Será mucho más rápido cargar contenido desde un servidor de Estados Unidos que desde un servidor con sede en Asia.

Fíjate en esta imagen: muestra el servidor original u "origen", además de los servidores CDN en otras ubicaciones.

Puedes ver que los usuarios obtendrán su contenido del servidor CDN más cercano a ellos:

img-semblog

Puedes configurar fácilmente un CDN en WordPress a través de plugins como Caché total W3

7. Implementa la Carga Diferida

Cuando se trata de la velocidad de carga lenta de la página, las imágenes suelen ser las principales culpables.

Una de las mejores maneras de resolver este problema:

Usar la "carga diferida" (o “lazy loading”). Esta le dice a los navegadores web que esperen para cargar una imagen hasta que se necesite.

Lo que significa que la página se carga mucho más rápido cuando el usuario llega por primera vez a ella. Y no solo se usa para imágenes; recursos como JavaScript también se pueden cargar de esta manera.

Aquí tienes un ejemplo visual de carga diferida del blog de Google Chrome:

img-semblog

Piénsalo de esta manera: si un usuario no se desplaza hacia abajo a la segunda mitad de una página, esos activos no se cargarán. Y esto mejora el rendimiento de forma notable.

Como señala Google, debes evitar la carga diferida de imágenes en la mitad superior de la página. Porque puede crear una mala experiencia de usuario.

8. Aprovecha el Almacenamiento en Caché del Navegador

En PageSpeed Insights a menudo recomiendan aprovechar el almacenamiento en caché del navegador.

El almacenamiento en caché del navegador es cuando los archivos son almacenados por el navegador de un visitante. Esto significa que los activos se cargarán más rápido la próxima vez que el usuario visite la página.

Aquí tienes un ejemplo:

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 visites la página, todos estos deberán descargarse de nuevo.

Pero con el almacenamiento en caché del navegador, el navegador ya los tendrá almacenados, lo que significa que la página se cargará mucho más rápido.

El almacenamiento en caché del navegador tiene un impacto notable en las webs donde los usuarios vuelven a visitar las mismas páginas con frecuencia.

Aquí tienes las Recomendaciones de almacenamiento en caché de Google.

Si usas WordPress, uno de los plugins de caché más populares te puede ayudar a implementarlo rápidamente. Si no, esta guía de GTmetrix te ayudará a hacerlo.

9. Agrega Datos Estructurados de Imágenes

Los datos estructurados son un conjunto de datos que ayuda a los motores de búsqueda a entender qué hay y de qué va tu web con mayor claridad.

El uso de datos estructurados también aumenta las posibilidades de que tus imágenes se muestren como “fragmentos enriquecidos.”

Aquí tienes un ejemplo de schema de una receta. Este tipo de fragmento enriquecido muestra una imagen relacionada, reseñas de la receta, el tiempo que se tarda en prepararla y hasta una lista de ingredientes:

img-semblog

Los datos estructurados no necesariamente mejoran el posicionamiento de la web.

Sin embargo, mejoran tu lista de búsqueda de imágenes. 

Por ejemplo, supongamos que quieres añadir un blog de recetas en tu sitio web. Puedes usar datos estructurados de imágenes para mostrar que una imagen en particular pertenece a una receta.

Actualmente, Google Imágenes admite los siguientes tipos de datos estructurados:

img-semblog
img-semblog
img-semblog

Para obtener más información sobre cómo implementar datos estructurados para imágenes, consulta las Directrices de Google.

Mientras tanto, aquí tienes un par de conclusiones clave:

1. Si planeas usar datos estructurados en una imagen, asegúrate de que la imagen sea relevante para la página en la que aparece. Por ejemplo, si usas datos estructurados de recetas, la imagen que elijas debe mostrar una receta completa. 

2. Todas las URL de imágenes deben ser rastreables e indexables. De lo contrario, Google no podrá encontrarlas ni mostrarlas en sus páginas de resultados.

10. Optimiza para Open Graph y Twitter Cards

El uso de imágenes también es una parte importante de la estrategia de redes sociales. Aquí es donde entra Open Graph.

Open Graph es un protocolo de Internet (o conjunto de reglas) introducido originalmente por Facebook (ahora Meta).

Las etiquetas Open Graph te permiten elegir cómo aparecerá una vista previa de una publicación en redes sociales. De este modo, puedes elegir el título de la vista previa, su imagen, entre otros, para las publicaciones sociales.

Por ejemplo: para asegurarte de que la imagen que seleccionaste aparece cuando compartes una página, incluye esta etiqueta de imagen en la sección <head> del HTML de tu página de la siguiente manera:

<meta property="og:image" content="http://site.com/image-link.jpg" />

En la práctica, cuando la compartas en redes sociales, se verá así:

img-semblog

Open Graph se aplica a Facebook y Pinterest, mientras que Twitter usa Twitter Cards.

Para Twitter, este es el código que deberás agregar a la sección <head>:

<meta name="twitter:card" content="brief"></meta>

Puedes usar un plugin como Yoast o RankMath para configurar estas etiquetas de imagen y obtener una vista previa de sus publicaciones.

Detecta Problemas en las Imágenes de tu Web

Hemos visto cómo optimizar el SEO de las imágenes de tu web. Pero, ¿cómo puedes encontrar errores de este tipo?

Puedes utilizar nuestra herramienta Auditoría del sitio para encontrar estos problemas.

Solo dirígete a Auditoría del sitio y haz clic en la pestaña “Problemas”. 

img-semblog

La herramienta generará un listado de errores, advertencias y avisos:

img-semblog

Puedes desplazarse por la página para tener una idea general de qué errores tienes que abordar, o también puedes usar la barra de búsqueda para restringir los resultados.

Para encontrar problemas con las imágenes, filtra por la palabra "imagen".

img-semblog

Como puedes ver, hay un error con respecto a 16 imágenes internas rotas:

img-semblog

Si haces clic en el texto de anclaje que dice "16 imágenes internas están rotas", podrás ver qué imágenes están causando problemas y en qué páginas se encuentran:

img-semblog

Auditoría del sitio también resaltará cualquier imagen externa rota.

Las puedes encontrar en la sección "Advertencias". En este caso, no hay imágenes externas rotas en la web:

img-semblog

Imágenes sin Atributos Alt

Si quieres que tus imágenes se posicionen en Google, es extremadamente importante que añadas un texto alternativo.

Puedes volver a usar la herramienta Auditoría del sitio para conseguir una lista de todas las imágenes que hay en tu web sin texto alternativo.

Una vez que abras la herramienta Auditoría del sitio, vuelve a la pestaña "Problemas".

img-semblog

En "Advertencias", desplázate hacia abajo hasta "x imágenes no tienen atributos ALT".

img-semblog

Para saber cómo solucionar cualquier problema de la lista, haz clic en "Por qué y cómo solucionarlo". 

De este modo, te aparecerá una ventana emergente con una descripción general y enlaces a recursos adicionales, como este:

img-semblog

A continuación, haz clic en la cantidad de atributos alternativos que faltan ("165 imágenes" en este caso). La herramienta te devolverá la lista completa de imágenes que no tienen atributos alternativos.

img-semblog

Inicia sesión en tu CMS y añade texto alternativo a cualquier imagen que no lo tenga para corregirlas.

Como Conclusión

Tomarte un tiempo para optimizar las imágenes de tu web correctamente puede tener un impacto notable en su tráfico.

Además, puede mejorar la experiencia de usuario, reduciendo en gran medida tiempos de carga y mejorando la accesibilidad. 

Como puedes ver, esto se pierde si se ignora el SEO de imágenes. 

Para obtener aún más consejos de SEO en la página, visita nuestra guía de SEO on page.

Compartir
Author Photo
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.
Más sobre esto