»
»
Descubre las tecnologías AMP

Descubre las tecnologías AMP

Descubre las tecnologías AMP


¿Qué son las AMP?


Las tecnologías AMP (Accelerated Mobile Pages) son páginas móviles aceleradas.

Se trata de una tecnología de código abierto impulsada por Google y otras compañías, su objetivo es lograr una mejor optimización web e inmediatez de contenido en los sitios web visitados desde móviles.

Esta iniciativa se centra en los móviles porque como ya sabemos es nuestro principal medio de comunicación, aunque muchas aplicaciones informáticas continúan sin estar correctamente optimizadas, lo que penaliza bastante .


Las tecnologías AMP nacen con el propósito de mejorar la experiencia de los usuarios en los dispositivos móviles al acceder a contenido de la web.


La importancia de las Accelerated Mobile Pages


Hoy en día uno de los factores más importantes para el posicionamiento en Google es la velocidad de carga, que cada vez sea más rápida y que los usuarios permanezcan en el sitio.

¿Por qué le da tanta relevancia? Es simple, los usuarios son muy impacientes y lo quieren todo al instante.


De modo que si una web tarda más de la cuenta en cargar, los usuarios perderán el interés, acabarán abandonándola y probablemente no regresen. Esto es lo que las tecnologías AMP quieren evitar a toda costa.


Una página web con carga rápida y facilidad de lectura, nos garantizara una experiencia del usuario positiva y como resultado un mejor tráfico en nuestra web.


Si nuestra página es AMP, Google nos tendrá en cuenta en los resultados de las búsquedas y nos posicionará por encima de la competencia.


Descubre cómo funcionan las tecnologías AMP


Principalmente no se utilizan hojas de estilo tanto internas como externas, formularios o JavaScripts y todo debe quedar ajustado a los límites de tamaño definidos.

Las páginas AMP utilizan un lenguaje propio HTML:

  • Las modificaciones del código HTML son necesarias para implementar las webs de AMP. Por ejemplo, para imágenes debemos usar esta etiqueta “amp-img”.

    Así podremos publicar fotos con un menor peso dando lugar a una carga más ágil.

    Otras etiquetas son: Vídeos “amp-video”, archivos de audio “amp-audio” o iframes “amp-iframe”.

  • JavaScript solo se podrá usar desde la biblioteca de AMP.


  • Se hace uso de Cachés CDN del propio proyecto para obtener más páginas AMP, para validar su correcto desarrollo y para ofrecer una mayor optimización de la web al usuario.

Si necesitas ayuda, o tienes dudas sobre Software Informático pregúntanos, podemos ayudarte.




Los beneficios de las tecnologías AMP


  • Aumentará la velocidad de carga y los contenidos de la web se cargarán inmediatamente.


  • La tasa de rebote disminuirá.


  • Se producirá una mejora del rendimiento web y obtendremos altos porcentajes de clics.


  • Disminuiremos el consumo de batería y de datos.


  • La experiencia del usuario resultará más positiva gracias a la velocidad de carga y a la facilidad de lectura.


  • Lograremos una mejora del posicionamiento.


    Uno de los factores que tiene en cuenta Google es la velocidad, por tanto si decidimos optimizar nuestra web con las tecnologías AMP, Google destacará los resultados y los identificará con el símbolo del rayo.


  • Obtendremos una mayor visibilidad.


  • Ganaremos un aumento de tráfico en nuestra web.


  • Tendremos disponible un plugin AMP para WordPress.



Descubre como identificar las tecnologías AMP


Detectar si una página es AMP es muy sencillo:


Para empezar, tendremos que observar dentro de los resultados de búsqueda de Google la presencia de un símbolo de un rayo acompañado por las siglas AMP.


Igualmente podemos encontrar sus siglas en la parte inicial de la URL.


Implementar las tecnologías AMP en mi web


Elementos esenciales:


  • Para empezar: <!doctype html> .


  • Puedes identificar el documento con <html amp> o <html>.  Asimismo, puedes añadir información sobre el idioma lang=»..»


  • Luego debes poner <head> y <body>.


  • Dentro de head <meta charset=»utf-8″>.


  • Después insertaremos en la biblioteca AMP JS <script async src=»https://cdn.ampproject.org/v0.js»></script>.


  • La etiqueta <link rel=»canonical»> con enlace al HTML original.


  • <meta name=»viewport» content=»width=device-width,minimum-scale=1,initial-scale=1″>


  • Para terminar, antes del final de <head>, copiaremos el código <style amp-boilerplate> .



Metadatos:


Aunque no son obligatorios se recomienda incluirlos.

CSS:


Su utilización es necesaria y el CSS debe quedar unificado e incrustado en el head en una única etiqueta <style amp-custom>.

Se aconsejan normas de estilo sencillas con respecto a tamaños de letra y colores.

Existe una excepción, es posible enlazar a fuentes externas en CSS al usar @font-face como con una etiqueta <link> en <head>.

Cabe destacar que únicamente se permiten archivos que se alojen a Google Font.

Javascript:


Las únicas etiquetas permitidas son las de la propia biblioteca, AMP JS y metadatos JSON-LD.


Introducción del contenido:


Introduciremos el contenido que tenemos en la página original HTML en “body” y  luego lo adaptaremos al AMP para obtener la validación.


 
Imágenes:


El uso de imágenes es muy importante y debemos insertar al menos una por artículo.


Para adaptar las imágenes será necesario darlo a conocer a AMP y sustituiremos las etiquetas <img> por <amp-img>. Además, debemos expresar correctamente tanto la altura como la anchura y tiene que estar píxeles.


Podrás asegurarte de que sean responsive con layout=»responsive», y están permitidas otras propiedades para ofrecer contenido como: srcset.


Vídeos:


Al igual que en las fotos, los vídeos deben estar correctamente adaptados a AMP <amp-video>.