Guía AMP Stories en Wordpress y otros CMS | TS

Guía AMP Stories en WordPress y otros CMS13 min de lectura

AMP Stories, Google nos trae un poco de Instagram y Facebook a las SERPs, los resultados de búsqueda de Google. Apostando, como lleva haciendo ya un tiempo, por la tecnología mobile y el contenido visual. Descubre en el post cómo crearlas desde cero para conseguir resultados increíbles en tu web

¿Qué son las AMP Stories?

Son pequeños trocitos de contenido visual, que se reproducen uno tras otro, cuyo objetivo, según Jon Newmuis de Google, es hacer que el usuario no deba leerse un contenido de 2000 palabras si realmente no es lo que quiere.

Una AMP Story nos ayuda a que tengamos el contenido resumido en pequeños trocitos visuales y atractivos que sean más fácil de construir en dispositivos móviles y en escritorio, por lo que no solo las veremos en móvil también podremos disfrutarlas en desktop.

Como las insta stories de toda la vida pero cambiando insta por AMP 😂😂

¡Poniéndonos serios en 3,2,1…

AMP Stories en la actualidad y su efecto en los resultados de búsqueda.

Google es experto en lanzar tecnologías sin que su desarrollo sea completo en el momento de su lanzamiento, digamos que se le da muy bien sacar proyectos en fase beta, para que la comunidad los pruebe, reaccione y, por supuesto, todos los desarrolladores open source mejoren el proyecto.

Un ejemplo de ello, son las primeras versiones AMP o el framework de JavaScript angular que era compatible al 100% con casi todos los motores de búsqueda salvo con Google, su creador.

Más de uno se estará preguntando ¿A qué viene todo esto? Pues bueno es bastante simple, las AMP Stories fueron lanzadas a mediados de febrero de 2018, en la AMP Conference. Desde entonces algunos medios, la mayoría partners las han desarrollado en sus webs, pero todavía no se ha generalizado su visibilidad en los resultados de búsqueda.

Aquí, en España, solo las he podido presenciar en el mundial de Rusia de este año, como muestro en la imagen superior ☝, y en algunos medios de comunicación cuando busco en isearchfrom.com desde Estados Unidos. Por lo que todavía, es necesario que pase un tiempo para que las podamos disfrutar.

Sin embargo, es una clara apuesta que debemos tener en cuenta, adelantando este contenido, podemos premiarnos con posiciones 0 en el futuro. Además, en la AMP Con 2018, prometieron que iban a hacer los siguientes avances:

1. Permitirán la monetización. Podrá ser un nuevo foco de ganancias para los que usan AdSense

2. Visibilidad en más países. Después del contenido en inglés siempre va el español, así que pronto las tendremos por aquí de manera definitiva, no solo algo fugaz como en el mundial.

3. Habrá nuevas características. Entre ellas, la ventas de productos para los e-commerce y nuevos efectos visuales ¡Quizás en un tiempo se puedan crear desde el movil con en instagram!

4. Inserción en otras plataformas. Veremos con qué plataforma nos sorprende

En el post descubriremos como incluirlas en WordPress, si usas este CMS, y como construirlas con otro CMS.

Algunos casos de éxito de las AMP Stories

Realmente, más que casos de éxito deberíamos etiquetarlos como medios de comunicación partners que han apostado por la creación de esta tecnología.

El último de la lista en especial 🤭. Ante de pasar a explicar en detalle cómo se hacen y cuáles son sus partes, añado una lista de webs que ya los están implementando, de manera que podamos ir entendiendo el concepto.

Ejemplo de una de las AMPs Stories de la CNN: https://edition.cnn.com/ampstories/us/still-missing-cassini-heres-what-else-is-out-there
Ejemplo de la sección de AMP Stories del Washington Post: https://www.washingtonpost.com/graphics/2018/national/amp-stories/border-wall/??noredirect=on
Ejemplo de Vox Media, en este caso hace Stories para sus clientes: https://www.sbnation.com/2018/2/12/16719476/college-football-playoff-rankings-explained
Ejemplo donde cuento mi “story” a modo de ejemplo de AMPs Stories. Accede a mi AMP Storie

Partes (o anatomía) de una AMP Story

Una AMP Story tiene un proceso de construcción bastante simple e intuitivo, sobre todo para aquellos que hayan usado el Photoshop alguna vez, básicamente tienen el mismo formato de capas superpuestas.

Se dividen en:

1. Páginas (Pages). Por hacer analogía al Instagram, cada vez que en una Instagram story tocamos la pantalla estamos pasando de página, lo que en AMP Sotires se conoce como pages. Es decir, cada barrita de la story es una página

2. Capas (Layers). Cada página esta compuesta por capas, una imagen es una capa, que se situa debajo de otra capa, el texto en este caso. Otras capas que puede haber son videos, CTAs, etc.

3. Elementos (elements). Las capas se componen de muchos elementos que son cada una de las partes visuales, cada capa suele tener un único elemento. Aunque a veces tienen varios. Por ejemplo, el texto, un h1 sería un elemento y el párrafo otro.

4. Bookend (System Bookend). Un archivo json que se coloca al final de la story, y que sirve para que el usuario pueda volverla a ver o consumir otro contenido relacionado. Este archivo sería tal que así: https://github.com/ampproject/docs/blob/master/tutorial_source/amp-pets-story/bookend.json

Este, desde mi punto de vista, es el apartado más difícil de configurar, sobre todos si no somos programadores. Pero por suerte google nos aclara el camino en este sentido: https://www.ampproject.org/docs/design/visual_story/create_bookend

¿Cómo crear una AMP Story desde cero en cualquier web?

Lo primero es la parte del diseño, es importante que nos hagamos con todo el contenido que vamos a necesitar; imágenes, texto, videos, música, etc. Para ello yo uso Photoshop, me permite ordenar los elementos de manera simple en carpetas.

Una carpeta para cada páginas y dentro de ellas los elementos y las capas. Una vez tenemos todo el contenido diseñado, es cuando empieza la fiesta.🤪🤪

No te voy a mentir, es necesario que sepas un poco de programación para hacer una AMP Story como la que hemos visto en los ejemplos anteriores o que consultes a un desarrollador.

Pero que no cunda el pánico ¿Vale? yo tampoco soy ningún experto en programación y con algunos truquitos he conseguido hacerlas como has visto en el ejemplo superior.

Paso 1: Usar una plantilla

Abrir editor de código de AMPs, una vez abierto empezamos a quitar todo lo que no sirve (a continuación vemos como se hace), es decir, todo lo que es propiedad de Google y que por lo tanto no es aplicable a nuestra AMP Story.

Paso 2: Modificar la plantilla

Para ello debes copiar el siguiente código en el editor de AMPs:

Paso 3: Seguir conmigo los pasos en el siguiente video para crear la AMP Story

En el siguiente video te enseño cómo ir creando paso a paso la AMP Story de manera sencilla, sin complicaciones y apenas tener que mirar las guías.

Paso 4: Subir el contenido al servidor y crear una URL

Tras tener la AMP Story creada lo que tenemos que hacer es coger nuestro código y subirlo a nuestro CMS. Una vez subido enlazarlo, ya sea a través de una imagen si eres una persona creativa, o en texto con un anchor text si optas por un estilo sencillo.

Bonus

Importante, no nos quedemos con lo básico. Hay que mejorar cada día, mi video únicamente es la superficie, si quieres posicionar y tener las mejores AMP Stories es importante que te leas la documentación de AMP Stories, si no eres tan atrevido recuerda que también puedes hacer una de la mano de Google con los tutoriales de stories.

Por último recuerda que el Playground es tu mejor amigo y si en el todo está bien en tu web también lo estará.

IMPORTANTE: ¿Usas WordPress?¿Quieres aprender a meterlas en wordpress? Es una tarea fácil pero solo si sabes cómo…

AMP Stories en WordPress

Aunque algunos desarrolladores han intentado sacar algún que otro plugin, no han llegado a funcionar del todo, AMP Stories for WordPress por ejemplo, no te deja personalizar del todo tu story, además se queda pillado cuando las subes… Por eso lo mejor es crearlas con el playground y subirlas a través del siguiente método.

1. Accedemos a nuestro FTP

2. Creamos en la carpeta un archivo que se llama amp.php:  /public_html/wp-content/themes/nombre-del-tema/amp-prueba.php

3. En el archivo php escribimos lo siguiente: 

Importante dejar el nombre del tema comentado (El “blablabla” no es necesario jaja). Ahora debajo de “?>”

4. Copiamos el código que hemos creado en el playground ¡Ya casi está! 

5. Accedemos a nuestro wordpress y creamos una nueva página. 6.

A esta nueva página, le ponemos un título y en la parte derecha, en atributos de página seleccionamos la plantilla con el nombre que hayamos puesto.

7. No pongas nada de texto ya la tienes creada, ahora solo tienes que enlazar la URL que se ha generado en un contenido, ya sea en texto, en una foto o desde un menú.

¿Te gustan las AMP Stories? Conoce cuáles son las mejores prácticas para crear AMP Stories

¡Esto ha sido todo! ¡Espero que te haya sido útil! Si echas en falta algo no dudes en escribirlo en los comentarios, te responderé lo antes posible.

0 comentarios

Enviar un comentario

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

¡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!