Mejores prácticas de SEO para imágenes de Google

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

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

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 son un formato sustancialmente diferente al HTML, existen requisitos adicionales para que las imágenes sean indexadas; por ejemplo, encontrar las imágenes en tu sitio es diferente, y la presentación de las imágenes también influye en si una imagen se indexa y para las palabras clave correctas.

Usa elementos de imagen HTML para incrustar 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 src atributo de un <img> elemento (incluso cuando es hijo de otros elementos, como el <picture> elemento). Google no indexa imágenes CSS.

Bien:

<img src=”puppy.jpg” alt=”Un cachorro de Golden Retriever” />

Mal:

<div style=”background-image:url(puppy.jpg)”>Un cachorro de Golden Retriever</div>

Usa un sitemap de imágenes

Puedes proporcionar la URL de imágenes que de otro modo no habríamos descubierto
enviando un sitemap de imágenes.

A diferencia de los sitemaps regulares, puedes incluir URLs de otros dominios en los
<image:loc> elementos de los sitemaps de imágenes. Esto te permite usar CDNs (redes de entrega de contenido) para alojar imágenes. Si estás usando una CDN, te recomendamos
verificar la propiedad
del nombre de dominio de la CDN en Search Console para que podamos informarte de cualquier error de rastreo que encontremos.

Imágenes responsivas

Diseñar páginas web responsivas conduce a una mejor experiencia de usuario, ya que las personas pueden acceder a ellas a través de una gran variedad de tipos de dispositivos. Consulta nuestra
guía de imágenes responsivas
para aprender sobre las mejores prácticas para manejar imágenes en tu sitio web.

Las páginas web usan el <picture> elemento o el srcset atributo de un
img elemento para especificar imágenes responsivas. Sin embargo, algunos navegadores y rastreadores no entienden estos atributos. Recomendamos que siempre especifiques una URL de respaldo usando el
src atributo.

El srcset atributo permite especificar diferentes versiones de la misma imagen, específicamente para diferentes tamaños de pantalla. Por ejemplo:

El <picture> elemento es un contenedor que se usa para agrupar diferentes
<source> versiones de la misma imagen. Ofrece un enfoque de respaldo para que el navegador pueda elegir la imagen correcta según las capacidades del dispositivo, como la densidad de píxeles y el tamaño de la pantalla. El picture elemento también es útil para usar nuevos formatos de imagen con degradación elegante incorporada para clientes que aún no admitan los nuevos formatos.

Según la
sección 4.8.1 del estándar HTML, asegúrate de proporcionar un img elemento como respaldo con un src
atributo al usar el picture elemento usando el siguiente formato:

Usa formatos de imagen compatibles

La Búsqueda de Google admite imágenes referenciadas en el src atributo de img en los siguientes formatos de archivo:

BMP, GIF, JPEG, PNG, WebP, SVG y AVIF. También es una buena idea que la extensión de tu nombre de archivo coincida con el tipo de archivo. También puedes incluir imágenes en línea como Data URIs. Las Data URIs proporcionan una forma de incluir un archivo, como una imagen, en línea estableciendo el src atributo de un img

elemento como una cadena codificada en Base64 usando el siguiente formato:
Si bien incluir imágenes en línea puede reducir las solicitudes HTTP, evalúa cuidadosamente cuándo usarlas, ya que puede aumentar considerablemente el tamaño de la página. Para obtener más información sobre esto, consulta la sección sobre las ventajas y desventajas de incluir imágenes en línea en nuestra página web.dev.

Optimiza para velocidad y calidad

Las fotos de alta calidad atraen más a los usuarios que las imágenes borrosas o poco claras. Además, las imágenes nítidas son más atractivas para los usuarios en la miniatura de resultados y pueden aumentar la probabilidad de obtener tráfico de los usuarios. Dicho esto, las imágenes suelen ser el mayor contribuyente al tamaño total de la página, lo que puede hacer que las páginas sean lentas y costosas de cargar. Asegúrate de aplicar la
optimización de imagen más reciente
y técnicas de imagen responsiva
para proporcionar una experiencia de usuario rápida y de alta calidad.

Analiza la velocidad de tu sitio con
PageSpeed Insights
y visita nuestra página
¿Por qué es importante la velocidad?
para aprender sobre las mejores prácticas y técnicas para mejorar el rendimiento del sitio web.

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

Aunque no es inmediatamente obvio, el contenido y los metadatos de las páginas donde está incrustada una imagen pueden tener una gran influencia en cómo y dónde puede aparecer la imagen en los resultados de búsqueda de Google.

Especifica una imagen preferida con metadatos

La selección de una vista previa de imagen por parte de Google está completamente automatizada y tiene en cuenta una serie de fuentes diferentes para seleccionar qué imagen de una página determinada se muestra en Google (por ejemplo, una
imagen de resultado de texto
o la imagen de vista previa en Discover).

Puedes influir en qué imagen se selecciona proporcionando tu imagen preferida a través de una de las siguientes fuentes de metadatos:

• Especifica la propiedad primaryImageOfPage
  de schema.org con una URL o un ImageObject.

  O especifica una propiedad de imagen URL o ImageObject y adjúntala a la entidad principal (usando las propiedades mainEntity
  o mainEntityOfPage de schema.org):
• Especifica la etiqueta meta og:image Al elegir tu imagen preferida para usarla en el marcado de schema.org o en la etiqueta

meta
og:image sigue estas mejores prácticas: Elige una imagen que sea relevante y representativa de la página.

• Evita usar una imagen genérica (por ejemplo, el logotipo de tu sitio) o una imagen con texto en el marcado de schema.org o en la etiqueta
• meta og:image Evita usar una imagen con una relación de aspecto extrema (como imágenes que son demasiado estrechas o demasiado anchas). Usa una alta resolución, si es posible.
• Revisa el título y la descripción de tu página
• La Búsqueda de Google genera automáticamente un enlace de título y un fragmento para explicar mejor cada resultado y cómo se relaciona con la consulta del usuario. Esto ayuda a los usuarios a decidir si hacer clic en un resultado o no. Aquí hay dos ejemplos de cómo podrían verse los enlaces de título y el fragmento en una página de resultados de búsqueda de Google:

Utilizamos una serie de fuentes diferentes para esta información, incluida la información en las etiquetas

title

y
meta de cada página. Puedes ayudarnos a mejorar la calidad del enlace de título y el fragmento que se muestran para tus páginas siguiendo las pautas de title

y snippet de Google.
Añade datos estructurados Si incluyes datos estructurados, Google puede mostrar tus imágenes en ciertos

resultados enriquecidos

, incluido un
distintivo destacadoen Google Imágenes, que brinda a los usuarios información relevante sobre tu página y puede generar un tráfico mejor dirigido a tu sitio.
Sigue las pautas generales de datos estructurados

así como cualquier pauta específica para tu tipo de datos estructurados; de lo contrario, tus datos estructurados podrían no ser elegibles para la visualización de resultados enriquecidos en Google Imágenes. En cada uno de estos tipos de datos estructurados, el atributo de imagen es un campo obligatorio para ser elegible para un distintivo y un resultado enriquecido en Google Imágenes. Aquí hay dos ejemplos de cómo podrían verse 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 pies de foto y los títulos de las imágenes. Siempre que sea posible, asegúrate de que las imágenes se coloquen 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 ligeras sobre el tema de la imagen. Cuando sea posible, usa nombres de archivo 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.jpgpic.gif 1.jpg, cuando sea posible. Si tu sitio tiene miles de imágenes, es posible que desees considerar automatizar el nombre de las imágenes. Si localizas tus imágenes, recuerda también traducir los nombres de archivo, teniendo en cuenta que, fr fr
Pautas de codificación de URL si está utilizando 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 las páginas web, incluidos los usuarios que utilizan lectores de pantalla o tienen conexiones de bajo ancho de banda.

Google utiliza el texto alternativo junto con algoritmos de visión por computadora y el contenido de la página para comprender el tema de la imagen. Además, el texto alternativo en las imágenes es útil como texto de anclaje si decide utilizar una imagen como enlace.

Al escribir texto alternativo, concéntrese en crear contenido útil y rico en información que utilice palabras clave de manera adecuada y esté en el contexto del contenido de la página. Evite llenar alt
atributos con palabras clave (también conocido como
relleno de palabras clave), ya que resulta en una experiencia de usuario negativa y puede hacer que su sitio sea visto como spam.

Malo (falta texto alternativo):

<img src=”puppy.jpg”/>

Malo (relleno de palabras clave):

<img src=”puppy.jpg” alt=”cachorro perro bebé perro cachorro cachorros cachorros perros cachorros camada cachorros perro cobrador labrador lobero setter puntero cachorro jack russell terrier cachorros comida para perros comida para perros barata comida para cachorros“/>

Mejor:

<img src=”puppy.jpg” alt=”cachorro“/>

El mejor:

<img src=”puppy.jpg” alt=”Cachorro dálmata jugando a buscar“/>

Considere también la accesibilidad de su texto alternativo, según las
pautas de W3. Para el <img> elemento, puede agregar el alt atributo del elemento, mientras que para los elementos <svg> en línea, puede usar el
<title> elemento. Por ejemplo:

Recomendamos probar su contenido mediante
auditoría de accesibilidad
y
usando un emulador de conexión de red lenta.

Si una imagen se referencia en varias páginas dentro de un sitio web más grande, considere el
presupuesto de rastreo del sitio. En particular, haga referencia a la imagen de forma coherente con la misma URL, para que Google pueda almacenar en caché y reutilizar la imagen sin necesidad de solicitarla varias veces.

Exclusión de enlaces en línea de Google Imágenes

Si lo desea, puede evitar que la imagen de tamaño completo aparezca en la página de resultados de búsqueda de Google Imágenes excluyéndose de los enlaces en línea en los resultados de búsqueda de Google Imágenes.
Para excluirse de los enlaces en línea:

1. Cuando se solicite su imagen, examine el
   encabezado de referencia HTTP
   en la solicitud.
2. Si la solicitud proviene de un dominio de Google, responda con un 200 código de estado HTTP 204 o un

código de estado HTTP y sin contenido.
Google seguirá rastreando su página y viendo la imagen, pero mostrará una imagen en miniatura generada en el momento del rastreo en los resultados de búsqueda. Esta exclusión es posible en cualquier momento y no requiere el reprocesamiento de las imágenes de un sitio web. Este comportamiento no se considera encubrimiento

de imágenes y no dará lugar a acciones manuales.
Alternativamente, puede

evitar que la imagen aparezca en los resultados de búsqueda por completo.

Optimizar para SafeSearch
SafeSearch es una configuración en las 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 búsqueda de Google. Asegúrese de que Google comprenda la naturaleza de su sitio para que Google pueda aplicar filtros de SafeSearch a su sitio si corresponde..