Pour fidéliser vos lecteurs, suivez nos bonnes pratiques pour créer des
Web Stories. Nous vous recommandons de vous concentrer d’abord sur les tâches critiques. Si vous avez plus de temps, suivez également les bonnes pratiques recommandées.
Narration
| Bonnes pratiques critiques en matière de narration | |
|---|---|
| La vidéo d’abord | La vidéo est plus engageante que le texte ou les images. Utilisez autant de vidéo que possible et complétez avec des images et du texte. |
Plus de bonnes pratiques en matière de narration
| Bonnes pratiques recommandées en matière de narration | |
|---|---|
| Apportez votre perspective | allez au-delà des faits. Partagez vos opinions. Soyez le protagoniste de votre propre histoire. Rendez-la accessible. |
| Ayez un arc narratif | Créez du suspense dans votre histoire d’une page à l’autre. Emmenez l’utilisateur dans le voyage en fournissant du contexte et de la narration. Offrez une récompense pour être resté avec vous jusqu’à la fin. |
Design
| Bonnes pratiques critiques en matière de design | |
|---|---|
| Réduisez votre nombre de caractères | Évitez d’inclure plusieurs pages avec des murs de texte. Envisagez de réduire le texte à environ 280 caractères par page (la longueur d’un tweet). |
| Ne bloquez pas le texte | Assurez-vous que le texte n’est pas bloqué par d’autres contenus sur la page. Évitez le texte incrusté ; en n’utilisant pas de texte incrusté, vous empêchez le texte d’être bloqué lorsqu’il est redimensionné pour s’adapter à différentes tailles d’appareils. |
| Gardez le texte dans les limites | Assurez-vous que tout le texte de votre Web Story est visible pour le lecteur. Évitez le texte incrusté ; en n’utilisant pas de texte incrusté, vous empêchez le texte de déborder lorsqu’il est redimensionné pour s’adapter à différentes tailles d’appareils. |
| Utilisez les animations avec modération | Donnez vie à vos histoires avec des animations. Évitez les animations distrayantes ou répétitives qui peuvent causer de la fatigue. |
Plus de bonnes pratiques en matière de design
| Bonnes pratiques recommandées en matière de design | |
|---|---|
| Utilisez des appels à l’action spécifiques aux Web Stories | Lors de la recréation d’histoires créées à l’origine pour une plateforme sociale comme Instagram, Snapchat ou YouTube, veillez à supprimer tout appel à l’action pour le lecteur spécifique à une certaine plateforme. Assurez-vous que les utilisateurs sont capables de suivre toutes les actions suggérées dans votre Web Story. |
| Utilisez des vidéos et des images en plein écran | Incluez des ressources en plein écran dans vos histoires pour créer une expérience plus immersive pour les lecteurs. |
| Évitez les images et vidéos de faible résolution ou déformées | Utilisez des images de haute qualité et faites attention lors du redimensionnement des images au format portrait. |
| Ajoutez un logo à votre page de couverture | Incluez un logo haute résolution qui représente votre marque. |
| Raccourcissez la durée de la vidéo | Nous recommandons des vidéos de moins de 15 secondes par page, ou 60 secondes maximum. |
| Incluez de l’audio | Utilisez des clips audio de haute qualité d’une durée d’au moins 5 secondes avec un volume équilibré, et assurez-vous que la parole est audible. |
| Envisagez l’avancement automatique pour les histoires uniquement vidéo | Une expérience à avancement automatique pour les Web Stories basées sur la vidéo peut bien fonctionner pour une expérience détendue. |
SEO
| Bonnes pratiques SEO essentielles | |
|---|---|
| Fournissez un contenu de haute qualité | Comme toute page web, fournir un contenu de haute qualité qui est utile et intéressant pour vos lecteurs est la chose la plus importante que vous puissiez faire. Incluez un récit complet et suivez les bonnes pratiques de narration pour garder vos lecteurs engagés. |
| Gardez le titre court | Gardez les titres à moins de 90 caractères. Nous recommandons d’utiliser un titre descriptif de moins de 70 caractères. |
| Assurez-vous que la Recherche Google peut trouver votre story | N’incluez pas d’attribut noindex dans votre story ; cet attribut empêche Google d’indexer la page et l’empêche d’apparaître sur Google. De plus, ajoutez vos Web Stories à votre sitemap. Vous pouvez vérifier si Google peut trouver vos Web Stories avec le Rapport sur la couverturede l’index et le Rapport Sitemaps dans la Search Console. |
| Rendez la story self-canonical | Toutes les Web Stories doivent être canoniques. Assurez-vous que chaque Web Story possède un link rel="canonical" vers elle-même. Par exemple : <link rel="canonical" href="https://www.example.com/url/to/webstory.html"> |
| Ajoutez des métadonnées | Assurez-vous que vos Web Stories suivent les 
|
Plus de bonnes pratiques SEO
| Bonnes pratiques SEO recommandées | |
|---|---|
| Inclure des données structurées | Nous recommandons d’inclure des données structurées dans votre Web Story pour aider Google Search à comprendre la structure et le contenu de votre Web Story. |
| Inclure du texte alternatif sur les images | Nous vous recommandons d’inclure du texte alternatif sur vos images pour améliorer la visibilité de votre story. |
| Intégrer les stories à votre site web | Nous vous recommandons d’intégrez les Web Stories dans votre site web, par exemple en les liant depuis votre page d’accueil ou vos pages de catégories le cas échéant. Par exemple, si votre Web Story concerne une destination de voyage et que vous avez une page qui répertorie tous vos articles de voyage, liez également les Web Stories sur cette page de catégorie. Une page de destination spéciale supplémentaire comme |
| Utiliser les pièces jointes de page de story AMP | Les pièces jointes de page de story AMP peuvent être utilisées pour présenter des informations supplémentaires aux côtés de votre Web Story. Cela peut être utile pour fournir des détails supplémentaires, des analyses approfondies ou des parcours continus pour le contenu présenté dans votre Web Story. |
| Inclure des sous-titres sur la vidéo | Ajoutez des sous-titres à votre vidéo pour aider les lecteurs à mieux comprendre votre story. Évitez les sous-titres incrustés dans la vidéo afin de vous assurer qu’ils ne se superposent pas à d’autres contenus ou ne dépassent pas de l’écran. |
| Optimiser les stories entièrement vidéo | Nous vous recommandons d’utiliser du HTML sémantique pour créer votre Web Story. Cependant, certains outils d’édition de Web Stories peuvent à la place exporter une story qui formate chaque diapositive comme un fichier vidéo intégrant tout le texte dans la vidéo. Dans ce cas, nous vous recommandons d’ajouter le texte exact affiché à l’intérieur de la vidéo en tant qu’attribut  |
| Ajouter la prise en charge des affichages paysage | Pour permettre aux Web Stories d’apparaître dans les résultats de recherche Google sur ordinateur, ajoutez la prise en charge des affichages paysage. |
Technique
| Bonnes pratiques techniques essentielles | |
|---|---|
| Rendre la story valide | Les Web Stories doivent être des pages AMP valides. Pour éviter les problèmes d’AMP non valides, testez votre Story en utilisant le Outil AMP Validator et corrigez toutes les erreurs détectées. |
| N’incluez pas de texte dans l’image de l’affiche | Évitez d’utiliser des images contenant du texte incrusté, car cela pourrait masquer le titre de votre story lorsque les utilisateurs la prévisualisent dans les résultats de recherche. Si les utilisateurs ne parviennent pas à lire clairement le titre, ils seront peut-être moins enclins à continuer la lecture. |
| Incluez la taille et le format d’image d’affiche corrects | Assurez-vous que l’image liée à votre <amp-story> poster-portrait-srcattribut mesure au moins 640x853px et utilisez un format d’image de 3:4. |
| Incluez le format d’image correct pour le logo | Assurez-vous que l’image du logo liée à votre <amp-story> publisher-logo-srcattribut mesure au moins 96×96 px et a un format d’image de 1:1. |
Autres bonnes pratiques techniques
| Bonnes pratiques techniques recommandées | |
|---|---|
Incluez og:image | Nous vous recommandons d’inclure og:image dans vos<meta> balises pour améliorer la découvrabilité de votre story. |
Autres ressources
- Web Stories:
Ressources sur la création de Web Stories à partir d’AMP Project. - Activez les Web Stories sur la recherche Google:
Guide destiné aux développeurs sur la création de Web Stories conformes aux directives techniques requises pour apparaître dans la recherche Google. - Site web des AMP stories: Capacités du format Web Stories
axées sur les développeurs. - Accessibilité Web: Conseils pour garantir que votre Web Story soit accessible à tous les utilisateurs.
- Directives relatives aux données structurées: Détails sur l’ajout de données structurées pour aider la recherche Google à comprendre votre contenu.
Alien Road
Comment nous l'appliquons
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.
Services associés