Écrit par Que vous soyez un professionnel du marketing B2C ou B2B, un freelance ou un blogueur, vous ne pouvez pas ignorer la diversité des possibilités offertes par la nouvelle fonctionnalité de Google : AMP Stories.
- Vous voulez augmenter votre exposition dans les résultats de recherche?
- Vous utilisez déjà des stories sur Facebook ou réseaux sociaux similaires?
- Vous produisez et diffusez du contenu pour convertir des visiteurs en clients?
Avec AMP Stories, Google offre une excellente place en haut de la page de résultats du moteur de recherche (SERP) pour vos meilleurs contenus.
Ce nouveau format vous donnera plus de possibilités de promotion de votre marque, de votre contenu, de vos produits ou de vos services.
Après avoir lu ce guide complet:
- Vous comprendrez ce qu’est une AMP Story et quelles sont les différences avec les autres formats de type “Story”
- Vous saurez pourquoi vous devez commencer dès à présent et comment améliorer votre trafic ainsi que votre référencement avec les Google Stories
- Vous aurez pleins d’idées pour utiliser les AMP Stories grâce aux cas d’utilisation et aux exemples (L’Oréal a fait quelque chose de très intéressant avec ce format – à ne pas manquer)
- Et finalement, vous découvrirez comment créer votre première Story. Soit avec du dévelopement HTML ou en s’appuyant sur un éditeur de Google Story.
Table des matières
C’est quoi une AMP Story?
AMP est l’acronyme de Accelerated Mobile Page. Il s’agit d’une technologie ouverte prise en charge par Google. Cette technologie offre un moyen de rendre l’expérience Web sur mobile meilleure et plus rapide.
Les sites Web AMP existent depuis le début de 2016. Vous possédez peut-être déjà une version AMP de votre site mobile. Ou du moins, vous avez déjà visité un site Web AMP depuis votre mobile. Ils sont identifiés par une petite icône dans le résultat de la recherche.
Les pages AMP se partagent le sommet du SERP sur mobile parce qu’elles se chargent vite – très vite.
En effet, Google récompense les sites Web rapides. Ceux offrant une meilleure expérience utilisateur.
Et maintenant, merci d’accueillir ce nouveau format du SERP Google : les AMP Stories.
AMP Stories est une extension du framework AMP. Une AMP Story fournit un moyen engageant et visuel de consommer du contenu, en plein écran.
En effet, une Story peut réunir des images, des vidéos et du texte dans un flux visuel animé.
Avec une Story, vous avez la capacité d’informer votre audience et de promouvoir vos produits ou services dans un format adapté aux appareils mobiles. A noter, une AMP Story fonctionne parfaitement en version bureau.
Les AMP Stories offrent une interaction tactile pour votre lecteur. Vous pouvez insérer des Call-to-Actions pour afficher plus d’informations ou même rediriger vers votre site Web principal depuis une Story.
AMP Stories est une technologie open source. Vous pouvez créer une Story en quelques lignes de code HTML et Javascript. Pas besoin d’une application native ou d’un réseau privé et fermé pour héberger vos créations. Les AMP Stories sont conçues pour le Web ouvert.
Un autre point critique, comme le mentionne Google sur son blog: « Ultérieurement, Google prévoit de diffuser les AMP Stories dans un plus grand nombre de produits Google et d’améliorer la façon dont ils apparaissent dans le moteur de recherche. »
Cette annonce officielle a été faite lors de la conférence AMP à Tokyo en février 2019 : la recherche Google commence à intégrer des AMP Stories dans son moteur de recherche.
Ce n’est encore que le début. De plus en plus de contenu seront ront bientôt disponibles dans votre moteur de recherche préféré.
L’histoire ne fait que de commencer.
AMP Stories versus Stories des réseaux sociaux
À première vue, vous pourriez penser que le format AMP Story n’est qu’une pâle copie de ce qui existe déjà pour Snapchat, Facebook, Instagram et d’autres réseaux sociaux.
On peut se poser la question: Quelles sont les principales différences entre Google AMP Stories et les Stories des réseaux sociaux?
Voici quelques réponses :
- Les Stories des réseaux sociaux ont un avantage certain pour ce qui est de la facilité de création. En quelques clics, vous pouvez publier une histoire attrayante avec vos amis ou audience depuis les réseaux sociaux.
- Avec AMP Stories, vous avez un contrôle total du processus de création et vous pouvez intégrer des interactions supplémentaires comme des CTA, des contenus embarqués ou des liens vers des articles associés.
- L’avantage non négligeable des AMP Stories est qu’elles sont indexées par le moteur de recherche Google.
Le tableau ci-dessous vous fournit une comparaison entre les AMP Stories et les autres formats de Story.
Au final, le but n’est pas de définir un gagnant entre les différents formats. Tous les formats de Story doivent être considérés dans une approche omnicanale.
A vous de voir lequel format est le meilleur pour communiquer avec votre audience.
Pourquoi les AMP Stories doivent faire partie de votre stratégie de marketing de contenu
Aimez-vous les histoires?
Bien sûr, nous aimons tous les histoires, surtout quand elles sont bonnes.
Si vous êtes une entreprise B2C ou un éditeur, vous avez certainement déjà adopté une approche “Story” pour dialoguer avec votre public.
Les AMP Stories pourront donc parfaitement s’intégrer à votre stratégie de contenu et s’appuyer sur les contenus déjà existant.
Vous êtes dans le B2B ? Alors ne négligez pas le storytelling. Ce nouveau format pourrait également vous servir pour “éduquer” vos prospects.
Le marketing de contenu est de plus en plus populaire dans les industries B2B. Une relation est établie entre l’acheteur potentiel et l’entreprise utilisant un contenu éducatif tels que des articles de blog ou des vidéos.
Si vous attirez déjà des prospects et interagissez avec votre public avec un excellent marketing de contenu. Voici quelques objectifs que les Google Stories pourraient vous aider à remplir.
Attirer l’attention de vos clients
Google définit les AMP Stories comme un «format accessible à tous».
Le flux visuel peut servir à attirer l’oeil de vos lecteurs et les inviter à continuer l’expérience sur votre site Web. Ainsi ils pourront en découvrir plus sur votre entreprise, comme par exemple vos produits ou vos services.
Guider le lecteur
Des Boutons d’Incitation à l’Action (ou CTA) peuvent être insérés dans vos AMP Stories.
Le lecteur sera redirigé vers une page produit ou une landing page afin de capturer davantage d’informations sur votre visiteur via un formulaire dédié.
Créer des liens entre vos Stories et vos meilleurs contenus
Il faut définir une AMP Story comme un élément de contenu associé à votre contenu principal.
Par exemple, si vous avez un article de blog détaillé tel qu’un guide «complet». Vous pouvez créer une courte AMP Story comportant l’essentiel de votre article.
Utilisez judicieusement la dernière diapositive appelée «bookend», qui vous permettra de proposer des liens vers des articles connexes, liens d’appel à l’action, du texte, etc.
Ensuite, partagez votre Story par le biais des réseaux sociaux ou dans votre newsletter. Si votre audience aime votre Story, elle suivra le lien et continue à lire l’article complet.
Les gens partagent ce qu’ils aiment
Comme pour les vidéos, avec AMP Story vous obtiendrez un taux d’engagement plus fort. Vos Stories auront plus de chances d’être partagées, vous obtiendrez de bons résultats et ceux à moindre coût.
En effet, il est plus facile et économique de créer une AMP Story qu’une vidéo.
Soyez les premiers
Comme AMP Stories est nouveau, vous êtes peut-être le premier dans votre niche à adopter cette nouvelle façon de toucher votre public.
Toute entreprise ayant une stratégie de marketing de contenu trouvera comment incorporer les AMP Stories dans ses plans d’action, comme par exemple au travers de:
- Tutoriels
- Descriptif produit
- Catalogue de services
- Questions et Réponses
Etre premier vous donnera un avantage concurrentiel et en particuler dans le domaine du référencement.
AMP Stories et le SEO pour augmenter votre trafic depuis les mobiles
Ce ne sera sans doute pas une surprise si je vous dis que le contenu sur le web est de plus en plus visionné depuis les téléphones mobiles. Par conséquent, la recherche Google se fait de plus en plus depuis un mobile !
Vous lisez dailleurs peut-être cet article depuis votre mobile …
En effet, plus de 60% du trafic de recherche organique provient d’appareils mobiles. Il y a aujourd’hui plus de personnes qui effectuent des recherches depuis leur mobile que depuis leur ordinateur de bureau.
Google a lancé son mobile-first index en 2016. Et en décembre 2018, ils ont annoncé qu’ils utilisaient désormais l’indexation mobile pour plus de la moitié des pages des résultats de recherche dans le monde.
Ça veut dire quoi?
Lorsque vous recherchez quelque chose sur Google, il est plus probable que vous recherchiez une page analysée et indexée en tant que version mobile de cette page.
Si vous n’avez pas encore commencé une approche mobile-first ou si vous n’avez pas pris en compte le canal mobile dans votre stratégie, commencez dès maintenant !
Rappelez-vous : AMP signifie Accelerated Mobile Page. Ce format a été pensé pour offrir une expérience de contenu rapide aux utilisateurs mobiles. Et ceci est aussi vrai pour les AMP Stories.
Les AMP Stories au coeur du SERP Google
Pour le moment, les AMP Stories sont visibles sur les pages de résultats de Google au emplacements suivants :
- Sur mobile, dans une section intitulée Visual Stories
- Sur mobile, dans la recherche d’images avec “Swipe to Visit”
- Sur la version bureau on peut voir l’image de couverture de l’AMP Story apparaître dans les recherches organique.
Détaillons ensemble ces éléments.
Visual Stories
Lors de la dernière conférence AMPConf à Tokyo, Google a annoncé que les Stories seront placées en évidence dans une section de recherche Google sur mobile intitulée « Visual Stories« .
Liste de pages organiques
Si vous produisez du contenu de qualité, vous aurez peut-être l’occasion d’obtenir une visibilité importante au sommet du SERP de Google.
La liste de pages organiques affichent également les AMP Stories. L’image de couverture de la story est affichée à côté de la description.
Depuis un mobile, cliquez ici et vous serez redirigé sur Google pour la recherche “amp story is it worth starting”.
Swipe to Visit AMP Stories
Les AMP Stories (et tous les sites Web AMP) font également l’objet d’une mise en avant dans Google Search Image.
Il est désormais plus facile et plus rapide de visiter une page AMP à partir d’une recherche d’images grâce à la fonction: Swipe to Visit.
Il est aussi plus simple de commencer la visite d’un site web AMP en partant d’une recherche image. Vous pouvez simplement “balayer l’image” vers le haut pour naviguer sur le site. Le tweet ci-dessous vous montre comment cela marche.
Plus de stories sur Google Discover
Google Discover fera également la promotion de vos Stories. Si vous ne connaissez pas encore Google Discover, il s’agit d’un service accessible via l’application mobile Google. Ce service affiche du contenu personnalisé en s’appuyant sur vos habitudes de recherche et vos préférences.
Google Discover compte déjà plus de 800 millions d’utilisateurs par mois, il met en avant les contenus visuels et vidéos.
Les deux principaux canaux à surveiller pour les AMP Stories sont Google Search et Google Discover.
Votre question suivante devrait être :
Comment être premier sur Google avec des AMP Stories
Il n’y a pas de recette magique. Cependant, nous pouvons supposer que les tactiques de référencement utilisées pour vos contenus “classiques” fonctionnent également avec les AMP Stories.
Il est bon de savoir que les AMP Stories sont traités par Google comme une page normale sur sa page de recherche. Ainsi vos stories devront être visibles et indexables depuis votre site web.
Toutefois, Google aura peut-être plus de difficultés à classer vos Stories car elles contiennent moins de texte et de matière qu’un type de contenu plus riche tel qu’un article de blog.
Créer du contenu “evergreen”
Google aime les contenus evergreen. Ce type de contenu est souvent mis en avant via la “Featured Snippet” et est aussi apprécié par Google Discovery.
Trouvez des requêtes de recherches populaires dans votre secteur d’activité. Définissez le «Quoi / Comment / Pourquoi» d’un sujet et créer une story autour d’eux.
Les didacticiels et autres tutoriels peuvent aussi faire l’objet d’une excellent AMP Story.
Créer des liens entre vos page web performantes et vos Stories
Vous devez identifier les pages de votre site qui génèrent déjà du trafic. Créer ensuite une AMP Story contenant les points clés de cette page, puis lier la page et la Story avec un hyperlien.
La création de liens internes aide Google à comprendre en quoi consiste votre contenu.
Sachez qu’en utilisant des pages performantes, vous partagerez également un peu de son « pouvoir » avec la Story et ceci vous permettra de mieux vous classer sur Google.
La clé est dans une excellente expérience utilisateur
Vous devez créer de superbes Stories avec de beaux visuels et des animations fluides.
Le temps passé sur la page est un facteur de référencement important. Ainsi, le temps passé sur les Stories sera également crucial pour le classement sur Google.
Mais faites attention: ne soyez pas trop long, ou vous risquez d’ennuyer et perdre le lecteur.
Gardez à l’esprit que la story est un contenu “grignotable”; L’objectif est de susciter l’intérêt de votre audience et de la guider vers votre site Web, vos produits ou vos services.
Globalement, ce format offre un nouveau moyen d’atteindre votre public cible de manière organique.
Des exemples d’AMP Stories
AMP Stories et les médias
Il n’est pas surprenant que les médias et les entreprises de presse aient été les premiers à essayer les AMP Stories.
Le développement de cette nouvelle technologie a été testé avec huit éditeurs partenaires dont CNN, Conde Nast, Hearst, Mashable, Meredith, Mic, Vox Media et The Washington Post.
Ci-dessous, Le Washington Post propose une Story qui fonctionne en plein écran sur le bureau et évidemment sur le mobile.
Depuis un article vers une Story
Le journal suisse Blick suit un processus intéressant pour créer des AMP Stories à partir de ses meilleurs articles (et ceci avec Slack).
Le processus (décrit ici) peut être résumé en quelques étapes:
- L’éditeur sélectionne un article contenant une galerie d’images.
- L’URL de l’article et certaines informations sont fournies à un Slackbot personnalisé.
- Le Slackbot extrait les URL de chaque image de la galerie et génère le code AMP Story en HTML.
- Le code HTML est publié manuellement sur leur site web.
Le résultat est une AMP Story faite à partir de la galerie d’images. Chaque image de la galerie est affichée sous forme d’une page.
Des experiences “offline-to-online” grace les stories
L’Oréal, pour son produit La Roche Posay, a permis à ses clients de vivre une expérience “offline-to-online” exceptionnelle.
En scannant un code QR dans un magasin, le client est redirigé vers une AMP Story et reçoit des informations supplémentaires sur le produit. Ainsi cela lui permet de commencer une expérience produit immersive à partir de son téléphone, depuis le magasin.
Sans oublier que cette approche permet par la suite, de cibler les clients avec une campagne commerciale personnalisée.
Une interaction avec votre audience adaptée aux mobiles
Boost est une société Fintech qui aide ses clients à trouver, comparer et acheter des offres et forfaits mobile au Kenya.
Leur public cible est constitué de jeunes qui consomment la majeure partie de leur contenu en ligne via leurs mobiles.
Boost souhaitait rendre leur contenu plus attrayant et facile à lire pour ses utilisateurs. Ils ont réalisé que les articles de blog n’avaient pas le niveau d’engagement escompté.
Une fois passé au format AMP Stories, ils ont observé leur taux de conversion augmenter et remarqué que leur contenu a finalement été lu.
Le temps passé sur le site est passé de 20 secondes avec les articles de blog à presque 4 minutes avec AMP Stories. Et 87% de leurs lecteurs arrivent jusqu’au dernier slide de la story.
(Consultez leur présentation à la Conférence AMP 2019 pour plus de détails.)
Comment créer et publier votre première AMP Story
Pour créer votre première story, vous aurez besoin d’une connaissance de base de HTML et de CSS.
Google recommande également d’avoir une compréhension des concepts basiques du framework AMP. Cependant vous pourrez parvenir à de bons résultats sans connaître tous les détails de la technologie AMP.
Suivez ce guide, et vous aurez un belle histoire à raconter.
Comprendre la structure d’une AMP Story
Tout d’abord, essayons de comprendre la structure d’une AMP Story et ses principaux éléments.
Une AMP Story est composée de:
- Plusieurs pages
- Chaque page utilise des calques (layers) pour organiser le contenu (par exemple, verticalement, horizontalement, ou en colonnes)
- Un calque contient des éléments HTML et d’autres composants AMP
- La dernière page s’appelle «bookend» et vous permet d’afficher des crédits et le des contenus associés
Le code HTML et CSS doit respecter la convention du framework AMP. Et les élements doivents s’imbriquer de la manière suivantes.
Google propose un didacticiel détaillé qui vous permettra de créer votre première story en une heure. Regardez ce que j’ai réussi à réaliser à mon tout premier essai.
Je vous recommande fortement de tester le tutoriel. Même si par la suite, vous deviez utiliser un éditeur de Stories, il est toujours utile de comprendre les concepts fondamentaux des AMP Stories.
De plus, lorsque vous créez vos premières story, gardez à l’esprit les meilleures pratiques suivantes :
Les bonnes pratiques à suivre
Voici une liste non exhaustive des bonnes pratiques à suivre lors de la création d’AMP Stories:
- Fournissez une couleur de fond correspondante à la couleur dominante de votre story.
- Choisissez une couleur de police avec suffisamment de contraste
- Ne mettez pas trop de texte – restez concis
- Le ratio pour les images verticales est de 9/16 et les tailles d’images recommandées sont
- 720 x 1280
- 540 x 960
- 360 x 480
- La taille de la vidéo doit être inférieure à 4 Mo et au format MP4.
- Si votre vidéo est trop longue, coupez-la en morceaux plus petits et affichez un morceau par page.
Astuces avancées pour les AMP Stories
Vidéo: Passer automatiquement à la page suivante
Si vous avez décidé d’utiliser une vidéo dans votre Story, il est conseillé de passer automatiquement à la page suivante et de ne pas la lire en boucle (à moins que vous ne souhaitiez créer un effet de type «boomerang»).
En effet, le passage automatique à la page suivante assure la fluidité de votre récit et offre une meilleure expérience au lecteur.
La documentation officielle de l’AMP indique ce qui suit:
- Spécifiez à quel moment avancer automatiquement à la page suivante. Si ce paramètre est omis, la page n’avancera pas automatiquement. La valeur pour
auto-advance-afterdoit être soit:- Un temps d’attente positif avant de passer automatiquement à la page suivante
- Un identifiant d’une vidéo HTMLMediaElement ou d’une interface vidéo dont l’achèvement déclenche l’avancement automatique.
Pour faire plus simple, vous devez définir le paramètre auto-advance-after avec l’identifiant de la vidéo sur la page contenant celle-ci. Voir l’exemple ci-dessous.
Lien canonique et AMP Story
Google suggère que les AMP Stories doivent être un contenu autonome et avoir suffisamment d’informations pour exister par elles-mêmes et pouvoir être affichées dans la SERP pour mobile.
Les pages web “classiques” et les AMP Stories peuvent être liées dans le cadre de votre stratégie de contenu. Aux « yeux » du moteur de recherche Google, il s’agira toujours de deux éléments séparés.
Par conséquent, le lien canonique présent dans l’en-tête du document HTML doit pointer vers l’histoire elle-même, en l’identifiant comme document canonique.
Définissez <link rel="canonical" href="$STORY_URL"> dans l’en-tête de votre document HTML.
Mode paysage
Le format AMP Story a été conçu pour une expérience mobile. Quoi qu’il en soit, vous pouvez également créer une expérience de bureau immersive en mode plein écran.
Pour ce faire, vous devez définir l’attribut supports-landscape sur l’élément principal et unique amp-story .
Le framework fera le reste et fournira un rendu parfait de votre Story sur mobile et sur ordinateur.
Si le point de focalisation de votre image n’est pas centré, il ne sera pas bien affiché verticalement sur le mobile. Pour résoudre ce problème, vous pouvez ajouter l’attribut object-position sur une image.
AMP Story et Google Analytics
Il peut être tentant d’ajouter directement dans une AMP Story le tracking code de Google Analytics.
Ceci fonctionne, mais vous verrez très rapidement Google Search Engine se manifester et vous annoncer que « Custom JavaScript is not allowed » pour le format AMP.
Pour analyser vos AMP Stories, suivez les étapes suivantes.
Veuillez noter que j’ai testé plusieurs intégrations de Google Analytics et que seuls deux configurations fonctionnaient correctement: l’une simple et l’autre plus avancée. A vous de définir laquelle vous correspond le mieux.
Étape 1: Inclure le script amp-analytics
Ajoutez le code suivant dans le <head> de votre document.
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>Étape 2: Ajouter le code de configuration
Ajoutez les composants amp-analytics à la fin de la balise body, mais toujours dans le composant amp-story.
Si vous n’ajoutez pas le composant à l’intérieur du composant amp-story, vous aurez le problème suivant: “Tag ‘amp-story’ is not allowed to have any sibling tags (‘body’ should only have 1 child)”.
<amp-analytics type="googleanalytics">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXXXX-X"
},
"triggers": {
"default pageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
Dans l’exemple ci-dessus, vous devez remplacer la variable « account » par votre identifiant de suivi Google Analytics.
Cette configuration est extraite du document officiel, vous pouvez obtenir plus de détails ici.
Alternative: Configuration avancée avec le protocole Google Analytics Measurement
For this configuration, you have to do the step 1 defined previously, and then do the following.
Pour cette configuration, vous devez effectuer l’étape 1 définie précédemment, puis procéder comme suit.
Ajoutez les composants amp-analytics à la fin de la balise body, mais toujours dans le composant amp-story.
<amp-analytics type="googleanalytics">
<script type="application/json">
{
"vars": {
"clientId": "CLIENT_ID(_ga)",
"random": "RANDOM",
"uri": "the-uri-of-your-story.html",
"trackingPropertyId": "UA-XXXXXX-X",
"hitTypes": "pageview"
},
"requests": {
"googleanalytics": "https://www.google-analytics.com/collect?v=1&tid=${trackingPropertyId}&cid=${clientId}&t=${hitTypes}&dp=%2F${uri}&z=${random}"
},
"triggers": {
"Google Analytics track": {
"on": "story-page-visible",
"request": "googleanalytics"
}
},
"transport": {
"beacon": 0,
"xhrpost": 0,
"image": 1
}
}
</script>
</amp-analytics>Dans l’exemple ci-dessus, vous devez remplacer la variable « trackingPropertyId » par votre ID de suivi Google Analytics et la variable « uri » par l’URL de votre story.
Chaque fois que l’article est visible, il déclenche un appel à Google Analytics et envoie les informations définies sous forme d’une page vue (page view).
Cette approche consiste à envoyer des données à Google Analytics à l’aide du protocole Analytics Measurement.
Si vous connaissez ce protocole, vous pourrez étendre cet exemple et envoyer des informations supplémentaires à Google Analytics en spécifiant des paramètres supplémentaires à l’URL et en ajoutant d’autres déclencheurs.
Testez et validez votre AMP Story
N’attendez pas que Google Search Engine vous annonce que quelque chose ne va pas avec votre code AMP, validez celui-ci au préalable.
Vous pouvez aller sur le site Web AMP Validator et copier coller votre code (avant publication).
Mais il vous est également possible d’installer l’extension Chrome. Le validateur AMP vérifiera la page en cours pour voir s’il s’agit d’une page AMP, puis l’exécutera via le validateur AMP et signalera si la page passe (vert) ou échoue (rouge) à l’aide de l’icône d’extension.
Encore plus d’astuces prochainement
Le framework AMP Stories s’améliore constamment et introduit sans cesse de nouvelles fonctionnalités.
Très bientôt, vous pourrez intégrer des vidéos de Twitter, Google Map ou Youtube de manière « agréable et visuelle » sans pour autant quitter la story.
D’autres fonctionnalités suivront telle que la barre latérale qui affiche un menu de type ”hamburgers” et donne à l’utilisateur la possibilité d’accéder à une autre partie de votre site depuis une AMP Story.
Les rédacteurs pourront aussi mettre à jour leurs récits en temps réel avec Live Stories. Ainsi, les lecteurs n’auront plus besoin d’actualiser la story pour découvrir du nouveau contenu.
Et pour finir, vous aurez la capacité d’ajouter une pièce jointe. Cette fonctionnalité vous sera utile si vous souhaitez joindre des informations additionnelles à votre story.
Publiez votre AMP Story sur votre site web
Techniquement, une AMP Story est un fichier HTML. Elle peut être hébergée sur votre site web ou sur votre serveur Web.
Il n’y a pas de convention, mais une bonne pratique pourrait être de placer toutes vos histoires sous le même chemin sur votre site Web, tel que http://www.example.com/amp-story/my-first-story.
Une fois publié, la story peut être intégrée à n’importe quelle page de votre site avec un simple lien dirigeant vers celle-ci ou dans une iframe.
Pour offrir une meilleure expérience, il est recommandé de créer une belle image cliquable représentant la couverture de votre récit.
Vous pouvez également intégrer votre AMP Story dans une landing page attrayante. Ainsi les lecteurs seront plus susceptibles de regarder vos stories et de les partager.
Les meilleurs outils pour créer vos AMP Stories sans ligne de code
De nombreux nouveaux outils ont commencé à apparaître et facilitent la création de Story au format AMP.
Tous ces outils partagent des fonctionnalités standard communes:
- Ils facilitent le flux de création avec un glisser-déposer d’images et de textes au sein d’une story.
- Ils offrent des services d’hébergement des contenus créés.
Les facteurs de différenciation proviennent de l’intégration avec les bibliothèques de photos, des modèles par défaut et de l’expérience utilisateur de l’outil.
Pour ce dernier point, je vous laisse juger en regardant et essayant par vous même les éditeurs d’AMP Stories suivant :
MakeStories
MakeStories a été présenté à AMPConf 2019 par Google et est l’un des pionniers de la création d’AMP Stories en ligne.
L’outil est un générateur AMP Stories “zéro code” avec du glisser-déposer et est doté de plus de 75 fonctionnalités. Une fois la story créée, vous pouvez la publier sur votre site WordPress ou Drupal, l’héberger sur leur plate-forme ou télécharger le code pour l’intégrer directement sur votre site. Tout cela gratuitement.
Visual Stories
Visual Stories est un créateur de site Web qui prend en charge la création de pages AMP et d’AMP Stories. La plateforme vous permet de créer du contenu au format immersif AMP Stories et de publier votre travail sur plusieurs sites Web à partir d’un seul endroit. Vous pouvez créer de magnifiques récits AMP en quelques minutes, à l’aide de leur outil unique Story Builder.
Easy Stories
Easy Stories est un outil visuel de glisser-déposer permettant de créer des AMP Stories pour votre site Web ou votre application mobile. L’outil est gratuit pendant 15 jours.
Ensuite, pour 49 dollars par mois, vous profitez d’une solution d’Inbound marketing, incluant l’éditeur de Stories mais également des fonctionnalités de Landing Page, capture de prospect, ebook intelligent, gestion des contacts et email marketing.
Issuu Story Cloud
Issuu, la plus grande plate-forme de publication numériques au monde, a développé une solution appelée Issuu Story Cloud, qui comprend une intégration avec Adobe InDesign.
Il permet aux éditeurs de créer automatiquement des histoires élégantes et avant-gardistes à partir du contenu de leur marque en transformant les éléments texte et image en formats Story adaptés à toutes les plateformes sociales, y compris AMP Stories.
Tappable
Tappable est un outil de création de Stories permettant aux utilisateurs de créer en quelques heures des mini-sites Web réactifs, optimisés pour les appareils mobiles. Aucun codage requis. Tappable se positionne comme un outil pour les PME et entreprises dans les domaines des médias et du marketing.
Newsroom Studio
Newsroom Studio vous permet de créer du contenu mobile au format AMP Story sans avoir à investir dans du développement ou dans l’infrastructure. Il comprend des outils d’analyses et vous permet de créer des éléments interactifs tels que des quiz ou des sondages.
Cutnut
Cutnut Story Editor offre un ensemble de fonctionnalités faciles à utiliser pour se lancer dans ce monde du contenu vertical avec des histoires professionnelles. Les modèles et le glisser-déposer facilitent la création de vos diapositives et permettent même aux débutants de publier rapidement des histoires convaincantes.
Ampstor
Ampstor est un modèle de conception graphique gratuit et un éditeur sans code qui vous permet de créer facilement vos AMP Stories. Vous pouvez commencer à partir d’un modèle et concevoir un récit pour mobile et bureau en utilisant un éditeur de glisser-déposer.
Minutly
Minute.ly est une startup qui développe une plateforme qui utilise l’intelligence artificielle pour améliorer le contenu vidéo. L’équipe de Minute.ly a développé une fonctionnalité appelée Stories permettant aux éditeurs d’utiliser leurs ressources vidéo existantes pour atteindre de nouveaux publics sur toutes les plateformes, telles que mobile, ordinateur de bureau et application au format AMP Story (et autre formats de Story).
Once
Les Web Stories créées par Once sont spécialement conçues pour les interactions (sondages, saisie de texte, curseurs…). Avec Once, vous pouvez offrir à votre public une première expérience immersive sur mobile.
Comment gérer les AMP Stories avec votre CMS
Vous possédez peut-être déjà un site Web et vous vous demandez peut-être si votre CMS prend en charge AMP de manière native, et en particulier AMP Stories.
En effet. Votre site Web gère-t-il correctement la technologie AMP?
J’ai mené des recherches et analysé diverses solutions de systèmes de gestion de contenu. J’ai ensuite regardé s’ils pouvaient ou non gérer AMP (pages) et AMP Stories. (Si votre solution ne figure pas dans le tableau ci-dessous, envoyez-moi un message et je me ferais un plaisir de l’ajouter.)
| CMS | AMP (pages) | AMP Stories |
| WordPress | Oui | Oui |
| Wix | Oui (blog seulement) | Non |
| Squarespace | Oui (blog seulement) | Non |
| Adobe AEM | Oui (via module tiers) | Non |
| Drupal | Oui | Non |
| SiteCore | Non | Non |
| Magnolia | Oui (via module tiers) | Non |
Les plus populaires outils de création de sites Web (Wix et Squarespace) offrent à leurs clients la possibilité d’activer les fonctionnalités AMP pour les publications de blogs. Malheureusement pour les AMP Story, il n’y a aucun moyen de les créer ou même de les héberger sur votre site.
Du coté des CMS dits d’entreprise (Adobe, Drupal, Sitecore et Magnolia), seul Drupal dispose d’une intégration native avec AMP. Dans le meilleur des cas, les autres CMS offrent des modules tiers prédéfinis pour commencer.
Le gagnant est WordPress. Les équipes de WordPress travaillent en étroite collaboration avec celle de développement AMP pour créer un plugin permettant à la technologie de fonctionner nativement dans WordPress. Regardons ceci en détail.
Intégrer des Stories dans WordPress
Avec le plugin WordPress AMP officiel
Le plugin officiel AMP est développé par Google et offre une intégration native avec WordPress. Le plugin aide les propriétaires de sites à créer le premier site Web AMP tout en automatisant la majeure partie du processus.
Depuis la version 1.2, le plugin permet la création d’AMP Stories.
Gutenberg, le nouvel éditeur de contenu de WordPress, a été exploité afin de permettre un flux horizontal pour la création des Stories.
Le plugin AMP pour WordPress vous permet:
- La création et réorganisation de pages AMP Story
- Le glisser et déposer des blocs
- La gestion globale de votre contenu dans WordPress
- De créer de nouveaux éléments, tels que du texte, des vidéos, des images
- La modification de la couleur et de l’opacité de l’arrière-plan et ajout d’un dégradé
- D’animer le texte, le faire pivoter et sélectionner une police Google
WordPress vous permettra de créer des Stories immersives et engageantes dans l’interface de l’éditeur CMS.
Toutefois, si vous préférez coder vos propres histoires ou utiliser un autre outil pour les créer, il existe un moyen d’intégrer des Story dans WordPress.
Utiliser des pages HTML autonomes pour publier vos Stories
Le plugin WP Custom HTML Page fait la chose suivant: il permet la création de pages HTML dans WordPress.
Et rappelez-vous une AMP Story est une page Web normal, écrit en HTML. Vous pouvez héberger vos stories en tant que documents HTML.
Avec l’aide du plugin, créez simplement un nouveau document HTML et copier-coller le code AMP Story que vous aurez préalablement développé ou extrait d’un éditeur de Stories.
Prenez soin de définir correctement le permalien de la story. (Voici comment je l’ai fait pour cet article.)
Amp Stories for WordPress plugin
Amp Stories for WordPress est un plug-in tiers qui permet la création des AMP Stories en remplissant un simple formulaire.
Une fois installé, vous obtiendrez un simple formulaire au bas de vos pages en mode édition et ainsi vous pouvez créer une AMP Stories à partir des informations disponibles sur votre page.
Pour finir
Le format Google AMP Stories est désormais disponible et de plus en plus d’entreprises vont les utiliser dans leur stratégie de contenu.
Avec AMP Stories, vous garder le contrôle, vous maîtriser le contenu et définissez le déroulement de l’histoire.
AMP Stories présente des fonctionnalités uniques sur le Web. Vous pouvez les lier à d’autres sites, les envoyer via un emailing ou messagerie. Et la cerise sur le gâteau: les AMP stories disponibles à la recherche depuis le moteur de recherche de Google.
Et finalement, ce format permet une expérience de lecture rapides et immersives. Vos lecteurs seront ravis des belles histoires que vous aurez à raconter.
Vous ne pouvez pas ignorer ce nouveau format et vous devriez commencer par le tester.
Gardez à l’esprit tous les avantages des AMP Stories:
- Créer facilement du contenu attrayant
- Capacités rédactionnelles flexibles
- Partageable et connectable sur le Web
- Analysable et mesurable
- Temps de chargement rapide
- Capacité de monétisation
Les Stories sont un moyen de toucher votre public au sein d’une nouvelle expérience de narration.
Soyez maître de votre propre histoire.
Très complet ! Merci pour les conseils.
En revanche, toujours pas de date sur le déploiement des AMP Stories en France ? 🙁
Hello, Merci pour ta réponse.
Techniquement les AMP Stories sont déjà dans l’index et en France aussi. Cherche pour « kira the cat » et tu devrait trouver une de mes stories. Tu peux tester sur desktop ou mobile.
Par contre, pas de section « Top Stories » en vue pour l’instant.
A suivre.
Merci, article qui donne envie de s’y mettre. J’ai essayé sur wp cela fonctionne parfaitement sur les pages et articles. Hélas, j’utilise Learndash pour mes formations et là pas de trace d’amp stories dans les cours ni dans les lessons et articles, bizarre.
Je suis tombé cette semaine sur https://storypal.io/, vous connaissez?
Bien à vous