El lanzamiento de la versión 5.X de WordPress, el pasado 6 de diciembre, trajo bastantes cambios y actualizaciones en las instalaciones de WordPress de todo el mundo. Uno de los plugins afectado, por el lanzamiento de esta versión mayor del CMS, fue el plugin oficial de AMP para WordPress. El lanzamiento de su versión estable (1.0.0), y su posterior actualización en pocos días (1.0.1), demuestra el compromiso de la comunidad WordPress por adaptarse a este nuevo estándar web. Pero, ¿qué es exactamente esto de AMP y en qué te afecta?
Google AMP (Accelerated Mobile Pages) es un proyecto de Google lanzado en octubre del año 2015. Este proyecto se basa en el estándar AMP HTML. Un nuevo framework, construido íntegramente a partir de las tecnologías web existentes, que permite a cualquier sitio web crear páginas muy ligeras y rápidas.
O lo que es lo mismo, AMP te permite servir una versión simplificada, pero mucho más rápida de tu página web móvil actual. ¿Para qué? Básicamente, para mejorar el tiempo de carga de la versión móvil de tu web. Porque aunque Google no cuenta como factor de posicionamiento tener implantada la tecnología AMP en tu web, sí que, desde julio de 2018, la velocidad de tu web móvil se considera un factor de posicionamiento en los resultados de búsqueda móvil.
Por lo que si tu WordPress está ante alguno de los siguientes escenarios, quizá deberías ir pensando en dar el paso de saltar a AMP en tu sitio web:
- Tienes un sitio web con una versión móvil cuyo tiempo de carga es excesivo y no puedes acometer un rediseño u optimización de código a medio plazo.
- Quieres que los resultados de tu web se incluyan en el carrusel de resultados de búsqueda móvil de Google.
- O estás creando un nuevo sitio web y AMP te ofrece posibilidad de implementar su funcionalidad usándola como la versión canónica en todo tu sitio web móvil.
Si tu instalación de WordPress no cumple con ninguno de estos tres planteamientos, quizá sea porque tengas una versión móvil bien optimizada y con un tiempo de carga relativamente bajo (inferior a los dos segundos). Pero si tu web se encuentra en alguno de estos tres escenarios, quizá deberías implementar AMP en tu instalación de WordPress para mejorar la experiencia de tus usuarios cuando te visitan a través de sus dispositivos móviles.
Google lanza web.dev, un portal para ayudar a los desarrolladores a crear webs más eficientes
Bien, una vez que te has decidido a implementar AMP en tu instalación de WordPress, veamos qué opciones tienes disponibles tanto en el repositorio oficial, como fuera de él. Para ello vamos a realizar una comparativa entre cuatro plugins de WordPress que te permitirán implementar AMP en tu instalación de WordPress sin demasiadas complicaciones técnicas.
Los requisitos que hemos escogido para seleccionarlos han sido:
- que tengan más de 1.000 instalaciones activas
- que sean compatibles con la última versión de WordPress (5.0.2)
Los plugins resultantes de este filtro son:
- AMP
- Better AMP – WordPress Complete AMP
- AMP for WP – Accelerated Mobile Pages
- WP AMP — Accelerated Mobile Pages for WordPress and WooCommerce
1. AMP
Con más de 300.000 instalaciones activas, empezamos la comparativa por el plugin oficial de AMP para WordPress. Este plugin puedes descargarlo gratuitamente del repositorio oficial. Tras instalarlo y activarlo en tu instalación de WordPress, te aparecerá el siguiente menú en tu Escritorio:
Una vez activado, la tecnología AMP ya estará activa en tu sitio web. Para comprobarlo, solo tienes que acceder a cualquier entrada de tu blog y añadir a la url la secuencia /amp/ para ver la versión AMP del mismo:
Versión web mobile
Versión AMP
Como puedes comprobar, la versión AMP es bastante minimalista en cuanto a diseño, ya que en ello radica su diferencia de velocidad de carga. Si accedes al panel de configuración del plugin (AMP > General), encontrarás las siguientes opciones:
Modo de plantilla
Establece cuál será el comportamiento de las urls canónicas y no canónicas en tu sitio, y cuál tomará AMP como referencia para indexar en Google. Es vital comprender las diferencias entre:
- Nativo: este modo reutiliza las plantillas de tu tema activo para mostrar las respuestas AMP, pero no utiliza URLs separadas para AMP. Esto significa que tu sitio es AMP-first y tus URLs canónicas son AMP. Es decir, la versión móvil de tu sitio se sustituirá por la versión AMP en aquellos tipos de contenido donde esté activo AMP.
- Emparejado: es similar al modo nativo en cuanto apariencia ya que reutiliza las plantillas del tema activo para mostrar las respuestas AMP, pero utiliza URLs separadas para AMP. Es decir, cada URL canónica tiene una URL AMP correspondiente.
Versión AMP
- Clásico: muestra las respuestas AMP en plantillas de entradas clásicas (heredadas del propio plugin) con un diseño básico que no suele coincidir con las plantillas de tu tema activo.
Plantillas compatibles
Los siguientes checkbox que encontrarás, te permiten seleccionar los tipos de contenidos en los que estarán activas las páginas AMP dentro de tu instalación de WordPress. En función de los plugins que tengas instalados, podrás tener más tipos de contenidos para seleccionar:
Dentro del menú AMP de tu Escritorio de WordPress, también encontrarás la opción Analytics (AMP > Analytics) que te permitirá ajustar la configuración para el código de seguimiento de Google Analytics en tus páginas AMP.
Por último, si estás utilizando el modo de plantilla clásico que veíamos antes, dentro del menú Apariencia, encontrarás la opción AMP (Apariencia > AMP) con la que podrás personalizar el estilo de la plantilla heredada de AMP.
Como ves, las opciones de personalización no van más allá de definir los colores del texto de la cabecera y del color de fondo de cabecera y enlaces. Por lo que la personalización del diseño de tus páginas AMP en el modo clásico, queda bastante limitada. Por otra parte, si utilizas los modos nativo o emparejado, deberás tener instalado un tema que sea compatible con AMP, para que tus urls puedan pasar la validación de AMP.
Errores de validación presentados con el modo nativo y emparejado.
Así que, como resumen, el plugin oficial de AMP es una extensión sencilla de configurar y manejar, pero debes tener en cuenta los siguientes aspectos:
- Con los modos nativo y emparejado debes cerciorarte que tu web genera urls AMP válidas y que no presentan ningún error. Ya que si no pasan la validación, Google no las indexará.
- Con el modo clásico, no tendrás ningún problema de validación, ya que utiliza las plantillas heredadas del plugin. Pero a cambio, tendrás una experiencia de usuario muy pobre cuando accede a tu web a través de su dispositivo móvil, lo que se traducirá en una mayor tasa de rebote y menos conversiones para tu sitio web.
2. Better AMP – WordPress Complete AMP
Con más de 10.000 instalaciones activas, Better AMP es el segundo plugin gratuito de esta comparativa. Puedes obtenerlo directamente en el repositorio oficial de WordPress. Tras instalarlo y activarlo en tu instalación de WordPress, aparecerá en tu Escritorio el siguiente menú:
A simple vista, ya ofrece alguna característica más que el plugin oficial de AMP para WordPress. Veamos con un poco más de detalle cada una de sus opciones:
Translation
La opción Traslation del menú de Better AMP (Better AMP > Translation) te ofrece el listado de campos disponibles para traducir y personalizar a tu gusto. De este modo, puedes acomodar las cadenas de texto que aparecerán en tus páginas AMP, para que sean lo más parecidas posibles a las de tu tema activo.
Importar / Exportar
Si tienes varios sitios en los que debes replicar la misma configuración de AMP, la opción de Importar / Exportar de Better AMP (Better AMP > Importar / Exportar) te permitirá hacerlo de forma fácil y rápida. Sólo tienes que copiar los datos, descargar el archivo de importación o copiar la URL de exportación del sitio del que quieres sacar la configuración e importarlo en tu nuevo sitio a través de las opciones ‘Importar desde archivo’ o ‘Importar desde URL’.
Opciones de importación y exportación de Better AMP.
Customize AMP
La tercera y última opción del plugin (Better AMP > Customize AMP) te permite cambiar la apariencia que tendrán las páginas AMP de tu sitio a través del personalizador de WordPress. Al hacer click sobre ella, accederás al siguiente panel de opciones:
- Header: en esta sección podrás personalizar tanto el logotipo en texto como en imagen, y mostrar y ocultar el icono de búsqueda o fijar la cabecera de la página.
- Sidebar: te permite activar el menú de hamburguesa que aparece en la parte superior izquierda, que despliega a su vez una sidebar por el lateral izquierdo, en la que puedes incluir: logotipo de texto, logotipo en imagen, enlaces a tus redes sociales y texto de copyright.
- Footer: las opciones en el pie de página se limitan a mostrar u ocultar el texto de copyright que puedes personalizar con el contenido que desees, y habilitar o deshabilitar el enlace inferior que dirige hacia el sitio web móvil.
- Archive: en la sección de archive tan solo vas a poder escoger el tamaño de las imágenes que se muestran en el loop de WordPress.
- Posts: es la sección que más personalización te permite. Sus opciones son:
- Mostrar/ocultar thumbnail
- Mostrar/ocultar comentarios
- Mostrar/ocultar entradas relacionadas
- Número de entradas relacionadas a mostrar y filtro que aplica
- Mostrar/ocultar botones de compartir en redes sociales y opciones de personalización de los mismos
- Homepage: en la portada de la web puedes configurar un slider con tus publicaciones recientes y definir qué página de inicio deseas.
- Color: las opciones de personalización de colores incluyen:
- Theme Color
- Background Color
- Content Background Color
- Footer Background
- Footer Navigation Color
- Text Color
- Google Analytics: esta opción del panel de personalización te permite insertar el código UA de Google Analytics para que se contabilicen las visitas a las urls AMP de tu sitio web.
- Custom CSS y HTML: incluyen varias zonas sobre las que puedes realizar personalizaciones de estilo mediante CSS o incluir aquellos scripts que necesites en las zonas del header o del footer de tus páginas AMP.
- Advanced Settings: incluye las siguientes tres opciones:
- Show AMP for Mobile Visitors: al activarla redirigirás todo el tráfico móvil hacia las urls de AMP, por lo que la versión móvil de tu web no será visible a tus usuarios.
- AMP URL Format: te permite decidir la estructura de las urls entre estos dos formatos:
- tudominio.com/amp/post/
- tudominio.com/post/amp/
- Exclude URL From Auto Link Converting: fuerza a Better AMP a que las urls que indiques no creen la versión AMP de las mismas.
- AMP Pages: la última opción del panel de personalización te permite decidir en qué tipos de contenido y taxonomías quieres deshabilitar el uso de AMP. Así como activar o desactivar el plugin, tanto en la página de inicio como en los resultados de búsqueda.
Como ves, Better AMP es una versión ‘vitaminada’ del plugin oficial de AMP de WordPress. Con él, vas a lograr una mayor personalización en cuanto a estilos y opciones de configuración. Pero en cuanto a su funcionamiento interno con las urls, nos encontraríamos ante el mismo caso que el modo clásico del plugin de AMP. Es decir, siempre tendremos la url canónica del sitio web móvil y la versión no canónica de la versión AMP para cada página de tu sitio web.
3. Accelerated Mobile Pages
El tercer plugin de esta comparativa es AMP for WP – Accelerated Mobile Pages for WordPress. Un plugin freemium con más 100.000 instalaciones activas que puedes descargar directamente del repositorio de WordPress.
La primera diferencia que encontrarás en este plugin de AMP es su modelo de negocio. Estamos ante un plugin que sigue el modelo freemium, o lo que es lo mismo, el plugin base que descargas del repositorio incluye una serie de funciones básicas de forma gratuita. Pero si quieres hacer uso de todo su potencial, tendrás que suscribirte a alguno de sus planes anuales o comprar la licencia para aquellas extensiones o add-ons que que necesites en función de tu sitio web.
Nada más instalar y activar el plugin, notarás la primera diferencia con respecto a sus rivales anteriores, su asistente de instalación:
Dentro del Escritorio de WordPress, encontrarás el siguiente menú de opciones:
A simple vista, estamos ante el plugin más completo de los tres que llevamos analizados en esta comparativa. Repasemos rápidamente cada una de las opciones del menú principal.
Settings
En la pestaña de Settings encontramos las distintas opciones de configuración para todas las funcionalidades del plugin, entre las que destacan opciones interesantes como:
- La posibilidad de convertir la versión web móvil en la versión AMP nativa
- El soporte para Custom Post Types
- La compatibilidad con plugins de SEO como Yoast SEO o All in One SEO
- Posibilidad de minificación del código AMP
- Integración sencilla de sistemas de analítica web como Google Analytics, Google Tag Manager, Facebook Píxel, comScore, entre otros
- Soporte para datos estructurados
- Y mediante extensiones de pago, soporte para WooCommerce, Easy Digital Downloads, Contact Form 7, Gravity Forms o Ninja Forms
Design
En la segunda pestaña de configuración del plugin encontrarás todos los ajustes relativos a la apariencia que tendrán tus páginas en AMP. A diferencia de los dos plugins anteriores, AMP for WP utiliza un sistema de temas (similar al de WordPress) sobre los que podrás variar radicalmente el aspecto de tus páginas AMP. La versión gratuita del plugin incluye cuatro temas diferentes que podrás personalizar a tu gusto con el resto de opciones que encontrarás dentro de la pestaña Design.
La versión PRO del plugin, disponible a través de sus planes de suscripción, te da acceso a un número mayor de plantillas con las que podrás trabajar el aspecto de tu sitio AMP.
También, aunque para ello necesitarás algunos conocimientos de programación, puedes configurar tu propio tema AMP a medida, a partir de un framework que los desarrolladores ofrecen gratuitamente en su web. Por lo que con un poco de código PHP y CSS podrás personalizar el aspecto de tus páginas AMP para que sean lo más parecidas posible a las versiones web móvil de tu sitio.
Extensions
Tal y como comentábamos al principio, AMP for WP es un plugin freemium. Por lo que muchas de sus funcionalidades se encuentran en extensiones o add-ons de pago. En el apartado Extensions puedes encontrar el listado de todos estos add-ons junto al correspondiente botón de compra.
Esta opción puede resultarte interesante cuando sólo necesitas una o dos funcionalidades concretas.
Imagina que en tu instalación de WordPress, tienes instalado WooCommerce y Gravity Forms. Si sólo quieres tener compatibilidad con estos dos plugins de tu instalación, es tan fácil como comprar las dos extensiones que necesitas por separado. De este modo, tendrás toda la funcionalidad que necesitas sin tener que abonar el precio de la membresía completa. Free vs Pro
Pero si tienes un sitio web que estás monetizando y en el que necesitas que la optimización del contenido AMP no sólo se quede en las entradas del blog, sino que incluya también Advanced Custom Fields, WPML, WooCommerce, Easy Digital Downloads o Custom Post Types… quizá la opción más recomendable para tu caso sea optar por la versión PRO. Con ella, tendrás acceso a todas las funcionalidades del plugin, todas sus extensiones, todos los temas y el soporte de sus desarrolladores durante un año.
Por lo tanto, AMP for WP te ofrece un nivel de personalización superior a los plugins que hemos visto hasta ahora en esta comparativa. Pero seguramente, si necesitas tal nivel de personalización, la opción gratuita del plugin se te quedará algo pequeña, ya que no incluye funciones vitales para proyectos que están monetizando, como los ecommerces. Lo que te obligará a adquirir algunas de sus extensiones o su versión PRO, con el consiguiente gasto anual que puede suponer para tu proyecto.
4. WP AMP
Vamos a terminar la comparativa con un plugin de pago que encontrarás en el repositorio de Codecanyon, WP AMP. Un plugin que tiene unas 1.500 ventas en Envato, una puntuación de 4,66 sobre 5, y un precio de 39$ en un pago único (sin cuotas anual o extensiones adicionales).
Tras instalarlo y activarlo en tu instalación, encontrarás su panel de ajustes en Ajustes > WP AMP. Una vez en él, su aspecto es el siguiente:
Entre sus funcionalidades destacan:
- Soporte para todos los tipos de contenido y archives de tu sitio web móvil
- Posibilidad de insertar imágenes, videos, audios e iframes
- Personalización completa del diseño por defecto, o la posibilidad de crear uno totalmente nuevo a través de su sistema de plantillas
- Soporte para Google Analytics, Google Tag Manager y Facebook Pixel
- Integración con WooCommerce
- Admite monetización con AdSense y DoubleClick
- Compatible con:
- Yoast SEO
- All in One SEO
- The SEO Framework
- SEO Ultimate
- WP Meta Seo plugin
- WPML
- WP Rocket
- Hyper Cache
- W3 Total Cache
- WP Ultimate Recipe
- Divi
- Visual Composer (WP Bakery)
- Gutenberg / Editor de bloques de WordPress
Una vez activado, el aspecto de las urls AMP es similar al siguiente:
Por lo que podríamos decir que WP AMP se encuentra a medio camino entre Better AMP y AMP for WP. Ya que tiene algunas más, que pueden resultar interesantes, para aquellos sitios que realizan monetización. Aunque no llega a todo el despliegue de opciones y extensiones de AMP for WP.
Conclusiones finales
Dicho todo esto, llega la hora de la verdad. ¿Cuál es el mejor de los cuatro? Pues como siempre, ¡depende! ¿De qué depende? Pues veamos algunos factores:
- Lo primero que debes tener en cuenta antes de implementar AMP en tu instalación de WordPress es comprobar el porcentaje de tráfico que está llegando a tu sitio por dispositivos móviles. Porque aunque, año tras año, el tráfico mobile aumenta, sí que es cierto que hay sectores en general y proyectos en particular en el que el tráfico en desktop sigue siendo mayoritario. Por lo que en función de tu caso, será más o menos urgente su implantación.
- Otro factor a considerar es el tiempo de carga de tu web móvil. Si tienes un WordPress que carga por debajo de los dos segundos, quizá no sea necesario que implementes AMP en tu instalación. Porque seguramente, con unos pequeños ajustes de WPO puedas incluso mejorar ese tiempo de carga.
- También va a depender de la naturaleza de tu proyecto. Si tienes un blog en el que escribes por hobby, quizá no estés dispuesto a desembolsar el precio de un plugin de pago, por lo que si quieres mejorar tu velocidad de carga y tu posición en el ranking de búsquedas móviles, puedes optar por alguno de los plugins gratuitos de AMP que hemos visto. Es cierto que la experiencia del usuario se va a resentir, al no poder ajustar el diseño a algo parecido a tu sitio web móvil, pero con un poco de creatividad, código PHP y CSS podrás hacer algo muy digno para tu proyecto.
- Sin embargo, si tienes un proyecto con el que te estás ganando un sueldo, bien a través de un ecommerce o bien a través de otro sistema de monetización, quizá si que necesites tener implantado AMP con el mayor número de funcionalidades posibles, para que tu sitio en AMP se asemeje lo máximo posible a tu sitio web móvil. Y de este modo, el usuario apenas note la diferencia entre uno y otro. Por lo que a medio y largo plazo, tu sitio AMP pueda sustituir completamente a tu sitio web móvil. Con la ventaja en tiempo de carga que supondrá esto para tu proyecto y por extensión, a la mejora en los resultados de búsqueda móviles dentro de Google. Si es este tu caso, quizá la opción más aconsejable sería optar por la versión PRO de AMP for WP. Ya que en su cuota anual vas a poder optar a todo su pack de funcionalidades, extensiones y temas. Lo que te permitirá que tu sitio web en AMP sea una réplica lo más exacta posible de tu sitio web móvil. Y eso se traducirá en una mejor experiencia de navegación para tus usuarios, lo que conllevará una mayor permanencia en página, una menor tasa de rebote y por último, una mayor conversión para tu proyecto.
Espero que esta comparativa, entre estos cuatro fantásticos plugins, te haya servido para conocer con mayor detalle que es AMP, cuáles son sus principales características y las posibilidades que tienes a la hora de implantarlo en tu instalación de WordPress. Recuerda que cuando implementes AMP en tu proyecto, debes comprobar que las urls AMP que se están generando pasan la validación de Google.
Para ello tienes las siguientes herramientas:
Del mismo modo, una vez que AMP esté funcionando en tu proyecto, debes comprobar periódicamente el informe de AMP en Google Search Console para asegurarte que todo sigue igual que el día que lo pusiste en marcha.
Ahora, ya tienes toda la información que necesitabas para dar el paso a AMP. Así que ya tienes deberes. A partir de aquí, ya puedes para mejorar los resultados de búsqueda móvil de tu proyecto. Así que… ¡adelante!
Mantente informado de las noticias más relevantes en nuestro canal de Telegram