Référencement Logo Joomla Joomla

Accelerated Mobile Pages

Sous cet acronyme anglais 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 nouveau standard du web sur mobile.
Au cours de cet article, nous verrons ce qu'est 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.


Accelerated Mobile Pages


Présentation d'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 ça fonctionne ?

Pour faire court, 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 balise amp-img permet une prise en charge complète de srcset mê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!

Une solution clef en mains existe désormais pour Joomla! : le plugin wbAMP réalisé par Weeblr. Ce plugin est disponible dans une version Communauté (gratuite) ainsi qu'en version complète (payante) qui ajoute de nombreuses options et le support du contenu de K2.

Nous allons voir dans cette partie comment fonctionne ce plugin et quels paramètrages sont à apporter pour obtenir un parfait affichage AMP.


Aperçu en ligne

Pour voir ce plugin en action, je vous invite d'abord à tester ces deux liens (vers le site de l'éditeur du plugin) depuis votre mobile :


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.


Pré-requis

Avant toute chose, vous devez vous assurer que le paramètre SEF URLs est bien activé dans les paramètres SEO de la configuration du site. A défaut, le plugin ne pourra pas fonctionner.
Par contre, la réécriture d'URL n'est pas indispensable pour faire fonctionnr le plugin. Il est cependant préférable de l'activer également.


Premiers pas

L'installation du plugin se fait comme n'importe quelle extension via le gestionnaire d'extensions du panneau d'administration : soit dans l'onglet "Installer à partir du web", soit en sélectionnant l'archive sur votre ordinateur que vous aurez préalablement téléchargé sur le site de l'éditeur.

Installation plugin wbAMP pour Joomla!


Après l'installation de la version Community, vous disposez de 2 plugins : wbAMP et com_content wbAMP support. Ce dernier n'a aucune option et doit simplement être publié (par défaut, les plugins sont automatiquement publiés après l'installation).
Le plugin wbAMP est celui qui définit et contrôle tous les paramétrages.

La version payante intègre en plus le plugin K2 wbAMP support.


Paramétrages du plugin wbAMP

Voici les différents onglets présents dans le plugin :

  • Plug-in : définir le suffixe des pages (AMP, par défaut)
  • Choix pages : permet de choisir les pages qui seront optimisées en AMP
  • Données méta : sets a header and a header image and also allows for setting publisher information
  • Analytics : set your Google Analytics web property
  • Personnalisation : set a menu, a footer module, (static!) social media buttons
  • Réseau publicité : show and advertising block
  • Avancé : set your credentials for automatic updating of the plugin through the Joomla update mechanism.

Accueil plugin wbAMP pour Joomla!


Choix des pages

La première chose à faire consiste à sélectionner les pages de votre site qui devront être optimisées par le plugin.
En effet, certaines pages n'ont pas besoin d'être affichées en AMP sur mobile. Les pages comme les formulaires ou encore les pages des processus de paiement sur les sites e-commerce peuvent être exemptées de version AMP, par exemple. A contrario, les pages affichant du contenu statique sont celles qui bénéficieront le plus de ce type d'optimisation.
Il faut donc définir des règles qui seront applicables au composant gérant le contenu à optimiser.


Attention : Ces régles seront utilisées pour décider quelles pages sur votre site auront une version AMP. Par défault, aucune extension n'est sélectionnée, et donc aucune page AMP ne sera créée.
Toutes les règles pour la requête en cours doivent être passées avec succés pour qu'une version AMP soit créée. Un composant sans aucune règle ne peut pas avoir de version AMP de ses pages.

Règle plugin wbAMP pour Joomla!


Dans l'exemple ci-dessus, tous les articles des catégories sélectionnées seront optimisés et disponibles en version AMP.
Il est ici possible d'ajouter certains articles spécifiques en indiquant leur ID.


Données meta

Ici, vous allez pouvoir définir l'en-tête de votre page AMP en affichant le nom du site, une image (maxi 479 pixels de large !).
Vous avez également la possibilité de saisir les données liées à l'auteur grâce à l'ID de son compte Google+. Cette saisie générera une balise rel="author" supplémentaire.


header plugin wbAMP pour Joomla!


Analytics

Dans cet onglet, vous pouvez ajouter votre propriété Google Universal Analytics pour que les visites au format AMP soient également comptabilisées et analysées.
Option accessible à partir de la version payante.


Analytics plugin wbAMP pour Joomla!


Personnalisation

ar défaut, le rendu des pages AMP est à dominante bleue. Si vous le souhaitez, le plugin vous laisse la possibilité de personnaliser cet affichage afin que votre page AMP soit adaptée à votre charte graphique. Vous pouvez également afficher un module spécifique dans le pied de page.


Personnalisation plugin wbAMP pour Joomla!


Réseau publicité

Pour afficher un bloc de publicité sur vos pages AMP, vous pouvez utiliser cet onglet où il vous suffira d'ajouter les paramètres du code du bloc selon votre régie publicitaire.
Options accessibles à partir de la version payante.


Réseau publicité plugin wbAMP pour Joomla!


Avancé

Le dernier onglet contient 3 options :

  • Rendering template : pour définir un template spécifique pour vos pages AMP Option accessible à partir de la version payante
  • Identifiants mise à jour : pour entrer vos clefs d'accès et secrète en tant que client pour recevoir les mises à jour du plugin (inutile pour la version Community)
  • Envoi document : vous pouvez définir la durée de mise en cache du plugin ainsi que l'activation (ou non) de la compression Gzip pour vos pages AMP

Avancé plugin wbAMP pour Joomla!


Une fois que tous vos paramètres sont saisis, cliquez sur Enregistrer & fermer.


Vérifications

Nous allons maintenant vérifier que nos pages sont correctement générées au format AMP et qu'elles sont valides selon les critères de Google.

Code de la page

Pour vérifier que le code généré par le plugin est bon, il suffit d'afficher le code source d'une page supposée être optimisée.
Affichez cette page puis, appuyez sur les touches CTRL et U de votre clavier.
Logiquement, vous devez constater la présence de la balise rel="amphtml" dans l'en-tête du code source sous la forme :

<link href="http://mon-site-web.fr/titre-de-ma-page/amp" rel="amphtml" />

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/.

Test données structurées AMP


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. Cela étant dit, n'oublions pas non plus que la vitesse d'affichage du site est quand même un facteur officiel du SEO.


Depuis février 2016, Google affiche dans ses pages des résultats de recherche, une mention AMP pour indiquer aux internautes quels sont les sites qui utilisent cette technologie. Si ce n'est pas une mise en avant, ça y ressemble pourtant fortement.


Par ailleurs, si le format AMP n'est pas un critère pris en compte par Google pour le référencement, il faut bien admettre que la visibilité qui est offerte par le moteur de recherche au carrousel de résultats AMP est juste impressionnante.


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, on peut traduire ce message par le fait que Google a commencé à donner la priorité aux résultats au format 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é dnas les SERPs mobiles.


Ces trois exemples illustrent très bien la direction et l'importance que Google entend donner à ce projet dans un avenir assez proche. Il est donc assez fortement conseillé d'implémenter le format AMP sur votre site. Et si vous ne souhaitez pas faire plaisir à Google, faites-le au moins pour les personnes qui accédent à votre site via leur mobiles :)


Contenu dupliqué ou pas ?

Si grâce à AMP, vous affichez le même contenu (ou presque) des pages du site mais avec un autre format, 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="http://mon-site-web.fr/titre-de-ma-page/amp" rel="amphtml" />
    
  • sur votre page AMP, la balise link rel=canonical indique à Google que ce contenu existe aussi au format HTML standard :
    <link rel="canonical" href="http://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 interessantes pour qui souhaite approfondir ce sujet.


Conclusion

Vous connaissez et maîtrisez maintenant toutes les subtilités concernant les pages 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.

 

Merci pour toutes ces informations

Merci web-eau.net d'avoir publié ces articles qui m'aident à mieux référencer mon site !

Montant:   EUR

web-eau.net is not affiliated with or endorsed by the Joomla! Project or Open Source Matters. The Joomla! name and logo is
used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.