Herramientas y Análisis Mobile

por | Mar 27, 2015 | Mobile | 0 Comentarios

¿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
screaming frog googblebot mobile
 
En función del tipo de sitio mobile en el que estemos (diseño responsivepublicació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
custom screaming frog
 
Y de ahí, ya vemos las urls en las que existen coincidencias
viewport screaming frog

  • 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:
vary http
vary header
 

  • 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.
canonical screaming mobile
 
 
 
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.

page speed
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

mobile-friendly test
 
friendly test mobile ko
 
 
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.

usabilidad movil gwt
Otras bastante interesantes:

El chequeo básico de cabeceras, respuestas, etiquetados y el aporte de usabilidad y cómo mejorar las carencias.
feed the bot
 
Y me gusta especialmente, que también añade si robots.txt está bloqueando recursos que no debe
feed the bot 2

  • 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 😀
pure oxygen 2
 
Lo guay es que si alguien duda sobre qué tipo de versión mobile usa una web, lo puede ver en «configuration»
pure oxygen

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

mobilemoxie
 

¿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
serp scraperserp scraper csv
 
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)
user agent urlprofiler
 
urlprofiler datos
 
Y una vez pegadas las urls y analizadas por la herramienta, obtener el excel de datos
resultados urlprofiler
 
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.
screen capture
 
Y una carpeta se generará en nuestro ordenador con los .png con los pantallazos.
screen capture folder
Lo mejor de todo es que cualquiera de estas herramientas y usos se pueden usar para cotillear a todos los competidores 😀