/ Móvil, Posicionamiento web/ 1 comments

¿Pero qué es AMP qué significa en google? Páginas web aceleradas (Accelerated Mobile Pages)

¿Qué es todo esto? ¿Pero AMP qué significa? ¿Cómo instalar AMP en wordpress? ¿Cómo implementar AMP en mi sitio web?

En octubre de 2015, Google anunció Accelerated Mobile Pages (AMP), un marco muy accesible para crear páginas web móviles de carga rápida.

Es una iniciativa de fuente abierta, diseñada para permitir a los editores mejorar fácilmente la velocidad (y consecuentemente, la experiencia del usuario) para sus lectores de dispositivos móviles sin sacrificar ningún ingreso publicitario en el que puedan confiar.




Los desarrolladores experimentados a menudo pueden lograr resultados similares a través de optimizaciones de rendimiento intensivas. Sin embargo los editores a menudo descuidan esto debido a limitaciones de recursos.

¿AMP qué significa para mi web? ¿Encontraré diferencias antes y después de AMP? AMP permite que estas optimizaciones se puedan lograr fácilmente. Y todo sin alterar la experiencia principal de la web móvil.

También y no menos importante es el beneficio adicional de su uso futuro por parte de Google y otras empresas de tecnología web destacadas, que están fomentando su uso integrándolo fuertemente en sus respectivas plataformas.

¿Cómo funciona AMP?

Esencialmente es un marco para crear páginas web móviles. ¿En la estructura de AMP qué significa y cómo se traduce? AMP consta de tres partes básicas:

AMP HTML: un subconjunto de HTML, lenguaje de marcado que tiene algunas etiquetas y propiedades personalizadas y muchas restricciones. Pero si estás familiarizado con el HTML normal, no deberías tener dificultades para adaptar las páginas existentes a AMP HTML.

Para obtener más detalles sobre cómo difiere del HTML básico, consulta la lista de marcas requeridas de AMP Project que su página de AMP HTML “debe” tener.

AMP JS: Un marco de JavaScript para páginas móviles. En su mayor parte, gestiona el manejo de recursos y la carga asincrónica. Se debe tener en cuenta que JavaScript de terceros no está permitido con AMP.

AMP CDN: una red de entrega de contenido opcional, toma tus páginas habilitadas para AMP, las almacena en caché y realiza automáticamente algunas optimizaciones de rendimiento.

¿Cómo implementar AMP en tu web?

¿AMP qué significa de forma práctica en mi web? Para empezar, tendrás que mantener al menos dos versiones de cualquier página de artículo. En este caso la versión original de su página de artículo que los usuarios verán normalmente, y la versión de AMP de esa página.

Como AMP no permite elementos tales como elementos de formulario y JavaScript de terceros, es probable que en AMP no puedas tener formularios principales, comentarios en la página y algunos otros elementos que puedas normalmente tener en tu página en una implementación estándar sin AMP.

También es probable que debas volver a escribir la plantilla de su sitio para cumplir con las restricciones. ¿En AMP qué significa esto? Por ejemplo, todos los CSS en AMP deben estar en línea y tener menos de 50 KB. Debido a la intensidad de carga de las fuentes personalizadas, deben cargarse usando una extensión especial de amp-font, para controlar mejor esa carga.

Contenido multimedia: diapositivas, vídeos e imágenes en AMP 

El contenido multimedia debe ser tratado de forma especial. Por ejemplo, las imágenes deben utilizar el elemento amp-img personalizado y deben incluir un ancho y una altura explícitos. Al convertir un sitio web heredado en una plantilla de AMP, esto puede ser un gran problema si los atributos de ancho y alto ya no se usan. Además, si tus imágenes son GIF animados, debes usar el componente extendido amp-anim por separado.

Al igual que con las imágenes, hay una etiqueta personalizada que se debe usar para incrustar vídeos alojados localmente a través de HTML5, llamado amp-video. Sin embargo, para incrustar vídeos de YouTube, que es la mayoría de los videos de la web, hay un componente adicional separado, amp-youtube.

También hay soporte para presentaciones de diapositivas a través de amp-carrusel y cajas de luz de imágenes a través de amp-image-lightbox, así como incrustaciones de redes sociales para Twitter, Instagram, Facebook, Pinterest y Vine a través de sus propios componentes extendidos, entre otros.

Estas etiquetas y componentes extendidos no son difíciles de usar; solo requieren un poco de planificación en el diseño de tu sitio. ¿Esto en AMP qué significa? Para que Google (y otras tecnologías compatibles con el Proyecto AMP) detecten la versión AMP de tu artículo, deberás modificar la versión original de la página del artículo. La página del artículo original debe incluir la siguiente etiqueta, esencialmente una etiqueta canónica para las páginas de AMP:

<link rel = “amphtml” href = “http://www.ejemplo.com/blog-post/amp/”>

La página de AMP Discovery también menciona que algunas plataformas que admiten AMP requerirán metadatos de Schema.org para especificar el tipo de contenido de la página. (Actualmente, “artículo”, “receta”, “revisión” y “video” se enumeran como ejemplos de tipo de página en GitHub).

Además, también indica que los metadatos de Schema.org “son un requisito para que su contenido sea elegible para aparecer en la sección de noticias de Búsqueda de Google”. Por lo tanto, si estás tratando de obtener un beneficio futuro de Google implementando AMP, ¡asegúrate de tener tu esquema correcto!

 

¿Cómo puedo monetizar con anuncios en AMP?

El aumento de bloqueadores de anuncios ha dificultado que los editores moneticen sus sitios web. Para algunos usuarios, mejorar el tiempo de carga del sitio web ha sido un incentivo para usar bloqueadores de anuncios. De este modo pueden ayudar a mejorar la velocidad de navegación. ¿Esto para AMP qué significa? AMP puede verse como una respuesta a este problema, con el proyecto que dice:

Uno de los objetivos del proyecto de páginas móviles aceleradas es garantizar la monetización de publicidad efectiva en la web móvil, al tiempo que adopta un enfoque centrado en el usuario. En ese contexto, el objetivo es proporcionar soporte para una amplia gama de formatos de anuncios, redes publicitarias y tecnologías en Accelerated Mobile Pages.

Como resultado, varias de las redes publicitarias más populares actualmente usan el componente amp-public extended, mejorando su compatibilidad:

 

Publicidad de Google
Amazon A9
Taboola
AdReactor
AOL AdTech
Yieldmo
DotAndAds
Google Doubleclick
Flite
Adform
plista
Smart AdServer

Si su monetización es más compleja (utilizando módems de pago o suscripciones), también hay documentación disponible para implementarla dentro de AMP, utilizando la extensión “Acceso AMP”.

¿AMP tiene analíticas?

Sí. De hecho, el análisis en AMP es muy inteligente. Para evitar que el seguimiento de análisis múltiple ralentice un sitio, implementaron la filosofía de “medir una vez, informar a muchos”.

¿Esto en AMP qué significa? Existen dos caminos para habilitar la funcionalidad de análisis con AMP para tu sitio web:

El elemento Amp-Pixel: esta es una etiqueta simple que se puede usar para contar visitas de página como lo haría un píxel de seguimiento típico, usando una solicitud GET. Hay una serie de variables que se pueden pasar a través de él, como DOCUMENT_REFERRER y Title.
El componente extendido Amp-Analytics: Esto es un poco más avanzado que el amp-pixel. Es probable que sea lo que utilizarás para implementar análisis en tu sitio, ya que permite un mayor nivel de configuración para las interacciones analíticas.
Si no estás tratando de hacer que Google Analytics funcione, amp-analytics es el camino a seguir. Necesitarás agregar la biblioteca de JavaScript necesaria en el <head> y luego configurarla mediante alguna marca JSON en la sección <body> de tu página.

Si te interesa Google Analytics en AMP, consulta la sección de Análisis de AMP de Google en su página de desarrollador. Encontrarás varios ejemplos de implementaciones.

¿Cómo se ve AMP en Google? ¿AMP qué significa realmente en una web?

Google ha proporcionado una demostración de cómo se vería una característica de AMP en el SERP. Puedes probarlo navegando a g.co/ampdemo en tu teléfono móvil (o emúlalo dentro de Chrome Developer Tools). Luego, busca algo como “Marte”. Verás un carrusel hacia la parte superior con artículos de AMP.

Haga clic en uno para una experiencia de lectura integrada en el SERP. Puedes deslizar hacia la derecha o hacia la izquierda para leer otro artículo habilitado para AMP. Es una experiencia diferente a simplemente navegar a la página AMP de un editor.

 

Descubre en el próximo artículo Cómo instalar AMP en WordPress.

Y tú, ¿utilizas ya AMP para la versión móvil de tus páginas web? ?¿Has conseguido instalarlo? ¿AMP qué significa para ti? Esperamos haberte ayudado un poco a descubrir qué es AMP y por qué implementarlo en tu web. En el próximo post te indicaremos cómo instalar AMP en wordpress.

Síguenos y no te pierdas ningún artículo para mejorar tu web y ganar dinero!

¡Da “Me gusta” en facebook! 



1 Comment

  1. Pingback: Cómo instalar AMP en wordpress en minutos en solo 4 pasos, implementar plugin AMP WordPress - Dinero rápido online

Leave a Comment

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

*
*