Prácticas recomendadas de SEO para Google Imágenes

Google ofrece varios productos y funciones de resultados de la Búsqueda para que los usuarios descubran visualmente información en la Web, como las imágenes de resultados de texto, Google Discover y Google Imágenes. Aunque cada función y cada producto tiene un aspecto diferente, las recomendaciones generales para que aparezcan imágenes en ellos son las mismas.

Puedes optimizar tus imágenes para que aparezcan en los resultados de búsqueda de Google siguiendo estas prácticas recomendadas:

1. Ayúdanos a descubrir e indexar tus imágenes
2. Optimiza las páginas de destino de las imágenes

Ayúdanos a descubrir e indexar tus imágenes

Los requisitos técnicos para que tu contenido aparezca en los resultados de búsqueda de Google también se aplican a las imágenes. Dado que las imágenes tienen un formato sustancialmente diferente en comparación con HTML, existen requisitos adicionales para que se indexen. Por ejemplo, encontrar imágenes en tu sitio es diferente, y la presentación de las imágenes también afecta a si una imagen se indexa o no para las palabras clave adecuadas.

Usa elementos de imagen HTML para insertar imágenes

El uso de elementos de imagen HTML estándar ayuda a los rastreadores a encontrar y procesar imágenes. Google puede encontrar imágenes en el atributo src del elemento <img> (aunque sea un elemento secundario de otros elementos, como el elemento <picture>). Google no indexa imágenes CSS.

Correcto:

<img src="puppy.jpg" alt="cachorro de golden retriever" />

Opción incorrecta:

<div style="background-image:url(puppy.jpg)">cachorro de golden retriever</div>

Utiliza un sitemap de imágenes

Si añades un sitemap de imágenes, puedes indicar la URL de imágenes que no descubriríamos de otro modo.

A diferencia de los sitemaps normales, puedes incluir URLs de otros dominios en los elementos <image:loc> de los sitemaps de imágenes. De este modo, puedes alojar imágenes en redes de distribución de contenido (CDN). Si usas una CDN, te recomendamos que verifiques que eres el propietario del nombre de dominio de la CDN en Search Console para que podamos notificarte cualquier error que se produzca al rastrearla.

Imágenes adaptables

El diseño de páginas web adaptables mejora la experiencia de usuario, ya que se puede acceder a ellas desde cualquier tipo de dispositivo. Consulta nuestra guía sobre imágenes adaptables para obtener información sobre las prácticas recomendadas a la hora de gestionar las imágenes que aparecen en tu sitio web.

Las páginas web utilizan el elemento <picture> o el atributo srcset de un elemento img para especificar imágenes adaptables. Sin embargo, algunos navegadores y rastreadores no interpretan estos atributos. Te recomendamos que incluyas siempre una URL alternativa mediante el atributo src.

Con el atributo srcset puedes indicar diferentes versiones de la misma imagen en función del tamaño de pantalla. Por ejemplo:

<img
  srcset="maine-coon-nap-320w.jpg 320w, maine-coon-nap-480w.jpg 480w, maine-coon-nap-800w.jpg 800w"
  sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px"
  src="maine-coon-nap-800w.jpg"
  alt="A watercolor illustration of a maine coon napping leisurely in front of a fireplace">

El elemento <picture> es un contenedor que se utiliza para agrupar diferentes versiones <source> de la misma imagen. Ofrece un enfoque alternativo para que el navegador pueda elegir la imagen adecuada en función de las características del dispositivo, como la densidad de píxeles y el tamaño de la pantalla. Ese elemento picture también resulta útil para usar nuevos formatos de imagen con degradación gradual integrada para los clientes que aún no los hayan implementado.

De acuerdo con la Sección 4.8.1 del estándar HTML, asegúrate de proporcionar un elemento img como respaldo con un atributo src cuando uses el elemento picture con el siguiente formato:

<picture>
  <source type="image/svg+xml" srcset="pyramid.svg">
  <source type="image/webp" srcset="pyramid.webp">
  <img src="pyramid.png" alt="An 1800s oil painting of The Great Pyramid">
</picture>

Usa formatos de imagen admitidos

La Búsqueda de Google admite imágenes a las que se hace referencia en el atributo src de img en los siguientes formatos de archivo: BMP, GIF, JPEG, PNG, WebP y SVG. También te recomendamos que la extensión del nombre de archivo coincida con el tipo de archivo.

También puedes insertar imágenes en URIs de datos Con los URIs de datos, puedes insertar archivos, como imágenes, dando como valor al atributo src de un elemento img una cadena codificada en Base64 que tenga este formato:

<img src="data:image/svg+xml;base64,[data]">

Aunque insertar imágenes puede reducir el número de solicitudes HTTP que se hacen, ten cuidado cuando las utilices, ya que también pueden aumentar el tamaño de la página. Consulta más información en el apartado con las ventajas y desventajas de insertar imágenes que encontrarás en nuestra página web.dev.

Optimiza la velocidad y la calidad

Las fotos de alta calidad atraen más a los usuarios que las imágenes borrosas y poco claras. Además, en la miniatura de resultados, si las imágenes son nítidas también atraen más a los usuarios y pueden aumentar la probabilidad de recibir tráfico de estos usuarios. Dicho esto, las imágenes suelen ser los elementos que más incrementan el tamaño general de las páginas y hacen que sean más lentas y difíciles de cargar. Para ofrecer una experiencia rápida y de alta calidad a los usuarios, utiliza las técnicas más recientes de optimización y adaptación de imágenes.

Analiza la velocidad de tu sitio con PageSpeed Insights y consulta por qué es importante la velocidad si quieres descubrir prácticas recomendadas y técnicas con las que mejorar el rendimiento de tu sitio web.

Optimiza las páginas de destino de las imágenes

Aunque no resulte obvio a primera vista, el contenido y los metadatos de las páginas en las que se inserta una imagen pueden influir en gran medida en cómo y dónde puede aparecer la imagen en los resultados de búsqueda de Google.

Revisa el título y la descripción de las páginas

La Búsqueda de Google genera automáticamente enlaces de título y fragmentos para explicar de la mejor forma posible los resultados y por qué están relacionados con las consultas de los usuarios. Esta información ayuda a los usuarios a decidir si hacer clic en un resultado o no. A continuación, se muestran dos ejemplos de cómo pueden aparecer los enlaces de título y fragmentos en una página de resultados de búsqueda de Google:

Conseguimos esta información de varias fuentes distintas, como los datos que se encuentran en las etiquetas title y meta de cada página.

Si quieres ayudarnos a mejorar la calidad de los enlaces de título y los fragmentos de tus páginas, sigue las directrices de títulos y fragmentos de Google.

Añade datos estructurados

Si incluyes datos estructurados, Google puede mostrar tus imágenes en determinados resultados enriquecidos e incluir una insignia destacada en Google Imágenes. Esto proporciona a los usuarios información esencial sobre tu página, que de esta manera recibe visitas de un segmento de audiencia más adecuado.

Sigue las directrices generales de datos estructurados, así como las directrices específicas de tu tipo de datos estructurados; de lo contrario, podrían no incluirse cuando se muestre un resultado enriquecido en Google Imágenes. En cada uno de estos tipos de datos, el atributo de imagen es un campo obligatorio para que en Google Imágenes la imagen pueda aparecer con una insignia y como resultado enriquecido. A continuación se muestran dos ejemplos de cómo pueden aparecer los resultados enriquecidos en Google Imágenes:

Usa nombres de archivo, títulos y texto alternativo descriptivos

Google extrae información sobre el tema de la imagen del contenido de la página, incluidos los títulos y subtítulos de las imágenes. Siempre que sea posible, asegúrate de que las imágenes se muestran cerca del texto correspondiente y en páginas relacionadas con la imagen en cuestión.

Del mismo modo, el nombre del archivo puede darnos pistas sobre la temática de la imagen. Siempre que sea posible, utiliza nombres que sean cortos, pero descriptivos. Por ejemplo, my-new-black-kitten.jpg es mejor que IMG00023.JPG. Evita usar nombres de archivo genéricos, como image1.jpg, pic.gif o 1.jpg, siempre que sea posible. Si tu sitio tiene miles de imágenes, puedes automatizar el proceso de poner nombre a las imágenes. Si localizas las imágenes, recuerda que también debes traducir los nombres de los archivos teniendo en cuenta las directrices de codificación de URLs si utilizas caracteres no latinos o especiales.

El atributo más importante a la hora de proporcionar más metadatos para una imagen es el texto alternativo (el texto que describe una imagen), que también mejora la accesibilidad para los usuarios que no pueden ver imágenes en las páginas web, incluidos los usuarios que utilicen lectores de pantalla o tengan conexiones con poco ancho de banda.

Para averiguar la temática de las imágenes, usamos su texto alternativo junto con algoritmos de visión artificial y el contenido de las páginas en que se encuentran. Además, el texto alternativo puede servir de texto de enlace si decides usar imágenes como enlaces.

Al escribir texto alternativo, céntrate en crear contenido útil y que contenga mucha información, que use palabras clave de manera apropiada y que coincida con el contenido de la página. No incluyas un exceso de palabras clave en los atributos alt, ya que provoca una mala experiencia de usuario y puede hacer que tu sitio se considere spam.

Opción incorrecta (falta texto alternativo):

<img src="puppy.jpg"/>

Opción incorrecta (exceso de palabras clave):

<img src="puppy.jpg" alt="cachorro perro bebé perros cachorros cachorrillo perritos retriever labrador perro lobo setter irlandés cachorros de terrier comida barata cachorrito pienso perro"/>

Opción correcta:

<img src="puppy.jpg" alt="cachorro"/>

Opción óptima:

<img src="puppy.jpg" alt="cachorro de dálmata jugando a traer cosas"/>

También debes tener en cuenta la accesibilidad del texto alternativo, de acuerdo con las directrices de W3. En el caso del elemento <img>, puedes añadir el atributo alt del elemento, mientras que en el caso de elementos <svg> insertados, puedes usar el elemento <title>. Por ejemplo:

<svg aria-labelledby="svgtitle1">
  <title id="svgtitle1">Googlebot wearing an apron and chef hat, struggling to make pancakes on the stovetop</title>
</svg>

Te recomendamos que pruebes tu contenido mediante una auditoría de accesibilidad o mediante un emulador de conexiones de red lentas.

Inhabilitar los enlaces insertados de Google Imágenes

Si quieres evitar que tus imágenes se muestren a tamaño completo en la página de resultados de búsqueda de Google Imágenes, inhabilita los enlaces insertados en estos resultados. Para inhabilitar los enlaces insertados, sigue estos pasos:

1. Cuando se solicite una de tus imágenes, examina el encabezado HTTP referente de la solicitud.
2. Si la solicitud proviene de un dominio de Google, responde con un código de estado HTTP 200 o un código de estado HTTP 204, pero ningún contenido.

Google seguirá rastreando tu página y detectando la imagen en cuestión, pero en los resultados de búsqueda aparecerá una miniatura de la imagen generada durante el rastreo. Puedes inhabilitar los enlaces insertados en cualquier momento; al hacerlo, no es necesario volver a procesar las imágenes de tu sitio web. Este comportamiento no se considera encubrimiento de imágenes y no se aplicará ninguna acción manual.

También puedes impedir que tus imágenes aparezcan en los resultados de búsqueda.

Optimizar el contenido para Búsqueda Segura

Búsqueda Segura es un ajuste de las cuentas de usuario de Google que indica si se deben mostrar, desenfocar o bloquear imágenes, vídeos o sitios web que incluyan contenido explícito en los resultados de la Búsqueda de Google. Asegúrate de que Google sepa de qué trata tu sitio para que pueda aplicar los filtros de Búsqueda Segura si procede. Más información sobre cómo etiquetar páginas para Búsqueda Segura