En este post te hablaré sobre el formato para las páginas web móviles aceleradas AMP, que es y qué hace exactamente, cómo mejora la velocidad web y cómo puedes añadir AMP WordPress.

Los usuarios de internet ya navegamos más por internet con dispositivos móviles, y la realidad es que la navegación móvil ya ha superado a la navegación desde el escritorio.

El problema es que las páginas web no están adaptadas a las necesidades de los móviles porque aunque ya existen web responsive que adapta el diseño a todos la navegación web en móviles sigue siendo lenta ya sea por las limitaciones de procesamiento o por los datos móviles que siguen siendo limitados.

¿Cuántas veces te has quedado mirando la pantalla del móvil con cara de bobo esperando a que cargue una página web?

¿Y cuantas veces cierras el navegador porque te has cansado de esperar?

Pues para solucionar este problema y crear una navegación web móvil ultra rápida se ha creado un nuevo formato para la web basada en el HTML llamado proyecto HTML AMP Accelerated Mobile Pages.

¿Qué es AMP Accelerated Mobile Pages?

Amp significa Accelerated Mobile Pages, o Páginas Móviles Aceleradas y es un nuevo formato para mostrar páginas web en dispositivos móviles que tiene como objetivo principal conseguir una velocidad increíble.

AMP es una tecnología con licencia Open Source esto sumado al apoyo de las grandes empresas tecnológicas del sector nos da una garantía sobre su uso, actualización y soporte.

AMP es un subconjunto de código HTML de las páginas de artículos y también es llamado AMP HTML.

¿Quién está detrás del proyecto AMP?

El formato AMP está apoyado por empresas y plataformas como Google, WordPress, Twitter, Pinterest, LinkedIn entre otras.

Y editores de noticias y periódicos digitales como The Guardian, el Washington Post,  BuzzFeed también le están prestando atención a esta tecnología.

¿Por qué le están prestando tanta atención estas grandes empresas? Pues porque se supone que Google va a premiar el SEO del quien ofrezca la versión AMP de su web y servicios como Google News también integrarán esta tecnología.

¿Cuándo usar el formato AMP en WordPress?

Si la pregunta que te estás haciendo es ¿Necesito la versión AMP para mi página web?

Pues esto depende de cómo sea tu página web.

En principio esta versión está pensada solo para mostrar noticias y artículos de un blog.

El formato AMP está pensado para páginas web con contenido dinámico, es decir Blogs y Revistas o Periódicos Digitales.

Por lo tanto si tienes un Blog te beneficiara tener la versión AMP para tus publicaciones ya que si son leídas en dispositivos móviles serán más rápidas.

Pero la versión AMP aplica serias restricciones a los códigos JavaScript y otros elementos que utilizamos para el diseño de la web.

Por lo tanto para páginas web estáticas como páginas web corporativas aunque te puede beneficiar tener una versión rápida para móvil tienes que saber que la versión AMP tiene serias restricciones para el diseño y a funcionalidades.

Y como el objetivo de las páginas web es atraer a los usuarios y vender siendo atractivas y funcionales para los usuarios puede que no sea la mejor opción para páginas web estáticas y tiendas online.

Al menos, de momento.

Y digo de momento porque si los grandes de la tecnología se han puesto de acuerdo para crear un estándar de versión  para las páginas web móvil quizá esto evolucione más allá de lo que tenían pensado.

Cuando se muestra el formato AMP Páginas Móviles Aceleradas

El formato amp de páginas aceleradas para móviles no se muestra automáticamente a los usuarios que visiten nuestro sitio web desde dispositivos móviles.

En vez de eso son los buscadores web como Google, agregadores de noticias y aplicaciones los que deciden que versión de tu página web se muestra, si la responsiva o la versión AMP.

Aún se está desarrollando esta versión de Google pero puedes utilizar la demo del navegador AMP de Google en https://g.co/ampdemo

Como podemos ver en la imagen Google destaca las páginas con formato AMP y podemos distinguirlas en el navegador con el icono de AMP.

Diferencias entre AMP y Responsive

La diferencia entre AMP y Responsive es que una página web responsive adapta el contenido al ancho de la pantalla y cambia su estructura según el dispositivo manteniendo los códigos java script, los estilos y los efectos de cada elemento.

Y una página con AMP muestra una versión diferente de la página web que restringe el uso de todo tipo de códigos y etiquetas que ralentizan la velocidad y prácticamente solo dejan ver el texto y el contenido útil.

En resumen la versión de páginas móviles aceleradas AMP quita todo lo que sobra en una página web móvil.

Podemos usar los dos tipos de técnicas perfectamente en la misma página web, al usuario se le mostrara la versión Responsive o AMP según corresponda.

En esta captura podemos apreciar como cambia el diseño de la web ala izquierda la versión AMP a la derecha la versión normal de la web.

Como podemos observar todo lo que no es contenido útil desaparece, así como la barra lateral que no es útil en dispositivos móviles.

¿Por qué es tan rápido AMP?

AMP está pensado para acelerar la versión móvil de las páginas web y con este objetivo la versión AMP HTML pone unas restricciones de diseño y no admite una serie de códigos, etiquetas y funcionalidades en la web.

Es decir que AMP es un subconjunto de HTML simplificado, restrictivo y rápido, donde la mayoría del código es HTML personalizado con etiquetas AMP.

El uso del JavaScript está muy limitado y AMP utiliza su propia librería de JavaScript personalizada que convierte todo el JS externo en JS asíncrono para que la web cargue más rápidamente.

Si eres desarrollador puedes ver qué etiquetas están permitidas y cuáles no en la información de AMP HTML

Lo que si puedes utilizar es CSS en la versión AMP para tunearlo pero siguiendo unas reglas para aplicar el estilo de nuestra web, es decir que también está limitado y tiene que estar optimizado.

Ademas se utiliza Google AMP Cache para mostrar este tipo de formato cargando el JavaScript , imágenes y documentos desde esta caché lo que hace la web más rápida y segura.

AMP también aplica la carga aplazada del contenido o Lazy Load.

Por estas razones la web móvil será muy rápida pero también afectará al diseño de la web y no puedes utilizar ciertas funcionalidades en esta versión AMP para móvil.

El proyecto AMP evoluciona constantemente permitiendo cada vez más elementos optimizados para web móviles.

Puedes leer más información y mantenerte actualizado de los cambios en la web del proyecto AMP.

Beneficios de las AMP Páginas Móviles Aceleradas

Si tener una versión AMP de mi web afecta a mi diseño ¿qué beneficios obtengo a cambio?

El principal beneficio de las AMP es tener una versión de tu web ultrarrápida para móviles.

Y cuando digo ultra rápida me refiero a que puedes competir con Facebook en rapidez, sin exagerar, veamos un ejemplo.

Sin AMP:

Página web con versión AMP página móvil acelerada:

Como podemos ver la velocidad, el tamaño de la web y las peticiones al servidor mejoran de forma increíble.

Y como consecuencia de tener una web ultra rápida también se mejorará varias estadísticas que afectan al SEO como la tasa de rebote,  y se reducirá el consumo de datos de nuestro servidor que nunca está de más.

Además se mostrará una web cacheada y usando estándares de optimización.

Google Search Console ya tiene una sección AMP para medir la indexación de estas páginas y los errores.

Amp para WordPress

Ahora te voy a explicar paso a paso cómo poner AMP en WordPress mediante un plugin.

El proyecto AMP páginas móviles aceleradas tiene su propio plugin para WordPress.

Plugin AMP

Se instala como cualquier otro plugin del repositorio de WordPress, vamos a Plugins > Añadir Nuevo,  buscamos AMP lo instalamos y activamos.

Una vez instalado no tienes que configurar nada, ya tendrás la versión AMP de los post de tu web lista.

Actualmente solo serán los post los que tengan esta versión AMP pero próximamente las páginas también tendrán su versión AMP.

Para ver la versión AMP de tu página web añade al final de la URL /amp/ (o añade URL /?amp=1/ si no tienes los enlaces personalizados en WordPress)

Ejemplo: https://sensacionweb.com/menu-wordpress/amp/

Como vemos AMP elimina todo lo que no es el contenido útil de la entrada, como la barra lateral y el diseño.

Dejando un diseño web muy minimalista, sencillo y rápido, muy rápido.

Comprobar que funciona la versión AMP de WordPress

Para saber que la versión AMP funciona correctamente y que nuestra página web no va a explotar podemos utilizar un verificador de  versión AMP de nuestro sitio web.

AMP validator

YOAST SEO y AMP

YA NO ES NECESARIO USAR GLUE FOR YOAST SEO

El plugin Yoast Seo crea incorrectamente algunas etiquetas de SEO para corregir este problema el equipo de Yoast ha creado el plugin Glue for yoast seo amp, que soluciona este problema.

En resumen si utilizas Yoast SEO y quieres instalar la versión AMP de tu web también tienes que incluir Glue For Yoast Seo Amp.

Aparte de solucionar este problema Glue for Yoast SEO te permite incluir el código de Google Analytics para poder medir las  analíticas de las páginas AMP de tu sitio web.

También permite opciones para personalizar parte de la versión AMP como incluir el logo de tu web y cambiar el color de los textos y links.

Personalizar AMP en WordPress

Para personalizar la versión AMP en WordPress podemos utilizar el plugin Page Frog, este plugin permite la personalización de las paginas AMP.

También permite añadir Google Analytics y Google Adsense a la versión AMP web móviles aceleradas entre otras plataformas.

NOTA: utilizar este plugin si no usamos el plugin Yoast SEO ya que Glue for Yoast SEO ya incluye opciones de personalización de AMP.

Lo que tienes que tener en cuenta sobre AMP y WordPress

• Es una tecnología aún en desarrollo con constantes actualizaciones.
• Es una versión optimizada de la página web para móvil.
• El diseño, contenido y navegación están optimizados para móvil.
• El diseño y su personalización son limitados.
• El plugin AMP de momento solo soporta entradas post.
• Asegúrate de tener la relación canónica configurada en tu sitio.
• Tienes que insertar el código de Google Analytics en la versión AMP si quieres medir las estadísticas.
• Si utilizas Yoast Seo añade el plugin Glue para Yoast SEO AMP para solucionar problemas de seo en la versión AMP.
• Está pensada para web que generen contenido.
• No está pensada para web estáticas corporativas.

Puedes leer más información y mantenerte actualizado sobre los cambios y evolución del proyecto AMP en:

• AMP Project
• GitHub AMP
• AMPbyexample

Conclusión sobre AMP en WordPress

AMP está avalada y desarrollada por las grandes empresas del sector tecnología que buscan un estándar para la navegación móvil, y esto es una garantía de que esta tecnología acabará utilizándose.

Estoy seguro de que en un futuro llegarán a WordPress temas con versiones AMP incluidas y personalizables a medida que se demande la versión AMP para móviles.

AMP no está pensada para páginas web estáticas, está pensada para grandes generadores de contenido como periódicos revistas digitales y grandes blogs.

Y hay que tener en cuenta que AMP está en fase de desarrollo.

Así que debes ir con cautela y pensar antes de implementar si esta tecnología es para ti y si los posibles beneficios de velocidad y seo son suficientes como para ir trasteando con ella.

Tu página web no va a explotar pero nunca se sabe.

Estoy realmente ilusionado por la velocidad web que nos ofrece AMP para los dispositivos móviles, pero mi madre me enseño a no instalar nunca una versión beta de un producto experimental.

¿Qué si le voy a hacer caso a mi madre? Por supuesto que no, puedes disfrutar de la versión AMP de sensación web hoy mismo.

¿Tú qué opinas, vas a utilizar AMP en WordPress o te voy a tener que llamar Gallina como a Marty Mcfly?