Google presiona cada vez más para asegurar que los webmasters desarrollen una versión AMP de sus páginas web.
En los últimos meses han salido varios artículos relacionados con esta nueva tecnología, para ayudar a los desarrolladores, especialmente después de que el poderoso Google informara que las páginas AMP están empezando a ser útiles para todos aquellos sitios que quieren mostrar una página optimizada.
En su último mensaje, en el blog oficial de Google para webmasters, se puede encontrar un resumen de cómo comprobar los errores, relacionados con el código de AMP de las páginas web que conforman una página web. Voy a enseñarte la forma de analizar nuestras páginas, para entender si son válidas y correctas, después de instalar una versión AMP en nuestro sitio.
Cómo analizar los errores del AMP
El proceso de análisis de los errores es el siguiente:
- Implementar AMP en tu sitio web;
- Analizar una página codificada según el tamaño de la página móvil, mediante los métodos descritos a continuación, y corregir los problemas;
- Esperar a que Google Webmaster Tools indexen las páginas AMP y verificar si Webmaster Tools detecta errores en ellas;
Propongo este método ya que hasta la fecha las herramientas que veremos para analizar las páginas de AMP para validar una dirección URL única no hacen un rastreo de un sitio completo. Para los sitios con unas pocas páginas es fácil de analizarlas todas, pero con una gran cantidad se hace casi imposible.
El uso del Chrome y la consola de desarrollo
Las herramientas para desarrolladores del navegador Chrome puede mostrar el código y el punto donde se generan los errores. Para realizar el análisis, es necesario:
- Con el navegador Chrome abrir la URL de la página que se desea analizar y añadir esta cadena #development=1
- Abrir la herramienta para los desarrolladores o consola de desarrollo. Para ello se pueden utilizar dos caminos. El primero clic botón derecho del ratón y seleccionar Inspeccionar elemento. O utilizar las teclas de acceso directo CTRL + Maiusc + I
- En la ventana que se abrirá, elegir la pestaña consola
La consola de desarrollo nos mostrará, en el caso del código AMP los errores que existen, para poderlos corregir.
Si hay errores veremos la pestaña consola más o menos como en la imagen siguiente:
Extensión del navegador AMP
Si utilizas navegadores como Chrome o Opera puedes utilizar una extensión para identificar las páginas AMP para poder realizar una depuración de posibles errores.
Visita las páginas de tu sitio AMP y podrás directamente desde la barra del navegador ver los siguientes iconos:
- Hay errores en la página (icono rojo AMP);
- No hay errores en la página (icono verde AMP);
- Que la página no es AMP, pero tienes una página optimizada para la versión móvil, puedes acceder haciendo clic en el icono (azul AMP icono);
Directamente desde esta extensión es posible analizar los errores en la página, con relación al código de AMP, ver las líneas incorrectas de código y una breve descripción de lo que no funciona.
La extensión se puede descargar en el siguiente enlace:
La herramienta en línea para el análisis de código AMP
Tambien dispones de una herramienta en línea para hacer un análisis del código AMP de un sitio y saber si tienes errores en este enlace validator.ampproject.org
Para el análisis de una página con esta herramienta en línea, puedes:
- Introducir la URL de la página que quieres revisar;
- Pegar el código de marcado, copiar y pegar desde la fuente de la página para ser analizada;
Después de una de las acciones anteriores sólo tienes que pulsar el botón Validar, obteniendo el análisis de:
- Si tiene éxito tu sitio con AMP. No hay error (Estado de validación: PASS);
- Si la página no es una lista válida que tienes que corregir, indicando la línea y columna que genera el error (Estado de validación: FAIL);
