Petit guide pratique pour l'AMP (Accelerated Mobile Pages)

On est au mois de février et Google accélère le déploiement de l’AMP (Accelerated Mobile Pages). À la fin du mois de février 2016, Google va afficher les résultats des pages AMP dans son moteur de recherche. C’est surtout destiné aux utilisateurs sur mobile et je dirais que cela s’adresse pour les sites d’actualités dans un premier temps. Google News Lab a commencé une série de vidéos sur l’AMP depuis quelques semaines. Ils vont faire 7 vidéos pour expliquer tous les aspects de la vidéo et ils en sont déjà à la 4e vidéo cette semaine. On vous recommande de les regarder en sachant qu’ils répondent aussi aux questions si vous rencontrez des problèmes avec l’Accelerated Mobile Pages.

L’Accelerated Mobile Pages pour WordPress

La plupart des sites web utilisent des CMS. Cela peut être WordPress, Drupal ou Joomla. J’ignore le cas de Joomla, mais je sais que Drupal possède déjà une extension pour l’AMP. Cette extension de Drupal est encore en développement. Mais WordPress propose une extension AMP (Accelerated Mobile Pages) qui est déjà fonctionnelle. Il y a 2 semaines, WordPress a proposé une mise à jour qui corrige de nombreuses erreurs de validation. Et franchement, si vous avez un site ou blog sous WordPress, installez ce plug-in. Vous le téléchargez, vous l’installez et c’est tout. Il n’y a aucune configuration à faire. Il vous suffit d’ajouter le mot AMP à la fin de vos URL et vous verrez votre article WordPress à la norme AMP tel que : www.votresite.com/votre-article-wordpress/amp.

Voici un exemple d’une de nos pages normales :

Et voici cette même page en AMP :

Le plug-in WordPress ne nécessite aucune configuration, car la conversion en AMP est automatique. Il y a déjà des utilisateurs qui ont téléchargé le plug-in et l’ont installé. Ensuite, ils testent l’URL en AMP et quand la page s’affiche, ils se disent que c’est bon et qu’ils sont prêts. En fait, les vrais problèmes vont commencer lorsque vous affichez la page. Ce n’est pas parce que la page s’affiche correctement qu’elle est valide. L’AMP (Accelerated Mobile Pages) exige que toutes les pages, via tous ses partenaires de CDN, utilisent la même norme. Le respect de la norme est strict et s’il y a un seul problème, alors il n’y a pas d’indexation.

La validation est cruciale pour l’AMP (Accelerated Mobile Pages)

Pour tester vos pages, vous devez ajouter le paramètre d’URL #development=1 à votre page AMP tel :

https://actualite.housseniawriting.com/science/2016/02/09/le-petit-age-glaciaire-associe-a-la-peste-et-a-la-chute-des-empires/13396/amp/#development=1

Vous pouvez le faire sous Chrome et Firefox (préférez la dernière version du navigateur pour intégrer le validateur le plus récent). Ensuite, vous cliquez sur F12 pour lancer les outils de développement et vous regardez dans l’onglet Console :

Déjà, on voit que la console détecte que c’est une page AMP, mais vous devez la recharger pour qu’elle la valide et vous devez voir le message intitulé AMP Validation Successful :

Si vous ne voyez pas ce message, alors votre page n’est pas valide ce qui signifie que Google et ses partenaires ne vont jamais indexer vos pages et qu’elles ne seront jamais prises en compte. Ce n’est pas comme les erreurs qu’on voit dans la Search Console avec des choses telles que le titre en double. Ce type d’erreur, pour les pages normales, est embêtant, mais Google va quand même les indexer. En revanche, si vos pages AMP ne sont pas valides, alors elles n’existent pas.

Si la validation est un échec, alors vous verrez plusieurs informations sur la Console du navigateur. Cliquez dessus pour voir le contenu ou la partie du contenu qui pose un problème. Voici une autre page d’un de mes autres sites. C’est une page très ancienne et le genre d’erreur que vous pourrez avoir.

Le message est concis, mais il est lié à l’attribut Align. En gros, à cette époque, j’avais mis des attributs Align à des balises HTML P (paragraphe). C’est des attributs HTML et non CSS et l’AMP (Accelerated Mobile Pages) n’aime pas du tout ça et il ne va pas valider vos pages. De la même manière, j’ai eu une erreur similaire avec l’attribut Start pour les listes. Par exemple ol start permet de commencer une liste à partir d’une valeur donnée et non de 1. AMP interdit ce type d’attribut. C’est pourquoi il est crucial de lire les directives d’une page AMP pour comprendre ce que vous pouvez utiliser ou non. Oubliez les scripts, car l’AMP possède aussi son propre balisage.

De plus, ne vous contentez pas de Chrome. Testez vos pages sur tous les navigateurs possibles. L’AMP (Accelerated Mobile Pages) est juste une variante simplifiée du HTML et cela doit s’afficher sur tous les appareils et systèmes. Quand j’ai installé le plug-in, la validation fonctionnait sur Chrome, mais j’avais une page blanche sur tous les navigateurs incluant Firefox. Et là, personne ne pourra vous aider, car c’est un problème lié à la fois de votre site, mais aussi à l’écosystème très complexe de WordPress. Voici l’erreur qui m’a donné la migraine :

src=https://cdn.ampproject.org/v0.js’ async=’async’ defer=’defer”

Remarquez l’attribut Defer avec l’erreur dans les guillemets. La Console Search de Google est la seule à avoir affiché cette erreur, donc vérifiez la validation de vos pages dans la Console Search, mais l’AMP de Console Search n’est pas régulièrement mis à jour et donc, on devra procéder à tâtonnement.

Quant à cette erreur, elle ne provenait pas du plug-in AMP (Accelerated Mobile Pages), mais d’un autre plug-in WordPress. Ce qui fait que vous aurez des erreurs aléatoires, que vous ne comprenez pas, à cause de l’écosystème de WordPress. J’utilisais un plug-in appelé RS Head Cleaner Plus (un conseil, évitez-le comme la peste). Ce plug-in optimise l’en-tête d’un article Wordpres en minifiant tout ce qui est possible d’imaginer. Il ajoutait l’attribut Defer pour mitiger la charge du JavaScript, mais ce plug-in est très buggé et il rajoutait aussi cet attribut dans les pages AMP et en plus, il le faisait avec une erreur de guillemet. J’ai cherché un peu et j’ai trouvé un utilisateur qui avait la même erreur (la page blanche AMP dans d’autres navigateurs), mais pour lui, c’était un plug-in différent qui était en cause. Donc, testez à fond toutes vos pages AMP et validez-les sur tous les navigateurs qui supportent la norme. Firefox supporte aussi la validation de l’AMP.

Et ici, on parle d’un site standard. Mais imaginez le bordel que cela va provoquer avec des plug-ins tels que BuddyPress ou WP-ECommerce. Gardez ceci à l’esprit, plus des plug-ins injectent des choses dynamiquement dans votre contenu et plus, vous allez avoir des problèmes avec l’Accelerated Mobile Pages. Et quand vous avez terminé la validation, vous devrez encore vous soucier des Microdonnées.

Les microdonnées sont obligatoires pour l’AMP (Accelerated Mobile Pages)

Vous ne lirez nulle part que les microdonnées tels que Schema.org sont obligatoire pour l’AMP. Mais quand vous regardez votre Console Search sur partie de l’AMP (Accelerated Mobile Pages), vous risquez de voir les messages suivants :

Donc, assurez-vous de respecter toutes les balises sur les microdonnées. Et Google propose de nombreuses exigences sur Schema.org. Ce n’est pas uniquement le nom de votre site ou l’auteur, mais également la date de publication et de modification, le logo et les images. C’est un avis personnel, mais les images sont cruciales dans l’AMP et Google exige des images avec une largeur minimale (696 pixels de large). Cela concerne surtout les sites d’actualité pour qu’ils puissent s’afficher correctement dans le carrousel de l’Accelerated Mobile Pages dans le moteur de recherche.

Il existe des plug-ins WordPress qui vous permettent d’ajouter facilement les microdonnées, mais mon préféré est Add Meta Tags. Il supporte de nombreuses normes telles que Schema.org, Open Graph, Dublin Core, etc. De plus, son auteur est très réactif, car il a déjà mis à jour son plug-in pour intégrer les microdonnées dans vos pages AMP. Le plug-in est gratuit et il n’y a pas d’extensions payantes à la con comme on peut le voir sur des poubelles telles que Yoast SEO.

Une fois que vous avez correctement balisé vos pages AMP, alors vous pouvez les tester avec l’outil d’extraction des microdonnées de Google. Fournissez l’URL AMP pour que cela fonctionne. Et vous comprendrez mon opinion sur les images.

Pour tester, utilisez une image inférieure à 696 pixels et vous aurez un message d’avertissement dans la catégorie BlogPosting. Attention, les sites d’actualités doivent utiliser les balises liées à NewsArticle qui sont différentes de BlogPosting.

Évitez de vous baser sur la Console Search de Google

Une fois que votre validation et votre marquage de Microdonnées sont corrects, alors vous n’avez plus qu’à attendre que Google prenne en compte les changements. Mais voilà, la partie AMP (Accelerated Mobile Pages) de Console Search n’est pas complètement fonctionnelle. Ce qui fait que vous aurez des délais entre la conformité de vos pages et les résultats. Cela signifie que vous aurez toujours avoir des messages d’erreur même si vos pages sont conformes. Testez simplement la validation et les microdonnées et si tout est correct, alors ne vous inquiétez pas. Google va les prendre en compte au fil du temps. Jusqu’à il y a quelques jours, aucune de mes pages AMP n’était indexée. J’ai demandé à Google News Lab et le responsable de produit de l’AMP a répondu que c’était dû au lag et qu’il fallait uniquement se concentrer sur la validation. Aujourd’hui, je vois que certaines de mes pages AMP sont indexées, mais qu’il y a en des milliers qui sont considérés comme invalides par Google.

Je n’ai pas encore intégré le module Analytics, mais j’ai pu afficher les publicités. Attention, vous devez utiliser des balises spéciales de l’AMP à la fois pour Google Analytics et Adsense. Et le plug-in WordPress ne les intègre pas. Il vous faudra modifier manuellement les pages AMP du plug-in.

Intégrer Google Analytics dans l’AMP (Accelerated Mobile Pages)

Une petite mise à jour sur ce guide de l’AMP avec l’ajout de Google Analytics. Le module est encore en train d’être peaufiné, mais on peut déjà l’utiliser sur l’Accelerated Mobile Pages. Il existe 2 moyens de collecter les statistiques sur vos pages AMP. La première est d’utiliser le format amp-pixel qui utilise une image d’une dimension de 1 pixel pour traquer des pages. Cela peut être utile pour des pages simples et que vous ne voulez pas généraliser la collecte des statistiques. Mais c’est le module amp-analytics qui nous intéresse puisqu’il nous permet de collecter des statistiques de plusieurs fournisseurs telles que Google Analytics ou comScore. Mais comme la majorité des sites web se basent sur Google Analytics, on va détailler la procédure avec Google. Notons que Google propose un guide complet pour intégrer Google Analytics sur l’AMP. Vous avez aussi la documentation officielle du projet AMP (Accelerated Mobile Pages).

L’intégration de Google Analytics se base sur 2 composants. La première est l’appel à un composant externe de l’Accelerated Mobile Pages qu’on doit insérer dans la balise HEAD avant la librairie AMP JS :

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js">
</script>

Vous mettez la ligne ci-dessus avant l’appel au moteur de rendu de l’AMP. Dans le plug-in Worpdress, vous devrez le mettre manuellement dans un fichier du plug-in à l’heure où nous écrivons ces lignes. Dans le futur, on peut penser que l’intégration sera automatique, mais pour le moment, il faut le faire à la main. Donc, vous allez dans le répertoire de plug-ins de votre WordPress, vous cherchez le plug-in AMP et vous cherchez le fichier single.php. Il trouvera généralement dans le dossier amp/templates/single.php. Vous l’ouvrez et vous ajoutez la ligne ci-dessus dans l’en-tête. Mettez-le avant la librairie AMP JS et testez la page pour la validation de l’AMP (Accelerated Mobile Pages).

Si c’est bon, on va ajouter le code qui permet de traquer les pages AMP. Google recommande de créer une propriété différente dans Google Analytics pour que vous puissiez collecter séparément les statistiques de vos pages AMP et classiques. Le module amp-analytics est plus puissant, car il vous permet de collecter toutes sortes d’événements. Vous pouvez avoir les pages vues, des événements sur un lien, le nombre de partages sur les réseaux sociaux. Très complexe et très puissant, amp-analytics vous permet de collecter tout qui est possible avec un Google Analytics classique sauf qu’il faut tester à chaque fois pour passer la validation. J’ai juste mis la collecte pour les pages vues pour le moment. Le module amp-analytics supporte PageView, Event ou Social.

Dans la balise Body, vous devez mettre le code suivant :

<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
 "vars": {
 "account": "UA-XXXXXXX-XX"
 },
 "triggers": {
 "AMPPageview": {
 "on": "visible",
 "request": "pageview"
 }
 }
}
</script>
</amp-analytics>

C’est assez simple. Vous remplacez simplement la variable account par votre ID de suivi de Google Analytics. Le Trigger permet de collecter les statistiques sur vos pages vues. Notez que la chaine de caractère AMPPageView est laissé à votre discrétion et vous pouvez mettre ce que vous voulez. Dans l’exemple de code fourni par Google, vous verrez que le code contient des commentaires. Supprimez-les, car cela pose des problèmes avec la validation. Et c’est tout, quand Google va déployer pleinement l’Accelerated Mobile Pages, vous pourrez collecter les statistiques de vos pages AMP. Et comme on a utilisé une propriété séparée, on pourra déterminer si l’AMP tient ses promesses.

Intégrer Google Adsense dans l’AMP (Accelerated Mobile Pages)

Le module amp-analytics est un peu difficile à maitriser, mais la publicité avec l’AMP est un jeu d’enfant. Étant donné que la plupart des scripts externes sont interdits dans l’Accelerated Mobile Pages, il faut utiliser une balise spéciale appelée amp-ad en spécifiant simplement votre réseau publicitaire et les informations sur la publicité. L’exemple ci-dessous concerne Adsense :

<amp-ad width="468" height="60"
 type="adsense"
 data-ad-client="ca-pub-XXXXXXXXXXXX"
 data-ad-slot="XXXXXXXX">
 </amp-ad>

Vous insérez le code ci-dessus et voilà, vos publicités Adsense vont s’afficher parfaitement dans vos pages AMP. Pour le moment, amp-ad supporte Adsense, AdReactor, DoubleClick, AdTech et A9. Encore une fois, testez et retestez vos pages AMP (Accelerated Mobile Pages) après chaque modification. Une chose concernant ces modifications est qu’elles vont disparaitre si vous mettez à jour le plug-in WordPress AMP dans le futur. Pour moment, on fait ces changements pour maitriser la procédure, mais ensuite, je pense qu’on pourra le faire automatiquement via des plug-ins ou des templates dédiés.

Ce petit guide pratique vous donne quelques bases pour commencer, mais il faudra persévérer un peu pour que tout fonctionne correctement. Mais sachez-le, ce ne sera pas aussi facile contrairement à ce qu’on peut lire un peu partout. L’aspect strict de la norme m’incite à penser que Google veut faire bien plus de choses avec le contenu AMP qu’un simple aspect du cache et d’un affichage instantané. Et l’obligation des microdonnées renforce cette opinion. À vous de lire entre les lignes sur pourquoi Google est tellement enthousiaste avec l’Accelerated Mobile Pages.