Prácticas recomendadas de SEO para Google Imágenes

Google ofrece varias funciones y productos de la Búsqueda que ayudan a los usuarios a descubrir visualmente información en la Web, como las imágenes de resultados de texto, Google Descubre y Google Imágenes. Si bien cada función y producto se ve diferente, las recomendaciones generales para que aparezcan las imágenes son las mismas.

Si quieres optimizar tus imágenes para que aparezcan en los resultados de la Búsqueda de Google, sigue estas prácticas recomendadas:

1. Ayúdanos a descubrir e indexar tus imágenes
2. Cómo optimizar las páginas de destino de imágenes

Ayúdanos a descubrir e indexar tus imágenes

Los requisitos técnicos para que tu contenido se muestre en los resultados de la Búsqueda de Google también se aplican a las imágenes. Debido a que las imágenes tienen un formato bastante diferente al de HTML, existen requisitos adicionales para indexarlas. Por ejemplo, encontrar las imágenes en tu sitio se realiza de manera diferente, y la presentación de las imágenes también influye en que una imagen se indexe, así como las palabras clave correctas.

Usa elementos de imagen HTML para incorporar 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> (incluso si es un elemento secundario de otros elementos, como el elemento <picture>). Google no indexa imágenes de CSS.

Bueno:

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

Incorrecto:

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

Usa un mapa del sitio de imágenes

Proporciona un mapa del sitio de imágenes para incluir la URL de imágenes que, de lo contrario, no habríamos descubierto.

A diferencia de los mapas del sitio normales, puedes incluir URLs de otros dominios en los elementos <image:loc> de los mapas del sitio de imágenes. De esa forma, puedes usar CDN (redes de distribución de contenidos) para alojar imágenes. Si usas una CDN, te recomendamos que verifiques la propiedad del nombre de dominio de la CDN en Search Console para que podamos comunicarte cualquier error de rastreo que encontremos.

Imágenes responsivas

Diseñar páginas web responsivas mejora la experiencia del usuario, ya que las personas pueden acceder a ellas desde una gran variedad de tipos de dispositivos. Consulta nuestra guía de imágenes responsivas para obtener información sobre las prácticas recomendadas para el manejo de imágenes en tu sitio web.

Las páginas web usan el elemento <picture> o el atributo srcset de un elemento img para especificar imágenes responsivas. Sin embargo, algunos navegadores y rastreadores no comprenden esos atributos. Te recomendamos que especifiques siempre una URL de resguardo con el atributo src.

El atributo srcset permite especificar distintas versiones de la misma imagen, particularmente para tamaños de pantalla diferentes. 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 usa para agrupar diferentes versiones <source> de la misma imagen. Brinda un enfoque de resguardo para que el navegador pueda elegir la imagen adecuada según las funcionalidades del dispositivo, como la densidad de píxeles y el tamaño de pantalla. El elemento picture también es útil para usar formatos de imagen nuevos con degradación elegante integrada para clientes que todavía no admitan formatos nuevos.

De acuerdo con la Sección 4.8.1 del estándar HTML, asegúrate de proporcionar un elemento img como resguardo con un atributo src cuando usas 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, SVG y AVIF . También te recomendamos que la extensión del nombre de archivo coincida con el tipo de archivo.

También puedes intercalar imágenes como URIs de datos, que proporcionan una forma de incluir un archivo (por ejemplo, una imagen) de manera intercalada configurando el atributo src de un elemento img como una cadena codificada en base64 mediante el siguiente formato:

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

Aunque las imágenes intercaladas pueden reducir las solicitudes HTTP, analiza cuidadosamente cuándo usarlas, ya que es posible que aumenten el tamaño de la página de manera considerable. Para obtener más información, consulta la sección sobre los pros y los contras de intercalar imágenes en nuestra página de web.dev.

Optimiza para lograr velocidad y calidad

Las fotos de buena calidad son más atractivas para los usuarios que las imágenes borrosas y poco claras. Además, las imágenes definidas son más atractivas para los usuarios en la miniatura del resultado y pueden aumentar las probabilidades de obtener tráfico. Dicho esto, las imágenes suelen ser lo que más influye en el tamaño general de una página, y pueden provocar que la carga sea lenta y costosa. Asegúrate de utilizar la optimización de imágenes más reciente y técnicas responsivas de imágenes para proporcionarle al usuario una experiencia rápida y de alta calidad.

Analiza la velocidad de tu sitio con PageSpeed Insights y consulta la sección ¿Por qué la velocidad es importante? a fin de obtener información sobre las prácticas recomendadas y las técnicas para mejorar el rendimiento del sitio web.

Cómo optimizar las páginas de destino de imágenes

Si bien no es algo que se note de inmediato, el contenido y los metadatos de las páginas en las que se incorpora una imagen pueden influir mucho en cómo y dónde puede aparecer en los resultados de la Búsqueda de Google.

Verifica la descripción y el título de la página

La Búsqueda de Google genera automáticamente un fragmento y un vínculo de título para brindar la mejor explicación posible sobre cada resultado y cómo se relaciona con la búsqueda del usuario. Eso ayuda al usuario a decidir si quiere hacer clic en un resultado o no. A continuación, se incluyen dos ejemplos de cómo podrían verse el fragmento y los vínculos de título en una página de resultados de búsqueda de Google:

Para obtener esos datos, usamos varias fuentes e incluimos información en las etiquetas title y meta de cada página.

Puedes ayudarnos a mejorar la calidad del vínculo del título y del fragmento que se muestran para tus páginas siguiendo los lineamientos para títulos y fragmentos de Google.

Agrega datos estructurados

Si incluyes datos estructurados, Google puede mostrar tus imágenes en determinados resultados enriquecidos, como una insignia destacada en Google Imágenes, que brinda información relevante a los usuarios sobre tu página y puede dirigir tráfico mejor orientado a tu sitio.

Sigue los lineamientos generales para datos estructurados y cualquier otro lineamiento específico para el tipo de datos estructurados que uses; de lo contrario, es posible que estos no sean aptos para aparecer en los resultados enriquecidos de Google Imágenes. El atributo de la imagen es un campo obligatorio para habilitar a cada uno de los tipos de datos estructurados a incluir una insignia y aparecer en los resultados enriquecidos de Google Imágenes. Estos son dos ejemplos de cómo podrían verse los resultados enriquecidos en Google Imágenes:

Usa nombres de archivos, títulos y textos alternativos descriptivos

Para obtener información sobre el tema de la imagen, Google recurre al contenido de la página, incluidos los subtítulos de las imágenes y las leyendas. Cuando sea posible, asegúrate de que las imágenes estén ubicadas cerca de texto relevante y en páginas que sean relevantes para el tema de la imagen.

Del mismo modo, el nombre del archivo puede darle a Google pistas muy claras sobre el tema de la imagen. Cuando sea posible, usa 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 en tu sitio hay miles de imágenes, quizá te interese automatizar el proceso para nombrarlas. Si localizas las imágenes, recuerda también traducir los nombres de archivo y ten en cuenta los lineamientos de codificación de URLs si usas 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 (texto que describe una imagen), que también mejora la accesibilidad para las personas que no pueden ver imágenes en páginas web, incluidos los usuarios que usan lectores de pantalla o tienen conexiones de ancho de banda bajas.

Google usa texto alternativo junto con algoritmos de visión artificial y el contenido de la página para comprender el tema de la imagen. Además, el texto alternativo de las imágenes es útil como texto de hipervínculo si decides usar una imagen como vínculo.

Cuando escribas el texto alternativo, enfócate en crear contenido informativo y útil que utilice palabras clave de manera adecuada y sea coherente con el contenido de la página. Evita completar los atributos alt con palabras clave (también conocidas como palabras clave de relleno), ya que genera una experiencia del usuario negativa y puede provocar que tu sitio sea considerado spam.

Incorrecto (texto alternativo faltante):

<img src="puppy.jpg"/>

Incorrecto (uso de palabras clave de relleno):

<img src="puppy.jpg" alt="cachorro perro bebé cachorritos cachorros cachorros pequeños perro retriever labrador lobero setter pointer cachorro jack russell terrier cachorros comida para perros comida para perros barata comida para cachorros"/>

Correcto:

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

Mejor:

<img src="puppy.jpg" alt="Cachorro dálmata jugando a atrapar algo"/>

Además, ten en cuenta la accesibilidad del texto alternativo, según los lineamientos de W3. Para el elemento <img>, puedes agregar el atributo alt del elemento, mientras que para los elementos <svg> intercalados, 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>

Recomendamos probar el contenido auditando su accesibilidad y usando un emulador de conexión de red lenta.

Inhabilita los vínculos intercalados en la búsqueda de Google Imágenes

Si quieres, puedes impedir que aparezca la imagen en tamaño completo en la página de resultados de la búsqueda de Google Imágenes. Para ello, inhabilita los vínculos intercalados. Para inhabilitar los vínculos intercalados, haz lo siguiente:

1. Cuando se solicite la imagen, examina el encabezado de referencia HTTP en 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 y sin contenido.

Google rastreará tu página de todos modos y verá la imagen, pero mostrará una miniatura generada durante el rastreo en los resultados de la búsqueda. Esta inhabilitación es posible en cualquier momento, y no es necesario volver a procesar las imágenes de un sitio web. Este comportamiento no se considera encubrimiento de imágenes y no tendrá como resultado acciones manuales.

También puedes impedir por completo que la imagen aparezca en los resultados de la búsqueda.

Optimiza las imágenes para SafeSearch

SafeSearch es un parámetro de configuración para cuentas de usuario de Google que especifica si se deben mostrar, desenfocar o bloquear imágenes, videos y sitios web explícitos en los resultados de la Búsqueda de Google. Asegúrate de que Google comprenda la naturaleza de tu sitio para que pueda aplicar filtros de SafeSearch en él si corresponde. Obtén más información sobre el etiquetado de páginas para SafeSearch.