Prácticas recomendadas para crear historias web

Si quieres mantener el interés de tus usuarios, sigue nuestras prácticas recomendadas para crear historias web. Te recomendamos que primero te centres en las tareas que consideramos fundamentales. Si tienes tiempo, sigue también las demás prácticas recomendadas.

Narrativa de marca

Prácticas fundamentales de narrativa de marca
Da prioridad al contenido de vídeo El contenido de vídeo es más atractivo que el texto y las imágenes, así que te recomendamos que utilices vídeos siempre que puedas y los complementes con imágenes y texto.

Otras prácticas recomendadas sobre la narrativa de marca

Prácticas recomendadas de narrativa de marca
Muestra tu punto de vista Ve más allá de los hechos. Comparte tus opiniones. Protagoniza tu historia. Explícala de un modo en que los usuarios puedan sentirse identificados.
Utiliza un arco narrativo Introduce cierto suspense en tu historia que motive a los lectores a pasar de una página a otra. Aporta contexto y utiliza recursos narrativos para acompañar a los usuarios por la historia. Haz que valga la pena seguirla hasta el final.

Diseño

Prácticas fundamentales de diseño
Menos es más Procura no incluir varias páginas que tengan mucho texto. Te recomendamos que incluyas unos 280 caracteres por página (la longitud de un tuit).
No tapes el texto Comprueba que en las páginas no haya ningún elemento que tape el texto. No incluyas texto incrustado; así evitas que el texto quede oculto si se cambia el tamaño del contenido para adaptarlo a las pantallas de los diferentes dispositivos.
Mantén el texto dentro de los límites Asegúrate de que los usuarios puedan ver todo el texto de tu historia web. No incluyas texto incrustado; así evitas que el texto quede fuera de los límites si se cambia el tamaño del contenido para adaptarlo a las pantallas de los diferentes dispositivos.
Usa animaciones con moderación Puedes incluir animaciones para dar vida a tus historias, pero evita que sean repetitivas o distraigan demasiado, porque los usuarios se acabarán cansando.

Otras prácticas recomendadas sobre el diseño

Prácticas recomendadas de diseño
Crea llamadas a la acción específicas para tus historias web Cuando aproveches historias que creaste originalmente para mostrarlas en redes sociales como Instagram, Snapchat o YouTube, asegúrate de quitar todas las llamadas a la acción que sean propias de alguna de estas plataformas. Los usuarios tienen que poder hacer cualquier cosa que se sugiera en tus historias web.
Utiliza vídeos e imágenes con sangrado completo Incluye recursos con sangrado completo en tus historias para ofrecer una experiencia más inmersiva a los lectores.
No uses imágenes ni vídeos distorsionados o de baja resolución Utiliza imágenes de alta calidad y ten cuidado al cambiar el tamaño de las imágenes al formato vertical.
Añade un logotipo a la página de portada Incluye un logotipo de alta resolución que represente a tu marca.
Usa vídeos cortos Recomendamos que los vídeos duren menos de 15 segundos por página, con un máximo de 60 segundos.
Incluye sonido Los clips de audio que incluyas deben ser de alta calidad, durar al menos 5 segundos y tener el volumen equilibrado. Asegúrate de que el contenido hablado se oiga bien.
Configura las historias que solo incluyan vídeos para que avancen automáticamente Puede ser buena idea hacer que las historias web basadas en vídeos avancen automáticamente si quieres que tus usuarios se pongan cómodos para verlas.

SEO

Prácticas fundamentales de SEO
Ofrece contenido de alta calidad Al igual que con las páginas web, lo más importante es ofrecer a los usuarios contenido de alta calidad que les resulte útil e interesante. Explica una historia completa y sigue las prácticas recomendadas de narrativa indicadas más arriba para mantener el interés de los usuarios.
Usa títulos breves Procura que los títulos no pasen de 90 caracteres. Lo ideal es utilizar títulos descriptivos que tengan menos de 70 caracteres.
Asegúrate de que la Búsqueda de Google pueda encontrar tu historia No incluyas ningún atributo noindex en tu historia; si lo haces, Google no podrá indexar la página ni, por tanto, mostrarla en los resultados de búsqueda. Además, deberías añadir tus historias web a tu sitemap. Para saber si Google puede encontrar tus historias web, consulta el informe de cobertura de indexación y el informe "Sitemaps" de Search Console.
Haz que tu historia se referencie a sí misma como canónica Todas las historias web deben ser canónicas. Asegúrate de que cada historia web tenga un atributo link rel="canonical" que apunte a sí misma. Por ejemplo: <link rel="canonical" href="https://www.example.com/url/to/webstory.html">
Añade metadatos

Asegúrate de que tus historias web siguen las directrices de metadatos de las historias AMP. Añade las mismas etiquetas que incluirías en una página web. Por ejemplo:

Otras prácticas recomendadas sobre SEO

Prácticas recomendadas de SEO
Incluye datos estructurados Te recomendamos que añadas datos estructurados a tu historia web para que la Búsqueda de Google pueda entender mejor su estructura y contenido.
Incluye texto alternativo en las imágenes Te aconsejamos que incluyas texto alternativo en las imágenes para mejorar la descubribilidad de tu historia.
Integra las historias en tu sitio web

Te sugerimos que integres las historias web en tu sitio web; por ejemplo, puedes incluir enlaces a ellas en tu página principal o en páginas de categorías, según corresponda. Supongamos que has creado una historia web que trata sobre un destino turístico y tienes una página en la que aparecen todos tus artículos sobre viajes; en ese caso, deberías añadir un enlace a la historia web a esa página. También sería buena idea crear una página de destino dedicada, como www.example.com/stories, a la que enlazar desde páginas importantes de tu sitio web, como la página principal.

Añade elementos adjuntos de páginas de historias AMP Los elementos adjuntos de páginas de historias AMP te permiten aportar información adicional a tu historia web; por ejemplo, puedes proporcionar más detalles, profundizar en algún tema o ampliar el contenido presentado en la historia web.
Incluye subtítulos en los vídeos Añade subtítulos a tus vídeos para ayudar a los usuarios a entender tu historia. Procura no incrustarlos; así evitas que se solapen con otro contenido o queden fuera de la pantalla.
Optimiza las historias que solo incluyan contenido de vídeo

Te recomendamos que crees tus historias web con código HTML semántico. Sin embargo, hay herramientas de edición de historias web que, en vez de usar HTML semántico, convierten cada diapositiva en un archivo de vídeo en el que incrustan todo el texto. Si utilizas una de esas herramientas, añade todo el texto que aparece en el vídeo como atributo title del elemento amp-video. Este paso solo es necesario si no puedes utilizar etiquetas de marcado semántico en tus historias web.

Añade compatibilidad con pantallas horizontales Para que tus historias web puedan aparecer en los resultados de búsqueda de Google para ordenadores, añade compatibilidad con pantallas horizontales.

Aspectos técnicos

Prácticas técnicas fundamentales
Crea historias válidas Las historias web deben ser páginas AMP válidas. Para comprobarlo, examina tu historia con la herramienta de validación de AMP y corrige los errores que se detecten.
No incluyas texto en la imagen de póster No utilices imágenes que contengan texto incrustado, porque entonces puede que los usuarios no vean correctamente el título de la historia cuando la previsualicen en los resultados de búsqueda. En ese caso, quizá decidan no seguir leyéndola.
Utiliza imágenes de póster con el tamaño y la relación de aspecto adecuados La imagen enlazada con el atributo <amp-story> poster-portrait-src debe tener, como mínimo, 640x853 píxeles y una relación de aspecto de 3:4.
Asegúrate de que el logotipo tenga la relación de aspecto adecuada La imagen de logotipo enlazada con el atributo <amp-story> publisher-logo-src debe tener, como mínimo, 96x96 píxeles y una relación de aspecto de 1:1.

Otras prácticas recomendadas sobre aspectos técnicos

Prácticas técnicas recomendadas
Incluye og:image Te recomendamos que incluyas og:image en las etiquetas <meta> para mejorar la descubribilidad de tu historia.

Otros recursos