CÓMO DOMINAR LAS NUEVAS HISTORIAS DE GOOGLE AMP (GUÍA GRATUITA)

¡Las historias de Google AMP están aquí!

El gigante de la tecnología anunció recientemente la llegada de las historias de Google AMP: el juego de Google en el popular formato de historia creado por Snapchat. ¿Listo para aprender a dominarlos?

A continuación, cubriré todo lo que necesita saber sobre las historias de AMP, cómo configurarlas y si son adecuadas para su negocio.

Fondo de Google AMP

Que significa? Páginas móviles aceleradas ,

¿Qué hace? Exactamente lo que dice que hace.

Está diseñado para hacer que las páginas web móviles se carguen instantáneamente, eliminando los tiempos de carga que generalmente ocurren entre un clic y la aparición de una página completa.

En su debut oficial en 2015, Google dijo esto en su blog oficial.

“Cada vez que una página web tarda demasiado en cargarse, pierden un lector, y la oportunidad de obtener ingresos a través de publicidad o suscripciones … (AMP) tiene como objetivo mejorar drásticamente el rendimiento de la web móvil. Queremos que las páginas web con contenido rico como video, animaciones y gráficos funcionen junto con los anuncios inteligentes y se carguen instantáneamente ”.

Es un gran problema porque los usuarios desean cada vez más un tiempo de carga más rápido y se han vuelto cada vez más implacables con cualquier página que pruebe su paciencia.

Tanto es así que el 47% de los consumidores esperan que una página web se cargue en 2 segundos o menos , y el 40% de las personas abandonan un sitio web que tarda más de 3 segundos en cargarse.

¿La respuesta de Google? AMP, que les ayuda, y a las marcas, a ofrecer la experiencia del cliente que el usuario desea ver.

¿Qué son las historias de Google AMP?

Si ha pasado algún tiempo en Facebook o Instagram, probablemente esté familiarizado con la función Historias.

Ahora, Google está aprovechando el formato popular al ofrecer Historias de Google AMP, una nueva función anunciada la semana pasada en su Conferencia AMP.

Google llama a las nuevas historias «un formato de narración visual para la web abierta … Las historias de AMP sumergen a los lectores en contenido tappable y de pantalla completa».

Si bien el contenido tradicional de AMP tiene mucho texto, el nuevo formato se basa en imágenes, videos y animación para sumergir completamente al usuario en la experiencia de la historia.

Para los editores, las historias le permiten:

  • Cree una experiencia totalmente inmersiva para sus lectores a través de la narración y un diseño flexible
  • Comparte e inserta tus historias en sitios y aplicaciones
  • Acceso en dispositivos móviles y de escritorio.
  • Gratis para que cualquiera lo pruebe
  • Cuente historias visuales complejas con un mínimo conocimiento técnico.
  • Atraiga más fácilmente la atención del usuario a través de imágenes y manténgalos interesados ​​con la interfaz fácil de tocar

¿Qué pueden esperar los usuarios de las historias de Google AMP?

Principalmente, conveniencia.

Las nuevas historias combinan el poderoso AMP con la popularidad del contenido visual. Aproximadamente traducido, eso significa una buena experiencia de usuario.

Digamos que tiene tiempo de inactividad para matar, ya sea esperando una cita con el dentista o viajando en su Uber. Naturalmente, recurre a su dispositivo móvil para buscar algo así como el mejor aspecto de los Grammys.

Lo más probable es que no le interese leer un artículo completo sobre esto o esperar a que se cargue una presentación de diapositivas en una página web. Y gracias a AMP Stories, no tienes que hacerlo.

En cambio, obtienes esto : una historia visual justo en la parte superior de los resultados de búsqueda, que se inicia instantáneamente y elimina cualquier retraso.

Las historias aparecen en los resultados de búsqueda móvil en la parte superior, en la función «Historias principales».

En este momento, si un usuario escribiera «Mashable» en su dispositivo móvil, los resultados aparecen en este orden:

  • Enlace de la página de inicio
  • Mejores historias
  • Las mejores historias visuales

El último es el que desea aquí, y los usuarios podrán desplazarse por las últimas historias de Mashable.

¿Qué pueden esperar los usuarios de las historias de Google AMP?

Google Amp Stories- Mashable

Una vez que se hace clic en una historia de AMP, se expandirá a la página completa, donde los usuarios pueden hacer clic en las diferentes imágenes y videos. La última tarjeta de la historia generalmente presenta un enlace a la página de inicio del sitio web y botones de redes sociales para facilitar el intercambio.

Ejemplos de historias de Google AMP

Además de Mashable y People, Google se asoció con CNN, Conde Nast, Hearst, Meredith, Mic, Vox Media y The Washington Post para el lanzamiento inicial.

Cada uno ha utilizado el formato para adaptarse a sus puntos fuertes.

Ejemplos de historias de Google AMP

Google Amp Stories

El antes mencionado Mashable, una fuente de noticias y entretenimiento de moda, capitalizó la exageración de la película Black Panther al lanzar una » guía esencial para la historia de Marvel’s Black Panther «, así como una mirada a las » tendencias de belleza más absurdas de Instagram » «

Vox Media, un sitio similar de noticias y opinión, ha utilizado las Historias principalmente para videos explicativos, como » Cómo funcionan realmente los playoffs de fútbol americano universitario » «

El Washington Post, por otro lado, utilizó el formato para contar la historia de la » evolución del muro de Trump «, y dio vida a los Juegos Olímpicos con un cronograma de la participación de Corea del Norte en los juegos.

Sin embargo, otra compañía de medios, Meredith lanzó una guía sobre el romance del Príncipe Harry y Meghan Markle , capitalizando nuevamente las tendencias actuales para brindar a los espectadores una historia emocionalmente atractiva y fácil de seguir.

Cada una de las historias hace lo que una historia de texto tradicional no puede: confiar en los medios enriquecidos para sumergir al lector en la historia, con un texto explicativo limitado.

Debido a eso, se dice que los editores como The Washington Post están muy entusiasmados con el nuevo formato y predicen que AMP Stories será «un compromiso principal para los usuarios».  

Ejemplos de historias de Google AMP

Historias de Google AMP

Ahora, puede haber notado una tendencia aquí: la mayoría de estos ejemplos son organizaciones de medios y noticias. Lo que puede hacer que te preguntes si el formato de la historia es el mejor para tu negocio.

Cómo configurar su historia de Google AMP

Construir tu propia historia requiere un poco de codificación. Pero Google ha hecho gran parte del trabajo por usted y le proporciona una plantilla (archivo de muestra) para que copie y edite al crear su propia historia. Para encontrarlo, vaya a esta página y guarde el código con una extensión .html.   

Antes de comenzar su propia historia, Google recomienda revisar su tutorial en profundidad que le enseña cómo crear historias de varias páginas, agregar efectos visuales, etc. Primero, necesitará:

  • Conocimientos básicos de HTML, CSS y JavaScript.
  • Una comprensión básica de los conceptos centrales de AMP ( tutorial «Convierta su HTML a AMP» )
  • Un navegador de tu elección
  • Un editor de texto de tu elección

Con esas bases cubiertas, acceda al tutorial descargando el código de esta URL ( https://github.com/ampproject/docs/raw/master/tutorial_source/amp-pets-story.zip ) y ejecute la página de muestra.

Las instrucciones completas para el tutorial se enumeran aquí .

Partes de una historia de Google AMP

La primera parte de completar una historia de AMP es dominar sus componentes .

Cada historia AMP está compuesta de páginas individuales, y cada página está compuesta de capas individuales que están formadas por código HTML y elementos AMP.

Para fines de codificación, verá los componentes presentados de esta manera:

  • Story = amp-story
  • Página = amp-story-page
  • Capas = amp-story-grid-layer

El amp-story es el componente general de su historia, y para crearlo, usará el archivo descargado en su tutorial para agregar los siguientes scripts:

partes de una historia de google amp

Crear una página de historia de Google AMP

Ahora que tiene configurada la historia, debe llenarla con páginas.

La primera que agregue, que será la primera que vean sus usuarios, se llama su página de portada.

Para crearlo , «agregará el elemento <amp-story-page> como hijo de amp-story. Asigne una identificación única a la página. Para nuestra primera página, que es la portada, asignemos una identificación única de portada: «

Crear una página de historia de Google Amp

A continuación, agregará sus capas de página (cada página debe tener al menos una).

Las capas se apilan una encima de la otra, por lo que puede tener una capa que sea una imagen de fondo y otra capa encima con una superposición de texto.

Cada capa se puede diseñar usando diferentes plantillas. Puedes elegir entre:

  • Plantilla de relleno: llena toda la pantalla; mejor utilizado para fondos, incluidas imágenes y videos
  • Plantilla vertical: colocada verticalmente en la pantalla; puede tener varias capas de arriba a abajo de la pantalla
  • Plantilla horizontal: los elementos se disponen horizontalmente; se puede usar para apilar varias capas horizontalmente
  • Plantilla de tercios: divide la pantalla en filas iguales por tercios, lo que le permite colocar contenido en cada área

Entonces, si está creando una página compuesta por una imagen de fondo con un título, crearía su primera capa con una plantilla de relleno y agregaría su imagen.

Su próxima capa contendrá el texto, y probablemente use una temperatura vertical o de tercios

Cada página adicional se creará siguiendo el mismo formato.

Para obtener instrucciones completas sobre cómo codificar sus páginas y capas en su archivo de historia de amplificador, haga clic aquí .

Agregue animación a su historia de Google AMP

Para capitalizar su atractivo visual, Google le permite agregar animación a los elementos en sus páginas.

Agregue animación a su historia de Google AMP

Google Amp Stories

Puede elegir agregar cualquiera de los siguientes:

  • soltar
  • Fundirse
  • Fly-in-bottom
  • Volar a la izquierda
  • Volar a la derecha
  • Fly-in-top
  • Legumbres
  • Girar a la izquierda
  • Girar a la derecha
  • Giro
  • Whoosh-in-left
  • Whoosh-in-right

Por ejemplo, si desea utilizar una animación de aparición gradual en el texto de su segunda capa, debe agregar el código <animate-in = «fade-in»> en la capa correcta.

También puede personalizar el tiempo de su animación, de la siguiente manera:

  • Retraso: la cantidad de tiempo antes de que una animación entre en la página
  • Duración: la cantidad de tiempo durante el cual se produce la animación.

Ingresará sus parámetros de tiempo bajo el código de animación:

Agregue animación a su historia de Google AMP

Puede usar una animación independiente, combinar varias animaciones o crear una cadena de animación.

Creación de la página de sujetalibros de su historia de Google AMP

La última página de su historia, llamada sujetalibros, funciona de manera un poco diferente.

Esta página generalmente incluye enlaces a historias relacionadas y botones para compartir en redes sociales para que los usuarios puedan compartir su historia.

Creación de la página de sujetalibros de su historia de Google AMP

Google Amp Stories

La información aquí vendrá de un archivo JSON que debe incluir los canales de redes sociales que desea incluir, así como cualquier artículo relacionado, con la imagen, el título y la URL especificados.  

Último paso: validación de su AMP HTML

La parte difícil casi ha terminado; todo lo que queda es verificar que su AMP HTML esté funcionando correctamente.

Hay varias formas de hacer esto, que se explican en profundidad en este video .

La razón por la que necesita pasar por el proceso de validación es para asegurarse de que su historia pueda ser descubierta con acceso no solo a través de Google, sino de cualquier sitio que integre páginas AMP en sus resultados de búsqueda.

Además, verificará que sus historias de AMP cumplan con los requisitos técnicos y las mejores prácticas.

Requisitos técnicos y mejores prácticas de Google AMP Stories

Para ayudarlo, Google proporciona una lista completa de las mejores prácticas , separadas por elementos.

Algunos de los aspectos más destacados son:

  • Antecedentes
    • Siempre especifique un color de fondo para cada página, incluso aquellas con imágenes de fondo; si por alguna razón nuestra imagen o video no se carga, aún tendrá un fondo
    • Debe permitir una transición suave a la imagen o página
  • Texto
    • Asegúrese de que el texto sea siempre legible sobre el fondo eligiendo un color que contraste
    • Agregue un poco de superposición de degradado entre la imagen y el texto para contrastar el texto y la imagen
    • Limite el texto a no más de 1-2 oraciones
  • Vídeo
    • Siempre especifique una imagen de póster que se muestre hasta que se cargue su video
    • Las dimensiones recomendadas del póster son 720w x 1280h
    • Los videos no deben tener más de 4 MB; considere dividir las más largas en varias páginas
    • Cada segmento no debe durar más de 10 segundos
    • Si es posible, use video HLS, con MP4 como respaldo (nota: HLS no es compatible con Chrome para escritorio, así que use respaldo MP4 para tráfico de escritorio)
    • Los videos siempre son verticales, con una relación de aspecto esperada de 16: 9

Cómo funcionan las historias de Google AMP con SEO

Las historias de AMP tienen el potencial de tener un impacto positivo en tu SEO.

Google ha adoptado durante mucho tiempo una iniciativa para dispositivos móviles, lo que significa que utilizarán principalmente el sitio móvil de una empresa para indexar y clasificar páginas.

Cómo funcionan las historias de Google AMP con SEO

Historias de Google AMP

Además, Google anunció recientemente que a partir de julio de 2018, la velocidad de carga de la página será un factor de clasificación para las búsquedas móviles. Anteriormente, solo había contado como un factor para las búsquedas en el escritorio.

Si combina ese conocimiento con lo que sabemos sobre las historias de AMP, que a.) Están diseñadas principalmente para uso móvil, y b) son AMP, que se trata de tiempos de carga rápidos, entonces creo que es seguro decir que las historias tienen el potencial de funcionar muy bien en las búsquedas de Google.

Tenga en cuenta que a partir de ahora cada historia requiere su propio mapa del sitio XML separado para que Google rastree e indexe.

¿Son las historias de Google AMP adecuadas para mi negocio?

En teoría, muy bien podrían serlo.

Cualquier empresa con una estrategia de marketing de contenidos probablemente podría encontrar una manera de incorporar historias AMP en sus planes, a través de tutoriales rápidos, revisiones de productos, listas principales, etc.

Dicho esto, las historias de AMP todavía están en las etapas iniciales.

Hasta ahora, los comentarios parecen ser buenos de editores existentes como The Washington Post, que le dijeron a Search Engine Land que el formato es el más adecuado para el contenido que se traduce fácilmente en «una historia visual y muy convincente que puedes contar en unas pocas diapositivas».

Tenga en cuenta que debido a que el formato de la historia todavía se clasifica como experimental, podría haber errores o fallas imprevistas en el futuro.

Entonces, el resultado final? Las historias de AMP son una característica nueva y emocionante que tiene el potencial de mejorar tanto la experiencia del usuario como la capacidad de una marca para entregar contenido cautivador .

Y si ya está utilizando AMP y tiene una historia convincente que contar, ¿por qué no intentarlo?

Tendremos mucha más información sobre el desarrollo de las historias de AMP y su efecto en el ranking general de los motores de búsqueda y el tráfico en los próximos meses.

Así que mantente atento y mantén una lista actualizada de ideas para historias.