12/02/20185 min

¿Qué es AMP de Google y cómo implementarlo en tu PrestaShop?

¿Sabes si tu tienda PrestaShop cumple con las las exigencias AMP y es totalmente compatible con ella?

Hace un tiempo te contamos en este blog sobre la iniciativa de “páginas móviles aceleradas” o AMP, que es un proyecto que pretende mejorar considerablemente la velocidad de carga en nuestros sitios web.

En aquel momento, Accelerated Mobile Pages sólo estaba indicado para usarlo en páginas de noticias y blogs, pero desde entonces, este proyecto ha evolucionado y ya permite también la inclusión de páginas de producto.

Esto lo hace ideal para mejorar la velocidad de nuestras tiendas en dispositivos móviles ¿no te parece?

Por ello, hoy te contaré algunos factores que debes tener en cuenta sobre este interesante tema, así como la manera en que puedes implementar las Accelerated Mobile Pages dentro de tu eCommerce.

¿Qué es AMP (Accelerated Mobile Pages) y en qué consiste?

Accelerated Mobile Pages ó AMP es una normativa de codificación de código abierto, que ha sido desarrollada para aumentar la velocidad de carga de las páginas web en smartphones y iPhones. El proyecto AMP permite a los profesionales crear versiones algo menos pesadas de las páginas lentas.

Si se quiere que las páginas de este estilo funcionen correctamente, es necesario que utilicen un lenguaje HTML más simplificado, en lugar de una versión completa (¡y pesada!). Este formato permite que las webs carguen más rápido en soportes menores, como los smartphones.

Esta funcionalidad presenta varias características:

  • Optimización del código CSS y HTML, con un tamaño de elementos inline en CSS menor a 50 kb.
  • Carga de imágenes "lazy load", es decir, las imágenes únicamente salen si te desplazas hacia abajo.
  • Compatibilidad total con ADS y Analytics, al igual que cualquier página normal.
  • Sin necesidad de usar JavaScript.

Las webs del tipo Accelerated Mobile Pages deben ser aprobadas por el “Accelerated Mobile Pages Validator”, incluido en la AMP JS Library. Se deben cargar las fuentes personalizadas e indicar la altura y anchura de las imágenes. No se permiten los formularios.

Todas estas premisas reducirán los tiempos de carga y nos harán olvidar la frustración de tener que esperar un siglo para acceder a los contenidos.

¿Qué restricciones tiene el AMP en nuestras páginas?

Esto suena muy bien, pero, ¿dónde está el truco? Para conseguir una velocidad de carga instantánea, además de hacer uso de la caché de Google, impone algunas limitaciones en los efectos que podemos usar en nuestras páginas Accelerated Mobile Pages.

Así por ejemplo, efectos como ventanas emergentes o popups no pueden usarse en AMP y tampoco admite la carga de contenidos externos a nuestro sitio web ni, en definitiva, cualquier cosa que pueda ralentizar la carga de la web.

Pero tranquilo, no tienes que cambiar la plantilla de tu página ni rediseñarla, ya que las páginas aceleradas conviven con tus páginas normales. Digamos que en tu sitio puedes tener una versión normal y una versión mejorada para móviles.

Sobretodo porque actualmente no se puede usar AMP en nuestras páginas de categorías ni en la página de compra u otras páginas de nuestra tienda.

La versión Accelerated Mobile Pages de nuestras páginas sólo se mostrará a dispositivos móviles, que lleguen a estas páginas a través de enlaces en buscadores o en las redes sociales más importantes, mientras que si un usuario accede directamente con su móvil a tu tienda o entra con un ordenador, siempre verá la versión normal.

Por tanto aunque tengamos implementada una versión Accelerated Mobile Pages en nuestra tienda, no podemos confiar a AMP toda la optimización de velocidad de nuestro sitio y tendremos también que optimizar la velocidad de la navegación normal y no descuidar este aspecto.

¿Merece la pena tener páginas en AMP dentro de una tienda online?

Páginas AMP en una tienda online

Las páginas AMP cargan realmente rápido, pero ya hemos visto las limitaciones que imponen a nuestras páginas. Por suerte, la versión para móviles y la versión normal de nuestra página pueden convivir sin problemas.

Ahora bien ¿merece la pena implementar AMP en PrestaShop?

La ventaja principal de Accelerated Mobile Pages es sin duda la velocidad en móviles (y la mejora SEO que ello conlleva), pero un efecto colateral de esto es que tendremos una página de producto en los dispositivos móviles mucho más clara y sin distracciones para que el cliente pueda comprar más fácilmente.

Si piensas que tu página de producto puede quedar muy sosa, te recuerdo que en la versión acelerada podrás tener carruseles de imágenes, vídeos, botones para compartir en redes sociales, ¡e incluso puedes incluir publicidad si lo necesitas! por lo que no debería preocuparte este punto.

Por otro lado, por muy optimizada que esté nuestra tienda online, las páginas AMP usan la caché de Google para servir el contenido, por lo que en cualquier caso, siempre serán mucho más rápidas que la versión normal de nuestra tienda.

Ya te hablamos en este blog de las tendencias SEO, pero ahora además Google ya ha anunciado una actualización de su algoritmo para el segundo semestre de 2018, que ha denominado “Actualización de velocidad” y que dará mayor peso en su índice móvil a las webs con mayor velocidad de respuesta.

Aunque afirman que no mirarán la tecnología que utilice la web, si tienes tu página de producto amplificada, desde luego tienes mucho ganado a este respecto.

Finalmente, las páginas más rápidas convierten más, por lo que una página de producto que aparezca más rápidamente al usuario nos ayudará a que se decida a comprar más rápidamente y no perder así la venta.

Por tanto, a pesar de las limitaciones de AMP, tenerlo implementado nos va a ayudar a tener una mejor experiencia de usuario, un sitio web con mejor SEO y que además convertirá mejor. Parece que merece la pena, ¿no?

¿Cómo puedo implementar el AMP en la web de mi negocio?

PrestaShop está optimizado para su uso en dispositivos móviles e incluso si no queréis usar la plantilla por defecto, tenéis una gran variedad de plantillas responsive en el mercado de plantillas.

No obstante, por defecto PrestaShop no implementa Accelerated Mobile Pages.

Eso sí, por muy sencilla que sea tu página de producto y por muy rápida que sea, no puedes usar la misma página como versión AMP, porque cambia ligeramente la estructura del código HTML y por tanto tendrás que tener una versión acelerada específica de la página.

Si no usas PrestaShop o si prefieres implementar tú mismo AMP en tu tienda, tienes que crear manualmente una versión AMP para cada una de las páginas que quieras amplificar. Esta versión de la página tiene que respetar la sintaxis AMP, sus reglas y por supuesto, una vez creada, tendrás que validarla.

Tras crear la versión de Accelerated Mobile Pages tendrás que incluir en los metadatos de la página normal un enlace, indicando dónde se encuentra la versión AMP para que los buscadores y demás indexadores sepan que tienes una versión acelerada de la página y dónde encontrarla.

¿Qué módulos de PrestaShop instalar para tener AMP implementada en mi eCommerce?

Pero no te asustes todavía, implementar AMP a mano puede ser muy complicado, pero por suerte la comunidad de desarrolladores PrestaShop siempre está a la última y hay varios módulos en la tienda que podréis instalar en vuestros sitios para amplificarlos.

Algunos de los módulos que podéis encontrar son:

1. Módulo AMP - Accelerated Mobile Pages

Este módulo es fácil de usar y te ofrece muchas opciones de personalización en caso de que quieras afinar mucho tu página AMP.

El Módulo AMP permite definir por ejemplo qué páginas quieres que sean AMP (portada, páginas de categorías y páginas de producto), si quieres que las páginas AMP tengan una URL amigable y también puedes cambiar los colores de tus páginas AMP para adaptarlos a tu diseño.

Otro punto a favor de este módulo es que integra en la configuración opciones para mostrar anuncios de AdSense en tu sitio y por supuesto para configurar Google Analytics y poder seguir así el éxito de nuestras páginas mejoradas.

Además para poder integrar mejor la versión AMP de nuestro sitio en Google Search Console, nos ofrece también la generación de un sitemap específico para Accelerated Mobile Pages.

Por ponerle un “pero” a este gran módulo, son sus limitadas opciones de diseño. Por ejemplo, el color que puedes definir para todos los botones es único y eso en páginas como la portada del sitio no aporta mucha claridad al usuario:

Módulo AMP - Accelerated Mobile Pages

2. Módulo experto en AMP

Este módulo cuenta con menos opciones que el anterior, ya que no te permite elegir qué páginas de tu sitio quieres que tengan su versión AMP, ni te permite generar un sitemap para tus páginas con esta funcionalidad.

Sin embargo, el módulo experto en AMP sí te permite personalizar algunos detalles, del diseño como el color de los precios en el listado, y otras muchas opciones como el color del botón de compra.

Este módulo ofrece también algunas opciones de ordenación de los productos en las páginas AMP y también está genial que puedas elegir cuántos productos mostrar en las páginas de categorías en la versión Accelerated Mobile Pages.

Aunque este módulo te permite incluir tu código de Analytics fácilmente en la versión mejorada que genera no ofrece integración con Google AdSense para mostrar anuncios en tu página.

Módulo experto en AMP

3. Módulo Accelerated Mobile Pages (AMP) PRO

Este módulo aúna las opciones de los dos anteriores en cuestiones de diseño, en el sentido de que te permite elegir qué paginas de tu sitio tendrán una versión acelerada y además, te permite también cambiar prácticamente todos los aspectos estéticos de la página.

Los desarrolladores del módulo AMP PRO además no han escatimado en esfuerzos y la versión AMP que ofrecen es responsive y se adapta perfectamente al tamaño de la pantalla del dispositivo con el que navegues.

Módulo Accelerated Mobile Pages (AMP) PRO
Es interesante también que el módulo te permite mostrar un enlace a la versión normal de tu página de forma que el usuario que no se sienta cómodo con las páginas de este tipo pueda llegar fácilmente a esta versión de tu sitio.

No obstante, este módulo tiene una carencia importante y es que no ofrece integración con Google Analytics y por tanto tendrás que ingeniártelas para tener unas métricas de tu sitio AMP.

A pesar de esto, sí que ofrece la generación automática de un sitemap del sitio en su versión mejorada, que podrás utilizar en Google Search Console.

4. Módulo Professional AMP Pages - Accelerated Mobile Pages

Este módulo es posiblemente la “joya de la corona” de los que hemos analizado hasta el momento. No sólo ofrece todas las opciones de personalización que ofrecen los demás, sino que también te permite añadir código CSS propio para cambiar aquellas partes que no estén contempladas (si queda alguna) en la configuración del módulo.

Este Módulo Professional AMP Pages permite también definir categorías específicas para AMP de forma que no tengan que estar todas las categorías de tu tienda, elegir qué redes sociales quieres que aparezcan como botones de compartir y de contacto…

Lo único que no ofrece es la posibilidad de mostrar anuncios en tu página con Google Adsense, pero dado que seguramente esto sea algo que no quieres hacer, es una carencia poco significativa.

Módulo Professional AMP Pages - Accelerated Mobile Pages

En definitiva, con estos cuatro módulos a buen seguro que encuentras la mejor manera de integrar AMP dentro de tu estrategia de ventas y sacarle más rendimiento a tu tienda.

¿Cómo implementar AMP en tu tienda PrestaShop paso a paso?

Para terminar, aquí tienes una sencilla guía para implementar AMP en tu tienda:

1. Instala el módulo AMP

Puedes elegir el que más te guste, de entre los que se encuentran en la tienda oficial de PrestaShop:

Recuerda que puedes encontrar los módulos PrestaShop para implementar AMP siguiendo este enlace:

https://addons.prestashop.com/es/buscar?search_query=amp

Una vez que hayas elegido el que más te guste, instálalo y configúralo según las instrucciones del desarrollador.

2. Accede a una de tus páginas de producto

Comprueba que tiene en la cabecera de metadatos el enlace AMP.

Para que los buscadores sepan que tienes una versión acelerada de tus páginas de producto, estas deben incluir un pequeño código en la sección de cabecera de la web. Este código se parece a:

<link href="http:// MITIENDA/ID-PRODUCTO/amp" rel="amphtml" />

3. Usa las herramientas de validación de AMP

Esto te servirá para comprobar que todo está correcto y que la versión AMP de tu página de producto no tiene errores.

El proyecto Accelerated Mobile Pages tiene una herramienta de validación, que puedes utilizar para ver que todo está correcto. Para usarla simplemente accede a: https://validator.ampproject.org/ e introduce la URL de la versión acelerada de la página que quieras probar.

En nuestro ejemplo:

http:// MITIENDA/ID-PRODUCTO/amp

Si todo es correcto verás que el estado de validación aparece como PASS.

Validación de AMP

De lo contrario, te mostrará los errores que tiene la página para que puedas corregirlos.

En caso de errores por supuesto contacta con el desarrollador del módulo y dale toda la información que necesite para que pueda ayudarte a resolverlos.

Si usas Google Chrome además, puedes instalar la extensión AMP Validator que comprueba automáticamente si una página tiene versión Accelerated Mobile Pages y en el caso de entrar en una página AMP, te muestra si el código es válido o no.

Conclusión

Como ves, ya no tienes excusa para ofrecer una versión acelerada y mejorada para móviles de tu ficha de producto y experimentar así un aumento en conversiones a medida que la navegación móvil de los usuarios sigue creciendo ¿no te parece?

Además, con este tutorial y demás recomendaciones de módulos AMP de PrestaShop, todo será mucho más fácil y podrás hacer que tu eCommerce sea totalmente compatible con dispositivos móviles.
Imágenes (Mobile) de Freepik.

Cada 2 semanas, nuestra newsletter e-commerce

Al enviar este formulario, acepto que PrestaShop S.A utilice los datos que he facilitado para el envío de boletines y ofertas promocionales. Puedes cancelar la suscripción en cualquier momento por medio del enlace que figura en los correos promocionales que recibes. Obtén más información sobre la gestión de tus datos y derechos.