AMP es Accelerated Mobile Pages por sus siglas en inglés. Se trata de una iniciativa de Google junto a grandes socios de la tecnología para promover un código abierto que permita mejorar la conexión a Internet desde los smartphones.
Para nadie es un secreto, mucho menos para Google, que gran cantidad de los usuarios del navegador se conectan desde sus teléfonos inteligentes.
Solo basta con echar un vistazo a nuestro alrededor: al menos una persona en un espacio cerrado se encontrará chequeando sus redes o comprando entradas para un concierto desde su teléfono móvil.
Incluso, muchas consultas de precios y servicios se hacen a través de las páginas web de los negocios, y estas visitas se hacen mediante un smartphone que, por lo general, se encuentra a la mano del internauta.
De acuerdo a un estudio realizado por Verto Analytics el pasado año, 57% de los consumidores usan sus teléfonos móviles para conectarse a la red, es decir, se han convertido en el elemento principal de conexión superando ordenadores y tablets.
Por lo tanto, ha resultado importante para Google mejorar la experiencia de estos usuarios al hacer clic en alguna oferta que llamó su atención y que los direcciona a una determinada web.
La permanencia en la página web y el incremento del número de visitas es bastante importante para la optimización del SEO, por lo que Google decidió tomar cartas en el asunto y lanzar AMP con el objetivo de mejorar la velocidad de carga de los sites desde los dispositivos móviles.
Para identificar las páginas que tienen aplicado AMP solo basta con ver si las mismas tienen el símbolo de un relámpago al ingresar con un smartphone, acompañado de las siglas de este código.
Lo cierto es que esta tecnología ayuda a mejorar el posicionamiento orgánico así como la visión de los contenidos con mayor facilidad, pues la página estará 100% funcional para los smartphones.
Hoy en día, un negocio que no se encuentre en Internet se puede considerar como inexistente, por lo que partiendo de esto es necesario que todos los negocios tanto offline como online, tengan una página web a la altura de las exigencias de los usuarios.
Una página web lenta nunca tendrá éxito, y mucho menos si el usuario está sediento de información y la necesita de manera rápida y precisa.
Es por eso que te invitamos a descubrir las razones para implementar AMP a tu página web.
¿Qué es AMP (Accelerated Mobile Pages)?
AMP es una herramienta básica destinada a acelerar las páginas móviles y hacer que se ejecuten más rápido en dispositivos móviles.
Las AMP se crearon para mejorar la velocidad y la experiencia del usuario, en todos los dispositivos y plataformas, mediante la reducción de muchos de los componentes que reducen la velocidad de las páginas web.
Las páginas AMP rinden mucho más rápido que las páginas web normales. Originalmente creado para artículos de noticias y publicaciones de blog, AMP finalmente incorporará otros tipos de piezas de contenido y plataformas.
Por su parte, Google ha creado un carrusel de noticias AMP, específicamente para este tipo de páginas, que aparece en los resultados de búsqueda de dispositivos móviles.
Las páginas de AMP suelen ser copias de páginas web existentes en una URL separada, compuesta por AMP HTML, AMP JS y una cantidad limitada de CSS.
Para acelerar el tiempo de carga, AMP elimina las páginas HTML y almacena en caché el contenido en los servidores de Google y sirve contenido desde allí, utilizando la red de Google para entregar el contenido.
Por otro lado, Google también pre-procesa las páginas AMP en SERPs antes de que el usuario las visite, lo que permite tiempos de carga casi instantáneos.
La carga asíncrona carga el contenido más rápido, mientras que el soporte de srcset (atributo propio el elemento img) obtiene la definición correcta de imagen por dispositivo.
Mediante el uso de la descarga inteligente de recursos, AMP puede descargar contenido dentro de la ventana gráfica primero, antes de descargar contenido fuera de la misma.
Cabe recalcar que todo esto que hemos explicado puede ser rastreado mediante Google Analytics.
Además, AMP utiliza muchos componentes adicionales para aumentar la interactividad de las páginas de este tipo, incluidos amp-iframe y amp-lightbox.
Dado que las páginas AMP son páginas separadas de la versión principal, se requiere más rastreo y, por lo tanto, se produce más carga en el servidor web.
Por lo tanto, si implementas AMP para todo tu sitio web, esto posiblemente duplicará la cantidad de tiempo que Google invierte en rastrearlo.
Si bien la implementación técnica de AMP significa crear más páginas en tu sitio web, Google no indexa estas páginas de AMP, por lo que el recuento de páginas no se ve afectado.
[Tweet “Las páginas AMP rinden mucho más rápido que las páginas web normales.”]
¿Cómo funciona en los dispositivos móviles?
El complemento o plugins representa las páginas web al eliminarlas de todos los elementos HTML que no se requieren en los móviles.
Por ejemplo, si incluyes códigos JavaScript en tu página web, AMP los eliminará. En otras palabras, no se procesarán a menos que estés utilizando la biblioteca básica de AMP JS.
En esencia, al reducir los elementos HTML, AMP permite que tus páginas se carguen más rápido.
Además, hay un complemento de WordPress AMP que permite a los especialistas en marketing de contenidos y escritores publicar las versiones de AMP de sus publicaciones con un solo clic.
En resumen, de esta manera funciona AMP para los dispositivos móviles:
- Google premia los sitios web que brindan una experiencia de usuario amigable para dispositivos móviles con un mejor ranking.
- AMP es un proyecto que te permite adaptar tus páginas para una mejor experiencia móvil.
- Ya que WordPress es el CMS más popular de estos días, también está disponible un complemento de WP para que tu contenido esté listo para AMP.
- AMP elimina las páginas de la mayoría de los elementos HTML no deseados.
- Puedes usar una versión simplificada de CSS solamente. Además, debes validar correctamente tu sitio web para asegurarte de que funciona con AMP.
- Puedes usar JavaScript pero solo desde la biblioteca provista por AMP.
- Si deseas tener videos en tus publicaciones, necesitas usar las extensiones aprobadas por AMP.
- No está permitido utilizar formularios en tus páginas / artículos.
Sin embargo, algunas cosas están a punto de cambiar, ya que Google anunció otra característica interesante que se implementará a través de este proyecto.
Se llama AMP Stories y, como su nombre indica, llevará a AMP más allá de sus límites iniciales.
La función AMP Stories se anunció en AMP Conf en Amsterdam. La idea no es nueva, si pensamos en Instagram y Snapchat.
Además, AMP Stories también incluirá contenido de pantalla completa que funciona en todos los dispositivos móviles y de escritorio. Admite llegar a medios con videos e imágenes nativas, animaciones e interacciones.
AMP Stories se creó con la misma tecnología que impulsó todo el proyecto AMP y, por lo tanto, todo el contenido publicado a través de Stories se cargará rápida y sin problemas en dispositivos móviles.
[Tweet “Al reducir los elementos HTML, AMP permite que tus páginas se carguen más rápido.”]
¿Cuáles son sus ventajas?
En líneas generales, la principal ventaja de las AMP es la mejora de la experiencia de usuario en los dispositivos móviles, ya que nos encontramos en la era mobile y eso no cambiará de la noche a la mañana.
Por otro lado, la velocidad de carga siempre será positiva tanto del lado de Google como del lado del usuario, y esto se puede traducir en mayor tráfico y posicionamiento para la página web.
Beneficios de implementar AMP
De igual modo, hay ciertos beneficios que AMP ofrece a las páginas web como indicamos a continuación:
- Las páginas se cargan al instante en los móviles
Como consecuencia, la tasa de rebote se reducirá ya que las personas ya no tendrán que esperar a que se carguen las páginas.
Teniendo en cuenta que un segundo de retraso puede reducir la tasa de conversión en un 3,5%, de acuerdo a estudios de Akamai, esta es una característica muy importante que ningún experto en marketing puede ignorar.
- Mucho mejor ranking de Google
Está claro que Google prefiere las páginas que se cargan más rápido, especialmente las páginas de AMP. Esto significa que cuando las personas buscan una consulta específica si tu página es más rápida que la de la competencia, se ubicará en una posición más alta en los resultados de búsqueda y, de esta manera, será más probable que los usuarios accedan a ella.
Te recomendamos evaluar la velocidad de tu web en Page Speed Insights, una excelente herramienta proporcionada por Google que te permitirá ver la puntuación de tu página en el móvil.
- Mejor seguimiento de tus usuarios
Todo marketer debe hacer un seguimiento de su audiencia para saber cómo adaptarse a su comportamiento y preferencias.
AMP te proporciona analíticas del administrador de etiquetas que te permitirán hacer un seguimiento de los clics, las conversiones, los visitantes, los visitantes nuevos y los visitantes recurrentes, entre otros datos importantes.
[Tweet “Google prefiere las páginas que se cargan más rápido, especialmente las páginas de AMP, por lo que el ranking mejora.”]
¿Cómo implementar AMP en mi web?
Para implementar AMP en una web y comenzar a acelerar la velocidad de tus páginas en los móviles es necesario que sigas los siguientes pasos:
- Elementos esenciales:
Existen ciertos elementos exigidos por AMP para que funcione correctamente, entre ellos se encuentran:
- El primero de estos elementos es: <!doctype html> .
- Luego debes identificar el documento con un <html amp> o, si es de tu preferencia, con su modalidad original <html>. También si es de tu preferencia, puedes añadir información de idioma con lang=”..”
- Después de esto vienen <head> y <body>.
- Dentro del head debes colocar de primer lugar un <meta charset=”utf-8″>.
- Luego insertar de inmediato la librería AMP JS que es: <script async src=”https://cdn.ampproject.org/v0.js”></script>,
- Lo siguiente es una etiqueta <link rel=”canonical”> que enlace con el HTML original del documento.
- Luego de esta manera: <meta name=”viewport” content=”width=device-width,minimum-scale=1,initial-scale=1″>
- Por último, justo antes del final del <head>, copiar el código <style amp-boilerplate> como acá se indica. Consigo esto contiene unos estilos CSS básicos que tienen que ver con la visualización del contenido.
- Incluir metadatos:
Pese a que no es obligatorio, es muy recomendable la inclusión de metadatos adecuado al tipo de contenido que se lleva en la página, ya sean artículos o noticias.
Esta es la mejor manera de que proveedores indexen y se pueda dar un preview de lo que viene a continuación al hacer clic en el contenido, junto con la inclusión de una imagen alusiva al mismo.
- Incrustar CSS:
Resulta necesario, como ya hemos visto, que todo el CSS quede unificado e incrustado en el head dentro de una etiqueta única que luce así: <style amp-custom>.
Existen ciertas restricciones de AMP que puedes darles lectura en su página, pero en dado caso es recomendable que se dicten normas de estilo muy sencillas en cuanto a tamaños de letra y colores y no complicarse mucho con este tema.
Sin embargo, existe una excepción ya que sí es posible enlazar a fuentes externas en CSS (al usar @font-face) como con una etiqueta <link> en el <head>.
Pero debes estar atento puesto que solo se permiten archivos que han sido alojados en Google Font.
- Tomar en cuenta todo sobre Javascript:
Debes tomar en cuenta que las únicas etiquetas script permitidas son solo las que se encuentran en la propia librería de AMP JS y las que son de metadatos JSON-LD.
Sin embargo, existen algunas alternativas si realmente debes agregar funciones de Javascript en tu web, entre las cuales se encuentran:
- Ir por la búsqueda de extensiones AMP que brinden una solución específica en cuanto a botones sociales, imágenes de publicidad, etc.
- Pensar en si realmente esto es necesario, o si la página está urgida de tener una versión como AMP.
- Introducir el contenido:
Desde este punto, lo que queda es introducir tu contenido dentro del body, partiendo del que ya se tiene en la página en el original HTML cuya versión en AMP tendrás que adaptar para luego tener la validación.
Las etiquetas más habituales como las negritas, cursivas, párrafos, etc., se podrán adaptar sin mayores contratiempos, pero hay otras a las que se les deberá prestar especial atención para que salgan bien.
- Adaptar las imágenes:
Es importante darle a conocer a AMP el tamaño de todas las imágenes a incluir, pues al cargarlas es necesario evitar redimensionar en tiempo real para así reducir lo más que se pueda el tiempo de renderización.
Por tanto, algunas consideraciones que debes tomar en cuenta al adaptar tus imágenes son:
- AMP va a proceder a sustituir las etiquetas <img> normales por su propia versión <amp-img>. La restricción principal es que la altura y anchura en píxeles debe estar expresado exactamente para que se valide.
- Podrás asegurarte de que las imágenes sean responsive al agregar un layout=”responsive”.
- Son permitidas otras propiedades que apoyan al ofrecer contenido optimizado para cada dispositivo, tal como srcset.
- Como comentamos anteriormente, será importante que el artículo tenga al menos una imagen que lo represente y especificarla en metadatos.
- Alternativas AMP en videos:
Al igual que en las imágenes, en videos y otros formatos de contenido habrá que adaptarlos a AMP.
Para el caso específico de los videos habrá que añadir un <amp-video>.
En todo caso, dichas etiquetas funcionarán como <alt-img>, por lo que se necesitará detallar sus dimensiones exactas en cuanto a anchura y altura e igualmente es permitida la propiedad layout.
- Caso de formularios:
Los formularios y otros elementos funcionales que podrían haber estado anteriormente en la página, no son compatibles con AMP.
La solución a esto es sustituirlos por CTA simples, enlaces y demás botones.
¿Cómo configurar AMP en Google Analytics?
Al basarte en el CMS que usar para tu site, podrás implementar AMP, pero en el caso de WordPress, existen diversas extensiones que te podrán ayudar en el cometido de configurar AMP.
Sin embargo, lo más recomendable es que consultes a un programador para añadir Analytics en las páginas de AMP.
Al hacer esto, resultará necesario que instales AMP Analytics, ya que Google Analytics no realiza estos análisis de manera habitual.
Para ello, tendrás que activar la etiqueta AMP de Analytics en tu perfil seguidamente incluirla en las páginas AMP de la página (o en la extensión que hayas estado usando para convertirlas).
Luego de instalarlo, son algunos datos que podrás tomar en cuenta y que te dará Google Analytics sobre tu AMP:
- Página: en cuanto a su dominio, título de página, ruta, entre otros.
- Usuario: zona horaria, su identificación, etc.
- Navegación: ID único de página de visita, URL, etc.
- Navegador: Altura y ancho de pantalla, agente de usuario, entre otros.
- Interacción y eventos
Conclusión
Implementar AMP es la mejor manera de reducir el tiempo de espera de tus usuarios en tu página web dentro de sus dispositivos móviles.
Un eCommerce e incluso una tienda offline siempre se va a deber a sus consumidores, y son ellos mismos los que ingresarán a tu página si están interesados en tus productos o servicios.
Por lo tanto, mejorar su experiencia de usuario debería ser un “must” para que las conversiones aumenten.
Al implementar AMP en tu web, deberás tomar algunas consideraciones en cuenta acerca de los elementos de contenido para que la experiencia de tus usuarios sea agradable y completa:
- Cabecera sencilla: lo mejor es que sea una franja de un color específico con tu logo; mientras más simple, mejor.
- Pie de página: puede ser incluso más simple que la cabecera. Podrías colocar algunos enlaces o incluso no colocar nada.
- Diseño responsive: al hacer todo esto y al implementar AMP, debes pensar en mobile todo el tiempo, pues no es la idea llenar de diseños complejos a tu web.
- Busca la extensión amp-sidebar para tener alternativas a menús, sidebars y otros elementos de navegación complejos que no deberían de estar o al menos no deberían de ser intrusivos.
- Considera usar la extensión amp-social-share si deseas incluir botones sociales, enlaces y otros elementos para poder compartir tu contenido.
- Es recomendable que coloques un enlace visible a tu página/contenido original en HTML, puesto que los buscadores de contenido no todo el tiempo van a preocuparse por hacer visualización a la fuente original.
Quizá te pueda interesar:
Formas de Adaptar tu Blog a Reglamento de Protección de Datos
De Qué Trata el Marketing Relacional
Los Mejores Cursos Gratuitos de Google Analytics
Cuáles Son las Diferencias de los Tipos de Enlaces y su Relación al SEO
Cuáles Son las Mejores Extensiones de Chrome para los Marketers
