Cómo se adapta Googlebot al tamaño del contenido

Publicado por Lino uruñuela el 9 de febrero del 2021

Índice

Un poco de historia sobre Google y JavaScript en este blog
Datos del último experimento
Código JavaScript para capturar el evento resize
Datos del último experimento
- Observaciones sobre el renderizado de contenido
- Google recuerda el tamaño de la pantalla para cada URL

Hoy voy a dar un pequeño repaso a algunos experimentos que hemos realizado para intentar comprender cómo trata Google el contenido y código JavaScript, hay que tener en cuenta que algunos de los experimentos más antiguos ya no son válidos, ya sea porque los dominios dónde se realizaron ya no existen o porque en algún momento de la vida de este blog cambié algo que afectó a los experimentos.

Un poco de historia sobre Google y JavaScript en este blog

El otro día vimos cómo podíamos hacer seguimiento de qué URLs renderiza Google. Desde hace mucho tiempo (2009), hemos ido probando qué hace y qué no hace Google con el código JavaScript, tanto en cosas simples como podría ser un evento onclick (2009) hasta cómo ofuscar enlaces a Google (2015) para evitar accesos a URLs que no queremos indexar y/o traspaso de PageRank.

En los últimos años hemos visto cómo Google ejecuta e interpreta JavaScript nos hemos centrado en saber hasta dónde es capaz Google de rastrear e interpretar JavaScript y probamos si Google ejecuta cualquier código que se ejecute en el onReady, que nos dio como resultado que, efectivamente, Google interpreta y procesa el código JavaScript que se ejecuta automáticamente, sin necesidad de un evento de usuario, además, solo indexa aquel contenido que "permanece" y no el que se elimina con JavaScript. Todos estos experimentos SEO y nos ayudaron para comprender mejor lo que Google denominó como segunda ola de indexación.

El otro día pudimos ver cómo saber qué URLs están siendo renderizadas por Google en esta segunda ola de indexación, y también cómo saber si Google obtuvo errores JavaScript en el renderizado de una URL. A raíz de este último experimento, pregunté en Twitter que podríamos comprobar a continuación, y aunque salió comprobar si Google hace click me tomé la libertad de ampliar el test par comprobar no solo si hacía clicks sino también si hace scroll y si hace "resize", (módica el tamaño de la ventana).

Datos del último experimento

Aunque ya sabíamos que Google modifica el tamaño de la ventana (o del viewport), podemos ver que John Mueller, a la pregunta de si Googlebot hace scroll en sites que tienen "scroll infinito", explica que probaron a realizarlo, pero que es extremadamente costoso y puede no ser un buen método.

Es lógico que Google no quiera realizar scroll en aquellas páginas que tienen "scroll infinito", ya que como su nombre indica, puede ser infinito. Hay sites en los que no se usa el scroll para cargar el contenido de una url concreta, sino que van cargando más y más contenido a medida que haces scroll, al estilo Google Discover, y podría no terminar nunca.

Pero sí explica cómo Google expande el marco (o "frame expansion"), es decir, se adapta al tamaño del contenido.

Esto es justo lo que hemos podido comprobar al capturar el evento resize que se dispara cada vez que el navegador cambia el tamaño de la ventana. Como era de esperar, Google NO hace scroll, pero si hace hace disparar el evento resize (al cambiar el tamaño de la ventana). Así que hemos intentado analizar cuál es su modus operandis.

De momento podemos postular algunas cosas sobre su comportamiento:

El tamaño de la pantalla es fijo para cada dispositivo (Desktop y Mobile)
Cada dispositivo tiene un tamaño de pantalla fijo, siempre son el mismo valor para cada dispositivo (capturadas con "screen.width" y "screen.height").
El tamaño de la ventana varía para adaptarse al contenido.
La primera vez que accede lo hace con las "medidas estándares" (capturadas con window.innerWidth y window.innerHeight)

Desaktop:
- Ancho de la pantalla: "screen.width" = 1024 pixels (siempre el mismo)
- Alto de la pantalla: "screen.height" = 1024 pixels (siempre el mismo)
- Ancho de la ventana gráfica: "window.innerWidth" = 1024 pixels (varía para adaptarse al contenido)
- Alto de la ventana gráfica:" window.innerHeight" = 1024 pixels (varía para adaptarse al contenido)

Mobile:

- Ancho de la pantalla: "screen.width" = 412 pixels (ancho de la pantalla, siempre el mismo)
- Alto de la pantalla: "screen.height" = 732 pixels (altura de la pantalla, siempre el mismo)
- Ancho de la ventana gráfica: "window.innerWidth" = 412 pixels (ancho de la ventana)
- Alto de la ventana gráfica: "window.innerHeight" = 732 pixels (alto de la ventana)
La primera vez que accede
La primera vez que Googlebot accede, lo hace en modo Desktop, utilizando un navegador con una ventana gráfica de 1024 pixels de ancho por 1024 pixels de alto y no modifica el tamaño de la ventana.
En los siguientes accesos:
Posteriormente accede en modo Mobile o Desktop, mayoritariamente en modo Mobile, y se comporta de la siguiente manera.
1. Cuando lo hace con su versión móvil por primera vez:
  Utiliza un tamaño estándar 412 pixels de ancho por 732 pixels, fijaros la relación 9:16 (o lo que es lo mismo 5:9) entre el ancho y el alto.
  .
2. Cuando lo hace con su versión móvil pero NO es la primera vez:
  Si al acceder por primera vez en modo Mobile, como hemos visto en el punto "a", el ancho del contenido es mayor a esos 412 pixels, Googlebot cambia el tamaño de la ventana para ajustar el ancho de la ventana gráfica al ancho del contenido y también aumenta el alto de la ventana para adaptarse al alto del contenido.
3. En posteriores accesos, Google accede usando la versión Mobile mayoritariamente, y si la primera vez usaba una tamaño fijo para la ventana gráfica ahora accede con un tamaño inicial que se ajusta al ancho del contenido, es decir, recuerda el ancho que ocupaba el contenido. En cambio con la altura de la ventana gráfica no actúa de la misma manera que para el ancho, y lo calcula utilizando la relación 9:16 (o lo que es lo mismo 5:9) en base al ancho recordado.
  
  Por ejemplo si nuestro ancho es de 655px, accederá con un ancho de 655px y con una altura de 1169px que parece calcularla usando la relación antes mencionada 9:16. Así que la altura de este ejemplo sería Altura = 655 ÷ (9:16) = 1169 pixels.
  
  Y si la altura del contenido es mayor, modifica el tamaño de la ventana y ampliando el alto para ajustarse a la altura del contenido, y por lo tanto disparando otra vez el evento "resize"

Código JavaScript para capturar el evento resize

Tal como vimos en el anterior post sobre cómo podemos capturar y almacenar los errores JavaScript producidos por Google al renderizar el contenido de una URL haremos lo mismo:

Código JavaScript

window.addEventListener("resize", function(event){
	var botPattern = "googlebot|Googlebot-Mobile|Googlebot-Image|Google favicon|Mediapartners-Google";
	var re = new RegExp(botPattern, 'i');
	var userAgent = navigator.userAgent; 

	var Wscreen=screen.width;
	var Hscreen=screen.height;
	var screenColorDepth=screen.colorDepth;
	var screenPixelDepth=screen.pixelDepth;

	var winW = window.innerWidth
	|| document.documentElement.clientWidth
	|| document.body.clientWidth;

	var winH = window.innerHeight
	|| document.documentElement.clientHeight
	|| document.body.clientHeight;
	var valoresResize=" screenWith:"+Wscreen+" Hscreen:"+Hscreen+" screenColorDepth:"+screenColorDepth+" screenPixelDepth:"+screenPixelDepth+" winW:"+winW+" winH:"+winH;

	
	if (re.test(userAgent)) {
		var target = event.target;
		var tagHTML = target.nodeName;
		var screenX=event.screenX;
		var screenY=event.screenY;
		var clientX=event.clientX;
		var clientY=event.clientY;
		var tipoEvento = event.type;
		var resultHTML="tipoEvento:"+tipoEvento+" tagHTML:"+tagHTML+" screenX:"+screenX+" screenY:"+screenY+" clientX:"+clientX+" clientY"+clientY;

		var client = new XMLHttpRequest();
		var ErroresURL='https://www.mecagoenlos.com/ImagenResizeGoogle.gif?UrlOrigen='+window.location.href+'&UA='+unescape(encodeURIComponent(userAgent))+'&parametrosResize='+valoresResize;		
		client.open('GET',ErroresURL);
		client.setRequestHeader('Content-Type', 'text/plain;charset=UTF-8');
		client.send(null);
		
		
	}


});

Código en .htaccess

RewriteCond %{REQUEST_URI} ImagenResizeGoogle.gif [NC]
    RewriteRule ImagenResizeGoogle.gif(.*)$ https://modelode.com/ResizeRenderizadoJS.php$1

Fichero ResizeRenderizadoJS.php (PHP)

<?php
    header("Pragma-directive: no-cache");
    header("Cache-directive: no-cache");
    header("Cache-control: no-cache");
    header("Pragma: no-cache");
    header("Expires: 0");
    $src = $_SERVER['HTTP_REFERER']; 
    $UA=$_GET["UA"]; 
    $parametrosResize=$_GET["parametrosResize"];
        
    function comprobarGoogle($Ip){
        
        # to avoid unecessary lookup, only check if the UA matches one of
        # the bots we like
        
            $hostname=gethostbyaddr($Ip);    
            $ip_by_hostname=gethostbyname($hostname);   
          if(preg_match("/googlebot/i",$hostname))
            if ($ip_by_hostname == $Ip)
                return true;
            else
                 return false;
            
            else
                 return false;
    }
    $botname="inicial";
    $bots = array('Mediapartners-Google[ /]([0-9.]{1,10})' => 'Google Mediapartners',
        'Mediapartners-Google' => 'Google Mediapartners',
        'Googl(e|ebot)(-Image)/([0-9.]{1,10})' => 'Google Image',
        'Googl(e|ebot)(-Image)/' => 'Google Image',
        '^gsa-crawler' => 'Google',
        'Googl(e|ebot)(-Sitemaps)/([0-9.]{1,10})?' => 'Google-Sitemaps',
        'GSiteCrawler[ /v]*([0-9.a-z]{1,10})?' => 'Google-Sitemaps',
        'Googl(e|ebot)(-Sitemaps)' => 'Google-Sitemaps',
        'Mobile.*Googlebot' => 'Google-Mobile',
        '^AdsBot-Google' => 'Google-AdsBot',
        '^Feedfetcher-Google' => 'Google-Feedfetcher',
        'compatible; Google Desktop' => 'Google Desktop',
        'Googlebot' => 'Googlebot');
    
        foreach( $bots as $pattern => $bot ) {
            if ( preg_match( '#'.$pattern.'#i' , $UA) == 1 )
            {
              $botname = preg_replace ( "/\\s{1,}/i" , '-' , $bot );
              break;
            }
          }
    
    if(comprobarGoogle($_SERVER['REMOTE_ADDR']))
        $esGoogle="Real";
    else
        $esGoogle="Fake";
    class BotTracker  {
        
        static function track($s, $params){
                $bot = "";
                $data = array( 
                    'v'	=> 1, 
                    'tid'	=> 'UA-XXXXXX-4',
                    'cid'	=> self::generate_uuid(), 
                    't'	=> 'event',
                    'dh'	=> $s['HTTP_HOST'], 
                    'dl'	=> $s['REQUEST_URI'], 
                    'dr'	=> $s['HTTP_REFERER'],	
                    'dp'	=> $s['REQUEST_URI'], 
                    'dt'	=> $params['page_title'], 
                    'ck'	=> $s['HTTP_USER_AGENT'], 
                    'uip'	=> $s['REMOTE_ADDR'],
                    'ni'	=> 1,
                    'ec'	=> 'Resize-Googlebot',
                    'el'	=> $params["parametrosResize"]." (" .$params['botname']." - ".$params['esGoogle'].")",
                    'ea'	=> $params['URLrenderizada']
                );
                
                $url = 'http://www.google-analytics.com/collect';
                $content = http_build_query($data); 
        
                $ch = curl_init();
                curl_setopt($ch, CURLOPT_USERAGENT, $s['HTTP_USER_AGENT']);
                curl_setopt($ch, CURLOPT_URL, $url);
                curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
                curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 0);
                curl_setopt($ch, CURLOPT_CONNECTTIMEOUT_MS, 0);
                curl_setopt($ch, CURLOPT_TIMEOUT_MS, 0);
                curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-type: application/x-www-form-urlencoded'));
                curl_setopt($ch, CURLOPT_HTTP_VERSION, CURL_HTTP_VERSION_1_1);
                curl_setopt($ch, CURLOPT_POST, 1);
                curl_setopt($ch,CURLOPT_ENCODING , "gzip");
                curl_setopt($ch, CURLOPT_POSTFIELDS, $content);
                $result = curl_exec($ch);
                $info= curl_getinfo($ch);
                curl_close($ch);
            }
            static private function generate_uuid() {
            
            return sprintf( '%04x%04x-%04x-%04x-%04x-%04x%04x%04x',
                mt_rand( 0, 0xffff ), mt_rand( 0, 0xffff ),
                mt_rand( 0, 0xffff ),
                mt_rand( 0, 0x0fff ) | 0x4000,
                mt_rand( 0, 0x3fff ) | 0x8000,
                mt_rand( 0, 0xffff ), mt_rand( 0, 0xffff ), mt_rand( 0, 0xffff )
            );
        }	
    }
     BotTracker::track($_SERVER, array("page_title"=>"Click JS Google","URLrenderizada"=>$src,"esGoogle"=>$esGoogle,"parametrosResize"=>$parametrosResize,"botname"=>$botname,"UA"=>$UA));
    ?>

Datos del último experimento

Al pasar unos días desde la implementación de la prueba para ver qué URLs renderiza Google, hemos podido observar la gran cantidad de URLs que renderiza, parece ser que ahora sí ha cogido ritmo, y renderiza muchas URLs diarias. Para más sorpresa, lo hace tanto en sites con versiones "adaptables" a dispositivos móviles como en páginas que no se adaptan, ya sean sites pequeños o enormes.... en todas ellas renderiza muchas URLs diariamente.

Observaciones sobre el renderizado de contenido

Aquí muestro una imagen de Google Analytics en tiempo real, y podemos ver cómo en la última media hora ha renderizado 10 URLs, mejor dicho, ha renderizado 5 URLs usando dos configuraciones de navegador como hemos comentado anteriormente. Para que quede más claro al difuminar las URLs he unido con flechas de colores las URLs que son la misma.

Google recuerda el tamaño de la pantalla para cada URL

Una de las sorpresas para mi ha sido que para cada URL Google recuerda el tamaño de la ventana, al menos el ancho. Como podemos ver aquí, el proceso es el siguiente:

Accede en modo Mobile con un tamaño de ventana fijo, 1.024px de ancho y 1.024px.
Accede en modo Mobile con tamaño 412px de ancho y 732 de alto (relación 9:16), en este punto es dónde cambiaría el ancho de la ventana para adaptarse al ancho del contenido (este resize no se muestra en estas líneas)
Como en el punto 2 ya sabe cuál es el ancho del contenido, cuándo vuelve a acceder lo hace con el tamaño que vió (y al que se adaptó) la última vez, 455px de ancho. Y el alto lo calcula en base a la proporción 9:16, que es 809px.
Después de ver que accedía con una ancho fijo que vio la anterior vez, modifique el ancho de la ventana para ver qué ocurría, y cuando accedió detectó que el nuevo ancho era 655px, por lo que cuando volvió a acceder usó el último tamaño que conce, 655px, y calcula el alto a proporción 9:16

Proceso de solicitudes de Googlebot

Como he comentado antes, esto nos hace preguntarnos más cosas, y es que cuándo se descubre o se investiga algo, normalmente, aparecen más preguntas y más dudas que antes, pero con más conocimiento y más profundidad.

¿Tendrá un límite de altura a partir del cual no valorará el contenido?
¿El contenido irá devaluándose al aparecer por debajo de esos 1.777px iniciales? Si es así... ¿será progresivo?

Comentar