AMP est un framework pour créer des sites mobiles rapides, et il alimente actuellement 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, semblable à Réagir, Angulaire 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. Ses 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 même prerenders du contenu AMP avant même de cliquer dessus, ce qui peut entraîner le chargement des pages presque instantanément. Il y a aussi intégrations avec la recherche Google qui affichera 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 données structurées, qui est en fait nécessaire 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 a besoin de charger les images paresseux. Au lieu d'utiliser un normal
Il y a 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 comme domaine, plutôt que le nom de votre site où la page est réellement hébergée. Par défaut, votre site s'affiche dans le visualiseur AMP, mais vous pouvez également utiliser É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 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 liste-amp 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 «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, c'est ainsi que vous le rendez visible à Google.
AMP fournit beaucoup de modèles pour vous de 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 leurs 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 y faire la transition de votre site.
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 est exigée de vous est de fournir données structurées à propos de 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 Google Outil de validation AMP pour vérifier votre syntaxe, qui vous dira 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 tête 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). Ce serait une bonne idée de soumettre un plan du site mis à jour via le Search Console, pour informer directement Google que vous avez activé AMP et créé des versions AMP de toutes vos pages.