Herramientas y Análisis Mobile

¿Qué podemos hacer para chequear la versión mobile de nuestra web o la de todos nuestros competidores?
En este rápido post, vamos a intentar dar unos cuantos tips, con algunas herramientas

Screaming Frog y chequear cabeceras

Para analizar todas las urls de tu web, o la de cualquiera de tus competidores, por separado, podemos rastrear cualquier sitio web usando los ojos del bot de google para móviles

 
En función del tipo de sitio mobile en el que estemos (diseño responsive, publicación dinámica o sitio paralelo con urls independientes), podemos usar los distintos footprints por tipología, para chequear si las urls del sitio, están cumpliendo con los etiquetados recomendados. Recapitulando, respectivamente:

• En responsive: al ser el mismo html y contenido, para escritorio que para mobile, la petición de un usuario, solo conlleva un paso, y es que el servidor muestra el contenido, solo que lo adapta a su dispositivo.

<meta name="viewport"

Añadimos un campo custom

 
Y de ahí, ya vemos las urls en las que existen coincidencias

• En publicación dinámica: en este caso tiene que darse un paso adicional para servir el contenido, se tiene que detectar quién hace la petición (navegador, dispositivo),  y después se sirve el contenido  específico.

La cabecera Vary HTTP es la que ayuda a que el contenido específico de móviles, sea detectado
Para saber esto, necesitamos analizar las cabeceras que se hacen en las peticiones de las urls que queramos analizar, herramientas como urivalet, web-sniffer, u otros plugin, pero en modo bulk, lo único que he encontrado, es urlitor, pero no te deja extraer csv con las cabeceras de las url, solo muestra los datos en el hover del puntero. Dos ejemplos:


 

• En urls independientes: al igual que en la anterior, se debe detectar quién hace la petición (navegador, dispositivo), después el servidor le va a indicar la versión de la url, y el navegador pedir la url para que se sirva el contenido específico.

En screaming por defecto podemos observar el canonical y chequear si están bien puesto.
Se podría hacer el estudio inverso y analizar las urls de desktop, para ver si apuntan con «rel alternate» hacia la versión mobile de cada url.

 
 
 
Tanto Screaming como Urlitor, te ofrecen la velocidad de carga de cada url, cosa bastante interesante

Tools de análisis mobile online

Las de Google, en principio ya son de las más conocidas:

• Google Page Speed Insights Mobile: la herramienta de rendimiento que ofrece google, está disponible para desktop y mobile, y lo interesante también es que añade info de experiencia de uso.

https://developers.google.com/speed/pagespeed/insights/

• Google Mobile Friendly Test, aquí tenemos un diagnóstico sobre el estado de la url analizada, con consejos y datos cuando la url no pasa el test

 

 
 
https://www.google.com/webmasters/tools/mobile-friendly/

• Google Webmaster Tools: los errores que se arrastren en la sección «usabilidad móvil» de GWT, pueden ser las que debiliten la visibilidad en los SERPs mobile. A pesar de que una url pase el test de mobile-friendly, solucionar los posibles errores que se generen, es vital.

Otras bastante interesantes:

• Feed The Bot

El chequeo básico de cabeceras, respuestas, etiquetados y el aporte de usabilidad y cómo mejorar las carencias.

 
Y me gusta especialmente, que también añade si robots.txt está bloqueando recursos que no debe

• Pure Oxygen, parecida a la anterior, por la info que ofrece de análisis

Te deja elegir entorno y si quieres seguir recibiendo updates, dejas tu mail….y supongo que de paso te intentan vender algo 😀

 
Lo guay es que si alguien duda sobre qué tipo de versión mobile usa una web, lo puede ver en «configuration»

• Mobile Moxie, este es más bien un validador que engloba varios atributos y características, y otorga puntuaciones. Interesante, cuanto menos.

 

¿Y qué podemos hacer con URLProfiler?

Vamos a scrapear unas cuantas urls que estén indexadas en google.es de un sitio que sabemos que trata la versión mobile con url independientes

 
Ahora estas urls las vamos a pasar por urlprofiler, para chequear de una sola vez y en modo bulk, algo parecido a lo que ya hemos hecho: status code, canonical tag (con user agent google smartphone)

 

 
Y una vez pegadas las urls y analizadas por la herramienta, obtener el excel de datos

 
Y para terminar, comentar una función súper interesante «Screen Capture», para obtener las resoluciones de pantalla principales, tanto desktop como mobile, y ver cómo se ajusta el contenido de las urls de análisis.

 
Y una carpeta se generará en nuestro ordenador con los .png con los pantallazos.

Lo mejor de todo es que cualquiera de estas herramientas y usos se pueden usar para cotillear a todos los competidores 😀