Sous l'acronyme AMP se cache une nouvelle technologie mise en avant par Google. Toujours en recherche d'idées pour développer l'expérience utilisateur et favoriser l'accès à l'information, le géant de Mountain View est en passe de faire d'AMP, le nouvel Eldorado du web sur mobile. Au cours de cet article, nous verrons ce qu'est le standard AMP, comment le mettre en oeuvre sur un site Joomla et quels bénéfices vous pouvez en tirer du point de vue du référencement.
Le standard AMP
Présentation du standard AMP
Définition
Voici la définition contenue dans le glossaire du web :
AMP est l'acronyme de Accelerated Mobile Pages.
C'est une initiative Open Source lancée en octobre 2015 qui est principalement soutenue par Google, Twitter, Pinterest, LinkedIn, WordPress, Chartbeat, Parse.ly et Adobe Analytics.
Techniquement, AMP est une méthode de création de pages Web qui permet d'afficher le contenu statique plus rapidement sur mobiles.
Comment fonctionne AMP ?
Pour faire simple, AMP est une sorte de framework doté de 3 caractéristiques principales :
- AMP HTML : AMP HTML est du HTML étendu à l'aide de propriétés AMP personnalisées et comportant certaines restrictions afin d'assurer des performances fiable, ainsi que certaines extensions permettant de créer du contenu enrichi plus élaboré qu'avec le HTML de base.
La plupart des balises HTML présentes sur une page AMP HTML sont des balises standard. Mais certaines sont remplacées par des balises AMP spécifiques, appelés composants AMP HTML, qui permettent d'implémenter facilement et efficacement des modèles communs.
A titre d'exemple, la baliseamp-imgpermet une prise en charge complète desrcsetmême dans les navigateurs qui ne sont pas encore compatibles.
- AMP JS : La bibliothèque AMP JS garantit un rendu rapide des pages AMP HTML.
Cette bibliothèque gère le chargement des ressources et contient les balises personnalisées mentionnées ci-dessus, et ce, pour un rendu plus rapide de la page (on parle d'un affichage plus rapide de 50 à 85%).
Parmi les techniques qui permettent de gagner en performance, notons la désynchronisation de tout ce qui provient de ressources externes, de sorte que rien sur la page ne peut bloquer le rendu des différents éléments, le système de «sandbox» pour tous les iframes, la prédéfinition de la disposition de chaque élément sur la page avant le chargement des ressources et la désactivation des sélecteurs CSS lents.
- Google AMP cache : Google AMP Cache est un réseau basé sur proxy qui fournit tous les documents AMP valides. Il extrait les pages AMP HTML, les stocke en mémoire cache et améliore automatiquement la performance de ces pages. Avec Google AMP Cache, le document, les fichiers JS et toutes les images se chargent à partir d'une seule source qui utilise le protocole HTTP 2.0 pour une efficacité optimale.
Ce système de cache intègre également un système de validation qui vérifie le bon fonctionnement de la page, qu'elle n'a aucune dépendance vis-à-vis d'éventuelles ressources externes et que le balisage de la page est conforme à la spécification AMP HTML.
AMP et Joomla
Plusieurs solutions clef en mains existent pour Joomla sous forme d'extensions tierces dont le plugin wbAMP réalisé par Yannick Gaultier - Weeblr.
Pour voir ce plugin en action, je vous invite d'abord à tester ces deux liens depuis votre mobile :
- https://weeblr.com/blog/accelerated-mobile-page-for-joomla -> version clasique
On se rend nettement compte de la différence graphique qui existe entre les deux versions mais également de la différence de vitesse d'affichage des pages.
Validation AMP
Cette dernière étape est importante car une page non valide du point de vue syntaxique ne sera tout simplement pas indexée par Google.
Le projet AMP fournit un outil de validation en ligne très complet qui détectera les éventuelles erreurs présentes dans la syntaxe de vos pages : https://validator.ampproject.org.
Collez l'URL de votre page et cliquez sur le bouton Validate pour voir le résultat s'afficher.
Une fois que tous les voyants sont au vert, vous pouvez (devez) également contrôler la validité syntaxique des données structurées de vos pages AMP.
Pour cela, testez simplement l'URL d'une page AMP de votre site ici : https://developers.google.com/structured-data/testing-tool/.
Le plugin wbAMP dispose d'une documentation complète qui pourra vous être utile en cas de besoin : wbAMP getting started guide.
Et pour le référencement ?
Pour l'heure, AMP n'est pas officiellement un critère de référencement aux yeux de Google. Mais ne nous y trompons pas : AMP est un projet soutenu par Google qui améliore la vitesse d'affichage sur mobile et favorise l'expérience utilisateur. Et ces deux critères sont essentiels pour le moteur de recherche.
Depuis février 2016, Google affichait dans ses pages des résultats de recherche, une mention AMP pour indiquer aux internautes quels sont les sites qui utilisent cette technologie. Cette mention a depuis disparu.
Le 20 septembre 2016, Google annonçait dans le centre d'aide Search Console dans la rubrique "Search Analytics reports" que :
Search results on mobile devices have begun to direct users to the equivalent AMP page, in preference to the equivalent app or web page. This might result in a decrease of traffic to your app pages when an equivalent AMP page exists.
En clair, Google a commencé à donner la priorité aux résultats au standard AMP qui sont désormais affichés dans les SERP mobiles. On peut également penser qu'à brève échéance, il n'y aura plus qu'un seul format affiché dans les SERPs mobiles.
Ces exemples illustrent très bien la direction et l'importance que Google entend donner à ce projet. Il est donc assez fortement conseillé d'implémenter le format AMP sur votre site si vous en avez réellement l'utilité.
Contenu dupliqué ou pas ?
Si grâce au standard AMP, vous affichez le même contenu (ou presque) mais dans un autre format et on peut penser qu'il y a un risque de contenu dupliqué.
Ce risque est écarté car le fait d'utiliser la balise link rel=amphtml permet justement d'éviter cette confusion aux robots des moteurs de recherche.
Explications :
- sur votre page HTML actuelle, la balise
link rel=amphtml :indique à Google que cette page est disponible au format AMP HTML :
<link href="https://mon-site-web.fr/titre-de-ma-page/amp" rel="amphtml" />
- sur votre page AMP, la balise
link rel=canonicalindique à Google que ce contenu existe aussi au format HTML standard :
<link rel="canonical" href="https://mon-site-web.fr/titre-de-ma-page" />
Pour aller plus loin
Je vous invite à lire les recommandations de Google sur le sujet qui sont un complément indispensable à cet article : https://support.google.com/webmasters/answer/6340290?hl=fr.
La page du projet AMP fournit également des données intéressantes pour qui souhaite approfondir ce sujet.
Conclusion
Vous connaissez et maîtrisez maintenant toutes les subtilités concernant le standard AMP ainsi que la mise en oeuvre de cette technique sur votre site Joomla
L'indexation des pages au format AMP par Google semble se faire au compte-goutte, aussi il est préférable de ne pas tarder à implémenter ce format sur votre site web. Par ailleurs, sachez qu'il n'y a pas de protocole particulier pour avertir le moteur de recherche que cette technique est mise en oeuvre sur vos pages.
