Google Web Stories AMP : en Google Discover, Search e Imágenes

Google anunció el pasado 06 de octubre de 2020 que están incorporando una nueva funcionalidad en cuanto a contenido de noticias llamado Web Stories (anteriormente como AMP Stories – 2018) que proporciona al usuario una experiencia tipo storytelling, inmersiva (a pantalla completa), interactiva (con swipe horizontal) y muy sociable (compartible).

Inicialmente se ha lanzado en EE.UU, Brasil y la India y el impacto e cuanto a tráfico parece ser relevante teniendo en cuenta que estas historias web tendrán visibilidad en Google Search, Discover (app de Google) y Google Imágenes, tal y como confirman en su post «Habilitar las historias web en Google«.

La idea es que este nuevo servicio se vaya extendiendo poco a poco al resto de países y servicios de Google. El despliegue dependerá también de si G es capaz de ver que cada vez más sites empiezan a implementar esta tecnología.

Se une así a la moda de las Stories que ya empezaron a publicar algunos players sociales y de distribución de contenido como Twitter, Snapchat, Instagram, Facebook, Linkedin, etc.

CARACTERÍSTICAS DE LAS WEB STORIES

Este tipo de formato de página tiene la siguiente estructura de acuerdo a la información técnica publicada (enlace):

  • Usa framework AMP con libreria jsamp-story
  • No sólo se pueden consumir desde Móvil, sino que puede ser consumido en Desktop y Tablet (ejemplo y más info aquí)
  • Url con estructura propia ofrecida desde tu servidor
  • Puede ser linkado desde otras páginas que no sean web stories
  • Permite añadir enlaces salientes hacia otras urls web
  • Se pueden monetizar estas páginas desde enlaces de afiliados, Google Ad Manager y Google DV360 (Beta).
  • Son urls que no expiran nunca, al igual que una url normal, tú decides si sigue devolviendo un 2xx, 3xx, 4xx, etc.

REQUERIMIENTOS TÉCNICOS

Éstos son los requerimiento técnicos básicos (más información):

  • Empezar con el <!doctype html> doctype.
  • Contiene un top-level <html ⚡> o <html amp>.
  • Contiene las etiquetas <head> y <body>.
  • Contiene una etiqueta <meta charset="utf-8"> como inicio del tag <head>.
  • Contiene una etiqueta <script async src="https://cdn.ampproject.org/v0.js"></script> dentro del <head>. Como best practice, se recomienda que esté lo más al inicio posible del <head>.
  • Contiene la etiqueta <link rel="canonical" href="page/url"> dentro del <head> apuntando hacia sí misma (la url Web Story).
  • Contiene una meta viewport <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> dentro del <head> , recomendando también el initial-scale=1.
  • Contiene el código AMP boilerplate en el <head>.
La diferencia entre una página web AMP y una historia web creada con AMP, es el componente amp-story. 

CÓMO OPTIMIZAR LAS WEB STORIES PARA SEO

Éstos son algunos consejos básicos para SEO (más información):

  • Recomendable para SEO el crear un sitemap específico
  • Son urls indexables y por tanto potencialmente rankeables
  • Incluir title, description, microformatos (ver documentación de AMP), metas OG, Twitter card, etc como cualquier otra página
  • Ayudar al rastreo de estas urls a través de señales internas
  • No es necesario que éstas páginas tengan una estructura de url propia
  • Añadir el atributo «alt» a todas las imágenes de las Web Stories; igualmente para los vídeos incluyendo una description en el campo caption o subtitle.
  • La url Web Story sólo tendrá canonical autoreferenciado. No incluirá referencia a una versión AMP alternativa. Sólo la Web Story tendrá una url canonical diferente a sí misma, cuando ya exista una página web «normal» con el mismo contenido, para evitar contenido duplicado.
  • El contenido es clave, cuanto mayor calidad del contenido (kws, etc.) en él, mejor indexabilidad y posicionamiento. Mejor incluir kws y no tanto clic bait o exclamaciones.
  • Las AMP Google Web Stories tendrán visibilidad desde los resultados de búsqueda tradicionales móviles Google Search, Google Imágenes y Discover.

CÓMO VALIDAR LAS PÁGINAS WEB STORIES PARA GOOGLE

  • Puedes validar este formato desde la Web Story Tool o herramienta de testing de AMP para ver cómo aparecería la Web Story en los diferentes tipos de resultados, si son AMP.
  • Puedes usar la herramienta de Rich Results para ver si tiene formato Web Story.
  • Y por supuesto el Inspector de Url de GSC y Bing para probar la url y forzarla a indexación.

CÓMO MEDIR EL TRÁFICO DE LAS WEB STORIES

  • Desde Google Analytics a través de una simple configuración amp-analytics JSON con el script de AMP (más información).
  • Desde Google Search Console, dentro de la funcionalidad de Discover y filtrando por Apariencia «Web Stories», o desde el apartado Resultados de búsqueda, filtrando por tipo (Web o Imágenes) y después añadiendo el filtro de Apariencia «Web Stories».

WORDPRESS SACA EL PLUGIN OFICIAL PARA CREAR WEB STORIES

Para poder descargar el plugin oficial de Google desde el CMS de WordPress, simplemente tienes que ir a Plugins > Añadir Nuevo > «Web Stories» y podrás encontrarlo. También puedes descargarlo aquí directamente.

Un ejemplo creado con el plugin de WP en esta web es «Test Web Stories en WP«, creado en pocos minutos y que sirve como ejemplo para ver una url que es indexada por Google, con un único microformato aplicado de Article y bajo un framework amp (pero sin referencia amphtml, sólo canonical autoreferenciada).

Puedes ver PASO a PASO como crear una Web Story en WP desde la página oficial «Web Stories for WordPress – Documentation«.

GOOGLE AVISA SOBRE PENALIZACIONES EN LAS WEB STORIES POR SU USO COMO DOORWAYS

A finales del mes de enero de 2021, Google publicó un post y un vídeo donde explican la no recomendación de usar las web stories como una vía de adquisición de tráfico forzada hacia la web (con matices). Y es que cada vez se ven más artículos de sitios web que vienen a recomendar el uso de este formato como anuncios hacia otro tipo de contenido.

Y es que este anuncio de Google, vendría a ser algo similar a lo que ya comentó y que no recomendó su uso sobre los típicos avisos de «Ver artículo completo en …» donde usarían la versión de página AMP para derivar tráfico a su versión web con el objetivo de poder monetizarlas.

De acuerdo a Google, el uso de este tipo de prácticas genera un mala experiencia de usuario, donde en ocasiones se usan dos o tres frames en una story y enlazan a la versión web, lo que supondría el uso de las acciones penalizables llamadas «páginas de puerta o doorway«.

Ya Google anunció que no posicionarán urls de web stories cuya calidad del contenido sea baja, es decir, evitar publicar web stories que prometen al usuario un determinado contenido, sin cumplir esa promesa y obligándole a hacer clic en «ver contenido completo» para ver el contenido ampliado en otra página y poder monetizarlas. Sin embargo Google ya ha habilitado la opción de poder monetizar las stories bajo la opción de «Anuncios programáticos».

Esto no quiere decir que por ejemplo determinado contenido como Google ejemplifica en su comunicado como por ejemplo una web story sobre una receta, no incluya además un enlace para ver más ampliamente el contenido del mismo, como por ejemplo más imágenes, o vídeos explicativos, otras recetas recomendadas, etc.

“A critical ranking signal at Google is the quality of your content. And a one- or two-page teaser for your blog post doesn’t tell a satisfying story to a reader, so Google will do its very best to not show these to users.”

Paul Bakaus – Google Web Creators – Blog Post Google
Esta es la web story creada por Google donde explica esta acción

Diferencia entre la portada y el póster de una Web Story

A la hora de subir el póster de la web story, o carátula que se mostrará en los resultados de búsqueda, Discover, etc, hay que tener en cuenta que sólo se permite subir como póster de la misma, una imagen de alta calidad y representativa de la story, y no un vídeo o animación. Añadir el title de la story, el nombre del publisher y un logo, ya que serán los elementos que se mostrarán en los servicios de Google como preview de ese formato. Hay que tener en cuenta que el tamaño del título sólo debería ocupar 1/3 de la imagen y que del resto de la imagen, esta, debería ser lo más reconocible y visualmente relevante posible.

En lo que se refiere al cover o portada de la web story, hay que tener en cuenta que esa página de portada será la que el usuario se encuentre cuando clique desde Google y llegue a ese formato story, por lo que es importante considerar que: se trata de la landing page de la misma y es en esta página donde puede usar animaciones o vídeo para mejorar el engagement del usuario o música de fondo para hacer la experiencia más amigable.

Cómo asegurarte de que tu web story es indexable por Google (herramientas)

  • Prueba de AMP: teniendo en cuenta que las web story para su creación se montan bajo framework AMP; resulta clave que nuestra url pase la validación y se definan los microformatos adecuados. Para ello esta herramienta no permitirá validarlo tanto para una url pública como para código en estado de desarrollo.
  • Search Console: desde el apartado de «Cobertura» es posible detectar potenciales o actuales errores que se sirven desde tu sitio web, categorizándolos Google por sus diferentes tipologías: 404, soft 404, 5xx, etc. Es más, dentro de Search Console en el apartado de «AMP«, podrás ver en detalle, el estado de tus páginas AMP, donde se incluirán tus web stories.
  • Inspección de URL: dentro de GSC de nuevo, está disponible una nueva funcionalidad que te permite analizar una url concreta de tu dominio y averiguar si pasa la prueba «en tiempo real» en cuanto a indexación, canonicals, datos estructurados, etc. También está disponible esta misma funcionalidad desde el panel de Webmasters de Bing.