Normalmente, cuando buscamos una imagen por Google Imágenes, los resultados que nos muestra, son las imágenes sacadas desde la web donde está alojada. De esta manera, Google muestra la imagen en su tamaño y con la calidad original que tiene y nos permite descargarla o abrir la url directamente desde el buscador de imágenes sin pasar por la web a la que pertenece.
Sin embargo, hay otras imágenes que cuando hacemos una búsqueda por Google Imágenes, podemos encontrarlas con un tamaño supuestamente grande, pero que el preview nos sale borroso y en pequeño y si intentamos descargarlo desde Google, la imagen apenas tiene calidad. Si intentamos hacer clic en ese tipo de imágenes, descubrimos que sí que tenían una calidad alta, pero que el enlace no nos lleva a la url de la imagen en sí, sino a la página web desde donde se ve dicha imagen, forzando al usuario que quiere la imagen en buena calidad a entrar en la web original.
Esta es una forma de trabajar el CTR con Google imágenes y voy a explicar paso a paso en qué consiste, cómo implementarlo y para qué proyectos puede convenir o no esta implementación.
Comprobemos el efecto, ya que en teoría esta imagen tiene 5051 píxeles con 3,20MB de peso y aparentemente se ve borrosa desde Google Imágenes.
Si comprobamos bien de donde sale la imagen, vemos que Google no está llamando por medio del src al dominio original de la imagen en sí (como suele hacer), sino que tiene su propia versión de la imagen, que además pesa 14kb y solo mide 211px de ancho:
Mientras que en otras imágenes podemos ver que Google las capta tal cual de su web de origen desde el src, permitiendo al usuario descargar la imagen original sin necesidad de acceder a la web.
Esto no es una cuestión casual o arbitraria de Google. Es una acción realizada desde la web llamada vínculos intercalados de imágenes, que fuerza al usuario a pasar por la página en cuestión donde está enlazada si pretende descargar la imagen. De forma que se evita un gasto de ancho de banda si no entran a su imagen y sobre todo, se puede conseguir que el usuario se acerque más a nuestros objetivos de conversión, ya que para ver bien la imagen, tiene que pasar si o si por nuestra web.
En el caso de la página empleada en el ejemplo, el usuario va a ver más información del articulo, más opciones de descargárselo, y va a "comerse" los anuncios que tienen en la web.
En el caso de esta página en particular, podemos comprobar qué ocurre si accedemos a la imagen de muestra.
Vemos que, yo desde mi web, si puedo enlazarla realizando una llamada SRC a su web (esta imagen no está alojada en mi hosting). Por lo cual, no está previniendo el hotlinking, sino que es otro tipo de práctica.
Imagen insertada y alojada en la web de thelancet
Todo esto, se llama vínculo intercalado de imagen. Pero probablemente el nombre de la definición resulte confuso, así que voy a explicarlo, para que se entienda mejor.
¿Qué son los Vínculos intercalados de imágenes?
Cuando se consigue que una imagen desde Google Imágenes no ponga la imagen original, sino una "copia en menor calidad", se le denomina "vínculo intercalado de imagen". El término es un tanto burdo y si nos vamos al origen y cómo se denomina en Inglés, inline linking, tiene mucho más sentido.
Esta práctica hace que Google meta la imagen con un Data:uri
Datos URIs, URLs prefijados con los datos: esquema, permiten a los creadores de contenido incorporar pequeños archivos en línea en los documentos.
Esto quiere decir que se pueden incorporar imágenes y otros elementos al HTML, sin necesidad de llamar a elementos externos. Sería una forma de "pasar a código nuestra imagen".
Este código tendría un peso equivalente, por eso Google, para no saturar su código y hacerlo excesivamente pesado (ya que no lo puede llamar de forma externa a tu dominio), despliega una versión comprimida. Si no, podría tener un código excesivamente pesado (hago una referencia curiosa).
Al ser un "enlazado", porque se referencia a una imagen exterior, pero de una forma interna con el código, la denominación sería como: "enlace/enlazado entre las líneas". Esta forma de denominación es común cuando se toca código. Por ejemplo: "inline CSS" o "inline Javascript", que es cuando se mete CSS o Javascript directamente en el código HTML.
La preguntas que nos podemos hacer son:
¿Qué opina Google de esta práctica?
¿Cómo puedes forzar a Google para un inline linking?
¿Es realmente útil?
Así que voy paso a paso respondiendo cada una de estas cuestiones.
¿Cómo afecta esta práctica de cara a Google?
Podemos ver que dice Google sobre esta práctica en su propia documentación:
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:
Cuando se solicite una de tus imágenes, examina el encabezado HTTP referer de la solicitud.
Si la solicitud proviene de un dominio de Google, envía una respuesta HTTP 200 o 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. No se considera que estés encubriendo imágenes si inhabilitas los enlaces insertados, por lo que no se aplicará ninguna acción manual.
También puedes impedir que tus imágenes aparezcan en los resultados de búsqueda.
Esta práctica, como podemos observar, no incurre en un problema de encubrimiento/cloacking.
Me parece importante recalcar un aspecto que puede inducir a error. En la documentación explica que el código de respuesta 204 (código que dice que la página es valida pero que no devuelve ningún contenido) que hay que ofrecer a Google, hay que dárselo por medio de un encabezado HTTP referer (en el siguiente paso explico cómo) cuando la solicitud viene de un dominio de Google. Este código de respuesta 204, nunca puede ser ante su User-Agent (es decir, al bot del motor de búsqueda), si bloqueas las imágenes ante un User-Agent, lo que provocas es que el rastreador o usuario que tiene bloqueado su User-Agent no pueda ver las imágenes, por lo que no podrá rastrearlas ni indexarlas. Con los Vínculos Intercalados de Imágenes, lo que se impide es que Google pueda insertar dichas imágenes desde su dominio, pero que sí pueda indexarlas y posicionarlas en Google Imágenes.
Esto quiere decir que para hacer esta práctica de una forma correcta, no hay que bloquear el User-Agent, sino el poder insertar la imagen desde el dominio de Google (en el siguiente paso vemos cómo).
Configurar Vínculos Intercalados de Imagen con htaccess
Hago la explicación de cómo configurarlo por medio de un servidor Apache. Si alguien utiliza Nginx y quiere que explique como hacer dicha configuración, puede solicitármelo por medio de un correo.
Explicación de los códigos a utilizar
Tenemos que tener en cuenta, tanto la posición donde se encuentra en nuestro htaccess (Cuanto más arriba mejor), como donde está alojado nuestro htaccess. Pues podemos estar utilizando algún software que ponga un htaccess justo donde está el directorio de nuestras imágenes.
Siempre que se pueda estos códigos deben ir dentro de un <IfModule mod_rewrite.c> y activar el Rewrite engine con RewriteEngine On
Rewritecond y RewriteRule
Con el Rewritecond explicamos la condición. Por ejemplo, que la petición venga desde un dominio en particular. Y con el RewriteRule, explicamos la regla a aplicar a esos condicionantes que hemos seleccionado previamente.
En este caso, he puesto este ejemplo de código en un htaccess simulado localizado donde está el directorio de imágenes del back que utiliza WordPress. En wp-content/uploads. Pero se pueden poner en los directorios que se consideren. Y desde RewriteRule o con RewriteCond se puede hacer un condicional para que solo ocurra en los directorios que señalemos, y que solo ocurra con imágenes. Por ejemplo con un: RewriteRule ^(.*\.(gif|jpe?g|png|webp))$ - [R=204,NC,L] En lugar de poner el Rewrite que pongo en los ejemplos, hay muchos casos y muchas alternativas para seleccionar un directorio en particular o las extensiones de archivos que queremos que den 204. En cualquier caso, los ejemplos que pongo abajo son para directorios donde solo hay archivos de imágenes.
ErrorDocument 204
Se va a generar un documento particular para el código de respuesta 204 que esté vacío, para hacer que no haya ningún contenido como indica la propia documentación de Google.
Prevenir Hotlinking
Podemos evitar que cualquier dominio que no sea el nuestro, inserte nuestras imágenes con nuestra URL. Esta práctica se suele realizar por desconocimiento o por no gastar ancho de banda propio. De hecho, Google Imágenes por defecto hace este "hotlinking". Aunque hay formas más divertidas de evitarlo. Con esta práctica evitamos el Hotlinking y conseguimos que Google Imágenes haga un Inline Linking.
Práctica limpia de configurar vínculos intercalados de imagen [Recomendado]
De esta forma, lo que hacemos es evitar específicamente que cualquier subdominio o dominio de Google pueda insertar imágenes nuestras en su web. Mientras que otros dominios lo pueden realizar normalmente. Y si queremos seguir previniendo el hotlinking de otras URL, podemos hacer otra regla particular, como redirigir a una URL de imagen con una marca del proyecto en cuestión.
Para evitar el hotlinking de Google de una forma limpia, el código sería así: <IfModule mod_rewrite.c> RewriteEngine On RewriteCond %{HTTP_REFERER} ^https://(www\.)?google\. [NC] RewriteCond %{REQUEST_FILENAME} \.(jpg|jpeg|png|gif|webp)$ [NC] RewriteRule ^ - [R=204,L] </IfModule>
Bloquear por medio de USER Agent [NO HACER]
Si bloqueamos por medio del User Agent, impedimos el rastreo de la propia imagen, por lo que no es una práctica recomendada.
De esta forma impedimos el rastreo de una forma total, de manera que no conseguiremos posicionar en Google imágenes de una forma correcta. <IfModule mod_rewrite.c> # RewriteEngine On # RewriteCond %{HTTP_USER_AGENT} ^.*(Googlebot.*).*$ [NC] # RewriteRule ^.*$ - [R=204,NC,L] # ErrorDocument 204 '<!DOCTYPE html><html lang="es" xmlns="http://www.w3.org/1999/xhtml"></html>' </IfModule>
Aplicar inhabilitación de enlaces insertados de Google en nginx
¿Es util evitar el enlace insertado desde Google Imágenes?
Tanto desde un punto de vista técnico, como desde un punto de vista de Marketing, tiene sentido. Evitamos que se gaste ancho de banda de nuestro hosting, cada vez que alguien realice una búsqueda en las que aparezcan imágenes de nuestra web y no se la podrá descargar desde Google imágenes con calidad sin entrar en nuestra web.
Dependiendo del usuario, puede ocurrir que piense de inicio que la imagen tiene poca calidad. Pero por otro lado, forzamos más al usuario a entrar a nuestra web si le interesa nuestro contenido. En pocas ocasiones resulta útil que muchos usuarios descarguen imágenes de tu web sin siquiera entrar en ella.
¿Por qué Mejora el CTR en Google Imágenes?
Con esta práctica no conseguiremos de una forma directa hacer que un usuario pinche antes en nuestra imagen que en las de la competencia. Esto se consigue con el propio atractivo y características de la imagen y con el título de la URL donde se enlaza entre otras cuestiones.
Sin embargo, si el usuario ha considerado que nuestra imagen es relevante en su búsqueda, si la quiere ver en buena calidad, no tendrá más remedio que entrar en nuestra web. Donde será más fácil que entre en el circuito de funnel que tengamos montado.
Explicación en vídeo
En un directo sobre Datos Curiosos de SEO, abordé este tema, donde podéis ver algo de información complementaria:
El efecto aunque me confundiese en el directo. No se hace por User-Agent, sino por dominio.
