Creación de historias web de Google: una guía de prácticas recomendadas para editores

Las Historias web de Google son contenidos interactivos, inmersivos y que se pueden tocar, similares a las historias de Instagram y Facebook. 

Lanzado inicialmente como AMP Stories en 2018, Google cambió el nombre de este formato visual a Web Stories en 2020 , ¹ quizás en parte debido a la naturaleza algo controvertida ² de la tecnología AMP en el ámbito de la publicación digital ³ .

En su encarnación actualizada y más refinada, las Historias web de Google son una forma de contenido visualmente rica que permite a los editores un mayor control sobre su producción creativa y su marca. Como afirma Google, las Historias web son " una versión basada en web del popular formato Historia, que permite a los creadores alojar y poseer su contenido ". ⁴

Según un estudio de 2019 casi dos tercios de los lectores (64%) prefieren el contenido histórico a su equivalente de desplazamiento, los desarrolladores deberían centrarse en "aprovechar" este formato. ⁵

Sin embargo, la misma encuesta reveló que existen “muchas trampas de diseño que pueden crear confusión, fatiga y frustración”. Por lo tanto, implementar las mejores prácticas de diseño es esencial para crear historias web con el máximo impacto.

Al comprender cómo crear y publicar Google Web Stories visualmente ricos, un editor puede mantener el control creativo, cultivar la confianza en la marca y dirigir el tráfico a su sitio web. ⁶ 

¿Qué son las historias web de Google?

Las Web Stories son un formato narrativo visual que consiste en una secuencia de imágenes y videos con texto y/o audio. El contenido se puede dividir en una secuencia de visualización específica, y cada parte se muestra a los usuarios automáticamente después de unos segundos o cuando tocan o hacen clic.

Las historias web no desaparecen después de 24 horas, a diferencia de las historias en Snapchat o Instagram, lo que permite a los editores aplicar este formato también al contenido siempre nuevo.

Las historias web se basan en AMP y heredan todos sus beneficios asociados:

• Se puede incrustar en cualquier sitio web.
• Funcionará en cualquier navegador, móvil o escritorio.
• Altas velocidades de carga
• Visible en los resultados de búsqueda de Google, incluido Google Discover a través de Web Stories Carousel y Google Images

Historia de fondo de las historias que se pueden tocar

Cuando Snapchat fue pionero en el formato de historia, convirtiéndolo en una parte central de su aplicación, pocos pensaron que este formato narrativo despegaría como lo hizo.

Sin embargo, el primero en seguirlo fue Instagram, donde ahora lo usan 500 millones de personas . ⁷ Luego fue WhatsApp y Facebook, Medium, Skype, YouTube, Twitter e incluso LinkedIn incluyeron ese formato.

Desde entonces, ha habido algunas bajas notables, con Twitter , ⁸ Skype ⁹ y LinkedIn ¹⁰ anunciando que abandonarían el formato de historias.

Mientras tanto, Google incluyó su función de historias como parte de la especificación AMP , lo que permite a los editores usar el formato en su narración en línea. ¹¹

Características de las historias web de Google

Se ha demostrado que Google Web Stories es un formato efectivo de narración en línea, con el estudio de 2019 mencionado anteriormente que muestra que los lectores encuentran "ejemplos de historias tocables más atractivos visualmente y más fáciles de navegar que los equivalentes de desplazamiento".

Esto es particularmente cuando se trata de tipos de contenido específicos, como el contenido de estilo de vida perenne. 

En una de las Web Stories de Google, un editor puede incluir todo tipo de contenido visual: imágenes, sonido, video o animaciones.

Los motores de búsqueda pueden indexar estas historias y mostrarlas para responder a la consulta de un usuario. La Búsqueda de Google los presenta en un fragmento de Historias destacadas cuando un usuario realiza una consulta de búsqueda relacionada con noticias.

Las historias web se pueden hacer receptivas, lo que significa que se adaptarán al tamaño de la pantalla del usuario, ya sea que esté viendo la versión basada en la web o en dispositivos móviles. 

Los editores pueden agregar enlaces y llamadas a la acción (CTA) en cualquier lugar de una página. Esto ayuda a impulsar a los usuarios comprometidos a continuar su viaje en otro lugar, leer más artículos o suscribirse.

Agregar una página final, llamada sujetalibros, puede resaltar el intercambio social y los enlaces relacionados.

Cómo crear historias web de Google: mejores prácticas de diseño

Para más pequeños sin un gran equipo de codificación, Google facilita la creación historias web

El tercer episodio de la serie educativa semanal "Storytime" de Google Web Creators es un excelente lugar para comenzar. ¹² 

La creación de Google Web Stories implica los siguientes pasos.

Elija un editor visual

Las historias web consisten en una serie de paneles que los usuarios pueden tocar o esperar para cambiar automáticamente.

Cada nueva página consta de una combinación de texto, imágenes y videos, con la naturaleza del formato visual que requiere contenido vívido y gráficamente rico. Por lo tanto, un editor visual, en forma de software, complemento o servicio en línea, es el primer paso y quizás el más esencial para crear historias web.

 Hay varias herramientas y una variedad de productos de Google que se deben tener en cuenta al crear Google Web Stories.

Para los creadores de contenido con un sitio web de WordPress, en realidad solo hay dos complementos a considerar:

Historias web

Google tiene su propio editor de Web Stories para WordPress, que Google describe como una "herramienta de creación WYSIWYG" fácil de usar. ¹³

hacer historias

MakeStories es un editor visual de código abierto para ayudar a publicar Google Web Stories directamente desde el panel de control de un sitio de WordPress.

Alternativas de WordPress

Para los pequeños editores que no trabajan con WordPress, pero que aún desean implementar este formato en su sitio, existen algunas arrastrar y soltar, sin código, útiles para crear Google Web Stories , con Newsroom AI y MakeStories a la cabeza. la selección. ¹⁴

Redactar la historia

El siguiente consejo que da Google es crear un guión gráfico que muestre qué imágenes y contenido aparecerán en cada panel de la historia. Una gran Web Story es precisamente eso, una historia que cuenta una narrativa de principio a fin.

Google ofrece una plantilla gratuita para ayudar a los creadores a crear una nueva historia. ¹⁵ 

Recursos creativos de origen

Obtener el contenido correcto, desde la imagen de portada hasta el panel final, es quizás la parte más integral de la creación de una nueva historia.

Los editores deben asegurarse de usar texto alternativo y asegurarse de no infringir las leyes de derechos de autor. Además, es esencial recordar que todos los videos de pantalla completa deben formatearse verticalmente. Esto garantizará que las Historias web usen un ancho de banda mínimo y se carguen lo más rápido posible.  

Empezar a crear

Una vez que se ha trazado una visión, ahora es el momento de saltar al editor elegido y comenzar a crear. Comience colocando imágenes o videos y creando texto preciso. Mantén el título corto y las llamadas a la acción llamativas. Proporcione un enlace a un sitio deseado para animar a los espectadores a suscribirse.

Considere la siguiente investigación al crear historias web:

• Las historias que son demasiado largas son abrumadoras para los lectores.
• Demasiado contenido en un solo panel puede generar confusión y fatiga en el lector
• Los lectores aprecian las llamadas a la acción y otras señales visuales
• Con la ubicación y el volumen adecuados, las historias que se pueden tocar son una excelente oportunidad para monetizar a través de anuncios.

Presiona Publicar

Una vez que Google Web Story se haya desarrollado, obtenido y creado, ahora es el momento de revelarlo al resto del mundo. Usar un editor visual hace que esto sea tan fácil como presionar el botón de publicar.

Los editores más grandes, o aquellos con los recursos y la experiencia técnica necesarios, probablemente preferirán crear historias desde cero con HTML, CSS y Javascript siguiendo el estándar Google AMP.

La codificación de historias web brinda un gran control sobre el producto final y una integración más fácil con un CMS y una base de código existentes.

No te olvides del SEO

Es fácil dejarse llevar por el lado creativo del desarrollo de historias web, pero también es importante recordar adherirse a las mejores prácticas de SEO para garantizar que las historias terminadas realmente aparezcan en los resultados de búsqueda. Después de todo, una historia web es solo otra página web.

Google ha proporcionado una lista de las mejores prácticas de SEO que también se aplican a las historias web. ¹⁶ Incluyen:

• Proporcionar contenido de alta calidad.
• Uso de títulos descriptivos de menos de 70 caracteres
• Evitar el uso de atributos noindex
• Hacer que la historia sea autocanónica
• Cumplir con las pautas de metadatos de historias de AMP ¹⁷
• Pruebas con la herramienta AMP Validator ¹⁸
• Evite las imágenes que contienen texto grabado
• Usar el tamaño de imagen del póster y la relación de aspecto correctos
• Asegurarse de que el logotipo tenga la relación de aspecto correcta

Grandes ejemplos de historias web de Google

La mejor manera de experimentar el poder y la versatilidad de Google Web Stories es mirar excelentes ejemplos de algunos editores establecidos:

Ejemplos de modo retrato

Estas historias fueron hechas para ser experimentadas a través de dispositivos móviles. Se puede acceder a ellos desde el escritorio, pero la mayor parte del espacio de pantalla disponible no se utiliza.

VICE ha dado en el clavo con el formato Google Web Stories, aprovechando el diseño para crear contenido de estilo de vida imperecedero en forma de demostraciones de cocina durante la pandemia de COVID. ¹⁹

Refinery 29 utiliza una similar de salto de video para crear historias de entretenimiento educativo. ²⁰

The Lonely Planet muestra cómo las bellas imágenes y los poderosos subtítulos pueden ser tan convincentes como el video en el contenido narrado. ²¹

BBC News - Protesta Post It de Hong Kong. ²² Algunas de las páginas tienen videos con una imagen alternativa para cuando no se puede cargar o el ancho de banda no es suficiente para descargar y reproducir el video. El sujetalibros dirige al lector a más contenido relacionado con las protestas de Hong Kong y la página de inicio de BBC News.

CNN World – Día de la Bastilla: cómo inspiró siglos de desobediencia civil . ²³ Tiene una firma completa con la fecha de publicación, y cada imagen se acredita al fotógrafo y la agencia . Tiene mucho más texto que el ejemplo de la BBC.

Cómo monetizar una historia web de Google

Cuando se implementan correctamente, los anuncios intersticiales de pantalla completa pueden ser una forma efectiva para que los editores moneticen sus historias visuales.

Insertar anuncios en una historia web de Google requiere configurar una plataforma publicitaria que admita la inclusión de anuncios en una historia web.

En el momento de la publicación, el método más simple para incluir anuncios en una historia web sigue sirviéndolos desde Google Ad Manager o Google AdSense, y ambos facilitan la publicidad programática, según la comunidad de desarrolladores de AMP de código abierto . ²⁴

Sin embargo, hay formas para que otras plataformas de anuncios integren la compatibilidad con los anuncios de Web Story, así como para que ambos editores coloquen anuncios personalizados desde su propio servidor de anuncios.

Las redes publicitarias deben publicar anuncios AMP HTML válidos, con metadatos adicionales para permitir la representación en tiempo de ejecución de AMP, así como integrar Fast Fetch. La comunidad de AMP ha proporcionado documentación sobre los anuncios AMP HTML ²⁵ , las etiquetas de metadatos adicionales ²⁶ y la integración de Fast Fetch ²⁷ .

La comunidad también ha creado documentación para editores interesados ​​en publicar anuncios de su red de publicidad, aunque con el descargo de responsabilidad de que se trata de una solución más compleja ²⁸

Google Ads es excepcionalmente flexible y se integra a la perfección con el complemento de WordPress, MakeStories y NewsRoom AI.

Otra opción para monetizar Google Web Stories es incluir enlaces de afiliados en la historia o publicar contenido patrocinado. Esto puede incluir un enlace a varias páginas web, incluidas las páginas de Patreon o las páginas de productos.

Los editores que han adoptado un modelo de ingresos basado en suscriptores pueden insertar un enlace de "leer más" en el sujetalibros de la historia que llevará a aquellos que no están suscritos a una página de registro. ²⁹

La sección de Historias visuales de Australia utiliza este enfoque, y cada historia sirve como una vista previa del contenido que se encuentra detrás de un muro de pago. ³⁰

Al igual que con cualquier publicitaria , es fundamental tener en cuenta el sitio, la base de lectores y el formato de página.

Pensamientos finales

Google Web Stories emplea un formato atractivo al que las personas ya están acostumbradas en los dispositivos móviles y las redes sociales.

Desarrollar historias web es fácil para editores de cualquier tamaño, gracias a las herramientas fáciles de usar y sin código para crear historias. Y sus beneficios van más allá de una experiencia agradable para el usuario, ya que su velocidad de carga y su formato lo convierten en un candidato perfecto para un rendimiento de SEO estelar.

La creación de Google Web Stories brinda a los editores un mayor control sobre su contenido y marca, impulsa el tráfico orgánico y ofrece mayores oportunidades de monetización.

Al aprovechar el contenido histórico, los editores pueden aumentar su alcance mientras mantienen la propiedad de su propiedad intelectual.