Un guide pratique pour configurer AMP

Pour accélérer le temps de téléchargement du contenu, Google a introduit les pages mobiles accélérées (AMP). La technologie peut ressembler à une tentative de Google de concurrencer les articles instantanés de Facebook et les options de contenu à téléchargement rapide développées par d'autres sociétés. Il offre des avantages évidents pour certaines plates-formes, alors qu'il n'est pas très utile dans certains cas. Le message ci-dessous décrit la technologie elle-même et le processus de configuration. L'intégration AMP n'est pas si difficile, bien qu'elle ait quelques caractéristiques spécifiques à retenir.

La brève histoire de l'AMP

La pénétration rapide et inclusive des technologies mobiles dans la vie quotidienne des gens ordinaires ne pouvait rester à l'écart du plus grand moteur de recherche, Google. Ainsi, en octobre 2015, ils ont publié le post sur la nouvelle technologie qui est devenue disponible pour les développeurs Web mobiles.

En fait, cette technologie est devenue la touche finale d'une politique "mobile-friendly" que Google soutient depuis quelques années. Tout d'abord, ils ont introduit l'algorithme qui classe les sites optimisés pour les appareils mobiles plus haut. Plus tard, ils ont développé et introduit un tout nouvel outil gratuit pour l'optimisation du contenu mobile des pages de destination - AMP. Pour connaître la différence entre les pages AMP et les pages adaptées aux mobiles, consultez cet article et l'interview de Duane Forrester.

Les composants de base de la technologie AMP

Avant de parler de l'intégration AMP sur le site, vous devez découvrir et comprendre en quoi consiste cette technologie. Considéré du point de vue d'un développeur, il se compose de ces trois composants :

• AMP HTML est le même HTML5 bien connu, mais avec des modifications (certaines balises standard sont remplacées par des balises spécialement conçues pour AMP) ;

• AMP JS est une nouvelle bibliothèque, qui donne accès aux nouvelles balises, et permet d'optimiser la vitesse de téléchargement des ressources en la contrôlant directement.

• Google AMP Cache est une page AMP de mise en cache réseau basée sur un serveur proxy CDN. En raison de ce qui précède, il y a une augmentation de la quantité de contenu, de scripts et d'images sur la vitesse de téléchargement côté client, car ils sont «tirés» directement de la source la plus proche via HTTP 2.0.

Découvrez l'exemple ci-dessous :

Cette technologie a complètement changé la façon dont les utilisateurs interagissent avec le site Web de l'éditeur, car

• Les utilisateurs ne visitent pas le site Web – ils voient le contenu de l'article directement dans Google, où il est téléchargé depuis le cache ;

• La navigation dans les articles ressemble à un carrousel de curseurs, ce qui signifie que vous pouvez faire défiler les pages AMP de gauche à droite, passant d'une actualité à l'autre.

La carte de l'article occupe un pourcentage important d'espace sur la page de résultats du moteur de recherche et est fournie avec une icône spéciale qui informe l'utilisateur qu'il s'agit d'une page AMP.

Qui devrait essayer AMP

Vous devez comprendre que AMP n'est pas indispensable pour un certain nombre de catégories de sites. Par exemple, dans le cas de projets de commerce électronique traditionnels, la mise en page du répertoire à l'aide d'AMP ne fonctionnera pas.

Si un projet de commerce électronique particulier comporte une partie contenu (par exemple, un blog) avec un public de lecteurs et des articles fréquemment mis à jour, la mise en œuvre AMP est très utile. Les pages marquées peuvent entrer dans le bloc d'actualités de Google et devenir un point d'interaction supplémentaire avec la marque.

Les fournisseurs de contenu, qui monétisent leurs ressources en plaçant des blocs d'annonces, doivent mettre en œuvre AMP pour obtenir une bande dans les actualités, afin qu'ils puissent collecter le trafic supplémentaire d'une nouvelle manière gratuite.

Mise en œuvre de l'AMP

À partir du moment où vous prenez la décision d'implémenter AMP sur votre site Web, il est nécessaire d'adhérer à un algorithme simple qui vous permet d'effectuer facilement toutes les étapes. Mais avant de passer à cela, notez les quelques spécificités AMP suivantes qui déterminent, en fait, le mode même d'intégration et le choix des outils pour résoudre ce problème :

• Accélérez plusieurs fois le téléchargement du contenu dans le volet de lecture à l'aide de scripts AMP asynchrones.

• Soumettre les styles dans une balise séparée « style amp-custom » ; rappelez-vous que leur taille est limitée à 50Ko.

• Définissez la hauteur et la largeur des éléments graphiques (images et animations) dans le document HTML.

• Remplacez les scripts js personnalisés non pris en charge à l'aide de la bibliothèque AMP JS.

• Utilisez le lien ou le CSS @font-face pour télécharger les polices.

Toutes ces fonctionnalités (même si elles ne vous disent rien) affectent directement la rapidité et la facilité de mise en œuvre de la technologie.

Comment configurer AMP automatiquement

Eh bien, l'algorithme d'implémentation réel est le suivant :

1. Vérifiez s'il existe ou non une solution prête pour l'AMP.

• Oui – utilisez-le et contrôlez la validité de la sortie. Voici des exemples de solutions prêtes à l'emploi pour les CMS de blogs les plus populaires :

WordPress – https://wordpress.org/plugins/amp/

Drupal – https://www.drupal.org/project/amp

Joomla – https://weeblr.com/joomla-accelerated-mobile-pages/wbamp

• Non – effectuez l'intégration manuellement comme expliqué dans la section suivante de cet article. Là, nous parlerons des limitations à prendre en compte.

2. Vérifiez si vous avez besoin ou non d'un formulaire fonctionnel pour la collecte de leads.

• Oui – utilisez la « béquille » pour insérer le code js personnalisé souhaité via « amp-iframe ». Pour plus d'informations, cliquez ici.

• Non – ignorez cette étape.

3. Vérifiez quelle méthode de suivi de page répond à vos besoins.

• Le pixel AMP permet de surveiller les statistiques de pages vues en fonction de la requête GET. Il convient parfaitement au téléchargement de données vers des services de statistiques tiers ou personnalisés.

• AMP Analytics permet d'organiser le transfert de données vers Google Analytics et de suivre l'activité des utilisateurs directement sur la page.

Les deux méthodes avec des exemples de code sont décrites ici.

4. Vérifiez la validité du code des pages à l'aide de l'outil "AMP Test" de votre Google Search Console.

Comment configurer AMP manuellement

La majorité des médias en ligne fiables et très populaires n'utilisent pas de solutions CMS en boîte. Habituellement, ils sont construits sur des moteurs personnalisés et, par conséquent, une intégration de la technologie AMP incombe aux développeurs. Cependant, ce n'est pas une tâche difficile pour un expert compétent. L'algorithme de base comprend les étapes suivantes :

1. Créez des modèles de page au format AMP : réécrivez votre modèle principal en utilisant des balises amp spéciales, désactivez les éléments dynamiques, définissez les polices et spécifiez les styles d'image en fonction des exigences mentionnées ci-dessus.

2. Ajustez les modèles en utilisant l'algorithme automatique ou manuellement (généralement une option "non-non" pour les sites plus grands, mais une bonne solution pour les plus petits).

3. Configurez l'analyse en intégrant un pixel de suivi ou un code Google Analytics.

4. Testez la validité en utilisant le "Test AMP" dans Google Search Console, en particulier, le moment de pointer la balise spéciale de la page principale du site vers la page amp, tandis que rel = "canonical" pointe dans le direction opposée.

Conclusion

AMP est particulièrement utile pour les sites des éditeurs et des distributeurs de contenu. Bien que l'intégration puisse sembler complexe, AMP a un algorithme simple et peut être automatisé sur les deux sites qui utilisent des moteurs CMS populaires et des plates-formes personnalisées. En suivant un algorithme simple décrit ci-dessus, vous pouvez mettre en place ce processus sans trop d'efforts et de risques.