AMP Stories Mejores Prácticas y Trucos | Truebasantana

AMP Stories, Mejores prácticas

Las AMPs Stories son un elemento clave para mejorar el contenido de nuestra web y conseguir posiciones cero de manera divertida. Pero siempre y cuando estas se hagan correctamente. En el post descubriremos cómo explotarlas al máximo y mejorar la permanencia del usuario en la web

¿Todavía no sabes que son las AMP Stories? No te preocupes…

Las AMPs Stories son una forma de contar noticias, tutoriales o vender productos totalmente novedosa que funciona muy bien en smartphones y que también podrás disfrutar en el formato web de escritorio.  Así funciona una AMP Story en acción:

Este post es una continuación de la guía de AMP Stories, por lo que si quieres saber más sobre cómo implementarlas en tu web o conocer más sobre ellas antes de implementarlas te recomiendo encarecidamente que leas la guía jaja. Es muy fácil, haz click en el enlace anterior, sin cerrar este post, lee la guía y vuelve. Te estaré esperando aquí, con las mejores prácticas y trucos para crear y posicionar AMP Stories.

¿Cuáles son las mejores prácticas de AMP Stories?

Como he comentado con anterioridad, a priori, crear una AMP Story puede resultar bastante complicado para todos aquellos que no nos manejamos con fluidez en las inmensidades del código, pero realmente una vez que nos sumergimos en las AMP Stories, todo resulta más fácil.

Además te lo aseguro:

El fondo (background) de la AMP Story

Aunque en la mayoría de los casos el fondo se compondrá de una imagen a tamaño completo, siempre, al principio, en la primera parte del código debemos especificar un color de fondo en nuestras stories.

De esta forma, si el usuario está en el metro por ejemplo y su conexión va a menos 20 por hora y no puede descargar la story, no le estaremos dando una mala experiencia de usuario, que es uno de los principios de las AMPs Stories, la experiencia de usuario.

Lo lógico es que el color de nuestra story no sea otro que el color dominante de ésta, por ejemplo en la story que hemos puesto en la imagen de arriba, el diseñador/desarrollador deberá poner un fondo azulito ya que es el color que predomina en ella.

Algo super super clave, aunque parezca obvio, es que nuestro fondo sea de un color que contraste bien con el color de las letras que vamos a utilizar, para que éste se vea bien antes de que la imagen o el video se descargue.

Si quieres ser el o la más guay entre todos tus colegas, usa degradados CSS para tus fondos le darán un toquito elegante y profesional a tu story.

Si te interesa esto de darle un toque profesional te cuento lo que haría yo… En mi caso utilizaría pequeños SVGs que simularan la imagen del fondo, pero en su versión pixelada, tal que así:

Esta técnica, que simula una mala señal de internet, funciona de forma parecida a los JPEG progresivos, PERO, con la ventaja adicional de que no se hacen peticiones adicionales al servidor despues de que la imagen se cargue, lo que la hace una técnica super eficiente, sobre todo cuando no estamos navegando con HTTP2.

Los textos en AMP Stories, otro aspecto relevante

Lo fundamental cuando creamos contenido en nuestras AMP Stories es que el texto sea legible. Esto obliga a que tengamos sumo cuidado con las imágenes que utilizamos ya que debemos centrarnos en que éstas contrasten bien con nuestro texto.

¿Cuál es mi secreto? 🤐Uso una capa transparente con un color ligeramente negro, a veces que ocupe toda la imagen y otras veces uso un efecto gradiente, entre transparente y negro. Haciendo esto dejamos de preocuparnos tanto sobre qué tipos de imágenes podemos poner y qué tipos no, automatizando así más el proceso.

Esta capa se puede hacer con CSS o con Photoshop, para gustos los colores y nunca mejor dicho 🍭🍭😂

Otro aspecto relevante es la extensión de los textos, no hay nada más molesto que creen las AMP Stories para resumir contenidos extensos y nos dediquemos a poner fragmentos enciclopédicos en las pages.

En concreto, Paul Bakaus de Google AMP, nos sugiere no superar las dos frases, si va a ser así nos propone que nos planteemos si realmente el formato AMP Story es el correcto para desarrollar el contenido.

Los videos, quizás el punto más tricky de las AMP Stories

Digo tricky porque son con total seguridad el elemento más pesado de las AMPs stories, también el que da más juego. Sin embargo, el que puede atacar directamente a uno de los principios  fundamentales de las AMP Stories, la WPO, la velocidad de carga.

Por ello, debemos prestar especial cuidado a su optimización. Su optimización radica en varios puntos:

1. El poster. Es la imagen que se despliega en la AMP Story cuando todavía no se ha cargado el video, tenemos que dejar la url en el código de la página, normalmente suele ser el primer frame del video, aunque cualquier imagen puede funcionar bien, siempre que tenga algo que ver con el video.

Si tenemos tiempo y recursos lo mejor es editar un thumbnail como en YouTube. Pero si lo que vamos a usar es un frame del video, asegurémonos de que no es un pantallazo blanco porque puede aumentar la tasa de rebote.

Las dimensiones recomendadas son 720p:

2. Tamaño y duración del video. Google recomienda que el peso del video no sea superior a 4mb y que la duración sea corta. Para videos largos mejor dividirlo en varias páginas. Yo uso la regla de los 10 segundos como referencia, una vez se pasa ese tiempo lo paso a la siguiente página, así puedo aprovechar para meter más texto y también CTAs.

3. Formato del video. Sin dudarlo .mp4, es lo mejor en cuanto a compatibilidad en buscadores y, sobre todo, en cuanto a complicaciones un buen .mp4 adaptado al peso de referencia nunca dará problemas.

4. Resolución del video. Lo mejor es, siempre que el diseño nos lo permita coger las resoluciones 720x180px ya que se adaptan bien a un screaming adaptativo como a uno no-adaptativo.

5. Avanzar el video automáticamente justo cuando termine. Esto lo hacemos con la siguiente etiqueta:

<amp-story-page auto-advance-after="clase asignada al video">

¡Esto ha sido todo por hoy! La Saga AMPs Stories continuará. Como siempre para cualquier duda estoy aquí, usa el formulario o los datos de contacto si necesitas ayuda.

¡Hasta pronto!

0 comentarios

¡Tu web merece lo mejor, déjala en las mejores manos!

Añadiendo tu email al siguiente campo permitirás que me pueda poner en contacto contigo.

Así podré conocer más qué es lo que necesitas y ver si el servicio se adapta a tus necesidades.

¡No te lo pienses más!

¡Haz hecho lo correcto! Tu respuesta está en camino

¡Tu web merece lo mejor, déjala en las mejores manos!

Añadiendo tu email al siguiente campo permitirás que me pueda poner en contacto contigo.

Así podré conocer más qué es lo que necesitas y ver si el servicio se adapta a tus necesidades.

¡No te lo pienses más!

¡Haz hecho lo correcto! Tu respuesta está en camino

¡Tu web merece lo mejor, déjala en las mejores manos!

Añadiendo tu email al siguiente campo permitirás que me pueda poner en contacto contigo.

Así podré conocer más qué es lo que necesitas y ver si el servicio se adapta a tus necesidades.

¡No te lo pienses más!

¡Haz hecho lo correcto! Tu respuesta está en camino

¡Tu web merece lo mejor, déjala en las mejores manos!

Añadiendo tu email al siguiente campo permitirás que me pueda poner en contacto contigo.

Así podré conocer más qué es lo que necesitas y ver si el servicio se adapta a tus necesidades.

¡No te lo pienses más!

¡Haz hecho lo correcto! Tu respuesta está en camino

¡Tu web merece lo mejor, déjala en las mejores manos!

Añadiendo tu email al siguiente campo permitirás que me pueda poner en contacto contigo.

Así podré conocer más qué es lo que necesitas y ver si el servicio se adapta a tus necesidades.

¡No te lo pienses más!

¡Haz hecho lo correcto! Tu respuesta está en camino

Te envíamos la plantilla a tu correo

En breve recibirás la plantilla y las instrucciones de como utilizarla para que puedas hacer tus auditorías de la forma más completa y fácil.

You have Successfully Subscribed!