Le Web mobile continue de croître rapidement.

Les smartphones continuent à vendre fortement, avec Apple seul prévoyant de rapporter 180 milliards de dollars de ses smartphones d'ici 2021. Il y a plus de 224 millions d'utilisateurs de smartphones aux États-Unis, faisant du Web mobile un objectif essentiel pour tout propriétaire de site Web.

La croissance continue des utilisateurs du Web mobile oblige les concepteurs et les développeurs frontaux à comprendre la conception appropriée des pages mobiles accélérées.

La pratique des pages mobiles accélérées met l’accent sur les choix de conception qui correspondent à ce que les moteurs de recherche perçoivent comme amical , y compris un public défini, un contenu de haute qualité, un formatage correct et une compatibilité mobile transparente. Vous remarquerez une variété de pages mobiles accélérées lors de la navigation sur Google dans le mobile par l'abréviation AMP dans les résultats de recherche .

Les pages mobiles accélérées utilisent toujours le HTML, bien qu'elles intègrent des éléments spéciaux qui donnent la priorité à la vitesse sur les appareils mobiles. Les exigences techniques AMP sont établies par le projet AMP , avec les normes travaillées aux côtés des principaux influenceurs du trafic comme Google. Le projet a été créé en réponse à des interfaces utilisateur peu pratiques et à des temps de chargement lents lors de la navigation sur des sites sur un appareil mobile.

AMP met l'accent sur la vitesse instantanée et une apparence familière, donnant aux créateurs la possibilité de personnaliser leurs pages dans le cadre AMP. La conception centrée sur la plupart des pages AMP donne une impression similaire de navigation, malgré les différences de présentation du contenu et de schémas de couleurs.

Le résultat est une expérience de navigation plus rapide et plus cohérente qui améliore les taux de chute, augmente l’engagement des lecteurs et ouvre la voie à la navigation Web mobile.

Avec la puissance et le potentiel de l'AMP si évident, il est pratique pour les concepteurs de considérer les conseils ci-dessous pour optimiser l'expérience AMP, afin que leurs clients puissent en bénéficier de diverses manières.

1. Considérez AMP-Carousel pour la page d'accueil

Faites une impression sur la page avec laquelle commenceront la plupart de vos visiteurs. Le contenu statique peut être affiché sur AMP pour présenter les produits disponibles, susciter un intérêt pour les sites de commerce électronique ainsi que pour ceux affichant du contenu général.

le Fonction AMP-carrousel permet aux concepteurs d'afficher plusieurs éléments de contenu similaires sur un axe horizontal. Après avoir importé le composant carrousel dans l'en-tête, vous pouvez utiliser type = "carrousel" pour afficher une liste d'images apparaissant sous la forme d'une bande continue. C'est une fonctionnalité attrayante qui est idéale pour la première page lorsque vous essayez d'attirer les visiteurs à voir quelque chose au-delà de la page d'accueil.

2. Afficher les publications et produits associés

Encouragez les visiteurs du site à approfondir votre contenu. Vous pouvez y parvenir en affichant une liste de produits ou d'articles associés à celui qu'ils consultent actuellement. Vous pouvez publier statiquement une liste de contenu pertinent, en l'accomplissant instantanément en utilisant , qui remplit une requête CORS dans un modèle amp-moustache pour obtenir une pertinence de contenu généré dynamiquement, vous pouvez personnaliser selon vos préférences.

Si les visiteurs entrent dans une page de destination qui ne correspond pas à leurs demandes, ils quitteront le site ou chercher plus loin ce qu'ils recherchent . La suggestion d'alternatives de produits est une excellente méthode pour adapter le processus de recherche de l'utilisateur, à tout le moins les attirer davantage sur le site. Même s'ils ne trouvent pas exactement ce qu'ils recherchent, ils peuvent trouver une alternative qui fait le travail tout aussi bien.

3. Utilisez AMP-Analytics pour trouver des zones à améliorer

Il est important que tout propriétaire de site Web sache comment les visiteurs interagissent avec le contenu. le composant peut être utilisé directement ou intégré à une plate-forme d'analyse tierce, y compris Google Analytics. Dans le tag, ajoutez l'attribut "type" et définissez la valeur à votre fournisseur de choix , dont il existe de nombreuses options. le Le composant aidera les propriétaires de sites Web à avoir une idée plus précise des pages et des éléments de conception qui génèrent des conversions et des composants dont l’engagement des utilisateurs est faible.

Il est important de garder à l'esprit lors de l'analyse des analyses que, avec AMP, la mise en cache intelligente est naturellement intégrée. Le résultat est que vous pouvez voir moins de trafic que d'habitude. Gardez à l'esprit l'élément de mise en cache lors de l'analyse initiale de vos chiffres.

4. Utilisez le validateur intégré

Idéalement, les concepteurs n’obtiendront jamais quelque chose, mais cela peut arriver. Pour vous assurer que tout fonctionne correctement sur une page, utilisez le validateur intégré d'AMP en ajoutant # development = 1 à la fin de l'URL de la page. Si vous ouvrez les outils de développement Chrome et que vous voyez le message "La validation AMP a réussi", tout fonctionne. Sinon, vous pouvez creuser plus profondément jusqu'à ce que le problème soit résolu. Vous pouvez également utiliser les outils de développement Chrome pour vérifier que toutes les ressources externes, allant des images et des vidéos aux polices et aux iframes personnalisés, sont correctement chargées.

De plus, vous pouvez valider les métadonnées en utilisant Outil de test de données structuré de Google , soit en extrayant une URL ou en insérant un extrait de code. Ces outils permettent de s'assurer que tout est validé, de sorte que l'analyse des moteurs de recherche est activée. Sur la note de l'exploration du moteur de recherche, vérifiez également votre fichier robots.txt pour vérifier que "Disallow: / amp /" n'est présent dans aucune ligne. Si c'est le cas, les robots d'exploration ne pourront pas accéder à vos fichiers AMP.

5. Mettre en œuvre des annonces dans AMP

Un autre avantage de AMP est un framework préexistant pour la mise en œuvre des annonces. Le composant amp-ad ou amp-embed est un conteneur permettant d'afficher une annonce. Les annonces se chargent avec toutes les autres ressources, avec le élément personnalisé.

JavaScript est inexistant dans le document AMP. Au lieu de cela, AMP charge un iframe depuis un sandbox iframe. Vous pouvez définir des valeurs de largeur et de hauteur dans , avec l'argument "type" spécifiant le réseau publicitaire affiché. L'attribut "src" charge une balise de script pour le réseau publicitaire spécifié, avec divers attributs de données disponibles pour permettre une configuration supplémentaire à partir des réseaux publicitaires.

Vous pouvez également définir un espace réservé ou une option pour aucune annonce disponible, via l'attribut d'espace réservé. Les annonces vidéo sont également possibles avec un support natif, avec un support complet des composants média .

Les pages mobiles accélérées améliorent la visibilité des moteurs de recherche parmi les utilisateurs mobiles, en particulier maintenant que Google adopte les pages AMP dans ses résultats de recherche.

De plus, des temps de chargement plus rapides, une personnalisation flexible et des composants visuels qui cherchent à améliorer le taux de rebond offrent une meilleure expérience utilisateur mobile que jamais.

Les pages mobiles accélérées fournissent un cadre fantastique pour la croissance continue des utilisateurs Web mobiles.