Seguro tienes bien claro la importancia que le da Google a la velocidad de carga y compatibilidad móvil de las páginas web. Una de las mejores soluciones para acelerar y dar una buena experiencia desde móviles es aplicar la tecnología AMP. En este post te explicare como verificar AMP, detectar y corregir errores para que todo funcione según lo debido. 🙂

Para empezar voy a hacer una breve introducción sobre que es AMP y como aplicarlo en sitios web de WordPress. Y digo breve porque cuando busque un tutorial para instalar AMP en mi blog me topé con esta guía de José Manuel Peña de tuwebdecero. Y como me es muy difícil hacer algo más completo que eso aquí solo te introduciré, si te queda alguna duda te vas a su guía. 😉

¿Que es la tecnología AMP?

El proyecto AMP es una iniciativa de código abierto que busca mejorar la web para todos. Dado que a Google le encantan las web veloces y bien adaptables a móviles a incentivado notablemente este proyecto.

“El proyecto AMP es una iniciativa de código abierto que busca mejorar la web para todos.”

El sistema AMP (Accelerated Mobile Page) utiliza estos tres tipos de elementos para mejorar el rendimiento de las web en terminales: AMP HTML, AMP JS y el uso de los cachés. Básicamente lo que hace es tomar el código de una web y adaptarlo a su lenguaje de escritura para hacerlo más ligero. Llegando a restringir algunas etiquetas.

La consecuencia probada que trae el uso de AMP es la aceleración de tu web desde móviles. Después podrás encontrar sitios que aseguran un mejor posicionamiento y/o aumento de tráfico desde móviles, pero eso no esta respaldado por nada oficial. Es más en lo que lleva mi blog con AMP no vi mejor posicionamiento ni aumento de tráfico. Pero el que Google esté respaldando esto hace pensar que en el futuro será un factor a tener en cuenta para el posicionamiento. Por lo que recomiendo usarlo. 🙂

“La consecuencia probada que trae el uso de AMP es la aceleración de tu web desde móviles. Después podrás encontrar sitios que aseguran un mejor posicionamiento y/o aumento de tráfico desde móviles, pero eso no esta respaldado por nada oficial.”

¿Como instalar AMP en WordPress?

La instalación de AMP en WordPress es súper sencilla, solo necesitarás dos plugins.

  •  Plugin AMP: una vez instalado y activado no tendrás que hacer ninguna configuracion. De forma automática este plugin creará para cada URL de tu web una version AMP con la siguiente estructura. http://tusitioweb.com/unaurl/amp. La version móvil general de tu web no desaparece, pero en unos días Google irá indexando esta version AMP de cada URL y reemplzado así la version móvil actual.
  •  Amp for wp-Accelerate mobile pages: como te dije antes lo que hace la AMP es adaptar la escritura de tu web (HTML, CSS, etc) a su propio lenguaje (explicado bien básica.. jejej). Por lo tanto habrá elementos que sufrirán cambios, otros elementos desaparecerá, y tu web se verá bastante menos bonita.. 🙁 Para modificar la apariencia es que existe este plugin.

¿Como verificar AMP?

Veremos dos formas para verificar AMP en tu sitio web. La primera con el uso de una extensión de Chrome y la segunda con el uso de una herramienta de Goolge

Verificar AMP con la extensión AMP Validator

Una vez instalado AMP entra al navegador Chrome e instala la extension AMP Validator.

Verificar AMP con AMP Validator

Ya instalada la extensión, aparecerá un icono en el rincón superior derecho del navegador.

Verificar AMP con AMP Validator

Al cargar una página tradicional el icono adopta el color gris. Pero en caso que la página tenga una version AMP activa el ícono tomará un color azul.

Verificar AMP con AMP Validator

Si haces click en dicho icono, la extensión te llevará a la versión AMP de la página.

Verificar AMP con AMP Validator

En caso que la página no tenga errores, el icono saldrá de color verde, como la imagen anterior. Pero si, de lo contrario, existen errores el mismo estará de color rojo con un sub-índice numérico que indica la cantidad de errores.

Error AMP - Extension AMP Validator

Como puedes ver en la anterior imagen, con esta extensión no solo conoces que hay errores; sino que ademas te especifica cual es el origen de los mismo. Específicamente en esta página hay un error, que es la inclusión del calificador !important, dado que el mismo no es permitido en AMP.

“Con esta extensión no solo conoces que hay errores; sino que ademas te especifica cual es el origen de los mismo.”

Luego veremos como arreglaremos dicho error. Ahora veamos otro método para validar AMP y encontrar errores.

AMP Test – Google Search Console

El potencial de Google search console no para de asombrarme, no hay nada que se le escape.. jeje. Y es que nos brinda la posibilidad de hacer un test para verificar nuestras URL de AMP (muy similar al test mobile friendly).

Solo debes ingresar, colocar la URL que desees analizar y hacer click en Ejecutar Prueba. En caso que este todo ok, aparecerá un mensaje como el siguiente (todo en verde obviamente.. jeje)

Test AMP Google

En caso que dicha página aún no haya sido indexada (en su version AMP) por Google, puedes hacer click en ENVIAR A GOOGLE. Eso le mandará una alerta a Google advirtiendo que dicha página tiene una version AMP válida y acelerará el proceso de indexación.

Pero bueno como no todo en el mundo es color de rosas (va en este caso verde.. jajaaj) pueden aparecer errores. Y en ese caso el test de Google devolverá la siguiente respuesta.

Esta página es la misma que analice con la extensión AMP Validator, debajo me informa que la etiqueta style amp-custom contiene CSS !important; algo no válido en AMP.

Como detectar errores AMP con Google Search Console

Hasta aquí vimos como verificar manualmente una URL de AMP. Pero seamos sinceros, si el sitio web es antiguo no será práctico verificar cada una de las cientos de URLs!!. 🙁

“Si instalas AMP en un sitio web antiguo no será práctico verificar cada una de las cientos de URLs!!. 🙁 “

Lo anterior puede solucionar problemas concretos para paginas o posts con elementos que la hacen diferentes al resto. Pero para un análisis global necesitamos una herramienta que analice todas la URLs de la web. Y aquí vuelve el gran Google Search Console. Una vez aplicado AMP Google comenzará a indexar dicha version AMP, y en caso de detectar errores los puedes ver desde Search Console.

Dirígete a la pestaña “Apariencia en el buscador” –> “Accelerated Mobile Pages.”. Allí encontraras un gráfico que muestra la cantidad de URL con AMP que Google ha indexado, y otro el cual muestra la cantidad de errores detectados.

Si observas ambas gráficas de indexacion, al día de hoy no tengo errores AMP en mi blog. Hay 78 páginas de AMP indexadas y 0 páginas AMP con problemas graves.

Pero esto no fue siempre así. El día 6/07/17 llegue a tener 18 errores AMP, los cuales fui corrigiendo hasta llevarlos a cero. 🙂

En caso que tengas errores graves, debajo del gráfico te aparecerán los URLs relacionadas a dichos errores. Y haciendo click en ellas Search Console te llevara al AMP test que vimos en el apartado anterior. Desde el cual podrás conocer la raíz del problema.

Como habrás visto Google respalda totalmente este proyecto dotando de un sistema de verificación AMP super completo. 🙂

Como corregir errores de AMP

En general los errores no aparecen por arte de magia, sino que aparecen cuando se mete mano editando la version AMP. Ese fue exactamente mi caso, de no haber modificado algunas cosillas los errores no habrían existido nunca. ¿Estoy diciendo que no modifiques nada para no tener problemas?. Nooooo!! para nada!!. AMP modifica el aspecto visual de la web, y algunos elementos, si no lo editamos se ven muuuy mal!!.

“No se tú pero yo no quiero espantar usuarios. Lo de la aceleración esta genial pero si la web se ve mal los lectores huirán como ratas!! jaja”

Como dije al pirncipio usando el plugin  Amp for wp-Accelerate mobile pages puedes editar la apariencia de la version AMP. Entre la gran cantidad de configuraciones permite agregar códigos CSS. Mi blog utiliza varios elementos creados por CSS (cajas, botones, estilos de widgets, etc). Para que se vean en la version AMP los agregue usando el CSS del plugin.

Algunas de las líneas de código de dichos CSS me trajeron problemas, y te los podrá traer a ti también.. jeje

Ahora volvamos a la pa´gina que tenia el error !important

Para corregirlo solo debo ir al apartado de edición de diseño (design) del plugin Amp for wp-Accelerate mobile pages.

Desplazar el cursor hasta abajo, donde esta la caja de códigos CSS. Allí buscaré las lineas con !important.

Debo borrar todos los !important (no las líneas de codigo entera). Por lo tanto el código CSS quedará así.

Para el caso esto bastará, ya que esta página solo tenia un error. Te podrás encontrar con muchos errores, pero siempre que vengan de los CSS adicionados no será problema solucionarlo. Lo peor que te puede pasar es que debas eliminar el elemento entero para salvar el error.

Bueno ya vimos como verificar AMP, detectar y corregir los errores. Al menos los errores que vienen de la edición del CSS.. jeje Así que hasta aquí llega el post. Espero que lo hayas encontrado de utilidad. De ser  así compártelo que no cuesta nada! 😉