Google Se Saca La Chorra Con Las Páginas AMP

Google se saca la chorra con las páginas AMP

Habéis leído bien el título chumachos, si. Google se ha sacado la chorra con sus páginas AMP. Toma ya. Aunque no es nuevo que cuando Google lanza un servicio o producto nuevo, todo el mundo se vuelve loco. Lo hemos visto recientemente con los nuevos Google Pixel y en el sector web lo vemos ahora con las páginas AMP.

Las Accelerated Mobile Pages o AMP están ahora en la cresta de las cosas que molan. Cada vez se esta hablando mas de ellas y grandes páginas han sacado ya su versión en AMP como por ejemplo El Confidencial.

Intentad hacer un calculo. Contad cuanto tiempo os pasáis delante del móvil. Pasamos mucho tiempo y eso las grandes empresas lo saben por eso ya han empezado a desarrollar nuevas formas de monetizarnos y mantenernos atrapados dentro de su ecosistema.

Facebook mediante sus Instant Articles, Apple con su programa de publicación de noticias propio y como no podía ser menos Google con su proyecto de páginas móviles aceleradas AMP.

Pero antes de seguir…

 

¿Qué coño son las AMP Accelerated Mobile Pages?

En octubre de 2015 Google anunció su nuevo proyecto. Páginas preparadas para dispositivos móviles y que fueran aceleradas mediante sistemas de caché. Con esto tiene como objetivo proporcionarnos una navegación muy rápida y ayudarnos a bajar el consumo de datos. Para ello ha desarrollado una nueva tecnología escribiendo un nuevo tipo de HTML Open Source, el AMP HTML.

Esta tecnología ayuda a los productores de contenido dándoles la posibilidad de crear una versión desnuda de HTML de su página que carga casi instantáneamente cuando se visita desde un móvil.

Desde el 24 de Febrero lleva Google desplegando su sistema de páginas compatibles con AMP dentro de sus resultados en las búsquedas móviles.

Aquí os dejo el vídeo promocional que sacó Google en el que el concepto de páginas AMP está muy bien explicado.

Se pueden ver cosas interesantes sobre esta tecnología como que en las SERPs las páginas se muestran como si fuese un carrousel y para pasar de artículo o noticia en la web hay que deslizar el dedo hacia un lado.

Esto también funciona para las búsquedas con respecto a Twitter ya que fue una de las primeras empresas en entrar al proyecto.

¿En que se diferencian las páginas AMP de las optimizadas para móviles?

Cuando comparamos páginas estándar orientadas a móviles con páginas AMP vemos dos diferencias principales: la velocidad de carga y cómo son sus contenidos renderizados y servidos.

 

 ¿Cómo de rápido cargan las páginas AMP?

Incluso a no haber métricas oficiales aquí por parte de Google, los tests pasados con AMP sobre carga de página son 4 veces mejores que aquellos con páginas orientadas a móviles. Y para confirmar esto aquí te dejo las pruebas que he hecho para uno de los artículos que mas pesan de mi blog.

Test de velocidad

Test de velocidad

Y es que como se puede ver en el segundo resultado, la velocidad de carga de la versión normal fue de mas de 60 segundazos!! Madre mía.

Sin embargo con la versión AMP, primer resultado, la carga llegó a los 2.66 segundos. Así que si, la tecnología esta nos ayuda mucho como desarrolladores pero mas como webmasters.

Pero no miréis solo el Load time, fijaos en el tamaño de página, pasa de los 3.5 MB a 263 KB. Ole sus cojones.

 

¿Por qué cargan tan rápido las páginas AMP?

Según la documentación, la tecnología detrás de las páginas AMP tiene tres patas fundamentales:

  • AMP HTML: una versión de HTML con etiquetas personalizadas y propiedades como por ejemplo amp-ad, amp-img, amp-video.
  • AMP JS: un framework js para páginas móviles que administra el control de recursos y los resultados en la carga utilizando llamadas asíncronas con recursos externos.
  • Caché AMP: CDN para la entrega de las páginas AMP válidas.

Cómo de rápido o lento cargue una página puede depender de varios factores que no voy a listar aquí, son de sentido común. Neuronas a trabajar!

Lo importante de esto es entender que las páginas aceleradas móviles AMP son versiones anoréxicas de una web dada. Pero, ¿cómo?

Con el HTML AMP se deshacen de etiquetas “superfluas” además de todo con lo que esta tecnología no esta de acuerdo, es decir, cosas de terceros.

Por ejemplo, Javascript puro está prohibido y se hace uso de su versión AMP para servirlo a través de los CDNs de Google.

En otras palabras, las páginas AMP son lo que se podría conseguir al utilizar HTML estándar puro servido a través de un sistema de caché agresiva.

Obviamente me he dejado muchas cosas en el tintero, si quieres saber mas aquí tienes la documentación que para eso están 😉

AMP HTML, Javascript modificado, CDNs, carga rápida… muy técnico todo pero… ¿y con el SEO que pasa? ¿Cómo afecta la tecnología detrás de las páginas móviles aceleradas al SEO de mi página web?

 

¿Le va a petar el trucutrú las páginas AMP a mi SEO?

Para nada, piensa un poquito y sino vuelve a ponerte el vídeo de presentación de Google y cuando termines contéstame a lo siguiente. ¿En qué posición salen las páginas AMP en las búsquedas de Google?

Aha! Las primeras! Y en formato carrousel. Muy bien!

Pues si, así es, a parte de que es una tecnología de Google, no se van a pegar un tiro en el pie, las páginas que tienen una versión AMP son colocadas en los primeros resultados de búsqueda como resultado del empeño que tiene Google por la adopción de lo que entiende como la nueva web.

Y sino mira los resultados de la siguiente búsqueda.

Faltan mas jalapeños

Faltan mas jalapeños

 

¿Te imaginas salir ahí, en ese primer resultado de nuestro amigo Inda? Wow

inda

 

¿Y todavía te sigues preguntando si AMP afectará a tu SEO?
Para nada, acabas de ver que Google le de preferencia absoluta a las páginas que incorporan versión AMP así que ya sabes, a ponerse las pilas.

Además, como es obvio, los posicionamientos mayores significan que tus páginas tienen unas métricas CTR altas por lo que se deduce que tu contenido obtendrá cada vez mas visitas y lo que los cuñaos llaman engagement.

 

¿Pero están pensadas las páginas AMP para todos los sitios?

Nope. Si tienes una web especialmente estática en la que no publicas o sueles publicar contenido de forma regular esta tecnología no es para ti. No tiene ningún sentido ya que si tu web es estática y tiene un peso medio/alto se podría deducir que es una web de venta de un servicio/producto o se trata de una web de empresa y este tipo de webs no suelen ser visitadas desde un móvil.

En cualquier caso, ambos ejemplos son webs que tradicionalmente vas a ver desde un ordenador. No hay necesidad en una landing page de transmitir la mayor información en el menor tiempo posible por lo cual su contenido no va a estar cambiando periódicamente y haciéndonos así gastar datos de nuestros móviles cada dos por tres.

No, esta tecnología esta orientada a publicaciones, diarios y en general medios de comunicación.

Caso distinto son los ecommerce. Si tienes uno tal vez te estas planteando en adaptar todo tu sitio a su versión AMP. La lógica parece razonable. Si mi web carga mas rápido, subiré como la espuma a los primeros sitios. Si estoy en los primeros sitios, habrá mas clicks y mas ventas.

Pues si y no. si en tu ecommerce te dedicas a generar contenido lateral para poder realizar venta cruzada, se me ocurren por ejemplo artículos y tutoriales, recomendaciones de productos y demas formatos, si que te diría que te pasaras a AMP pero si lo que quieres es meter AMP a tus fichas de productos y reviews… pues mira oye, casi te sale mejor meterle un Varnish….

Vale y ahora a la panoja, a lo que nos gusta…

 

¿Cómo adaptar mi blog hecho en WordPress a AMP?

Pues como no podía ser menos, la comunidad ya ha hecho varios plugins para que tu WordPress funcione perfectamente con AMP, o casi. Resulta fácil hacer una búsqueda en Google, términos como “los mejores plugins AMP para WordPress” seguro que te devuelven 2880000000 blogs con el mismo artículo refrito, sin embargo te voy a enseñar los dos plugins que he utilizado yo.

Plugins AMP para WordPress

Plugins AMP para WordPress

Esos dos, el AMP y el AMP for WP. El primero es el que tengo instalado actualmente y no tengo ninguna pega. Lo instalas y lo activas y ya está, no hay que configurar nada mas. Forma las urls con peticiones GET tal que así:

  • http://gorkamu.com/2016/10/truco-aumentar-las-visitas-de-tu-web/amp/
  • http://gorkamu.com/2016/10/truco-aumentar-las-visitas-de-tu-web/?amp

El segundo plugin, que fue el primero que probé, si que me dio un poco mas de guerra. Al principio me generó la versión AMP y mis páginas bien pero mas adelante Google Webmaster Tools detectó errores y me dejaron de funcionar.

Errores en mis páginas AMP

Errores en mis páginas AMP

 

Si señores, Google Webmaster Tools ya incorpora soporte para las páginas móviles aceleradas y también algunos temas de WordPress presentan problemas o son incompatibles con la tecnología AMP, has de saberlo.

Si estás utilizando el plugin SEO by Yoast deberías saber que hay otro plugin llamado Glue by Yoast que lo que te permite es utilizar las metaetiquetas que hayas definido con Yoast dentro de la versión AMP de tu página.

Otro consejo para mejorar tu SEO 😉 de nada

 

¿Cómo trackeamos las páginas AMP?

Pues nada, de poco nos sirve publicar contenido si no podemos saber como se está comportando ese contenido. Por ello tenemos que trackear nuestras web con servicios de analítica. Tradicionalmente eso siempre ha sido añadir en el HEAD de nuestro HTML la llamada a un javascript de Google Analytics y a correr, si es que funcionas con Google Analytics claro.

Así que podría ser razonable que te preguntarás que si vamos a hacer una nueva versión de nuestra web, la versión AMP, ¿cómo insertamos la llamada a los servicios de analítica?

Si vas con por el camino de WordPress, plugins y tal y no quieres tocar código no te tienes que preocupar por nada ya que los plugins lo van a hacer por ti, pero si te gusta ensuciarte y te estas picando la web a mano que sepas que tienes dos componentes disponibles: amp-pixel y amp-analytics.

Aquí tienes un ejemplo sobre la configuración de pagewies, eventos y todo Google Analytics en general.

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello, AMP Analytics</title>
    <link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </script>

    <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>



<style>body {opacity: 0}</style>



<noscript>


<style>body {opacity: 1}</style>



</noscript>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>

  <amp-analytics type="googleanalytics" id="analytics1">
  <script type="application/json">
  {
    "vars": {
      "account": "UA-XXXXX-Y"  
    },
    "triggers": {
      "trackPageview": {
        "on": "visible",
        "request": "pageview"
      },
      "trackEvent": {
        "selector": "#event-test",
        "on": "click",
        "request": "event",
        "vars": {
          "eventCategory": "ui-components",
          "eventAction": "click"
        }
      }
    }
  }
  </script>
  </amp-analytics>




<h1 id="header">AMP Page</h1>




  <span id="event-test" class="box">
    Hacer click para generar un evento
  </span>

  </body>
</html>

Para ir cerrando….

Hemos dejado claro que la tecnología de las páginas AMP nos trae velocidad y rendimiento a nuestras webs. Mejoran su velocidad de carga hasta 4 veces en algunos casos. Ademas de que si al incorporar AMP consigues aparecer en uno de los carrouseles que hemos visto dentro de las SERPs tu CTR se verá muy bien afectado incrementando en varios puntos tu tasa de clicks.

Joder AMP suena del copón en relación al CTR. Si, pero recuerda que esta tecnología esta pensada para sitios webs de noticias, blogs y diarios así que si tienes una tienda electrónica vete olvidando de poner páginas AMP.

En definitiva, las páginas móviles aceleradas o páginas AMP molan, ya tardas en ponerlo en tu blog. Cada vez esta siendo un factor determinante en el posicionamiento de los sitios.

 

Hala a mamarla!

¿Te ha parecido este un artículo de 5 estrellas? Dame tu valoración:
Review Date
Reviewed Item
Google se saca la chorra con las páginas AMP
Author Rating
5

Gorka Muñoz Andrés

Me llamo Gorka Muñoz y soy un desarrollador melómano. Combino a la perfección la búsqueda de nuevos grupos con la pasión por la tecnología. Desde chiquitito me ha gustado la programación, ahora que soy mayor estoy metido en el mundo del SEO sin olvidarme del /Dev.

Deja un comentario

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