Installer Google AMP sur votre site web WordPress

Historique

Inutile de rappeler que Google est le moteur de recherches numéro 1 sur le Web. A partir de là, il est donc normal de suivre un peu les évolutions ou les nouvelles attentes de ce dernier pour s’assure que son site ne soit pas pénalisé dans les résultats.

Parmi les changements que j’avais effectué ces derniers temps sur le site, il y a notamment le changement d’URL de ce dernier. J’avais alors dit au revoir à l’ancienne URL que j’utilisais depuis 2006 : blog.akril.net pour aller vers quelque-chose de plus simple. Et j’avais également profité de l’occasion pour passer le site en https. 

Même si je reste peu convaincu par l’intérêt de sécuriser un site qui ne traite pas d’informations confidentielles ou de données personnelles. Il faut bien reconnaître que la tendance est là. Et la plupart des hébergeurs proposent désormais des certificats SSL gratuits. Et lorsque ce n’est pas le cas, vous pouvez également utiliser Let’s Encrypt.

Soyons clair, je n’ai rien d’un professionnel en SEO ou autre. Je passe donc sur la pertinence et les analyses de savoir si oui ou non votre site vous rapportera ou non plus d’argent si vous disposez de pages AMP pour chacun de vos articles. Mon objectif est simplement de suivre un peu les grosses tendances ou changements. Et lorsque c’est nécessaire et que c’est facile à mettre en place, j’essaie de procéder au changement sur le blog ne serait-ce que pour tester et voir ce que ça donne !

C’est pourquoi je me suis intéressé à ces nouvelles pages AMP. 🙂

La théorie

Il y a quelques années déjà, avec l’avènement des smartphones et le fait que nous consultions Internet de plus en plus sur des téléphones ou tablettes, il a fallu trouver une solution pour simplifier les sites web afin que la majorité puissent s’afficher sur des ordinateurs mais également sur des périphériques mobiles qui utilisent bien souvent les infrastructures 3G et/ou 4G d’opérateurs et qui restent encore – pour l’heure – moins rapide qu’une connexion ADSL ou Fibre.

Vous avez alors peut-être entendu parlé de « Responsive« . Le fait que votre site s’adapte automatiquement et que l’affichage change en fonction du type de périphérique qui accède au contenu. Cela permet en effet de réduire les bordures, supprimer les images superflues pour réduire la taille d’une page et ainsi accélérer le chargement d’une page mais aussi tout simplement pour améliorer sa lisibilité lorsque votre lecteur utilise un écran plus petit.

Et bien Google a décidé d’aller encore plus loin en lançant il y a déjà un moment son projet AMP pour Accelerated Mobile Pages (devenu depuis un projet open-source). Le concept est simple. L’objectif est de créer des versions allégées des sites web classiques afin de fluidifier la navigation web sur mobile ou tablette en accélérant significativement la vitesse de chargement des pages.

D’ailleurs, si vous consultez beaucoup de sites depuis vos terminaux mobiles, vous aurez probablement déjà rencontré ce type de pages.

Voici un exemple. Si je teste un recherche de « windows rds » depuis mon smartphone, je vois par exemple le résultat suivant :

On reconnaît les pages qui disposent du petit logo AMP. Ces pages s’ouvriront donc à priori plus rapidement et l’ensemble de l’article devrait être purgé de tout design superflu pour ne présenter que le contenu.

Bien sûr, les développeurs peuvent aussi personnaliser ces pages AMP, ajouter de la publicité, etc. Au final, c’est comme développer une version spécifique de votre site Internet. Cela ajoute donc nécessairement du travail aux développeurs ou aux personnes qui s’occupent d’un site web.

Si je clique sur le lien correspondant à mon site avec le Google Chrome de mon smartphone, on voit que c’est la page Responsive de mon thème WordPress qui s’affiche puisque le site détecte en effet que le visiteur utilise un terminal mobile. On remarque que la page reprend les mêmes couleurs que le thème principal du blog, présente les mêmes informations de date, de nombre de commentaires, d’auteur et même les publicités, … que si vous utilisiez votre ordinateur classique.

Maintenant, si on copie-colle cette URL et qu’on lui ajoute à la fin le morceau /amp on peut alors accéder à la page optimisée AMP. La page est simplifiée et purgée de ses publicités car le JavaScript est également supprimé. Même le logo est chargé en tant que texte et non pas avec l’image standard.

L’avenir dira si tous les sites passent à ce nouveau format… Aujourd’hui, le projet AMP revendique plus de 31 millions de domaines et le périmètre s’élargit en proposant une alternative pour la gestion des emails.

Dans la plupart des cas, pour tester l’affichage d’une page compatible AMP sur un site qui le propose, il vous suffit de récupérer la page en question et d’ajouter /amp à la fin de l’URL. Par exemple, si vous souhaitez afficher la version AMP de la page d’accueil de Akril.net, il vous suffit de vous rendre sur la page suivante : https://akril.net/amp.

Intérêt ?

Comme je le disais en début d’article dans mon cas je souhaitais juste tester et me rendre compte de la faisabilité. Je ne me risquerai donc pas à une analyse financière ou SEO pour savoir si ça vaut le coup et si avec ces pages votre site remontera un peu plus haut (ou non) dans les recherches Google.

D’après les quelques sites que j’ai lu, les premières analyses semblent confirmer que ce type de page est favorisée dans les résultats de Google car elles s’affichent plus rapidement. Un product manager du Projet AMP indiquait d’ailleurs qu’une page AMP se charge autour de 0,7 secondes là ou la même page non-AMP s’affiche en 22 secondes (source article).

Mise en place sur WordPress

Heureusement, il existe des solutions vous permettant d’éviter d’avoir à développer et maintenir une version AMP de votre site web. Si vous utilisez WordPress il existe 2 extensions qui vous permettent de répondre à ce besoin (presque) automatiquement ! 🙂

Vous pouvez les retrouvez en suivant ce lien ou en les installant directement depuis WordPress grâce à leurs noms :

• AMP for WordPress (Automatic) : c’est un module avec très peu de configuration, proposé par les mêmes développeurs à l’origine de WordPress. L’extension est fiable et simple à mettre en place mais offre peu de paramétrage.
• AMP for WP – Accelerated Mobile Pages : à mon sens la meilleure extensions pour mettre en place rapidement et simplement une version AMP de votre site web. L’extension est gratuite mais avec un mode premium. Cela dit, les fonctionnalités gratuites sont déjà très suffisantes. C’est celle que j’utilise pour le blog.

De nombreuses études semblent indiquer que les sites compatibles AMP voient leur trafic et leurs revenus publicitaires augmentés. Probablement car les sites étant plus rapides, ils seraient privilégiés dans les réponses de Google.

Pour l’instant, je l’ai mis en place depuis hier… Nous verrons donc une fois que Google aura indexé ses nouvelles pages si j’observe un changement quelque part. Et si c’est le cas, nous aurons l’occasion d’en parler dans un prochain article ! 😉

Pour aller plus loin : supprimer la featured image sur une page AMP

C’est un problème auquel j’ai été confronté au cours du test de l’extension AMP for WordPress. Par défaut, vous avez le choix entre 3 thèmes proposés gratuitement. Et à chaque fois, l’extension essaie d’afficher la « featured image » en haut de l’article. Ce qui fait que dans mon contexte de charte graphique, c’est non seulement redondant mais en plus pas optimisé (et moche). D’après les liens que j’ai eu l’occasion de lire, je ne semble pas être le seul à avoir ce problème : lien1, lien2.

La solution proposée à cette adresse n’a pas fonctionné pour moi. J’ai donc utilisé les options proposées par l’extension afin d’ajouter du code CSS et de masquer cette zone afin qu’elle ne soit pas visible. De cette façon, je conserve cette fonction pour le site classique mais ne l’affiche pas pour les utilisateurs qui accèdent à la page AMP via un périphérique mobile.

Voici le code que j’ai utilisé :

.amp-wp-article-featured-image {
display:none;
}

.amp-featured-image {
display:none;
}

Et vous, avez-vous activé AMP sur votre site web ? Qu’en pensez-vous ? 🙂