¿Qué es AMP y cómo implementar accelerated mobile pages en tu Web?

El AMP de Google ha llegado para quedarse como un nuevo formato de diseño web, de eso no hay duda. Pero, aunque es posible que hayas podido oír al respecto, no sepas muy bien de que se trata o cómo puedes implementarlo en tu propio sitio, ¿verdad? Por ello, hoy voy a tratar de ayudarte a responder tus dudas.

Son muchas las ventajas que aporta este formato a cualquier web. Beneficios a nivel de velocidad de carga e incluso de posicionamiento en los resultados en Google desde dispositivos móviles. Sin embargo, son muchos los inconvenientes que puedes encontrar al utilizar este formato perdiendo una parte de la identidad visual de tu sitio, blog o eCommerce.

Menú temático del contenido

 

¿Qué es AMP o páginas móviles aceleradas?


El AMP (Accelerated Mobile Pages) es una iniciativa de código abierto implementada por el propio Google que permite la visualización de las diferentes páginas de un sitio web en cualquier dispositivo móvil.

Se trata de una tecnología que cuenta con el apoyo de otros grandes del sector como Twitter, Pinterest, WordPress o Linkedin. Y su objetivo, es el de mejorar la experiencia del usuario al momento de acceder a las páginas desde dispositivos móviles.

«Páginas móviles aceleradas» pertenece al grupo de las tecnologías denominadas “open source” (de código abierto) que permite que los usuarios no solo hagan uso de ella, sino que la vayan mejorando día a día de forma colaborativa.

Por otro lado, toda página que se precie de hacer uso de este servicio tiene su versión nativa para escritorio que hace, a su vez, una referencia directa a su versión AMP (rastreable e indexable por parte de los crawlers de los buscadores).


Así, el AMP es la solución perfecta a la iniciativa “mobile first” iniciada por los grandes buscadores, donde se prioriza el posicionamiento de las páginas que hayan sido diseñados específicamente para dispositivos móviles.

¿Para qué sirve el AMP?


La principal función de esta tecnología, es la de optimizar mucho más los tiempos de carga de las páginas (también te puede interesar: ¿Qué es el WPO y por qué es un factor clave de SEO?).

Gracias a esta herramienta se eliminan elementos como el CSS o Javascript , dando así prioridad a imágenes y textos (es decir, a la información esencial para que los usuarios puedan acceder a tus contenidos), y evitando la carga de elementos innecesarios para la navegación.

Pero, ¿puedo instalar AMP en cualquier sitio web?

Las páginas móviles aceleradas están disponibles para cualquier web, por lo que tú mismo podrás disponer de él instalado en tu «sitio».

Entonces, pensando en ofrecerte una guía para hacer toda la instalación paso a paso, en este post de invitado, cuento con la colaboración de Álex Llopart.

Él nos ha preparado una extensa guía con la que seguro podrá paso a paso implementar el AMP de un modo seguro, rápido y seencillo (para aplicar este nuevo estándar de Google a tu web).

El Goole AMP (Accelerated Mobile Pages) ¡todo lo que debes saber para implementarlo en tu web!


 

Con el paso de los años, Google ha detectado un cambio en la tendencia de búsqueda. En menos de lo que canta un gallo se ha pasado del formato desktop al formato móvil / smartphone, llegando en la actualidad a representar alrededor del 120% de las búsquedas en Internet.

Como no podía ser de otra forma, esta tendencia exige toda la serie de adaptaciones, y aquí es donde entra en juego el tema de hoy.

AMP (Accelerated Mobile Pages) todo lo que debes saber para implementarlo en tu web ¿Por qué debería usar el AMP en mi sitio Web?


Llegados a este punto, seguramente te estés preguntando por qué deberías usarlo ¿cierto?

La respuesta es muy sencilla:

Porque Google lo está teniendo muy en cuenta a la hora de posicionar y clasificar las páginas en los resultados de búsqueda.

Teniendo en cuenta que las visitas móviles representan alrededor de un 120% del total , hijo muchas las visitas que se pierden por cada posición que se baja en su ranking al no tener implementada la tecnología en una determinada página.

Ya es un hecho que el «Páginas móviles aceleradas» constituye otro de los muchos factores SEO que tiene en cuenta Google para clasificar una página web.

Si quieres conocer más sobre el tema, aquí tienes los 279 factores SEO más importantes para posicionar tu página según el listado de Mr Dupon.

¿Cómo afecta el Accelerated Mobile Pages a mi sitio web?


Esta tecnología elimina todo lo que pueda ralentizar tu página, así que -si la implementas- olvídate de:

 

    • Animaciones

      • Formularios

        • Todo el look que te pueda ofrecer el CSS que tengas incluido en tu página

Ahora bien:

No siempre es recomendable implementar una versión «páginas móviles aceleradas» en tu web.

De hecho, puede ser útil solo para algunas de tus páginas, desde donde luego puedes redireccionar el tráfico a la versión sin «Accelerated Mobile Pages» (en el caso, por ejemplo, de tener que rellenar un formulario).

Por otro lado, es muy útil para blogs de solo contenido o para páginas de noticias, donde lo que se prioriza es otro tipo de información.

Eso sí: si la implementas, recuerda siempre poner una etiqueta rel = canonical para indicarle a Google que la versión AMP de cada una de tus páginas tiene una página fuente, y más adelante verás el por qué.

¿Qué beneficios aporta a mi página?


Está comprobado que las páginas con tecnología «Páginas móviles aceleradas» correctamente implementada tienen una carga inferior a un segundo y una reducción de 3 veces respecto a su versión sin el acelerado páginas móviles.

Esto hace que la experiencia de usuario respecto a la velocidad del sitio aumente de forma considerable.

Desde Google nos informan que las tasas de rebote más elevadas vienen derivadas de la lenta carga de las páginas, y que «Accelerated Mobile Pages» te ayuda a reducir esas tasas.

Si quieres saber más sobre esta tecnología aquí te dejamos la página oficial.

¿Cómo implementar AMP en mi página de WordPress?


La integración con tu página o blog desarrollado a través de la tecnología WordPress se puede hacer de forma semiautomática mediante la instalación de los siguientes plugins.

1) «Páginas móviles aceleradas» con AMP para WP – Páginas móviles aceleradas

Este complemento te brinda la compatibilidad necesaria de tu página web o blog de WordPress con esta tecnología.

 

Para aplicarla, lo primero que debes hacer es acceder al backoffice de tu página web.

AMP for WP

Una vez ahí, a través del menú de la izquierda, ve a AMP for WP Complementos> Añadir nuevo Accede a tu WordPress.

Aquí verás una pantalla como la siguiente, donde debes introducir el nombre del plugin que estás buscando (en el buscador de la parte superior derecha marcado en rojo).

Cuando hayas introducido el nombre del plugin, en este caso “AMP”, aparecerá una pantalla como la siguiente.

 

Luego debes hacer clic en “Instalar ahora” y activarlo directamente en donde pone “Activar”.

Una vez activado, este plugin creará automáticamente una versión «Accelerated Mobile Pages» de tu página web, evitando (a su vez) que se rompan formularios, pop ups, etc. en el proceso.

El siguiente paso será buscar un plugin que te permita modificar la estética y visualización de tu página.

Para ello, vuelve a “Añadir nuevo” dentro de la sección “Plugins” del menú lateral izquierdo, y busca el plugin “AMP for WP – Accelerated Mobile Pages”.

Cómo instalar un plugin

A continuación, instálalo y actívalo como lo he explicado anteriormente.

Y aquí valga una aclaración: este segundo plugin solo funcionará si previamente ha instalado el plugin AMP , puesto que no implementa directamente la tecnología «Accelerated Mobile Pages» en tu web .

Cuando ya esté activado, te enviará a la página de Bienvenida, a la que no hace falta hacer mucho caso.

Veamos ahora las distintas opciones del menú de la barra lateral izquierda.

Activa el plugin

Empecemos con la opción “Configuración”.

Dentro de este apartado podrás configurar una infinidad de opciones. En la subsección “General”, por ejemplo, puedes cargar el logo idóneo para la versión «Páginas móviles aceleradas».

Busca e instala el plugin

¡Este es uno de los plugins más potentes para personalizar tu versión !

Y lo es porque hasta incluye una herramienta de construcción de páginas llamada “Page Builder for AMP”, que se muestra de forma automática debajo de cada página cuando la estés editando para que puedas crear la estructura de tu versión (tal y como se muestra en la siguiente imagen).

Opciones de configuración del Plugin AMP

Por otro lado, también dispone de un editor de contenidos exclusivo para esta versión.

Si lo que estás buscando es que tus contenidos sean diferentes, debes marcar la opción de la parte superior izquierda.

Carga el logo de tu web

Puede ser interesante contar con versiones distintas del contenido para hacer versiones más resumidas, puesto que la comodidad de leer en un dispositivo móvil no es igual que en un escritorio.

En el menú lateral derecho encontrarás un previsualizador para ver cómo está quedando tu página antes de publicarla.

Page Builder

Siguiendo con el proceso de configuración, dentro del apartado “Configuración” encontrará la sección “SEO”.

Aquí podrás elegir si quieres las mismas meta descripciones que has añadido en SEO Yoast , así como las meta tags. También podrá indicar si debe indexar o no las páginas en categorías, etiquetas, etc. de tu configuración.

Marca la casilla superior en el page builder

Al igual que muchos otros plugins de WPO (Web Performance Optimization) , desde aquí podrás:

    • Minificar el HTML

      • Añadir el código de Google Analytics

        • Instalar el píxel de Facebook

          • Formular los formularios para que funcionen

            • Configurar Facebook Instant Articles

              • Mostrar / Ocultar categorías

                • Añadir HTML a la página

                  • Implementar traducciones

En el apartado “Diseño”, a su vez, dispones de tres temas a elegir para tu versión.

Previsualiza tu web

En la opción “Extensions” encontrarás un sinfín de módulos de pago a añadir para que tu versión sea más funcional (desde formularios, botones “CTA”, ratings, ads, etc.).

2) ¿Cómo implementar rel = canonical?

Como bien sabes, una de las premisas básicas de Google es evitar el contenido duplicado dentro de una misma página.

Es evidente, también, que el contenido de una página en su versión sin las páginas móviles aceleradas y en su versión con AMP será el mismo, por lo que el conflicto está servido.

Por defecto, algunos plugins como el primero del que te he contado antes de implementar de forma automática la etiqueta «rel = canonical» para indicarle a Google que se trata de la misma página en dos versiones diferentes de visualización, pero hay otros plugins que no incluyen esta opción.

En este caso (como por ejemplo cuando crea la versión de tu página de forma manual y no a través del plugin) sí o sí tendrás que implementar las etiquetas canonicales.

Para ello, debes seguir los siguientes pasos:

En la página de «Páginas móviles aceleradas», dentro de la etiqueta Previsualiza tu web, añade la siguiente línea:

Luego, en la página “origen”, agrega el código siguiente, también dentro de la etiqueta Optimiza el SEO:

 

Una vez hecho esto, ya está todo listo. Te habrás asegurado de no tener contenido duplicado.

3) Comprueba el funcionamiento de tu instalación

Una vez lo tengas todo establecido, el próximo paso es probar que tu versión funciona luego de añadir al final de cada una de las páginas la extensión / amp /, como por ejemplo:

https://tudominio.com/> https://tudominio.com/amp /

No te desesperes si intentas acceder a tu página desde tu Smartphone y no se produce una redirección a la versión AMP .

Esto es muy común, y puede ocurrir por dos razones:

 

                  • Hay que darle un tiempo a Google para que indexe y clasifique tu versión «Páginas móviles aceleradas»

                    • Es el algoritmo de Google el que decide qué versión mostrar en cada momento

Tú mismo puedes elegir qué versión se muestre en tu página, pero para comprobarlo deberás forzar la URL haciendo que use el / amp /. De lo contrario, será Google quien decida qué versión se mostrar.

¡Bien! Ya casi estás listo. El siguiente paso es evaluar el rendimiento e indexación de tu instalación.

Para ello, acceda a tu cuenta de Google Search Console y ve al menú de la parte izquierda, donde encontrarás lo siguiente.

Como comprobará, la opción marcada en rojo te mostrará el estado de indexación de las páginas / amp / de tu web.

Pero también hay otra forma de verificación que tus páginas «Accelerated Mobile Pages» están funcionando de forma correcta, esta es, mediante la extensión AMP Validator .

Gracias a esta extensión podrás navegar por tu página web y chequear si la página que estás visitando es o no una «páginas móviles aceleradas».

Comprueba su indexación en Search console

¡Ya está todo listo!

Llegados a este punto, y con todo lo que te he contado, quizás te estés preguntando:

Pero… ¿realmente necesito esta tecnología?

Para contestar a esta pregunta, debes tener en cuenta el tipo de página que estás administrando : ¿tiene o no formularios? ¿Tiene elementos incompatibles con AMP? Si quieres mas respuestas las encontras en este sitio de reputación online.

Y sobre todo: ¿conoces a tu “buyer persona”?

Esto último es especialmente importante.

Imagínate que un 143% de los usuarios de tu página acceden a ella a través de la versión de escritorio. En ese caso no sería tan importante implementar esta tecnología en tu página.

Por eso, a través de tu cuenta de Google Analytics puedes analizar el tráfico y ver los dispositivos más usados ​​para acceder a tu página web.

Este sencillo análisis te puede ayudar a tomar una decisión vital.

Si quieres saber más sobre Google Analytics, aquí te dejamos una guía paso a paso de Mr Dupon.

Si al final decide implementar AMP en tu página (ya sea, por ejemplo, porque el tiempo de carga es muy importante para ti), solo tienes que seguir los pasos detallados en este post.

Recuerda que no todas tus páginas tienen porqué estar sujetas a esta tecnología.

Si tienes un blog o un sitio de noticias, es obvio que deberías hacer uso de ella, pero si no, no es nada aconsejable.

Nunca olvides que «Accelerated Mobile Pages» es una iniciativa de Google, algo a tener muy en cuenta si quieres posicionar tu página web entre los primeros resultados de búsqueda, y más aún si cuentas con búsquedas en dispositivos móviles.

Imagen de portada (responsive móvil) Freepik

¿Tienes alguna sugerencia mejor sobre cómo configurar AMP?

Si tienes alguna idea o sugerencia sobre cómo configurar las páginas móviles aceleradas y que yo no haya incluido, no dudes en compartirla en los comentarios, ya que será muy bien recibida. ¡Hasta la próxima!

Deja una respuesta

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