google amp

Comparativa AMP vs Diseño Responsive

 

Te has dado cuenta de que las páginas realizadas en AMP están adquiriendo cada vez más relevancia verdad ? , puedes ver claramente como Google va priorizando dichas páginas respecto a las diseñadas en Responsive en las SERP ‘Búsquedas de su buscador’ , te preguntas si quizás ha llegado el momento de implementar dicha tecnología web, sigue leyendo te resuelvo algunas dudas al respecto.

¿ Que es AMP ?

Accelerated Mobile Pages es una tecnología de código abierto desarrollada por Google cuyo objetivo es reducir los tiempos de carga en dispositivos móviles. En su continua búsqueda de mejora de experiencia de usuario, ha desarrollado esta tecnología para los usuarios de dispositivos móviles. La idea consiste en agilizar y reducir los tiempos de carga en usuarios con conexiones lentas o dispositivos con una usabilidad más limitada como bien sabes tienen los móviles frente a los ordenadores.

¿Cuál es la diferencia entre Accelerated Mobile Pages de Google y una página web de Diseño Responsive? Las páginas AMP y las Mobile Responsive comparten bloques de construcción básicos para la creación de una página movil, HTML, CSS y Javascript. Entonces porque son diferentes ?

¿Cuál es la diferencia entre una web AMP de Google y una con Diseño Responsive ? Clic para tuitear

El proyecto ha sido elaborado para desarrollar un método altamente optimizado para la entrega de contenido a dispositivos móviles. Estas paginas móviles aceleradas, utilizan una serie de técnicas de optimización de tiempos de carga, centrando las páginas en el contenido y eliminando todo lo que sobra.

Eliminando lo que ‘sobra’ se logra que los contenidos sean más semánticos, se optimiza la experiencia de usuario, con lo que se consigue una mayor y mejor accesibilidad a la información, cosa que te agradecen tus visitantes y por tanto también Google, la cual ya esta premiando las webs que ofrecen versión AMP de sus contenidos. A continuación te muestro un video realizado por Google Chrome Developers donde te explica claramente con ejemplos, cual es la función de Google AMP.

AMP VS Diseño Responsive

AMP Y Mobile responsive responden a la necesidad de adaptar el contenido web al entorno de los dispositivos móviles, pero en el fondo ambos proyectos tienen diferentes objetivos.

  • El diseño responsive es un método de organizar y diseñar un sitio web para que funcione en cualquier dispositivo, sea un pc de escritorio, tablet o teléfono móvil. Puede decirse por tanto que el modelo responsive se centra en la flexibilidad.
  • El proyecto de Google 'Accelerated Mobile Pages', es un framework diseñado para la entrega de contenido de moviles al instante, se centra en la velocidad, y esta pensado para la mejora de experiencia de los usuarios de teléfonos móviles principalmente.
AMP Vs Responsive, ambos responden a la misma necesidad, pero en el fondo son proyectos con distintos objetivos Clic para tuitear

¿Qué más diferencias existen entre AMP y el Diseño Responsive?

El AMP puede trabajar con un sitio web ya existente, el Diseño Responsive podría sustituir a un sitio web actual, de hecho esa es su principal misión existencial.

No hay necesidad de reemplazar a un sitio web existente con AMP. Google Accelerated Mobile Pages también se puede añadir a una página web existente o nueva, sin un “rediseño del sitio web”, lo pongo entre comillas porque más adelante os comento cosas respecto al SEO de la web. Por el contrario, el modelo Responsive requiere un sitio web nuevo, ya que su misión es reemplazar cualquier diseño preexistente para poder realizar perfectamente su objetivo de añadir la web a todo tipo de dispositivo.

AMP actualmente sólo funciona con contenido estático, El Diseño Responsive se puede utilizar para cualquier sitio web. De ahí que actualmente el uso ideal que se le está dando al AMP es para artículos de noticias, entradas de blogs, páginas informativas y otros contenidos ‘estáticos’ publicados. El Diseño Responsive está mejor equipado para cuestiones como formularios web y aplicaciones personalizadas.

Google Amp Proyect

Cómo afecta cada uno a la experiencia del usuario

Facilitar una buena experiencia a los usuarios de nuestra web, genera confianza en nuestro sitio online, ayuda a que se comprometan con ella y genera que la compartan con sus amigos, además de que esta comprobado por numerosos estudios que un comprador online, suele repetir en el mismo sitio web.

El algoritmo de búsqueda de Google está diseñado para favorecer a sitios web que proporcionan una buena experiencia de usuario. Para ello, Google ha identificado dos indicadores principales de una buena experiencia de usuario en el móvil: el llamado 'test para dispositivos móviles' , y la velocidad, de la que ya te hablo y te indico que herramientas puedes usar en el artículo Cómo elegir Hosting

Al diseño web se le puede ayudar creando un sitio web amigable para móviles, pero es cierto que a veces algunos modelos de Diseño Responsive fracasan en el tema de la velocidad y siempre suele ser por el diseño realizado en la web. AMP por el contrario se ha diseñado desde cero para ser optimizar altamente la velocidad y la experiencia del usuario de móviles. Si tu web depende en gran medida de tráfico proveniente de Google, deberás tomar buena nota de AMP, pq esta claro que cada día tendrá más relevancia.

AMP facilita el acceso rápido a la información, pero teniendo a cambio un CSS simplificado y un contenido estático en tu web Clic para tuitear

¿ Por qué mi página web puede tener necesidad de AMP ?

AMP resuelve un problema muy específico, la entrega de contenido publicado en mi web lo más rápidamente posible para usuarios de móviles. Es muy probable que proporcione una mejor experiencia a este tipo de usuarios que cualquier otra opción de diseño actualmente, pero no es suficiente para sitios web que tengan funcionalidades Javascript, que trabajen con formularios web o que no quieran sufrir la excesiva simplificación del CSS en su web.

Y aunque el resultado estético sea bastante mejorable, Con AMP Project Google das un paso de gigante en lo referido a usabilidad móvil, ya que es una herramienta casi indispensable para mejorar los tiempos de carga.

experiencia usuario movil con amp

La implementación de AMP para WordPress

Te comento una opción sencilla de implementar AMP en un blog con WordPress, uno de los generadores de páginas web y blogs más usados del mercado. Si ya tienes desarrollada tu web en WordPress y quieres optimizar los tiempos de carga de tu sección de noticias o artículos de blog para tus usuarios de móviles, puedes realizar estos pasos para conseguir instalar AMP en tu sitio correctamente y sin penalizaciones en tu SEO por contenido duplicado.

Como implementar AMP en tu WordPress de manera sencilla Clic para tuitear
  • El primer paso será descargar e instalar el plugin de WordPress AMP.
  • Posteriormente, abriendo el fichero .htaccess deberás introducir unas líneas de código que detecten el User Agent con el que accede el usuario e introducir la redirección 302 a la carpeta /amp. Puedes copiar el código aquí:

 

RewriteEngine On

RewriteCond %{REQUEST_URI} !/amp$ [NC]

RewriteCond %{HTTP_USER_AGENT} (android|blackberry|googlebot-mobile|iemobile|iphone|ipod|#opera mobile|palmos|webos) [NC]

RewriteRule ^([a-zA-Z0-9-]+)([/]*)$ https://example.com/$1/amp [L,R=302]

  • Para que la versión AMP no desentone con el resto de tu web, tendrás que modificar los estilos de CSS. Para ello deberás acceder al fichero template.php que se encuentra dentro de wp-content > plugins > amp
  • Y por último y es muy importante, que como te comentaba antes, ya que afectara seriamente al SEO de tu web si no lo haces, indicar la referencia canonical rel=”canonical” dentro de esta plantilla para evitar ser penalizados por duplicidad de contenidos.

 

¿ Has usado ya AMP y has mejorado en tu SEO ? Cuentanos tu experiencia, ayudaras a muchas personas que aun no se han atrevido a usarlo