Optimización de imágenes para SEO

Image SEO en pocas palabras

Image SEO puede revolucionar tu negocio.

Para tener éxito en Image SEO presta atención a lo siguiente:

• Cómo de fácil es de encontrar, rastrear e indexar
• La autoridad de la página donde se encuentran
• La relevancia de la página
• Pie de foto
• Atributos de imágen (nombre de archivo, formato, tamaño, y alt y title)
• La velocidad con la que se cargan tus imágenes
• El contexto de la imagen que has proporcionado a través del marcado de Schema

¿Qué es Image SEO?

Image SEO consiste en las actividades utilizadas para posicionar bien imágenes en las listas orgánicas de los motores de búsqueda.

Al igual que con las páginas, los motores de búsqueda tratan entender las imágenes. Para hacer que tus imágenes se posiciones bien, debes hacer todo lo posible para ayudar a que tengan “sentido”. En este artículo, explicaremos cómo hacerlo.

¿Por qué te deberías precupar de Image SEO?

Hay dos principales razones por las que te deberías preocupar de Image SEO:

1. 1. Las imágenes pueden traer mucho tráfico orgánico. Especialmente ahora que Google ha eliminado la opción de “Ver imágen”, es mucho más probable que los usuarios vayan a tu página.
2. 2. Cuando haces Image SEO, estás optimizando automáticamente para lectores de pantalla, de forma que así también ayudas a que las personas con discapacidad visual entiendan tu sitio web mejor.

Me imagino que te estarás preguntando: “¿Atraerá Image SEO una gran cantidad de tráfico para mí?”

Bueno, esto dependerá de tu negocio. Para nosotros, en realidad solo representa una parte de nuestro tráfico. Por lo general, las personas que quieren resolver sus problemas de SEO no están buscando imágenes. Los motores de búsqueda lo saben, y por eso normalemente solo muestran págionas normales en sus resultados de búsqueda.

Como regla general: si aparecen imágenes a menudo para las consultas con las que te quieres posicionar, Image SEO es importante para tí. Por lo tanto, si llevas un sitio web de eCommerce, un sitio de noticias sobre celebridades o, por ejemplo, un sitio web de fotos de archivo, Image SEO es extremadamente importante.

¿Qué influye en el posicionamiento de tus imágenes?

Hay una gran lista de factores que pueden influir en el posicionamiento de tus imágenes:

• Cómo de fácil es de encontrar, rastrear e indexar
• La autoridad de la página donde se encuentran
• La relevancia de la página
• Pie de foto
• Atributos de imágen (nombre de archivo, formato, tamaño, y alt ytitle)
• La velocidad con la que se cargan tus imágenes
• El contexto de la imagen que has proporcionado a través del marcado de Schema

Vamos a explicar todo esto con detalle más abajo:

Cómo de fácil es de encontrar, rastrear e indexar

Podrás pensar que no tenemos ni que mencionarlo, pero la gente lo confunde a menudo. Asegúrate de que los motores de búsqueda pueden encontrar, rastrear e indexar tus imágenes fácilmente.

Ayuda a los motores de búsqueda a encontrar tus imágenes con mapas de sitio XML

Incluyendo imágenes en tus mapas de sitio XML ayudas a que los motores de búsqueda los descubran y le den prioridad al rastreo y la indexación de tus imágenes.

Puedes crear mapas de sitio XML dedicados a tus imágenes, o puedes incluirlas en tus mapas actuales. Ambos métodos están bien, aunque recomendamos crear mapas de sitio XML dedicados a imágenes si tu sitio web tiene miles de imágenes, ya que tener mapas separados te dará una mejor idea cuando analices qué imágenes están siendo indexadas.

Algunas pautas sobre los mapas de sitio XML:

• Cada etiqueta <url> puede tener hasta 1.000 etiquetas image:image. En otras palabra, puedes definir 1.000 imágenes por página.
• Para definir un pie de foto utiliza image:caption
• Para definir la localización geográfica de una imagen utiliza image:geo_location
• Para definir el título de la imagen, utilizaimage:title
• Para definir la licencia de la imagen utiliza image:license

Más información:

• https://support.google.com/webmasters/answer/178636

Asegúrate de que tus páginas son rastreables e indexables

Lo que no se puede rastrear, no se puede indexar. Así que asegúrate de que un archivo robots.txt mal configurado no está bloqueando el acceso de los motores de búsqueda a tus imágenes. ¡No evites que Googlebot-Image y Googlebot accedan a las imágenes de tu robots.txt!

Si quieres que tus imágenes sean indexadas por motores de búsqueda, asegúrate de que no tienen una cabecera X-Robots-Tag HTTP y no están canonicalizadas utilizando el encabezado HTTP.

Si estás utilizando directivas noindex en una página que contiene imágenes, las imágenes tampoco serán indexadas (a no ser que también estén en las páginas que son indexables).

Además asegúrate de que tus páginas no contienen la directiva robots noimageindex, que le indica a los motores de búsqueda específicamente que no quieres que indexen las imágenes de tu página.

John Mueller ha sido muy amable de confirmar lo que pensabamos acerca de los robots noindex y su impacto en las imágenes:

La autoridad de la página donde se encuentran

En la sección anterior, mencionamos que los motores de búsqueda posicionarán las páginas donde se encuentran las imágenes. Tomemos un ejemplo para ilustrar esto. Si buscas Denzel Washington en la búsqueda de imágenes de Google, esto es lo que encontrarás:

Los primeros tres resultados son:

1. 3. imdb.com
2. 4. wikipedia.org
3. 5. variety.com

¿Qué tienen todos en común? Tienen mucha autoridad. Una imagen se beneficia de la autoridad de la página en la que se encuentra. Ten esto en cuenta a la hora de optimizar tus imágenes y elegir en que páginas colocarlas.

Consejo experto: pídele a las personas que han utilizado tus imágenes que te den el crédito necesario con un enlace a la página donde se encuentra la imágen. Especialmente en ámbitos “aburridos” donde es difícil construir enlaces, esta es una gran táctica. Lee más sobre este método de construcción de enlaces aquí.

En caso de que la gente no te otorgue el crédito adecuado, al menos asegúrate de poner una marca de agua tus imágenes, de forma que aun consigas exponer tu marca.

La relevancia de la página

El tema de la página en la que se encuentran tus imágenes influye enormemente en su posicionamiento. En el caso de Wikipedia (el segundo resultado) para nuestra consulta “Denzel Washington”, realmente ayuda que tengan una página de 4.000 palabras acerca de él, ya que añade mucha relevancia a las imágenes de esa página para esa consulta.

Ten en cuenta que WordPress crea una página dedicada de “imagen adjunta” para cada imagen que cargas. Esto no agrega ningún valor desde el punto de vista del SEO, por lo que recomendamos desactivarlo. Desperdicia el crawl budget y casi crea contenido duplicado.

Pie de foto

El texto que está cerca de las imágenes contribuye a su relevancia desde el punto de vista de un motor de búsqueda y ayuda a los usuarios a comprender mejor las imágenes.

Aquí hay un ejemplo de un pie de foto de nuestro artículo sobre redirecciones:

Optimizar atributos de imágen para el SEO

Aquí hay un ejemplo de fragmento de código HTML para una imagen:

<img src="https://example.com/images/denzel-washington-graduating-high-school.jpeg" alt="Denzel Washington graduándose del instituto" title="Denzel Washington graduándose del instituto" />

Una etiqueta de imagen tiene un nombre de archivo, un formato, una ubicación donde se puede encontrar la imagen y atributos que proporcionan contexto. Este es otro lugar donde los motores de búsqueda recogerán pistas sobre las consultas para las que tus imágenes son relevantes. Pero ten en cuenta que puedes pasarte. No llenes los nombres de archivos de las imágenes y los atributos alt y title de palabras clave.

Aquí puedes ver un desglose de las propiedades de una imagen:

• Nombre de archivo de la imagen
• Formato de la imagen
• Ruta de la URL de la imagen
• Atributosrcset de la imagen p
• Atributoalt de la imagen
• Atributotitle de la imagen

Nombre de archivo de la imagen : cómo nombrar imágenes para el SEO

Asegúrate de que el nombre de archivo es descriptivo y responde a consultas relevantes.

• Bien: denzel-washington-graduandose-instituto
• Mal: foto

Formato de la imágen

Elegir el formato correcto para la imagen ayuda a reducir el tiempo de carga y mantener la calidad de la imagen.

• Bien: .jpeg para una foto
• Mal: .gif para tu captura de pantalla que se supone que muestra detalles

Estos son los formatos de imagen más populares y para qué se utilizan:

Más información:

• Échale un vistazo a Can I Use website para ver qué navegadores son compatibles con qué formatos de imagen (y mucho más).

Ruta de la URL de la imagen

You want your images to have a short and logical URL path. Avoid using a chronological folder structure such as for instance the one used by WordPress. Your images are probably timeless, so don’t make people think they’re outdated.

Te interesa que tus imágenes tengan una URL corta y lógica. Evita utilizar una estructura de carpetas cronológica como, por ejemplo, la que usa WordPress. Es probable que tus imágenes sean atemporales, así que no hagas que las personas piensen que se han quedado antiguas.

• Bien: /images/denzel-washington-graduandose-instituto.jpeg
• Mal: /wp-content/uploads/2016/09/images/denzel-washington-graduandose-instituto.jpeg

El atributo de imagen srcset

Teniendo en cuenta el enfoque móvil de Google, el papel de la velocidad de la página como un factor de posicionamiento y el hecho de que Google rastrea principalmente con un agente de usuarios móviles, es esencial proporcionar cuidadosamente los tamaños de imagen adecuados a los usuarios correctos.

Afortunadamente, puedes definir qué versiones de una imagen se utilizarán para diferentes dispositivos y ventanas gráficas. Por ejemplo, si estás navegando por un sitio web en tu teléfono, no necesitas una imagen con un ancho de 1024 píxeles. Puedes conformarte con una versión de solo 400 píxelex de ancho, lo que te ahorra mucho ancho de banda.

Puedes definir qué imagen usar para qué ancho de la ventana gráfica con el atributo srcset. Aquí tenemos un ejemplo:

<img src="/images/denzel-washington-graduandose-isntituto.jpeg" srcset="/images/denzel-washington-graduandose-isntituto-400.jpg 375w, /denzel-washington-graduandose-isntituto-800.jpg 768w" alt="Denzel Washington graduándose del instituto" title="Denzel Washington graduándose del instituto" />

En este ejemplo, serviremos la imagen con un ancho de 400 píxeles a las pantallas con una ventana de visualización de 375 píxeles de ancho o inferior, la imagen con un ancho de 800 píxeles a las pantallas con un ancho de ventana de visualización superior a 375 píxeles y hasta 768 píxeles, y la imagen predeterminada para cada dispositivo con un ancho de ventana superior a 768 píxeles.

Si quieres que tus imágenes se vean más nítidas en las pantallas de retina, puedes servir imágenes con el doble de densidad de píxeles de una imagen normal. Si tu imagen normal tiene dimensiones de 600 x 300 y se llama denzel-washington-graduandose-instituto.jpeg entonces tu imagen de retina deberá tener dimensiones de 1200 x 600 y deberá llamarse denzel-washington-graduandose-instituto.jpeg

Atributo alt de la imagen

El atributo alt , también, incorrectamente llamado etiqueta alt o etiqueta alternativa, le proporciona contexto a los motores de búsqueda. Es un atributo importante para completar desde un punto de vista del SEO, pero también desde el punto de vista del usuario. Cuando una imagen no se puede cargar, muestra el texto del atributo alt como una alternativa para que los usuarios puedan tener una idea del contenido de la imagen. Esto también es utilizado por los lectores de pantalla para describir lo que hay en la imagen.

Comprueba si tu atributo de imagen alt está configurado

Haz una comprobación rápida para asegurarte de que los atributos alt de tu imagen están completos y son descriptivos.

Atributo title de la imagen

El atributo title le da a los motores de búsqueda cierto contexto sobre la imagen, además, cuando un usuario se desplaza sobre una imagen con el ratón, se muestra el atributo de título de esa imagen. Incluir una llamada a la acción aquí puede ayudar a aumentar tu tasa de conversión. John Mueller, de Google, ha mencionado que, desde un punto de vista de SEO, el atributo title de imagen es menos importante que el atributo alt, pero que aún puede usarse si contiene contenido relevante. Sus palabras exactas:

Imágenes de carga rápida

La velocidad de la página es uno de los factores de clasificación para los motores de búsqueda. Eso hace que también sea importante que las imágenes se carguen rápido. No solo porque la velocidad de la página es un factor de posicionamiento, sino también porque las imágenes utilizan el mismo crawl budget que tus páginas.

Para que tus imágenes se carguen rápido, asegúrate de hacer lo siguiente:

• Elige el formato correcto (como hemos visto en la sección Formatos de imagen)
• Utiliza el tamaño de imagen correcto (como hemos visto en la sección el atributo de imagen srcset)
• Comprime tus imágenes

Comprimir imágenes

Comprime tus imágenes para disminuir su tamaño de archivo. Hay varias opciones para comprimir imágenes:

• Lossy: el tamaño del archivo disminuye significativamente, pero las imágenes pierden calidad. Esta opción da lugar a las imágenes de carga más rápida.
• Lossless: el tamaño del archivo se reduce moderadamente y las imágenes no pierden calidad. Esta opción no te ayudará mucho a que las imágenes se carguen rápido.
• Glossy: esta en la opción intermedia entre “lossy” y “lossless”, que equilibra la disminución del tamaño del archivo y la pérdida de calidad.

Heramientas que te ayudarán a comprimir imágenes
Aquí tienes ejemplos de herramientas que puedes utilizar para comprimir tus imágenes:

Aplicaciones online:

• TinyPNG
• Imagify

Herramientas que se integran con WordPress:

• ShortPixel
• EWWW Image Optimizer
• Imagify
• Smush
• TinyPNG

Herramientas que se integran con Magento: TinyPNG

Aplicaciones de escritorio: ImageOptim

Más información:

• ¿Cuál es la diferencia entre la compresión de imagen lossy, lossless, y glossy?

Mejores prácticas de velocidad de página que también aplican para imágenes

En esta sección cubriremos las mejores prácticas de optimización de la velocidad de la página que van más allá de las imágenes y, sin embargo, vale la pena considerarlas teniendo en cuenta su impacto desde el punto de vista del SEO y del usuario.

Servir imágenes a través de un CDN

Usar una CDN como Cloudflare para mostrar tu contenido, incluidas las imágenes, tiene muchas ventajas. Como una CDN permite a los usuarios solicitar tu contenido del servidor más cercano a ellos, se disminuye considerablemente el tiempo de carga.

Usar el caché del navegador

Utiliza el almacenamiento en caché del navegador para asegurarte de que las imágenes que se utilizan en varias páginas se almacenan en caché. Ejemplo de este tipo de imágenes son imágenes como logotipos en el encabezado, la barra lateral y el pie de página.

Utiliza carga diferida para las imágenes

Si bien el uso de carga diferida para imágenes no acelera su carga, es importante desde el punto de vista de la optimización de la velocidad de la página, y como estamos hablando de imágenes, también tiene sentido mencionarlo aquí.

Retrasa la carga de tus imágenes hasta que sean necesarias, y hasta que todos los elementos que son críticos para la página estén cargados. Es más importante para los usuarios que las páginas se puedan usar rápidamente, y no que se vean perfectas. ¿Por qué querrías cargar inmediatamente las imágenes que están en la parte de abajo de una página, cuando los usuarios comienzan a leer por arriba?

Utiliza Schema para ayudar a los motores de búsqueda a entender el contexto de la imagen

Utiliza el marcado de Schema.org para cualquier imagen que sea representativa para tu contenido. Esto ayuda a los motores de búsqueda a comprender su contexto, y además hace que sea más probable que consigas fragmentos destacados con esa imagen. Tener una imagen en el fragmento destacado hace que resalte más, por lo que también obtendrás más clics.

Aquí hay un ejemplo de un fragmento de código que hace referencia a una imagen:

<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "Article",
    "mainEntityOfPage": {
        "@type": "WebPage",
        "@id": "https://www.contentkingapp.com/academy/image-seo/"
    },
    "headline": "Image SEO: the Ultimate Guide",
    "image": {
        "@type": "ImageObject",
        "@id": "https://www.contentkingapp.com/academy/image-seo/#primaryimage",
        "url": "https://www.contentkingapp.com/wp-content/uploads/2019/05/contentking-image-seo-og-en@2x.png",
        "width": 1200,
        "height": 600,
        "caption": "Image SEO guide"
    },
    "datePublished": "2019-05-17T08:00:00+08:00",
    "dateModified": "2019-05-17T09:20:00+08:00",
    "author": {
        "@type": "Person",
        "name": "Steven van Vessum"
    },
    "publisher": {
        "@type": "Organization",
        "name": "ContentKing",
        "logo": {
          "@type": "ImageObject",
          "url": "https://www.contentkingapp.com/wp-content/uploads/2019/05/contentking-logo@3x.png"
        }
    },
    "description": "A useful guide on increasing your images' rankings"
}
</script>

Algunos consejos:

• Asegurate de que las imágenes referenciadas en tu marcado de Schema.org pueden ser rastreadas e indexadas, como hemos descrito en la sección de “Cómo de fácil es de encontrar, rastrear e indexar”
• Las imágenes deben ser relevantes para la páginas.
• Las imágenes deben tener formato .jpg, .png, o. gif.
• Utiliza las imágenes en alta resolución, con las siguientes medidas: 16×9, 4×3 y 1×1.

Más información.

• https://developers.google.com/search/docs/data-types/article#article_types

BONUS: define imágenes en Open Graph y Twitter Cards

Definir tus imágenes de Open Graph y Twitter Card es algo que debes hacer si te importa tu tráfico desde redes sociales. Solo eso es una gran razón para definirlas.

Aunque no afectará directamente a tu posicionamiento, creemos que definir tus imágenes de Open Graph y la Twitter Card le añade contexto a tus páginas e imágenes para los motores de búsqueda.

Herramientas para ayudarte a analizar el potencial de optimización de la imagen

Existen varias herramientas para ayudarte a analizar tu potencial cuando se trata de la optimización de las imágenes. Estas herramientas analizarán las imágenes que estás utilizando actualmente y evaluarán su potencial de optimización. En la mayoría de los casos, es posible disminuir significativamente el tiempo de carga, hasta en varios segundos.

Lista de herramientas:

• Website Speed Test
• Google’s Lighthouse in Chrome DevTools
• GTMetrics

Ten en cuenta que son herramientas automatizadas y que solo deben servirte de orientación. No tomes el resultado al pie de la letra. Como con todo en el SEO, siempre hay ser crítico y ver las cosas en perspectiva.