Accelerated Mobile Pages

Inicio > Diseño Web > Accelerated Mobile Pages

¿Qué es AMP?

AMP es el acrónimo de la palabra en inglés Accelerated Mobile Pages; este nuevo formato de presentación se ha creado para mostrar de forma más rápida las páginas web en los dispositivos móviles; dicho así parece que suena bien; máxime cuando Google ha anunciado que este nuevo formato de programación va a mostrarse en las SERP de forma destacada. Pero las páginas AMP presentan una codificación expresa que se muestra, al menos en principio, muy exigente. Por lo tanto, si piensas incorporar AMP a tus diseños; deberás seguir un buen conjunto de pautas que son de obligado cumplimiento.

Accelerated Mobile Pages

Seguramente ya te habrás dado cuenta de que Google ha introducido algunas modificaciones en la Search Console; una de ellas es la introducción de dos nuevas pestañas, Accelerated Mobile Pages en el menú de Aspecto de la búsqueda, y la otra Usabilidad móvil en el menú de tráfico de búsqueda.accelerated mobile pages

Aunque vamos a dar un repaso a ambas opciones; la que más calado parece que va a tener es la de Accelerated Mobile Pages (AMP) y que seguramente se corresponde con esos cambios anunciados por Google en su core.

El proyecto Accelerated Mobile Pages no es nuevo; Google anunció la progresiva puesta en marcha del mismo a finales de octubre de 2015; su inclusión en la Search Console nos indica que va a ser un elemento principal en el posicionamiento SEO; está clara la apuesta de los principales motores de búsqueda por la experiencia de usuarios móviles, pero los cambios en la forma de programar una web van a ser de amplio calado, ya que la información la vamos tener que tratar con especial calado en aquellas páginas de nuestra web destinadas a usuarios móviles.

Además, hace unos días ha aparecido una nueva forma de enviar páginas al índice bajo una pestaña nombrada cómo móvil smartphone (próxima), en el momento de redactar este post aún no se muy bien que es lo que hace este bot, pero me da toda la impresión de que está íntimamente relacionado con las accelerated mobile pages.

Actualización: la pestaña mencionada en el párrafo anterior ha desaparecido.

Las Accelerated Mobile Pages, el proyecto AMP

Parece ser que el objetivo del proyecto accelerated mobile pages es que los diseñadores web nos preparemos para que la construcción de un sitio web se realice pensando en que los contenidos estáticos se muestren de una forma más veloz a los usuarios móviles. Cierto es que esta versión de página deja bastante que desear en cuanto a estética, ya que se pierden absolutamente todos los estilos, no se muestran nuestros trabajados header, no hay menú ni contenidos relacionados, se trata de mostrar la página en dispositivos móvileas a la mayor velocidad posible utilizando el CDN de Google.

Hasta aquí todos de acuerdo, es necesaria una buena experiencia móvil para evitar altas tasas de rebote en estos dispositivos, ya que la navegación en móvil ha de ser más veloz que en escritorio, por tanto debemos trabajar nuestras WPO de forma distinta, pero también la creación del sitio web para que sea bien visto por los motores de búsqueda a la hora de indexar en Google u otros buscadores.

Programación con AMP

Según parece, ya que en Jardín de Ideas estamos empezando a efectuar nuestros primeros desarrollos web teniendo presentes las directrices de Accelerated Mobile Pages; lo ideal es que el código Html tenga algunas características determinadas para este tipo de páginas; tambien en cuanto a JS hay que realizar algunas modificaciones al código y crear librerías específicas para asegurar que las páginas creadas para AMP se muestren de una forma más veloz, y finalmente utilizar un CDN, exclusivo para la entrega de estas páginas.

De una forma básica he tratado de describir qué es el proyecto Accelerated Mobile Pages, podéis encontrar toda la información en la página de GiftHub.

Ahora vamos a profundizar en el calado del proyecto, para las páginas existentes y que vamos a tener que adaptar, más pronto que tarde, al nuevo formato de Html. El proyecto es ambicioso; pero vamos a tener que adaptarnos a él de una forma más rápida de lo habitual.

Un vistazo al diseño AMP:

Lo primero que nos encontramos es con la declaración del sitio que incluye una importante novedad:

accelerated mobile pages head

Imagen extraida del proyecto Accelerated Mobile Pages de Google

Se puede presentar en dos versiones que al final representan lo mismo:

  1. La primera
    <!doctype html>
    <html amp lang="en">
  2. Y la segunda, que personalmente me llamó la atención
<!doctype html>
<html  lang="en"> 

En realidad se puede aplicar cualquiera de las dos, ya que se comportan exactamente igual.

El marcado de datos para AMP:

  • la etiqueta  link rel="canonical" que en caso de no existir la versión Html para AMP te devuelve a la versión normal
  • las etiquetas para imágenes cambian de forma substancial, apesar de que la mayoría de etiquetas de html funcionan sin problemas en el nuevo formato, hay algunas, como las imágenes que si utilizan un formato específico
    "<amp-img src="welcome.jpg" alt="Welcome" height="400" width="800"></amp-img>"
  • Sin embargo según las mismas especificaciones del proyecto Accelerated Mobile Pages, hay toda una lista de etiquetas prohibidas y que todos utilizamos en nuestro día a dia como desarrolladores de páginas web.

Etiquetas para AMP Html:

  • script: su uso está prohibido, salvo en las aplicaciones ld+json
  • base: prohibida y sin sustitutivo por ahora
  • img: reemplazada por amp-img
  • video: reemplazada por amp-video
  • audio: reemplazada por amp-audio
  • iframe: reemplazada por amp-iframe
  • frame: totalmente prohibida
  • frameset: totalmente prohibida
  • object: totalmente prohibida
  • param: prohibida aunque parece que va a tener un sustituto en breve
  • embed: otra de las que se espera encontrar la solución standard para Accelerated Mobile Pages
  • form: aquí me he quedado totalmente a cuadros, veremos como hay que presentar los formularios para que se adapten a AMP
    • Dentro de los formularios todas sus variables están igualmente prohibidas:
      • input
      • textarea
      • select
      • option
    • Sin embargo el botón de enviar permanece permitido ¿?

Conclusion acerca de las páginas AMP

Está en desarrollo el proyecto Accelerated Mobile Pages; pero me preocupa que ya esté en la Search Console, ya que faltan especificaciones por desarrollar y el comportamiento de las existentes dan más de un problema, de hecho las mismas páginas de ejemplo que se citan en el proyecto como test de funcionalidad dejan mucho que desear, bien sea (para los más curiosos) en la versión de escritorio para escudriñar el código fuente, como en lo pobre que es el visionado en la visión desde el dispositivo móvil.

El aspecto resaltable del proyecto, y que como decía antes por ahora hemos declinado utilizar es el CDN, ya que Google ha abierto un almacenamiento en caché gratuito (al menos por ahora) donde alojar y servir estos contenidos especiales, esperemos que no sea otra jugada del buscador para determinar en el futuro (previo pago) que páginas está o no bien estructuradas.

Un plugin AMP para WordPress

WordPress también ha anunciado la creación de un plugin para ayudar a implementar el código necesario para Accelerated Mobile Pages, podéis descargar el plugin gratuitamente en WordPress.org.

Algunas cuestiones con respecto al plugin, sólo funciona en versiones de WordPress 4.4 y superior, ahora mismo tenemos funcionando 4.4.1, lo que me hace pensar que no va a bastar con instalar el plugin para resolver el “problema”, ya que hay un buen puñado de cuestiones que afectan a librerias de JS y CSS que son específicas de la plantilla instalada, por ejemplo, Avada ya está trabajando en implementar las soluciones necesarias sin la necesidad de utilizar el plugin, por lo menos esa es su intención según anunciaron recientemente, y que en su actualización 3.9.3 ya empieza a llevar acciones que van a conducir a la aparición de una nueva actualización antes de la aparición de la que va a ser revolucionaria en cuanto a concepto y uso Avada 4.0.

Hay que estar muy atentos a los cambios que se vayan produciendo y por ahora no obsesionarse en cumplir el estandar, ya que según Google, está previsto que se vayan implantando directrices durante todo 2016, eso si, los desarrolladores web podeis ir obteniendo información actualizada casi a diario en la página de GiftHub del proyecto, donde también he expresado mis dudas, algunas resueltas y otras no tanto.

Actualización:

Después de estar trabajando durante casi un mes, he conseguido resolver al 100% los errores de validación que se presentaban en la Search Console en las accelerated mobile pages, esto ha sido relativamente complicado ya que aún falta mucha información al respecto, una de las principales cuestiones con las que me he encontrado, eran errores de validación de las hojas de estilo comprimidas que presenta el plugin W3 Total Caché. Cómo ya sabéis, este plugin al activar la caché de páginas contribuye a que estas se muestren más rápido durante la navegación, y afecta sobre todo a las versiones de escritorio, es una de las mayores mejoras cuando pasamos nuestra web por Pagespeed.

Bien, pues resulta que la url del tipo text/style no está admitida como un atributo válido por accelerated mobile pages, entonces nos quedan dos opciones, bien dejar de utilizar la caché de página con la consiguiente pérdida bajo el prisma de Pagespeed, o tratar de modificar como se presenta esta hoja de estilos para que AMP la comprenda y por tanto valide el código y nuestra página se indexe correctamente.

Hojas de estilo comprimidas

En mi caso, y esto debe usarse con suma cautela ya que no todas las instalaciones de WordPress lo asumen de la misma forma; he optado por generar mi propia hoja de estilo comprimida, en lugar de utilizar la del plugin; básicamente la operación ha consistido en minificar los comentarios y los saltos de línea que tanto nos gustan a los programadores para saber que estamos haciendo en cada momento y recordar que es lo que hemos escrito a continuación, donde se inicia y donde termina el comentario al código.

Una vez hecho esto, (obviamente antes de empezar he hecho copia de seguridad de las hojas de estilo que iba a modificar); he reducido considerablemente el peso de las hojas de estilo y he minificado estas CSS; te estarás preguntando cómo, la solución no es fácil, pero de tan simple que resulta ser, por lo menos yo no había reparado en ello; resulta que la tenía ante mis narices, y se trata tan sólo de crear distintas hojas de estilo para las css personalizadas y compilarlas en una sóla; ¿obvio verdad?. Ahora ya sólo hay que ir al archivo functions.php de tu plantilla e indicar donde se encuentra la hoja de estilos secundaria.

Una vez hecho esto verás como, de una tacada, te desaparecen los errores de validación AMP.

¿Como comprobar los errores de validación de las accelerated mobile pages, AMP?

Comprobar los errores de validación es simple, sólo debes abrir la página que te devuelve errores con la consola web de tu navegador y verás los errores (normalmente los mismos para todas las páginas AMP generadas), guarda los errores para verificarlos más tarde y trabaja sobre ellos, hay errores muy tontos, como la utilización de comandos “start” en las listas de contenido, que se resuelven simplemente cargando el contenido y sustituyendo las <ol> que presentan el comando “start” y reconstruyendo esa estructura, normalmente este comando aparece cuando copiamos directamente desde un documento de Word un contenido.

Cuidado con los plugin de caché

El anteriormente citado de los estilos CSS generados por W3 Total Cache requiere un poco más de trabajo para optimizarlos para accelerated mobile pages, pero los resultados son inmediatos, estoy trabajando en la mejora de este error, ya que no acierto a comprender como el plugin de caché no tiene en cuenta al generar sus hojas de estilo minify los componentes necesarios para accelerated mobile pages, supongo que en próximas actualizaciones del plugin este punto se mejorará.

Indexando páginas AMP

Para finalizar y saber si realmente Google va a validar ese código; podemos optar por enviar nuevamente el contenido al indice de Google; como las páginas AMP sólo afectan a usuarios móviles, no va a ser necesario explorar para escritorio; basta con hacerlo para Smartphone o lanzar al Googlebot-mobile y ahí es donde puedes tener un nuevo problema; las prisas, he hecho las pruebas de varias formas; una enviando al GoogleBot, otra enviando para Smartphone, y la última dejando que sea el propio Google quien pase y revise (no apta para impacientes).

Pues bien, resulta que la que mejores resultados de indexación ha presentado es esta última; parece que a los bots de Google todavía no les gusta tener que revisar las accelerated mobile pages y prefieren hacerlo dentro de las rutinas correspondientes. Por lo tanto parece que las prisas y el proyecto accelerated mobile pages no están relacionadas, corregir los errores y esperar que sea Google quien indexe parece la mejor opción, al menos por ahora, habrá que ver como se comporta conforme este proyecto avanza, y supongo que al final será un factor determinante en la indexación de páginas para móvil, pero eso es sólo una sospecha. Estaremos atentos.

 

Usabilidad móvil

usabiilidad móvil search consoleLa siguiente pestaña misteriosa en el menú de tráfico de búsqueda; en este caso si que opino que es de gran utilidad para los desarrolladores de sitios web; te devuelve de un vistazo aquellas páginas en las que tienes problemas de visualización; botones demasiado próximos, menús superpuestos, imágenes sin el formato adecuado, etc.

Le veo una pequeña observación al respecto; la falta de un marcar como solucionado y volver a explorar para saber si los cambios son correctos; si que es cierto que al explorar se abre una nueva pestaña donde se escanea la página origen del error; pero me he encontrado que a pesar de devolverme un OK, en el siguiente rastreo el error vuelve a aparecer, con lo cual no sabes muy bien si es histórico o está mal resuelto. En cualquier caso estoy convencido de que Google nos facilitará las cosas (sic).

Problemas de usabilidad

No por conocidos, voy a dejar de enumerar los principales problemas que pueden hacer que te aparezcan errores en esta nueva pestaña:

  • Uso de Flash, ¿aún usas flash? mira que llevamos tiempo hablando de ello.
  • Ventana de ancho fijo; las ventanas ya hace tiempo que trabajan en valores porcentuales en lugar de pixels absolutos; si tu web no tiene esos atributos en la hoja de estilos plantea que tus posiciones van a bajar de forma importante en poco tiempo; los motores de búsqueda quieren webs adaptadas para móvil desde hace más de un año.
  • Contenido adaptado al ancho de la pantalla; trata siempre de evitar el scroll lateral en la presentación de tu web en dispositivos móviles; si te han dicho que es full responsive y necesita scroll horizontal algo no encaja.
  • Tamaño de fuente; de vueltas con este tema, la moda va y viene y con ello las tendencias; pero es cierto que una fuente pequeña en el cuerpo de tu página web va a ser un problema para quien trate de leer tus contenidos; no obligues a hacer zoom, que conlleva además scroll horizontal.
  • Proximidad de los elemento táctiles, botones, enlaces, imágenes y CTA; todo bien ordenadito y con la suficiente separación como para que el usuario no se confunda y de clic donde no debiera; no es cuestión del tamaño de los dedos (bueno, en algunos casos si), es cuestión de que separes adecuadamente los distintos elementos táctiles.

Cómo afecta accelerated mobile pages al SEO

Google está advirtiendo desde hace bastante tiempo sobre la importancia que tiene la velocidad de carga y la usabilidad en móvil como factor de posicionamiento SEO; y como esto está afectando a la posición que ocupan determinados resultados de búsqueda en las SERP; por lo tanto, y parece ser que es determinante, tener una web adaptada y que cumpla con los criterios de Accelerated Mobile Pages va a otorgar una mayor autoridad a los sites en los motores de búsqueda para usuarios móviles; aumentando de forma exponencial la posibilidad de obtener clic en tus páginas AMP.

Con la paulatina aparición y puesta en marcha del Deep Learning, en el que Google lleva trabajando desde 2013; los resultados de búsqueda están basando su orden de posición cada vez más en resolver preguntas de los usuarios que en la coincidencia de palabras clave; sin embargo Google aún no está preparado para resolver preguntas o consultas complejas; por ejemplo que utilicen stop words en el contenido.

¿Cómo se comportan los motores de búsqueda?

Accelerated Mobile Pages por su estructura va a dotar de mayor conocimiento al buscador; ya que sus etiquetas están pensadas para ofrecer un mejor conocimiento y aprendizaje a los algoritmos; para ello uno de los factores que se pretende mejorar es la velocidad de carga y presentación de los distintos fragmentos de código; ya sabemos lo exigente que es Google con que se le muestre todo el contenido bien ordenado.

Si tenemos que explicar cómo funciona AMP; tenemos que conocer que partes son fundamentales dentro del código:

  • El HTML para AMP
  • Los fragmentos de JS para AMP
  • Y la caché para AMP

Empezando por el final, y cómo he explicado antes; los plugin de caché, en su parte de minificar Javasrcipt y CSS generan hojas de estilo que AMP no entiende; pero a continuación veremos como se ha resuelto este tema con el proyecto accelerated mobile pages (AMP).

El HTML para AMP

Para el código HTML, AMP ha creado una serie de etiquetas que se deben utilizar de forma estricta y que ayudan al motor de búsqueda a identificar que es lo que contiene ese fragmento; empecemos a familiarizarnos con ellas, ya que definen claramente formatos de texto, anuncios e imagen:

  • amp-ad
  • amp-embed
  • amp-img
  • amp-pixel
  • amp-video

Si bien el HTML para AMP es más o menos abierto en función del contenido; el JS para AMP es mucho más restringido y estricto.

Los fragmentos de JS

La mayor parte de los errores que devuelve la Search Console vienen precisamente por esta parte; ya que carga todos los recursos externos en un servidor asíncrono de forma que los recursos al cargarse de forma independiente evita que el envío de datos nos bloquee la carga de la página; ¿os suena lo de “hay x recursos que bloquean la visualización de la página” al hacer un test con Pagespeed?.

Bien, todos los recursos que no sean imagen y texto son precargados, para mejorar la descarga de datos en dispositivos móviles.

La caché de AMP

La caché de AMP, Google ha puesto a disposición de las accelerated mobile pages un potente CDN que guarda en caché todo el contenido pesado y utiliza su red de CDN a nivel mundial para servir más rápido los recursos almacenados, de esta forma siempre se sirven los recursos necesarios desde el CDN más próximo al usuario, lo que mejora la velocidad de carga de forma exponencial.

 

Efectos positivos de Accelerated Mobile Pages sobre el SEO

Con estas primeras características, ya hemos intuido que AMP va a suponer bastantes cambios en cuanto a SEO se refiere; lo que se pretende es una mejor experiencia de usuario, los ranking parece que no se van a determinar en base  al uso de palabras clave; se van a centrar en el número de páginas vistas en el site habilitado con AMP, en los procentajes de rebote y en el tiempo de permanencia en la página. Por ahora no hay opción para Adwords en AMP; pero todo se andará, ya que una de las etiquetas HTML hace precisamente referencia a ello, en este caso para los ads que introduce el programador en el HTML; pero que seguramente tendrá nuevas funcionalidades.

Cómo las páginas AMP carecen de menú de navegación los usuarios deben volver a las SERP para buscar nuevo contenido, por lo tanto esto devuelve un mayor número de impresiones, y cabe recordar que es uno de los factores por los que Google hace caja.

Un formato más Universal

Accelerated mobile pages es mucho más universal; ya que premite a cualquiera que quiera enviar contenido en este formato hacerlo de forma natural y con muy pequeñas variaciones en el código; por lo tanto y gracias a esta tecnología, va a ser mucho más sencillo llegar a un número mayor de usuarios, con el correspondiente aumento de visitas a nuestro espacio web.

AMP es también una plataforma de código abierto; de hecho el proyecto está publicado en GiftHub y está a disposición de cualquiera que quiera aportar mejoras; ya no es sólo Google quien decide sobre el código final; son los propios programadores quienes pueden enviar sugerencias de mejora al proyecto; al hacerse esto mediante código abierto, el proyecto accelerated mobile pages será, seguramente, mucho más universal y no estará acotado por los caprichos de Google. El uso de estas nuevas opciones y nuevas etiquetas que se van incorporando al proyecto; va a permitir en un futuro no muy lejano que las prestaciones y nuevos formatos que ahora se encuentran en fase de desarrollo, se vayan incorporando y por tanto mejorando los procesos.

Analytics ya está evolucionando hacia AMP; los distintos proveedores de analítica web ya están adaptando sus bots al nuevo formato; lo que nos va a permitir tener mediciones exclusivas para este formato de código y permitimos monitorizar el comportamiento exclusivo de este tipo de páginas.

Un consejo para medir AMP

Después de no pocas pruebas, me he decidido a crear una nueva cuenta de Analytics exclusiva para las páginas AMP. Con ello he conseguido medir de una forma más directa los efectos y la experiencia de los usuarios. Debo decir que aún no tengo suficientes datos para extraer conclusiones; por lo tanto habrá que seguir observando la implementación del formato para ver lo definitivo que llega a ser.

 

Efectos negativos de accelerated mobile pages en marketing online

AMP no admite determinados formularios; por lo tanto si tu objetivo es medir conversiones mediante el uso de formularios y seguimiento de las páginas de agradecimiento; vas a tener que esperar aún un poco a que se desarrollen formularios adaptados al nuevo formato.

Ecommerce para AMP

Nada de Ecommerce por ahora; de momento las accelerated mobile pages son solo para contenidos de texto, por lo tanto no busques mejorar tus velocidades de carga en las tiendas online mediante esta técnica; por ahora no está previsto que se vaya a incorporar el ecommerce al proyecto; por lo menos de forma inmediata.

La forma en que se va a rankear un site es totalmente distinta; ya que las long tail no se tienen en cuenta de forma efectiva, los resultados se basan por ahora en términos exactos; pero si el deep learning se aplica adecuadamente en AMP; entiendo que el buscador también aprenderá de las accelerated mobile pages.

Hojas CSS inline

Adiós a las hojas de estilo inline, el diseño se ha abandonado; por lo tanto va en contra de la experiencia de usuario, las páginas son planas y no hay opción a efectos visuales que le seduzcan; evidentemente podemos tratar de engañar al sistema utilizando imágenes en el contexto, cabeceras y pie de página; pero eso que hoy es posible, puede que en las próximas actualizaciones de accelerated mobile pages sea un error de atributo; por lo tanto todo el trabajo realizado sólo sirva para que tu página devuelva errores y pierda su ranking.

Autoridad del dominio

Pérdida de autoridad del dominio; las páginas AMP enlazadas desde agregadores de noticias, otras webs, o sencillamente desde el propio buscador; no se van a tener en cuenta al menos por ahora; asi que la autoridad del dominio se puede resentir si de repente te empiezan a enlazar a las páginas /amp/

ADS para AMP

La gestión de contenidos publicitarios también sale perjudicada; ya que si bien existe una etiqueta para ello los anuncios no son tratados como tales; y habrá que trabajar mucho los ads para que resulten efectivos. En las últimas actualizaciones ya se están empezando a presentar ADS; de todas formas su comportamiento no tiene nada que ver con el de lás páginas web tradicionales.

WordPress el CMS óptimo

Si tu CMS no soporta AMP, empieza a pensar en cambiarlo; ya que este va a ser un factor fundamental; por lo tanto ve reservando una parte de tu presupuesto a decidir si vas a utilizar AMP y en que tiempo lo piensas implementar; si eres usuario de WordPress no debes preocuparte; el CMS está totalmente listo para utilizar accelerated mobile pages desde la versión 4.1

Resumen final sobre AMP

  1. Velocidad, velocidad y velocidad
  2. Mejor para bloggers
  3. Peor para Ecommerce

Espero que este post sobre estas novedades en Google haya sido de tu interés; si has avanzado en alguno de los temas aquí expuestos, te invito a compartir tu experiencia.

Rating: 5.0. From 16 votes.
Please wait...
2017-09-09T06:51:23+00:00

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies