Un tutorial simple sobre las ventajas y desventajas de implementar AMP para WordPress, cómo hacerlo y más…

Algunos dudaban del futuro de Google AMP.

Pero el nuevo marco de trabajo desarrollado por el gigante tecnológico americano ha llegado para quedarse, es presente y futuro.

En torno a la tecnología AMP surgen un montón de dudas: ¿qué es?, ¿cómo funciona?, ¿merece la pena implementarlo?

En esta guía de AMP 2021 descubrirás la información más valiosa para comprender y aprovechar su potencial en WordPress.

¿Qué es Google AMP?

AMP es el acrónimo de Accelerated Mobile Pages.

Un proyecto liderado por Google junto con otros poderosos socios del sector tecnológico, que tiene como fin mejorar la velocidad de carga de las páginas web en los dispositivos móviles.

https://i1.wp.com/wp.servisaberlo.com/wp-content/uploads/2020/12/poi-1024x683.jpeg?resize=580%2C387&ssl=1

El objetivo es triple:

  1. Adaptar el buscador a los nuevos tiempos.
  2. Mejorar la experiencia de los usuarios.
  3. Reducir los costes de rastreo.

Los móviles son una prioridad para todos. Hoy día es ?imposible? vivir sin un teléfono móvil o celular. Google lo sabe, por eso el buscador ha centrado gran parte de sus avances en estos dispositivos.

Un buen ejemplo de su importancia es el Mobile First Indexing, la evaluación del contenido en base a la versión móvil del sitio web.

Además, a todos nos gusta navegar por páginas que cargan en una fracción de segundo. Una carga lenta nos hace huir antes de tiempo, y viceversa, una carga instantánea invita a seguir interactuando.

AMP marca la diferencia, permite navegar un 85 más rápido que la versión convencional.

https://i2.wp.com/wp.servisaberlo.com/wp-content/uploads/2020/12/45-1024x538.png?resize=580%2C305&ssl=1

Claro que, para navegar a la velocidad de la luz, hay que sacrificar estilos y funcionalidades. Algunos señalan que Google AMP es como volver a las páginas web del año 2000.

El último objetivo de Google es la reducción de costes. Porque dedican una ingente cantidad de recursos a ?rastrear todo internet?. Y ese coste aumenta exponencialmente cuando las páginas web no están bien optimizadas. Esta tecnología persigue lograr un rastreo sostenible.

Ver: JAMstack, un aliado para tu WordPress

¿Cómo funciona AMP?

El funcionamiento de AMP es sencillo y a la vez complejo.

Google te invita a crear un duplicado de tu sitio web usando los criterios de AMP, con el objetivo de reducir los tiempos de carga al máximo.

Para comprender cómo funciona en AMP tenemos que dividirlo en tres subsecciones:

  1. AMP HTML.
  2. AMP JavaScript.
  3. AMP CDN.

Cada una de ellas está enfocada en ofrecer la máxima velocidad a los usuarios.

AMP elimina algunas etiquetas HTML para mostrar un código limpio y 100% optimizado, ofreciendo además algunas variantes de etiquetado para permitir una implementación más razonable.

El JavaScript suele ser el culpable de ralentizar la mayoría de páginas web, de ahí que AMP lo limite casi al completo. Hay excepciones, el buscador impone un número cerrado de componentes que se pueden usar.

El CSS tampoco se libra de las restricciones. Google AMP lleva el CSS a la mínima expresión, imponiendo importantes limitaciones para que los estilos de la página web no interfieran en el rendimiento.

Ventajas y desventajas de Google AMP

Antes de mostrarte cómo instalar AMP en WordPress, debes conocer sus ventajas e inconvenientes para descubrir si te interesa implementarlo en tu sitio web.

https://i0.wp.com/wp.servisaberlo.com/wp-content/uploads/2020/12/956.png?resize=580%2C326&ssl=1

Ventajas

  • Mejora la velocidad de carga al extremo.
  • Centra la experiencia del usuario en la lectura.
  • Incrementa el CTR en Google (símbolo del rayo en el buscador).
  • Aumenta la visibilidad, el posicionamiento SEO y los ingresos derivados de la publicidad Adsense.

Desventajas

  • Su implementación puede llegar a ser complicada.
  • La analítica web también presenta complicaciones.
  • Impide mostrar diseños avanzados e implementaciones de valor para los usuarios.
  • Para una óptima experiencia, AMP exige que la imagen destacada tenga al menos 1200 px de ancho.
  • No es recomendable para todo tipo de páginas web.

¿Merece la pena implementar esta tecnología?

Depende. Lo sé, no es la respuesta que esperabas, pero es la realidad.

Si buscar captar clientes o generar conversiones, olvídate. Como te he explicado, AMP no permite el uso de formularios avanzados ni de otras implementaciones especiales con JS o CSS. La conversión se reduce en páginas orientadas a la venta. Además, AMP suele complicar la navegabilidad de los usuarios.

Sin embargo, si tienes una web de noticias o el contenido es el centro de tu proyecto web, AMP puede ser de gran ayuda. Porque centra al usuario en la lectura, permitiendo que esta sea más rápida y cómoda. Y porque se puede aumentar el tráfico SEO y las ganancias por publicidad de Google Adsense.

De forma orientativa:

  • Portales de noticia: Google AMP funciona muy bien, suele compensar implementarlo.
  • Páginas de servicios u orientadas a la conversión: no suele interesar poner en marcha AMP.
  • Blogs: en algunos casos sí compensa instalar AMP, en otros no. Depende del tipo de blog.

¿Cómo instalar AMP en WordPress?

¿Estás decidido a configurar AMP en WordPress?

Tendrás que hacerlo con un plugin. Porque sí, se puede hacer el proceso a mano o de forma semiautomática, pero exige tener conocimientos técnicos avanzados, no está al alcance de cualquiera.

El gran problema que presenta AMP para su integración con un CMS como WordPress es que es relativamente fácil que ?rompa? algunas partes del sitio: el menú, los comentarios, los botones de redes sociales…

Integrarlo puede ser un suplicio. Dependerá de cómo esté hecha tu plantilla de WordPress.

Te voy a mostrar cómo instalar esta tecnología paso a paso con el que es, en mi opinión, el mejor plugin AMP para WordPress.

Cómo instalar y configurar AMP for WP

Este plugin es gratis, aunque ofrece una versión PRO muy interesante con la que podrás mejorar la monetización del sitio y la experiencia de los usuarios.

https://i1.wp.com/wp.servisaberlo.com/wp-content/uploads/2020/12/a-1024x175.png?resize=580%2C99&ssl=1

Poner en marcha este plugin es relativamente sencillo. Sigue estos pasos:

Descarga, instalación y activación

Puedes instalarlo directamente desde tu panel de WordPress (buscando ?AMP for WP? desde la pestaña correspondiente) o descargártelo desde el repositorio oficial y subirlo a tu sitio web.

Una vez instalado, actívalo como haces con cualquier otro plugin de WordPress.

Configuración básica de AMP for WP

En pantalla aparecerán dos pestañas: ?Basic? y ?Advance?.

https://i2.wp.com/wp.servisaberlo.com/wp-content/uploads/2020/12/z-1024x710.png?resize=580%2C402&ssl=1

Selecciona la primera, es la más recomendable para comenzar el testeo y la configuración rápida de AMP.

A continuación, aparecerá una pantalla con las opciones básicas:

Website Type:

Si tienes un blog, deja este apartado sin cambios. En caso contrario selecciona ?News?, ?Local Business? o ?Ecommerce?; si ningún término representa a tu página web marca ?Others?.

Where do you need AMP?:

Esta es la parte más importante de la configuración del plugin AMP for WP. Pulsa ?Change? y desmarca todas las opciones excepto las Entradas (si escribes los post en este formato).

¿Por qué te recomiendo hacerlo así? Para comprobar cada parte por separado, así es más fácil verificar el correcto funcionamiento de AMP en tu sitio web.

Además, de esta forma no te desanimarás tan fácilmente comprobando los probables errores que pueden surgir en el proceso.

Para comprobar errores haz lo siguiente:

  • Accede a una entrada de tu página web desde un dispositivo móvil.
  • Añade /amp al finalizar la url, entrarás en la versión AMP.
  • Comprueba cómo se visualiza el contenido.

¿No tienes el formulario de comentarios? ¿Ha desaparecido el footer y otras funciones de tu web?

Puede ser normal, ten en cuenta que AMP desactiva automáticamente un montón de recursos para primar la velocidad de carga.

Comprueba si lo que ha desaparecido entra dentro de lo normal o si, por el contrario, esos cambios afectan negativamente a tus usuarios.

Verifica que se visualice correctamente el logotipo, el menú de navegación y el propio contenido.

No te dejes llevar por el estilo retro (o minimalista) que aparece en tu pantalla. Comprueba todas las opciones de navegación. ¿Te convence lo que ves? Sigamos.

Design and Presentation:

En esta sección afinaremos pequeños detalles.

Cambia el logo si se visualiza incorrectamente. Súbelo en el tamaño recomendado (120 x 90 px).

En el apartado ?Global Color Scheme? cambia el color si no se corresponde con el de tu imagen corporativa. Este color es importante, aparece en todos los enlaces y botones de la URL adaptada a Google AMP.

Analytics Tracking:

Aquí no solo puedes configurar Google Analytics para monitorizar las visitas, también puedes añadir el tracking de otras funcionalidades como Google Tag Manager, Facebook Pixel o Segment Analytics.

Solo tienes que seleccionar la funcionalidad y añadir tu Tracking ID.

Privacy Settings:

Otro apartado esencial para una correcta configuración de AMP. Esta funcionalidad no hará que tu sitio se visualice mejor, pero sí que cumpla con la legislación vigente.

Pulsa ?change?.

  1. Selecciona ?RGPD? si vives en Europa y deseas cumplir con las leyes de privacidad. En la pantalla de los usuarios aparecerá un aviso que deberán aceptar explícitamente para continuar navegando en tu web. Ve a la sección ?Ajustes? > ?Barra de aviso y RGPD? para personalizar el mensaje que se muestra en pantalla.
  2. Marca ?Cookie Noticia Bar? si vives fuera de Europa. Ve a la misma sección anterior para personalizar la barra de aviso.

3er Party Compatibility:

¿Tienes algún plugin de optimización SEO?

Esta es la sección dedicada a ello. Comprueba si es compatible con este plugin AMP para WordPress o instala uno alternativo (aparecen en el listado).

Configuración avanzada de AMP for WP

Los pasos anteriores son suficientes para poner en marcha AMP con lo justo y sin complicaciones.

Pero hay más. Entra en ?Ajustes?

¿Quieres poner AMP en toda la web? Accede al apartado ?General? y marca ?Páginas?, ?Página de inicio? o ?Archivos. No olvides comprobar que todo se visualice correctamente.

¿Deseas poner anuncios? Te recomiendo hacerlo con Google Adsense y de forma manual para mejorar la experiencia de los usuarios.

Pincha en ?Publicidad? y ve a la parte baja, donde dice ?Posiciones de los anuncios?. Activa los bloques de anuncios que deseas mantener activos. Crea los bloques en Adsense e introduce los datos en el apartado correspondiente (Data AD Client y Data AD Slot).

¿Necesitas implementar datos estructurados? Los Rich Snippets hacen que la información aparezca en Google de forma destacada. En el apartado ?Datos estructurados? puedes seleccionar el marcado básico de las entradas y página (recetas, entradas de blog, noticias, etc.). Si quieres personalizar los datos estructurados instala el plugin gratuito que sugieren al inicio de esta sección, con él podrás crear múltiples configuraciones.

¿No te gustan los estilos? AMP ha avanzado de forma exponencial. Aunque sigue viéndose como una versión básica, nada tiene que ver con el AMP de los inicios. Ahora puedes mejorar el apartado visual desde la sección ?Diseño?. Es muy intuitivo. Ahí podrás cambiar desde el tema al completo (de pago) hasta las imágenes, las migas de pan o los ajustes de redes sociales. La personalización es muy alta.

Las extensiones AMP más usadas en WordPress

Como te he comentado a lo largo de esta guía AMP para WordPress, esta tecnología ha avanzado exponencialmente en los últimos años. Hemos pasado de diseños anticuados a versiones AMP relativamente modernas.

Extensión AAWP for AMP

Puedes crear páginas de afiliación o de Adsense en AMP con facilidad, pero para ello tendrás que comprar un plugin especialmente adaptado para tal fin. El más popular es AAWP for AMP. Todo un clásico del sector. ¿Su problema? El precio no es barato.

Call To Action (CTA)

También puedes crear llamativas llamadas a la acción (Call To Action o CTA). No serán tan espectaculares como las que puedes diseñar en la versión normal de tu página web, pero cumplirán con su cometido.

Esta extensión también es de pago, en este caso resulta más económica que la anterior.

Contact Form 7 in AMP

Uno de los plugins más populares para elaborar formularios de contacto. Contact Form 7 ofrece una extensión adaptada a Google AMP.

Es gratuita, aunque con limitaciones. Perfecta para que tus clientes contacten contigo sin complicaciones.

Easy Table os Contents for AMP

Las tablas de contenidos son muy habituales en las páginas web informativas. Para integrarlas de forma automática en AMP necesitarás una extensión de pago. Es muy fácil de integrar, se puede hacer en pocos clics.

Siguiendo esta guía podrás poner en marcha AMP en la mayoría de sitios WordPress, pero recuerda que esta tecnología presenta limitaciones, es posible que algunas funciones queden completamente desactivadas en las nuevas URLs de AMP.