Diseño web

AMP test: Valida tus páginas AMP

En artículos anteriores te presentamos las páginas AMP, qué son y por qué son interesantes y te contamos cómo crearlas. Puede que te haya convencido y te hayas lanzado a programar tu sitio web bajo este estándar, así que hoy te explicamos cómo realizar un test de validación que te pueda ayudar en el desarrollo de las páginas AMP.

Probador de Google

Bien hayamos creado nuestra página AMP de cero, bien la hayamos configurado a través de algún módulo de WordPress, el resultado deberá ser válido para pasar al índice de Google. Ya hemos hablado anteriormente de que las Accelerated Mobile Pages tienen que cumplir unos formatos y condiciones concretas. Por tanto, para estar seguros, lo mejor es probarla y realizar un AMP test de Google.

En esta página encontrarás un sencillo campo de búsqueda para que pongas la dirección a analizar o el código, directamente. En un momento la aplicación leerá la web y te dirá el resultado.

Además, Google te ofrece un análisis de todo el sitio web desde su herramienta Search Console. En el apartado mejoras, si tu sitio tiene implementada esta tecnología, podrás encontrar un apartado donde se te detallarán los posibles errores y advertencias que se encuentre Google al rastrear tu sitio.

Estos son algunos de los errores que puede encontrar:

Hay un atributo o un valor de atributo no permitidos en la etiqueta HTML.
No se permite la etiqueta «i-amphtml-sizer», excepto en algunos formularios específicos.
La etiqueta «img» no puede depender de la etiqueta «amp-img».
El protocolo de URL en el atributo «href» de la etiqueta «a» no es válido.
Hay una etiqueta «script» de un componente AMP, pero no se utiliza.
Solo se permiten las etiquetas «style» con «amp-boilerplate» y «amp-custom», y solo se pueden situar en el encabezado del documento.
No puede incluir JavaScript personalizado.
Las etiquetas «amp-boilerplate» de esta página tienen errores de formato
Bloqueada por robots.txt

Search Console te avisará si en tu sitio web encuentra errores AMP

Probar en la consola del navegador

Hay otra prueba que puedes hacer sobre tu página AMP. Escribe la dirección en la barra del navegador y, a continuación, escribe:

#development=1

Por ejemplo, en el caso de nuestro blog, quedaría así:

https://carontestudio.com/blog/amp/#development=1

Tras realizar la búsqueda, abre la consola y allí tendrás información adicional sobre el estado de la página y los posibles errores.

Probador de código

La web https://validator.ampproject.org/ dispone de un validador de código, donde podremos pegar nuestro AMP y obtener el resultado de la validación

Extensión de Chrome para AMP

Por último, la extensión AMP Validator se puede añadir al navegador Chrome y, de manera integrada y sencilla, podemos obtener los resultados en el momento.

No hay mucho más que contar de este tema, ya ves que tienes diferentes herramientas para probar y validar tus AMP. Ahora solo resta ponerse manos a la obra y realizar un buen diseño web. ¿Quieres compartir la tuya?

Páginas AMP: Qué son | Cómo crearlas | Validar páginas AMP

Alberto Bravo

Hola, soy Alberto Bravo, licenciado en BB.AA. en la Universidad del País Vasco. Me especialicé en diseño gráfico e ilustración. Tras varios años trabajando de ello (etapa de autónomo incluida), decidí digitalizarme y pasar al diseño web. Allí descubrí el SEO y la programación. Actualmente, soy el responsable del departamento SEO de Caronte Studio y ya no tengo tiempo para ilustrar. En mis artículos te hablaré, principalmente, de SEO y tiendas online, pero seguro que también podrás encontrar algún que otro artículo sobre diseño gráfico. WEB | LINKEDIN | ARTSTATION