Web Stories are coming to WordPress!

The first public beta is now available (for the adventurous) to install & test.

More info here: https://t.co/KYUwyF8h8j pic.twitter.com/55qKNX1c4s

— Paul Bakaus (@pbakaus) July 1, 2020

El plugin que ha desarrollado Google será de código abierto y está todavía en estado de beta, pero si quieres puedes descargarlo ya desde aquí y así instalarlo en tu web para empezar a trastear sus posibilidades.

¿Qué son las Google Web Stories?

Es un nuevo tipo de publicación heredado de plataformas como Instagram, Whatsapp o Tik Tok, con el que compartir lo que quieras de una forma rápida y muy dinámica. Puedes usar imágenes, vídeos y textos y combinarlos como quieras.

El aspecto esta enfocado totalmente a dispositivos móviles, con un formato vertical que se adapta perfectamente a las pantallas de los smartphones en el que sólo es necesario un golpe de dedo para ir avanzando o retrocediendo en las diferentes diapositivas de contenido.

Ventajas

• Una nueva forma de generar contenido.
• Perfectamente diseñado para mobile, el dispositivo más utilizado por la mayoría de usuarios para navegar.
• Al contar con tecnología AMP, las Web Stories cargan muy rápido y consumen muy pocos recursos.

Inconvenientes

• El contenido debe partirse en varias diapositivas y no puede contar con mucho texto.
• Al estar todavía en fase beta, se echan en falta algunos detalles o funciones.

¿Cómo hacer Web Stories en WordPress?

Una vez hemos descargado el archivo .zip de su web oficial, llamado ‘web-stories’, tendremos que instalarlo. Esto se hace desde Plugins > Añadir Nuevo. Escogemos el archivo desde la ventana que aparecerá, esperamos unos segundos, y después haremos clic en el botón para activarlo.

Automáticamente te aparecerá una nueva sección en el sidebar del panel de usuario, justo debajo de ‘Comentarios’, llamada ‘Stories’. Tiene tres subsecciones.

Dashboard

Desde aquí podrás ver las diferentes Web Stories que has ido creando hasta ahora. Podrás renombrarlas, duplicarlas, editarlas o eliminarlas con sólo desplegar el menú de cualquiera de ellas.

Puedes ver sólo las que tengas en borradores o las publicadas yendo a sus respectivas pestañas de navegación.

Si quieres empezar a crear una Web Story desde aquí, tienes también la opción de ‘Explore Templates’ desde donde podrás coger una plantilla ya diseñada como base para tu futura publicación.

All Stories

Esta sección te va a resultar muy familiar, ya que es exactamente igual que las de ‘Entradas’ o ‘Páginas’. Un listado con las diferentes Stories que has ido creando.

Como antes, podrás editarlas, eliminarlas, clonarlas… con un par de clics. También verás información como la fecha de creación o el autor o autora.

Add new

La sección más importante, por supuesto. Cuando hagas clic en ella para crear una nueva publicación aparecerá una nueva interfaz especialmente diseñada para crear Web Stories.

Si estás familiarizadx con los Stories de Instagram te resultará todo muy intuitivo ya que, a excepción de los Stickers y alguna función más (por ahora), el resto de elementos están también aquí. Básicamente puedes crear:

• Texto
• Imágenes
• Formas Geométricas

Y en cada uno de dichos elementos tienes opciones tales como color, transparencia, tipo de letra, tamaño, rotación… y un montón más de posibilidades de personalización con las que poder ajustar hasta el más mínimo detalle tus Stories en WordPress.

En realidad, muchas de estas opciones las podrás activar simplemente arrastrando el ratón tras seleccionar la esquina de cualquier elemento, de manera muy similar a como funcionan estas publicaciones en las apps mobile. Muy intuitivo.

Para hacerlo todo más rápido, han incluido un botón con el que clonar el Story que acabes de diseñar y añadirlo como nueva diapositiva en la misma publicación. Una manera muy fácil de hacer un hilo de Stories de manera rápida.

Así de bien luce el nuevo editor de Stories para WordPress

Cómo embeber los Stories en posts de WordPress

Por ahora si quieres embeberlo la solución pasa por poner un código como éste (cambiando la URL del ejemplo por la de tu Google Web Story:

<!– wp:web-stories/embed {«url»:»https://carlosortega.page/stories/story-de-ejemplo/»,»title»:»Tu Story para WordPress»,»poster»:»»} –>
<div class=»wp-block-web-stories-embed alignnone»><a href=»https://carlosortega.page/stories/story-de-ejemplo/»>Tu Story para WordPress</a></div>
<!– /wp:web-stories/embed –>

Aunque te recomiendo simplemente pegar la URL de la publicación sin más, y te generará un link como el siguiente al Story ¡Se ve realmente bien en móvil!

https://carlosortega.page/stories/palomitas/

Cosas a tener en cuenta para mejorar tus Web Stories

• Si pones un vídeo en el que alguien está hablando, es muy recomendable poner subtítulos.
• Si pones texto, el tamaño mínimo recomendado es de 24px
• No pongas demasiado texto por diapositiva, siempre puedes poner un enlace a un post con más información.
• Intenta no poner más de un enlace por Web Story.
• Puedes añadir marcado schema para datos estructurados en las Web Stories
• Haz el contenido lo más dinámico y atractivo posible, que sea muy visual y se mueva, pero con gusto.
• El editor tiene unas pequeñas marcas para delimitar la ‘zona de seguridad’, intenta que el contenido clave esté dentro.
• Aunque el número de slides puede ser el que quieras, recomiendan entre 10 y 30 como media por cada Web Story.

¿Cómo afectan al SEO las Web Stories?

Pues sinceramente, no lo sabemos.

Es un formato que hasta ahora era prácticamente exclusivo de las redes sociales, y estimar cómo va a impactar en los resultados de búsqueda de Google u otros buscadores es a día de hoy difícil.

Las Web Stories no cuentan con muchos de los elementos on-page necesarios como para apostar por ellas en una lista de resultados convencional. Pero esto cambia de un día para otro, y John Mu ya avisa:

https://twitter.com/JohnMu/status/1278388087396147203?s=20

Y según la documentación oficial, las Google Web Stories pueden aparecer en nuevos módulos de Google como:

• Resultado único
• Vista de cuadrícula
• Carrusel de Web Stories
• Google Imágenes
• Discover
• Carrusel de noticias destacadas
• Carrusel de hosts

Resultado único

Vista de cuadrícula

Carrusel de Web Stories

Google Imágenes

Discover

Así que os animo a todxs a probar las Stories en WordPress, porque en esta vida hay que probar nuevas experiencias. Y porque muchas veces, el que primero llega, coge los mejores sitios.

Os leo como siempre en los comentarios y nos vemos en el siguiente post, ¡saludos!

WEB PRESENTACIÓN DE GOOGLE WEB STORIES

https://google.github.io/web-stories-wp/beta/

SITE OFICIAL

https://amp.dev/about/stories/

DOCUMENTACIÓN OFICIAL SOBRE GOOGLE WEB STORIES

https://developers.google.com/search/docs/guides/enable-web-stories

https://amp.dev/documentation/guides-and-tutorials/start/create_successful_stories/

https://stories.google/