Qu’est-ce que Google AMP et comment l’utiliser pour mon site Web ?

AMP est un framework permettant de créer des sites mobiles rapides et alimente actuellement plus de 43% des résultats de recherche. Passer de votre site à AMP peut vous donner une énorme augmentation du trafic. Comment ça marche ?

Qu’est-ce que l’AMP ?

Si vous avez déjà ouvert un article d’actualité à partir des résultats de recherche Google sur votre téléphone, vous avez probablement déjà rencontré AMP. Il est mis en cache par Google, donc la barre d’URL commence « www.google.com/amp » et comporte un en-tête avec le nom réel du site Web et un lien vers la page non AMP.

Vous avez peut-être également remarqué que la page s’est chargée instantanément (ou presque). C’est AMP, et il alimente la pointe des sites Web mobiles.

Ce qu’est réellement AMP est un framework de composants Web, similaire à React, Angular ou Vue. Mais alors que ces frameworks se concentrent sur des applications Web hautement personnalisables, AMP est conçu pour être un framework léger pour les pages mobiles. Il y a beaucoup de choses dépouillées pour y parvenir, et cela comporte ses propres restrictions. Il est open-source et vous pouvez l’utiliser sans impliquer Google, mais les intégrations d’AMP avec Chrome et la recherche Google le rendent beaucoup plus rapide que tout autre framework.

AMP est suffisamment courant pour que le fichier de script utilisé pour le charger soit déjà mis en cache. Google propose même un contenu AMP avant même que vous ne cliquiez dessus, ce qui peut entraîner le chargement des pages presque instantanément. Il existe également des intégrations avec la recherche Google qui afficheront votre page dans une zone spéciale, plutôt que simplement dans la liste des résultats, et toute page compatible AMP s’affichera avec un éclair à côté du nom.

Et pour des éléments tels que les articles de presse, ils peuvent être affichés dans un carrousel de résultats compatibles AMP.

L’éclair est à nouveau dans le coin de chaque boîte d’article. Ce carrousel est alimenté par des données structurées, qui sont en fait nécessaires pour que vos pages AMP soient répertoriées dans Google.

Comment fonctionne l’AMP ?

AMP implémente ses propres éléments HTML optimisés et vous oblige à les utiliser. Par exemple, les images traditionnelles présentent deux problèmes majeurs: le chargement d’une image modifie la mise en page de la page (nécessitant un recalcul coûteux), et AMP doit charger les images paresseux.

Il existe de nombreux composants comme celui-ci pour toutes sortes de choses, y compris la vidéo, les publicités et le contenu dynamique. Cependant, les navigateurs ne savent pas comment traiter ces composants. Pour que cela fonctionne, vous devrez charger.

Il y a un peu plus de passe-partout, comme la définition d’une fenêtre responsive et un lien vers la version HTML normale de la page, que vous pouvez afficher dans la documentation AMP. Vous devez inclure tout cela, sinon votre page AMP ne respectera pas les normes de Google.

Google met en cache votre site AMP et le précharge pour améliorer les temps de chargement, ce qui est excellent, mais à cause de cela, la barre d’URL s’affichera google.com en tant que domaine, plutôt que le nom de votre site où la page est réellement hébergée. Par défaut, votre site s’affichera dans la visionneuse AMP, mais vous pouvez également utiliser l’échange signé, qui est une méthode pour se déplacer avec des URL supplémentaires. Avec l’échange signé, vous signez le contenu avec un certificat TLS vérifiant qu’il provient de votre domaine. Une fois que vous pouvez vérifier cela, le navigateur peut afficher l’URL de votre site même s’il est toujours mis en cache et diffusé à partir du CDN de Google.

Limitations d’AMP

Bien que ce soit certainement rapide, il existe également de nombreuses restrictions. AMP limite sévèrement l’utilisation de JavaScript; tout JavaScript est exécuté de manière asynchrone, et vous pouvez utiliser n’importe quel JavaScript personnalisé (en dehors de , bien que cette fonctionnalité soit encore expérimentale). Vous devrez utiliser leurs composants pour rendre votre site interactif. AMP peut cependant faire beaucoup; amp-list récupère le contenu d’un point de terminaison JSON et le rend dans un modèle, ce qui n’est pas anodin à voir avec vanilla JS.

AMP consiste à éviter les recalculs de style et de mise en page au profit d’un pipeline de rendu optimisé, ce qui présente quelques restrictions. Toutes les ressources doivent être de taille statique, ce qui signifie qu’aucune taille ne change avec CSS. Tous les CSS doivent être en ligne (dans l’en-tête, plutôt que dans un fichier externe) et sont limités à une taille maximale de 50 Ko. Vous ne pouvez pas non plus utiliser le !important modificateur en CSS, car il peut remplacer le style AMP obligatoire.

Cela rend AMP très axé sur les mobiles, car il n’est pas possible de créer une application Web complexe avec. Mais pour le type de contenu auquel il est destiné (actualités, articles, tout ce pour quoi vous exécuteriez WordPress), cela fonctionne très bien.

Comment rendre AMP mon site Web ?

Vous ne remplacerez pas entièrement votre site normal, vous devrez donc refaire votre site dans AMP, tout en conservant l’ancien site intact. AMP vous oblige à créer un lien vers la page non-AMP avec un lien canonique, ce qui vous permet de la rendre visible à Google.

AMP fournit de nombreux modèles pour commencer. Étant donné qu’il est uniquement destiné aux mobiles (sans toutefois s’y limiter), votre conception sera beaucoup plus simple en général. Vous pouvez parcourir leur catalogue de composants pour avoir une idée du type de contenu pris en charge par AMP et de la manière dont vous pouvez effectuer la transition de votre site vers celui-ci.

Si vous utilisez WordPress, vous pouvez implémenter AMP avec un plugin, dont il existe deux populaires: le plugin officiel et un plugin tiers avec plus de fonctionnalités. Ceux-ci créeront des versions allégées de chaque article, prêtes à être indexées par Google.

Une chose supplémentaire qui vous est demandée est de fournir des données structurées sur votre page AMP. Il s’agit essentiellement de JSON dans l’en-tête de votre page qui informe Google de la page. Vous pouvez utiliser leur outil de test de données structuré pour vous assurer que le vôtre est valide, ce qui vous donnera également un bel aperçu de la façon dont Google interprète votre contenu. Assurez-vous que le type, le titre, la description et l’image correspondent tous et mènent aux bons endroits.

Vous devez utiliser l’outil de validation AMP de Google pour vérifier votre syntaxe, qui vous indiquera si votre page AMP est valide et vous montrera également un aperçu de la façon dont votre site apparaîtra dans les résultats de recherche en fonction du type de résultat.

Ensuite, lorsque vous serez prêt à mettre en ligne AMP, créez un lien vers la version AMP de chaque page du head de votre site normal, en utilisant rel="amphtml".

Vous souhaiterez également replacer un lien du document AMP vers le site normal.

Ensuite, vos pages AMP seront détectables et apparaîtront dans les résultats de recherche (bien que cela puisse prendre un peu de temps à Google pour rattraper son retard). Il serait judicieux de soumettre un plan du site mis à jour via la Search Console, pour informer directement Google que vous avez activé AMP et que vous avez créé des versions AMP de toutes vos pages.