6 éléments à intégrer sur votre page AMP

Éléments d'une page AMP

Sur Codeur.com, trouvez rapidement un freelance pour réaliser votre projet Mobile. Voir les développeurs mobile disponibles

Google a introduit sa technologie AMP (Accelerated Mobile Pages) pour rendre la navigation web plus rapide sur mobile. Le but est d’accélérer le temps de chargement des pages et d’améliorer l’expérience utilisateur des mobinautes.
Malgré quelques limites, vous pouvez personnaliser ces pages avec de nombreux composants AMP, afin de les rendre encore plus conviviales et d’accroître votre taux de conversion.
Pour optimiser vos pages AMP, voici 6 éléments que vous pouvez ajouter !

1. Un affichage en accordéon

La balise <AMP-ACCORDION> permet de présenter du contenu sous forme d’accordéon, pour permettre à l’utilisateur de passer d’une section à l’autre très facilement. Cette technique découpe un texte en plusieurs paragraphes sous-titrés, afin que le mobinaute puisse se rendre rapidement à la section qui l’intéresse.
Deux options s’offrent à vous pour l’affichage en accordéon :

  • Les accordéons imbriqués, c’est-à-dire empilés les uns dans les autres permettant l’ouverture de plusieurs sections à la fois
  • Les accordéons à fermeture automatique qui ne permettent qu’une seule section ouverte à la fois.

+250 000 freelances disponibles sur Codeur.com

Recevoir des devis gratuits

Rapide, gratuit et sans obligation

2. Une barre latérale

La barre latérale, qui s’intègre à l’aide de la balise <AMP-SIDEBAR>, offre une navigation claire pour guider le visiteur à travers votre site internet. Avec ce menu supplémentaire, les éditeurs proposent une conception optimale de l’interface, pour que le visiteur profite de la quintessence du contenu.
Dès que l’utilisateur clique dessus, elle se déroule et présente les principaux contenus, comme dans une application mobile. L’expérience utilisateur est beaucoup plus agréable, parce qu’elle n’empiète pas sur la lecture du contenu principal.
Barre latérale page AMP
L’affichage en accordéon et la barre latérale peuvent être utilisés ensemble pour construire un menu hiérarchisé, efficace dans la structure de votre site.

3. Les boutons des réseaux sociaux

Facebook, Twitter, Pinterest… faut-il encore rappeler l’importance de ces réseaux sociaux dans la promotion de vos contenus ? Ajoutons que ces plateformes sont totalement mobile-friendly et représentent la majorité du temps passé sur le smartphone.
En implémentant des boutons permettant à l’utilisateur de partager votre contenu sur les réseaux sociaux, vous augmentez la visibilité de vos produits, services ou articles de blog.
Boutons réseaux sociaux AMP

À lire aussi : Social media : comment intégrer les boutons de partage pour générer plus d’engagement ?

4. Le pixel de suivi

L’AMP Pixel est un moyen rapide de suivre le nombre de vues de vos pages. Les données sont ensuite envoyées à une adresse URL que vous avez déterminée. C’est un composant intégré qui ne nécessite pas le chargement d’une extension.
Attention à ne pas intégrer la balise <AMP-PIXEL> au bas de la page. Elle ne se déclenche que lorsqu’elle est placée le plus près possible du début du corps de la page.
Avec ce suivi, vous pouvez connaître les performances de vos pages et savoir comment les améliorer.

5. Les formulaires

Au début de la technologie AMP, vous ne pouviez pas intégrer de formulaire sur vos pages mobiles. C’est désormais possible avec le script <AMP-FORM> pour activer les formulaires et les mettre en forme.
Grâce à cette fonction, vous pouvez proposer des landing pages aux mobinautes et acquérir aisément des leads depuis votre site mobile ou les réseaux sociaux. C’est un must pour faire entrer des prospects dans votre tunnel d’achat et augmenter vos ventes.

6. Une méthode de paiement

Les pages AMP peuvent prendre en charge la demande d’informations de paiement directement à partir du navigateur. Pour demander des paiements en AMP, vous aurez également d’un iFrame spécifique et de l’intégrer à un bouton “Acheter maintenant”.
Cependant, comme AMP restreint JavaScript, la source iFrame doit également gérer les instances où PaymentRequest n’est pas disponible.
D’autres options incluent :

  • Échanger le bouton “Acheter” contre un bouton “Ajouter au panier”
  • Rediriger les utilisateurs vers un formulaire de paiement standard

Même avec les limitations d’AMP, la conception d’une belle page personnalisable est tout à fait possible. Les composants ci-dessus ne sont que quelques-uns des ajouts que vous pouvez faire pour maximiser les conversions.
Pour amplifier votre taux de transformation sur mobile, n’hésitez pas à demander l’avis d’un développeur AMP en postant votre annonce sur Codeur.com.

Suivez nos tutoriels détaillés pour installer AMP sur WordPress et pour activer AMP sur Shopify !