Iván Ibañez

Qué es una Página AMP

Introducción

¡Hola! ¿Te gustaría saber qué es una página AMP? He intentado hacer un post para gente que simplemente quiera conocer el uso de AMP y también para quienes necesiten información técnica sobre ello. Pero sean cuales sean tus necesidades, te recomiendo que leas hasta el final.

En qué consiste una página AMP

Empecemos por lo básico. ¿Qué es esto de página AMP? AMP (Acelerated Mobile Pages) es un proyecto dirigido por Google, en el que participan Twitter y varias compañías más, que tiene como objetivo reducir el tiempo de carga de las páginas en dispositivos móviles, y lo hace bastante bien. Podríamos decir que básicamente es una forma de HTML reducido, una página HTML super ligera con una velocidad de carga mucho mayor que las páginas comunes.

El objetivo de una página AMP es mejorar la experiencia del usuario cuando navega desde su smartphone, haciendo que encuentre rápidamente la información que busca, mejorando notablemente la velocidad de carga. Uno de los directores del proyecto AMP, Rudy Galfi, aseguró que la media de carga de una página AMP es de 0,7 segundos, frente a los 20 segundos de media de otras. ¡Bravo por AMP, es una gran diferencia! ¿Pero realmente nos compensa? Lo iremos viendo durante el post…

Aquí puedes ver la Web oficial de Google AMP

¡Nada tiene que ver una página Responsive con una página AMP! Son conceptos distintos, con distintos objetivos y claro, para necesidades distintas.

AMP tiene los objetivos claros

Más de la mitad de los visitante de una web, ¡abandonan dicha web antes de los 15 segundos! Muchas veces ocurre porque la web no tiene un responsive bien hecho, o directamente no tiene (a día de hoy, 18 de Febrero de 2017, lo lógico es que las webs sean responsive ¿no?) Bromas a parte, otra de las razones por la que más de la mitad de los visitantes abandonan la web tan rápido, es por la lentitud de la web, y es que Google afirmó que casi un 30% de los usuarios de teléfonos inteligentes no visitan un sitio web porque la velocidad de carga es demasiado lenta, y otro porcentaje igual de alto las abandona por no encontrar la información sin buscar demasiado. Así que hay un par de razones de peso: La velocidad y lo poco accesible que está la información de valor, por lo que el proyecto AMP quiso hacer algo, y lo tienen muy claro: Velocidad y contenido limpio. Sin florituras ni distracciones que impidan al usuario centrarse en lo que busca. Sin contenido secundario que ralentice la carga, lo que obliga a los creadores de contenido a esmerarse mucho más por un contenido de calidad. Quizá el uso de páginas AMP nos haga encontrar un mejor contenido en la red…

Velocidad

Veamos algo un poquito más técnico. A que se debe la gran velocidad de una página AMP:

  • la reducción de HTML, eliminando etiquetas poco necesarias o innecesarias que ralentizan la carga.
  • Utilizar una versión simplificada de CSS. (Se podrán utilizar la mayoría de códigos CSS pero algunos simplemente no están permitidos.)
  • Las páginas AMP aceptadas se almacenarán en el caché propio de AMP Google
  • Javascrip por otro lado, no está permitido de manera libre, tendremos que ceñirnos a una biblioteca Javascrip propia de AMP que han decretado como correcta.

Reconocer una página AMP

El uso principal (por el momento) de páginas AMP es para webs o páginas de gran cantidad de contenido, como un blog o una web de noticias. Por eso mismo una página AMP no es útil para todos, con AMP el diseño se simplifica mucho más centrándose en el texto. De hecho, uno de los primeros sitios web en utilizar páginas AMP en sus noticias, fue el periódico The Guardian. Te dejo aquí dos enlaces de la misma página de una noticia en The Guardian, una en versión HTML común y la otra con AMP

¿Compensa tener páginas en AMP?

¡Mejor SEO!

Sí, AMP mejora el SEO, está claro, al cargar más rápido Google nos premia, y reducimos bastante eso porcentaje del que hablábamos antes, el que hacía referencia a los usuarios que abandonan una web porque es lenta en cargar. Los usuarios se quedarán en nuestra web y también mejora el SEO, siempre y cuando nuestro contenido sea bueno, muy bueno. (¡El contenido, la clave del SEO!)

¿Qué ocurre con la publicidad?

Google es consciente de la importancia de los anuncios, y del dinero que mueven también, por ello decidió tratar este tema con cautela. Cualquier sitio HTML AMP conservará sus anuncios, siempre que el formato no fastidie la experiencia del usuario.

Aunque Javascrip está mayormente prohibido en AMP, existen algunas vías libres para poder incluir anuncios, así que para la gran mayoría, los anuncios seguirán intactos. Google dijo hace tiempo que es un objetivo central del proyecto AMP, apoyar las suscripciones y los anuncios. También dijeron en resumidas cuentas que trabajarían en conjuntos con editores y gente de la industria para definir los parámetros de los anuncios para que estos mantengan la gran velocidad de AMP.

¿Qué hay de las estadísticas?

Al igual que ocurre con la publicidad, aunque tengamos Javascrip muy ajustado, con AMP podemos seguir analizando nuestros sitios Web, y de una forma muy inteligente, que ya en AMP han optado por evitar que el seguimiento de varios análisis ralentice la velocidad, por ello se han decantado por hacer una medición que informe a muchos, mediante el elemento AMP-Pixel, una etiqueta que nos permite medir visitas de página como un pixel de seguimiento típico.

También existe la posibilidad de usar Analytics en AMP, mediante el elemento amp-analytics, que integra funciones de compatibilidad con Google Analytics. Tendrás que incluirlo en el documento como elemento personalizado. Para inluirlo en una página tendrás que insertar esta secuencia en la etiqueta <head>

<script async custom-element="amp-analytics"
    src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

Después, para habilitar la compatibilidad con Google Analytics tendrás que configurar el atributo type del elemento amp-analytics en GoogleAnalytics.

<amp-analytics type="googleanalytics" id="analytics1">

Para saber más sobre la compatibilidad de Google Analytics y AMP visita el siguiente enlace:

Como crear páginas AMP

¿Qué formatos puedo tener?

Puedes tener una página creada directamente en AMP, o esa misma página en un simple responsive y también en AMP, lo que en mi opinión es la mejor opción, pero ten en cuenta algo muy importante: ¡CONTENIDO DUPLICADO! si quieres tener una página con una versión en AMP, tendrás que utilizar el elemento de enlace rel=”canonical” para indicar que el contenido duplicado es correcto.

Plugin AMP para WordPress

Una de las mejores formas de probar AMP es a través del CMS WordPress, y con este fantástico plugin es muy fácil. (Te dejo el enlace para descargarlo)

Comprueba tus páginas AMP en Search Console

Existe un apartado dentro de Google Search Console donde podrás gestionar tus páginas AMP. Para hacerlo sigue estos pasos:

  1. Entra en tu Search Console y en la página pricipal haz click sobre la URL de la web donde tengas tus páginas AMP
  2. En el menú de la izquierda, haz click en el apartado: Apaciencia en el buscador
  3. Haz click en la última opción dentro de Apaciencia en el buscador, donde dice: Accelerated Mobile Pages
  4. Gestiona y configura tus páginas AMP

También puedes probar si tu página AMP es válida en este enlace de Search console.

¡¡Asegúrate siempre de que tus páginas AMP son válidas!!

 

Especificaciones de HTML AMP

A continuación te dejo una breve lista sobre las equivalencias de etiquetas HTML AMP, para que le eches un vistazo.

scrip:No se permite a menos que sea ( <script type=“application/ld+json”> )
imgSe cambia por: amp-img Hay que tener en cuenta que HTML 5 no requiere etiqueta de fin, pero en AMP sí, y es: </amp-img>

 

videoSe cambia por: amp-video
audioSe cambia por: amp-audio
iframeSe cambia por: amp-iframe
frameProhibido
baseProhibido
framesetProhibido
objectProhibido
parmanProhibido
appletProhibido
embedProhibido
formRequiere incluir una extensión amp-form
input elementsPermitidos a excepción de: <input[type=image]>, <input[type=button]>, <input[type=password]>, <input[type=file]>
buttonPermitido
styleSe permiten etiquetas de estilo adicionales con atributo amp-custom

 
 
 
 

Conclusión

Creo que por el momento las páginas AMP interesan a webs como periódicos o blogs con contenidos amplios.

El proyecto en sí es bastante bueno, y han pensado en todo. La verdad es que lo que pretendían hacer lo han hecho, y muy bien. Solo nos queda ver qué ocurre con AMP con el paso del tiempo. Quizá una de las opciones a implementar es la darle al usuario una opción más directa para elegir entre la página normal y la versión AMP. La creación de versiones AMP no es algo complicado, siguiendo las pautas es fácil crearlas, pero quizá por el momento a la gran mayoría de usuarios nos merezca más la pena optar por un diseño Responsive bien trabajado para la visualización de páginas en teléfonos inteligentes, de hecho yo personalmente optaría (dependiendo del caso) en crear una web y sus páginas directamente pensando en su visualización móvil antes que en la versión de escritorio. Las búsquedas en móviles están superando con creces a las de escritorio, y hay que adaptarse, nunca mejor dicho.

Espero que este artículo te haya parecido interesante, y si tienes algo que añadir, o quieres dejar un comentario, no te cortes!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *