Para mantener a sus lectores enganchados, siga nuestras mejores prácticas para crear
Web Stories. Recomendamos centrarse primero en las tareas críticas. Si tiene más tiempo, siga también las mejores prácticas recomendadas.
Narrativa
| Mejores prácticas críticas de narrativa | |
|---|---|
| Video primero | El video es más atractivo que el texto o las imágenes. Use tanto video como sea posible y compleméntelo con imágenes y texto. |
Más mejores prácticas de narrativa
| Mejores prácticas recomendadas de narrativa | |
|---|---|
| Aporte su perspectiva | Vaya más allá de los hechos. Comparta sus opiniones. Sea el protagonista de su propia historia. Haga que sea cercana. |
| Tenga un arco narrativo | Cree suspense en su historia de una página a otra. Acompañe al usuario en el viaje proporcionando contexto y narrativa. Ofrezca una recompensa por quedarse con usted hasta el final. |
Diseño
| Mejores prácticas críticas de diseño | |
|---|---|
| Reduzca su recuento de caracteres | Evite incluir varias páginas con bloques de texto. Considere reducir el texto a aproximadamente 280 caracteres por página (la longitud de un tuit). |
| No bloquee el texto | Asegúrese de que el texto no esté bloqueado por otro contenido en la página. Evite el texto integrado en la imagen; al no usar texto integrado, evita que el texto se bloquee cuando se redimensiona para ajustarse a varios tamaños de dispositivo. |
| Mantenga el texto dentro de los límites | Asegúrese de que todo el texto en su Web Story sea visible para el lector. Evite el texto integrado en la imagen; al no usar texto integrado, evita que el texto desborde cuando se redimensiona para ajustarse a varios tamaños de dispositivo. |
| Use las animaciones con conciencia | Dé vida a sus historias con animaciones. Evite animaciones que distraigan o sean repetitivas y que puedan causar fatiga. |
Más mejores prácticas de diseño
| Mejores prácticas recomendadas de diseño | |
|---|---|
| Use llamadas a la acción específicas de Web Stories | Al volver a crear historias que se crearon originalmente para una plataforma social como Instagram, Snapchat o YouTube, asegúrese de eliminar cualquier llamada a la acción para el lector específica de una plataforma determinada. Asegúrese de que los usuarios puedan seguir cualquier acción sugerida en su Web Story. |
| Use videos e imágenes a sangre | Incluya recursos a sangre en sus historias para crear una experiencia más inmersiva para los lectores. |
| Evite imágenes y videos de baja resolución o distorsionados | Use imágenes de alta calidad y tenga cuidado al cambiar el tamaño de las imágenes a formato vertical. |
| Agregue un logotipo a su página de portada | Incluya un logotipo de alta resolución que represente a su marca. |
| Acorte la duración del video | Recomendamos videos de menos de 15 segundos por página, o 60 segundos como máximo. |
| Incluya audio | Use clips de audio de alta calidad que duren al menos 5 segundos con un volumen equilibrado, y asegúrese de que la voz sea audible. |
| Considere el avance automático para historias de solo video | Una experiencia de avance automático para Web Stories basadas en video puede funcionar muy bien para una experiencia relajada. |
SEO
| Mejores prácticas críticas de SEO | |
|---|---|
| Proporcione contenido de alta calidad | Como cualquier página web, proporcionar contenido de alta calidad que sea útil e interesante para sus lectores es lo más importante que puede hacer. Incluya una narrativa completa y siga las mejores prácticas de storytelling para mantener a sus lectores enganchados. |
| Mantenga el título corto | Mantenga los títulos por debajo de 90 caracteres. Recomendamos usar un título descriptivo que tenga menos de 70 caracteres. |
| Asegúrese de que la Búsqueda de Google pueda encontrar su historia | No incluya un noindex atributo en su historia; este atributo bloquea que Google indexe la página y evita que aparezca en Google. Además, agregue sus Web Stories a su sitemap. Puede verificar si Google puede encontrar sus Web Stories con el Informe de coberturade índice y el Informe de Sitemaps en Search Console. |
| Haga que la historia sea self-canonical | Todas las Web Stories deben ser canónicas. Asegúrese de que cada Web Story tenga un link rel="canonical" hacia sí misma. Por ejemplo: <link rel="canonical" href="https://www.example.com/url/to/webstory.html"> |
| Adjunte metadatos | Asegúrese de que sus Web Stories sigan las 
|
Más prácticas recomendadas de SEO
| Prácticas recomendadas de SEO recomendadas | |
|---|---|
| Incluir datos estructurados | Recomendamos incluir datos estructurados en tu Web Story para ayudar a la Búsqueda de Google a entender la estructura y el contenido de tu Web Story. |
| Incluir texto alternativo en las imágenes | Recomendamos incluir texto alternativo en tus imágenes para mejorar la visibilidad de tu historia. |
| Integrar historias en tu sitio web | Recomendamos integrar Web Stories en tu sitio web, como enlazarlas desde tu página de inicio o páginas de categorías cuando corresponda. Por ejemplo, si tu Web Story trata sobre un destino de viaje y tienes una página que enumera todos tus artículos de viaje, enlaza también las Web Stories en esa página de categoría. Una página de destino especial adicional como |
| Usar archivos adjuntos de página de historia AMP | Los archivos adjuntos de página de historia AMP se pueden utilizar para presentar información adicional junto con tu Web Story. Esto puede ser útil para proporcionar detalles adicionales, inmersiones profundas o recorridos continuos para el contenido presentado en tu Web Story. |
| Incluir subtítulos en el vídeo | Añade subtítulos a tu vídeo para ayudar a los lectores a entender mejor tu historia. Evita subtítulos incrustados en el vídeo para asegurarte de que no se superpongan con otro contenido ni salgan de la pantalla. |
| Optimizar historias exclusivamente de vídeo | Recomendamos que utilices HTML semántico para crear tu Web Story. Sin embargo, algunas herramientas de edición de Web Stories pueden exportar una historia que formatea cada diapositiva como un archivo de vídeo que incrusta todo el texto en el vídeo. En este caso, te recomendamos que añadas el texto exacto que se muestra dentro del vídeo como un atributo  |
| Añadir compatibilidad con pantallas horizontales | Para permitir que las Web Stories aparezcan en los resultados de Búsqueda de Google de escritorio, añade compatibilidad con pantallas horizontales. |
Técnico
| Prácticas técnicas recomendadas críticas | |
|---|---|
| Hacer que la historia sea válida | Las Web Stories deben ser páginas AMP válidas. Para evitar problemas de AMP no válidas, prueba tu historia utilizando el Herramienta AMP Validator y corrige cualquier error detectado. |
| No incluyas texto en la imagen del póster | Evita usar imágenes que contengan texto incrustado, ya que esto podría obstruir el título de tu historia cuando los usuarios la previsualicen en los resultados de búsqueda. Si los usuarios no pueden leer claramente el título, es menos probable que sigan leyendo. |
| Incluye el tamaño y la relación de aspecto correctos de la imagen del póster | Asegúrate de que la imagen vinculada a tu <amp-story> poster-portrait-srcatributo sea de al menos 640x853px y utiliza una relación de aspecto de 3:4. |
| Incluye la relación de aspecto correcta para el logotipo | Asegúrate de que la imagen del logotipo vinculada a tu <amp-story> publisher-logo-srcatributo sea de al menos 96×96 px y con una relación de aspecto de 1:1. |
Más mejores prácticas técnicas
| Mejores prácticas técnicas recomendadas | |
|---|---|
Incluye og:image | Recomendamos incluir og:image en tus<meta> etiquetas para mejorar la visibilidad de tu historia. |
Otros recursos
- Web Stories:
Recursos sobre cómo crear Web Stories del AMP Project. - Habilita Web Stories en la Búsqueda de Google:
Guía orientada a desarrolladores sobre cómo crear Web Stories que cumplan con las pautas técnicas requeridas para aparecer en la Búsqueda de Google. - Sitio web de AMP stories: Capacidades del formato Web Stories
enfocadas en desarrolladores. - Accesibilidad web: Consejos para ayudar a garantizar que tu Web Story sea accesible para todos los usuarios.
- Pautas de datos estructurados: Detalles sobre cómo agregar datos estructurados para ayudar a la Búsqueda de Google a entender tu contenido.
Alien Road
Cómo lo aplicamos
Web Story quality guidelines are mostly editorial: pacing, image quality, text length per frame. We brief the client’s design team on them directly, since the constraints are unfamiliar to people used to article layouts.
Servicios relacionados