Google Web Stories AMP, en Discover y Google Search

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 en la app de Google, dentro de Discover (al inicio) y se irá extendiendo al resto de países y servicios de Google. 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 (más información técnica aquí):

  • 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 aquí):

  • 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 de optimización en buscadores aquí).

  • 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.
  • Web Stories posiciona en 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 JSON con el script de AMPamp-analytics. (Más información sobre la medición de las WS con GA aquí).
  • 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 ésta url «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«.