Google AMP: descripción general

Google Accelerated Mobile Pages(Google-AMP) es el nuevo proyecto de código abierto de Google especialmente diseñado para crear páginas web ligeras utilizando amp html. El objetivo principal de este proyecto es asegurarse de que el código del amplificador funcione correctamente y se cargue rápidamente en todos los dispositivos posibles, como teléfonos inteligentes, tabletas, etc.

¿Qué es AMP?

Accerated Mobile Pages (AMP) es el proyecto de código abierto de Google especialmente diseñado para hacer que las páginas web sean compatibles con dispositivos móviles al hacer que el contenido sea más rápido, fluido y receptivo en cualquier navegador.

El sitio oficial de Google amp es: https://www.ampproject.org/

POR QUÉ AMP?

Cualquier usuario espera que los sitios web carguen los contenidos muy rápido. Sin embargo, este puede no ser el caso cuando las páginas están casi inundadas de imágenes, videos, animaciones, widgets sociales, lo que hace que la página sea muy pesada y, por lo tanto, aumenta su tiempo de carga. Tal escenario puede causar la pérdida de usuarios del sitio web a largo plazo.

Google AMP está diseñado para resolver este problema. AMP tiene una forma especial de cuidar imágenes, iframes, javascripts, anuncios, videos, animaciones, css, fuente cargada, etc. El contenido de las páginas AMP se almacena en caché en el extremo de Google, por lo que cada vez que el usuario hace clic en los resultados de búsqueda, el contenido se sirve desde la caché. La versión de caché también se actualiza oportunamente para que el usuario siempre obtenga una página actualizada.

¿Por qué elegir AMP?

Esta sección le explica por qué tiene que optar por AMP para su sitio:

Priorizado en la Búsqueda de Google

Hoy, cuando busque algo en Google, encontrará un carrusel de Google que se muestra en la parte superior con páginas, seguido de la lista de páginas como respuesta a su búsqueda. El carrusel de noticias que se muestra son todos los sitios AMP válidos. Significa que Google da prioridad a las páginas de amplificadores y las muestra según su clasificación en el carrusel de noticias.

Un ejemplo de una búsqueda realizada en Google con la palabra clave "latest indian news"Se da aquí -

Todas las páginas de alto rango que son páginas AMP se muestran al principio en el carrusel de Google como se muestra en la imagen de arriba.

Una página de Google AMP se ve como se muestra a continuación cuando el usuario busca algo en la búsqueda de Google. Tenga en cuenta que hay un logotipo de Google AMP en las páginas de AMP.

Tiempo de carga más rápido

Cuando su página se convierte en AMP, el tiempo de carga será mucho mejor en comparación con una página sin amplificador. El tiempo de carga más rápido también es un factor importante en la clasificación de la página en la búsqueda de Google.

Sin ventanas emergentes

El uso de Google AMP brinda una experiencia de navegación web agradable, ya que el usuario no verá ventanas emergentes no deseadas para las páginas diseñadas con Google AMP.

Genera tráfico

Cuando la velocidad de carga de las páginas es rápida, aumenta automáticamente el número de espectadores y, por lo tanto, aumenta el tráfico a la página.

¿Cómo funciona AMP?

Los componentes más importantes que se utilizan para crear un sitio web son javascript, imágenes, videos, fuentes, css, etc. El diseño de la página AMP se realiza cuidando todos estos factores de una manera única. En esta sección, analicemos brevemente qué hace exactamente AMP para que las páginas sean más rápidas.

JavaScript asincrónico

Javascript juega un papel importante en la página, ya que ayuda a agregar interactividad a la página en forma de animaciones, cambios DOM, etc. También agrega lentitud a la página y puede bloquear otros contenidos para que no se muestren en la página.

¿Cómo aborda AMP JavaScript?

AMP carga JavaScript de forma asincrónica. El JavaScript personalizado no está estrictamente permitido dentro de una página AMP. Tenga en cuenta que AMP tiene muchos componentes agregados, algunos de ellos son un reemplazo de las etiquetas html existentes; por ejemplo, amp-img, amp-iframe, amp-video, amp-lightbox, amp-animations, etc.

Para cada uno de estos componentes, se debe cargar un archivo JavaScript que tiene el atributo async agregado a la etiqueta del script. En la página solo se permiten archivos JavaScript relacionados con los componentes de amp y no se permite ningún otro JavaScript dentro de una página AMP o archivo javascript de terceros. Como AMP utiliza la caché de Google AMP, los archivos se cargan previamente desde la caché, lo que agiliza su carga.

Tamaños de etiquetas HTML

Es obligatorio dar tamaño a la imagen, iframe, etiquetas de video para que amp page pueda ubicar el espacio en la página sin tener que cargar el recurso. Los recursos a cargar son priorizados por la página de amplificador. El contenido tiene más prioridad sobre los recursos a cargar.

Widgets sociales / AD

Amp proporciona componentes especiales, a saber, amp-facebook, amp-twitter, amp-ad, amp-sticky para encargarse de los widgets sociales que se mostrarán en la página. El componente de anuncios AMP se utiliza para publicar anuncios en la página. AMP tiene especial cuidado en el manejo de los componentes y carga el contenido con una prioridad basada en los requisitos.

CSS

No se permite CSS externo en páginas AMP. CSS personalizado si se puede agregar dentro de la etiqueta de estilo usando el atributo amp-custom. También se permite CSS en línea. AMP reduce las solicitudes http de todas las formas posibles.

Fuentes

Las fuentes están permitidas en las páginas de amplificador y AMP decide la prioridad de carga de las fuentes.

Animación

AMP admite componentes de animación de amplificador y permite la transición como lo admiten los navegadores modernos.

Teniendo en cuenta todos los puntos enumerados anteriormente, AMP presta especial atención a las solicitudes HTTP realizadas para las fuentes, imágenes, iframes, anuncios que se publicarán, etc. Los recursos disponibles en la parte superior de la página se muestran primero y luego se da preferencia a los recursos disponibles en la parte inferior. .

Otros puntos

Google AMP Cache es otro factor importante que ayuda a renderizar los contenidos más rápido a medida que los contenidos se obtienen de la caché.

El editor debe mantener dos sitios amplificados y una página no amplificada. Por ejemplo, considere que el sitio tiene la dirección:https://www.mypage.com. Luego, las páginas internamente para que no sean de amp que se publiquen en el escritorio seránhttps://www.mypage.com/news. Para dispositivos o AMP, será:https://www.mypage/com/news/amp/

¿Cómo identifica Google las páginas AMP y no AMP?

Ahora, comprendamos cómo Google identifica las páginas AMP y las que no son AMP.

  • Cuando la búsqueda de Google rastrea la página, si obtiene amp en html o <html amp> o <html ⚡>, sabe que es una página AMP.

  • Además, en caso de que Google se encuentre con una página que no sea de amp, primero para conocer la página de amp, es obligatorio agregar las siguientes etiquetas de enlace en la sección principal de la página html para las páginas de amp y no amp.

URL de página para páginas que no son de amp

<link rel = "amphtml" href = "https://www.mypage.com/news/amp/myfirstnews_amp.html">

Aquí se especifica rel = ”amphtml” para que una página que no sea amp apunte a la versión amp, de modo que Google muestre la correcta según la plataforma.

Page-url para amp-page

<link rel = "canonical" href = "https://www.mypage.com/news/myfirstnews.html">

Aquí se especifica rel = ”canonical” en la página amp para apuntar a la versión estándar de html, de modo que Google muestre la correcta según la plataforma.

En caso de que su sitio tenga solo una página de amplificador, no debe olvidar agregar el rel = "canonical" que apuntará a sí mismo:

<link rel = "canonical" href = "https://www.mypage.com/news/amp/myfirstnews_amp.html">

El siguiente diagrama muestra una referencia a rel = ”amphtml” apuntando a una página amp y rel = ”canonical” apuntando a una página html estándar.

Funciones de Google AMP

En esta sección, analicemos las funciones importantes disponibles con Google AMP:

Almacenamiento en caché de amplificador

El almacenamiento en caché de Google Amp es una de las funciones principales agregadas a amp. Proporciona una red de entrega de contenido basada en proxy para servir páginas de amplificador puro. El caché de amplificador está disponible de forma predeterminada para todas las páginas de amplificador válidas. Ayuda a representar las páginas más rápido en comparación con las páginas que no son de amplificador. AMP Cache y Cloudflare AMP Cache. Cuando el usuario hace clic y es redirigido a la página de amplificador, el contenido se sirve desde la caché de Google.

Componentes de amplificador

Amp tiene una gran lista de componentes diseñados para varios propósitos. Algunos de ellos se enumeran a continuación:

  • amp-img - Se utiliza para mostrar imágenes en páginas de amplificadores.

  • amp-iframe- Se utiliza para mostrar iframe con contenido externo que se mostrará en las páginas. Tenga en cuenta que el iframe utilizado está en una zona de pruebas, lo que significa que necesita permiso para mostrar datos en la página del amplificador. Por lo tanto, los detalles del origen cruzado deben especificarse para el atributo sandbox.

  • amp-video - Para mostrar video en la página.

  • amp-audio - Para mostrar audio en la página.

  • amp-datepicker- Se usa para mostrar widgets de fecha en la página. No tiene que ir a ningún selector de fecha de terceros, ya que el mismo está disponible directamente en amp.

  • amp-story - Un medio para mostrar sus historias en la página.

  • amp-selector- Es un componente de amplificador que muestra un menú de opciones y el usuario puede seleccionar entre las opciones. Las opciones mostradas pueden ser texto, imágenes o cualquier otro componente de amplificador.

  • amp-list - Es un componente amp que llama a un punto final CORS json y los datos del archivo json se muestran dentro de una plantilla.

Publicidad

La publicidad es muy importante para los editores, ya que sus ingresos dependen completamente de los anuncios publicados en la página. Amp no permite que se agregue ningún javascript externo en la página, pero tiene un componente de amplificador especial llamado amp-ad que se encarga de publicar anuncios en la página.

La red publicitaria que el editor desea publicar en su página debe ser compatible con amp-ad. Por ejemplo, para publicar anuncios de doble clic en la página, el doble clic debe admitir la publicación de anuncios mediante el componente amp-ad. El siguiente código muestra una etiqueta amp-ad de doubleclick.

<amp-ad width = "300"
   height = "200"
   type = "doubleclick"
   data-slot = "/4119129/ad-layout">
   <div placeholder>
      <b>Placeholder here!!!</b>
   </div>
</amp-ad>

Amp también es compatible con amphtmlads, que son ampads puros desarrollados a partir de componentes AMP y html. Amp también admite amp-sticky-ads, un anuncio de pie de página que se muestra en la parte inferior de la página. Los detalles de los anuncios en amp se discuten en el capítulo de anuncios de amp.

Widgets sociales

Los widgets sociales como Facebook, Twitter, Instagram se han vuelto muy importantes para mostrarse en la página del editor, por lo que las páginas se comparten en las redes sociales. AMP ha extendido su soporte a todos los widgets importantes de redes sociales que se utilizarán en la página mediante el desarrollo de componentes AMP como amp-facebook, amp-twitter, amp-instagram, amp-pinterest, etc.

Amp Media

Otro componente importante en las páginas son los medios para mostrar videos y también publicar anuncios entre los videos como anuncios mid-roll. AMP proporciona un medio para hacer eso usando amp-jwplayer, amp-youtube, etc. No tienes que cargar ningún archivo adicional de terceros para que jwplayer, youtube se muestre en tu página.

Amp Analytics

El análisis de amplificador es un componente de AMP que se utiliza para realizar un seguimiento de los datos en una página determinada. Toda la interacción del usuario en la página se puede registrar y guardar para analizar los datos con el fin de realizar mejoras adicionales o con fines comerciales.

Animaciones de amplificador

Amp-animation es un componente de amplificador que define animaciones que se utilizarán en otros componentes de amplificador. Es compatible con la animación, transición que funciona bien con el navegador moderno. No tiene que usar ninguna biblioteca CSS externa para realizar la animación y puede hacer uso del componente amp-animation.

Diseños de amplificador

AMP-Layout es una de las funciones importantes disponibles en google-amp. Amp Layout asegura que los componentes del amplificador se representen correctamente cuando se carga la página sin causar ningún problema de parpadeo o desplazamiento.

Google AMP se asegura de que la representación del diseño se realice en la página antes de que se realicen otros recursos remotos, como la solicitud http de imágenes, las llamadas de datos. Los atributos disponibles para el diseño son ancho / alto para todos los componentes del amplificador, atributo de diseño con valores como receptivo, relleno, fijo, etc., atributo de marcador de posición que se muestra cuando el recurso tarda en cargarse o tiene algún error, atributo de respaldo que se muestra cuando el recurso tiene algún error.

Diseños de pantalla de amplificador

Amp admite una gran cantidad de componentes que se utilizan para mostrar contenido en la página sin necesidad de una biblioteca de terceros o sin tener que crear CSS pesado en la página. La lista incluye

  • Accordion- Amp-accordion es un componente de amplificador que se utiliza para mostrar el contenido en formato expandir-contraer. Se vuelve fácil para los usuarios verlo en dispositivos móviles donde pueden seleccionar la sección según su elección del acordeón.

  • Carousel - Amp-carrusel es un componente de amplificador para mostrar un conjunto de contenidos similares en la pantalla y usar las flechas para cambiar entre el contenido.

  • Lightbox - Amp-lightbox es un componente de amplificador que ocupará la ventana gráfica completa y se mostrará como una superposición.

  • Slider - Amp-image-slider es un componente de amplificador que se utiliza para comparar 2 imágenes agregando un control deslizante al moverlo verticalmente sobre la imagen.

  • Sidebar - La barra lateral de amplificador es un componente de amplificador que se utiliza para mostrar contenido que se desliza desde los lados de la ventana con solo tocar un botón.

Ventajas de AMP

  • Las páginas AMP son ligeras y se cargan más rápido

  • Google da prioridad a las páginas AMP en la búsqueda de Google. Las páginas de AMP se enumeran en formato carrusel en la parte superior de la página. Para obtener una clasificación más alta, es una buena ventaja tener tus páginas en AMP.

  • Las páginas AMP son compatibles con dispositivos móviles, ya que el contenido es receptivo y se ajusta bien en todos los navegadores sin la necesidad de ningún estilo adicional.

  • La satisfacción de los usuarios aumenta para las páginas AMP ya que la tasa de carga de la página es más rápida en comparación con las páginas que no son amp, lo que ahorra ancho de banda y batería móvil.

Desventajas de AMP

Amp posee las siguientes desventajas:

  • El editor tiene que mantener dos versiones para sus páginas amplificadas y no amplificadas.

  • El usuario debe realizar esfuerzos adicionales para convertir las páginas que no son de amp a amp. Como amp no admite javascript personalizado o la carga de javascript externo, se debe lograr lo mismo con lo que esté disponible con amp.