Plugin AMP for WP : un site mobile rapide sur WordPress


Dans cet article, je vais vous présenter le plugin AMP for WP qui permet de mettre en place le format AMP sur WordPress pour proposer à vos visiteurs des pages ultra-rapides sur mobile.

Dès 2015, Google a commencé à communiquer autour de ce nouveau format conçu spécialement pour le mobile : le format AMP (Accelerated Mobile Pages ou "Pages mobiles accélérées").

Son objectif est simple : offrir aux internautes qui consultent votre site depuis un smartphone un vrai confort de navigation, avec un temps de chargement très rapide. Mais comment utiliser le plugin AMP for WP pour adopter le format AMP sans coder ? C'est parti !

Le format AMP : optimiser la vitesse de chargement
Le format AMP : optimiser la vitesse de chargement

Pourquoi adopter une version AMP sur WordPress ?

Une version AMP offre d'abord un confort de navigation accru pour le visiteur qui vient sur votre blog depuis un mobile. On sait que les connexions mobiles sont parfois lentes. AMP est l'une des méthodes qui permettent d'augmenter la vitesse de chargement de manière considérable.

Plus la page se charge rapidement, plus il y a des chances que le visiteur poursuive la consultation du site au lieu d'abandonner. En proposant des pages AMP sur WordPress, vous pouvez donc réduire le taux de rebond et augmenter le temps moyen passé sur les pages.

Ensuite, même si AMP n'est pas, en soi, un critère de référencement, les pages AMP sont performantes... et sur l'index mobile de Google, ça peut faire la différence : vous vous assurez de ne pas faire partie des sites les plus lents de votre thématique et donc de ne pas avoir de "malus" en matière de SEO.

Par ailleurs, Google donne de plus en plus de place à AMP :

  • Les pages AMP sont signalées dans les résultats de recherche ;
  • Elles bénéficient d'une rubrique dédiée dans Google Search Console ;
  • Google a très vite fait en sorte que sa régie publicitaire AdSense soit compatible avec AMP afin de pouvoir proposer des publicités sur ces pages...

Tous ces signaux indiquent qu'AMP est un projet important pour Google. Raison de plus pour monter dans le train !

Google valorise également AMP à travers différents affichages, comme le carrousel et les AMP stories (que Google désigne désormais sous le nom "Web Story"), un format plus immersif...

À quoi ressemble une page en version AMP ?

Le format AMP prône un retour à la simplicité. Il met en avant le contenu et limite tous les artifices qu'il peut y avoir autour. Une page AMP, c'est du texte, des images, des liens basiques. C'est parfois un peu de publicité, la possibilité de suivre ses statistiques... Mais côté design, on joue sur la sobriété !

La page se limite au strict nécessaire afin de garder un temps de chargement réduit au minimum. À ce jour, le format AMP concerne donc en priorité des sites qui font la part belle au contenu. En tant que blogueur, vous êtes bien placé pour l'utiliser ! Voilà par exemple l'un de mes articles en activant le format AMP :

Rendu d'une page AMP
Rendu d'une page AMP

Le plugin AMP for WP pour utiliser AMP sur WordPress

Lorsque j'ai mis en place la version AMP sur mes blogs, j'utilisais le plugin AMP "officiel" soutenu par l'équipe de WordPress… et rencontrais de nombreux bugs. J'ai donc opté pour AMP for WP, un plugin non seulement très complet mais aussi en constante évolution car son créateur s'implique beaucoup dedans, pour développer les fonctionnalités et la qualité d'ensemble de l'extension.

Par conséquent, il est fort possible que de nouvelles rubriques apparaissent seulement quelques heures après la rédaction de ce tutoriel :) J'espère néanmoins que l'article vous aidera à activer et paramétrer AMP sur votre blog WordPress !

Paramètres du plugin AMP pour WordPress

Je vais à présent vous guider à travers les principales options de paramétrage du plugin AMP for WP. Vous pouvez l'installer par le biais du menu Extensions > Ajouter de WordPress, en n'oubliant pas de l'activer.

Installation du plugin AMP for WP
Installation du plugin AMP for WP

Le plugin crée ensuite un nouveau menu dans l'administration de WordPress, baptisé "AMP".

Le menu Setup

On trouve d'abord des options très générales baptisées "Setup". Elles vous permettent de définir :

  • Un type de site - Blog, site d'actualité, entreprise locale, site e-commerce, etc.
  • Où vous souhaitez mettre en place une version AMP - Ici, vous pouvez activer sélectivement AMP sur les articles, les pages, la page d'accueil, une page d'accueil personnalisée, les pages d'archives (c'est-à-dire les pages de catégorie et d'étiquettes WordPress). Je vous conseille de tester le rendu de ces pages en AMP afin de voir s'il vous convient, avant de prendre une décision.
  • Design et présentation - Une rubrique très synthétique où vous pouvez uploader un logo et définir une couleur dominante pour le design de vos pages AMP et notamment des liens.
  • Tracking statistique - Vous pouvez ici intégrer de nombreux outils de suivi statistique différents, depuis le traditionnel Google Analytics jusqu'au pixel Facebook, en passant par Google Tag Manager, Matomo, comScore, Quantcast et une foule d'autres outils de mesure.
  • Confidentialité (Privacy Settings) - Vous pouvez ici cocher une option pour afficher une bannière de cookies et prendre en compte le RGPD sur votre site.
  • Publicité (Advertisement) - Un lien d'accès rapide aux options publicitaires, si vous souhaitez diffuser des annonces sur vos pages. J'en reparle un peu plus bas.
  • Compatibilité avec des extensions tierces (3rd Party Compatibility) - Vous pouvez activer ici des options de compatibilité avec quelques plugins connus du marché, notamment les principaux plugins SEO (Yoast, All-in-One SEO, Rank Math, SEOPress, Genesis) ou encore des plugins de formulaires.

Paramètres globaux AMP for WP (Settings)

Les paramètres globaux du plugin AMP for WP vous permettent de mettre en ligne un logo pour votre site au format AMP mais aussi de choisir sur quel type de contenu ce format va être utilisé.

Vous pouvez aussi cocher une option AMP Takeover - Les utilisateurs sur mobile seront systématiquement réorientés vers la version AMP plutôt que vers la version mobile classique de votre site et le thème AMP prendra le dessus sur le thème de votre blog.

Ici, le choix dépend souvent des fonctionnalités que vous proposez sur votre site. Certaines ne s'adaptent pas bien au format AMP, les possibilités de monétisation sont souvent plus limitées aussi sur AMP car peu de régies publicitaires proposent des tags compatibles AMP… et ça peut être un critère de décision.

Options générales du plugin AMP for WP
Options générales du plugin AMP for WP

Publicité (Advertisement)

Le plugin AMP pour WordPress permet d'intégrer très facilement des publicités Google AdSense dans vos pages AMP, grâce à des emplacements et des options de paramétrage prédéfinies.

Par exemple...

  • Sous le header.
  • Sous le footer.
  • Au-dessus du contenu d'un post.
  • Sous le contenu d'un post.
  • Sous le titre d'un post.
  • Au-dessus des articles similaires.

Il suffit de choisir la taille de l'emplacement publicitaire et d'entrer l'identifiant client AdSense (Data AD Client) et l'identifiant de la publicité elle-même (Data AD Slot).

Si vous ne savez pas comment récupérer ces informations, allez sur votre compte Google AdSense dans la rubrique Mes annonces > AdSense pour les pages de contenu > Blocs d'annonce et cliquez sur "Obtenir le code" du bloc d'annonces que vous souhaitez intégrer à vos pages AMP (il faut qu'il ait été créé au préalable). Vous allez voir les deux informations (data-ad-client et data-ad-slot) dans le code.

Publicité en version AMP
Publicité en version AMP

Le plugin AMP for WP vous propose aussi une option pour indiquer si le bloc d'annonce est responsive. Vous pouvez aussi cocher l'option "Optimize For Viewability" pour que le plugin tente d'optimiser davantage le temps de chargement de la publicité.

Options SEO AMP for WP

Le plugin AMP for WP propose quelques options SEO, et notamment la possibilité d'intégrer les meta tags (title et meta descriptions) issues des principaux plugins de référencement du marché.

Dans cette rubrique, vous avez aussi la possibilité d'ajouter du code dans le <head> du site si vous le souhaitez : attention toutefois, il doit être écrit selon les standards AMP, faute de quoi votre site renverra des erreurs.

Vous pouvez aussi choisir d'empêcher l'indexation des contenus paginés.

Intégration de Yoast SEO avec AMP
Intégration de Yoast SEO avec AMP

Page Builder sur AMP for WP

La rubrique suivante, intitulée "Page Builder", vous permet d'activer un page builder, autrement dit, un constructeur de pages en version AMP. Une fois l'option activée, vous pouvez ajouter un article par exemple et retrouver parmi les options disponibles sur la page de création d'article la possibilité de lancer l'outil.

Il vous propose différents templates "tout prêts" pour configurer l'apparence de vos pages AMP.

Page Builder sur AMP for WP
Page Builder sur AMP for WP

Si vous ne voyez pas ce page builder quand vous êtes sur la page de rédaction d'un article, cliquez sur "Options de l'écran" tout en haut à droite de la page et cochez "AMP PageBuilder".

Progressive Web App (PWA)

Au-delà du format AMP, il existe un autre format pensé pour les mobiles : la Progressive Web App, ou PWA. C'est un concept à mi-chemin entre l'application et le site web : l'idée est de rendre une partie de votre site consultable hors connexion, dans un environnement semblable à celui d'une application mobile... mais sans qu'il soit nécessaire d'installer une application mobile.

Le format PWA est en plein développement, c'est donc une fonctionnalité qui en réalité n'est pas directement liée à AMP et qui installe sur votre blog un autre plugin, PWA for WP.

Performance de la version AMP

Une version AMP est déjà conçue pour offrir un site mobile ultra-rapide... mais si vous voulez rendre AMP pour WordPress encore plus rapide, il y a dans cette rubrique quelques options bonus pour optimiser le temps de chargement :

  • Minify - Permet de réduire la taille du code de vos pages AMP.
  • Leverage Browser Caching - Permet de tirer profit de la mise en cache (mise en mémoire) par le navigateur de certains éléments récurrents de vos pages, pour éviter qu'ils ne soient chargés systématiquement.
  • Optimize CSS - Une option pour réduire la taille des fichiers qui gèrent la mise en forme de votre site WordPress.

Statistiques et mesure d'audience

Le plugin AMP for WP permet d'intégrer très facilement une foule d'outils de statistiques. Google Analytics, Google Tag Manager mais aussi de nombreux outils de tracking et d'analytics (Facebook Pixel, Quantcast, comScore, StatCounter...).

En règle générale, le paramétrage est très simple car vous avez juste à activer l'outil qui vous intéresse et à entrer votre identifiant.

Analytics sur AMP
Analytics sur AMP

Données structurées (Structured Data)

Ce plugin AMP pour WordPress prend en charge différent types de données structurées : ce sont des éléments de code qui permettent d'indiquer aux moteurs de recherche que vous publiez un certain type de contenu, par exemple un article de blog, une recette de cuisine, des informations sur un produit…

Le moteur de recherche peut ensuite faire ressortir ces informations dans ses résultats, ce qui permet souvent de donner plus de visibilité à votre site et d'améliorer le taux de clic vers vos pages, comme ici avec les données structurées "Recettes". Je vous parle plus en détail des données structurées dans cet article.

SEO et images : les données structurées Recettes
SEO et images : les données structurées Recettes

Par défaut, les articles et les pages intègrent les données structurées de type "BlogPosting" ce qui convient à la plupart des blogs mais vous pouvez modifier ce paramètre si vous le souhaitez, en définissant le cas échéant une image par défaut à intégrer aux données structurées.

Vous pouvez également installer un plugin complémentaire pour une gestion plus poussée de ces données structurées.

Données structurées AMP for WP
Données structurées AMP for WP

Cookies et RGPD (Notice Bar & GDPR)

Ce plugin AMP pour WordPress intègre deux options pour tenir compte de la législation européenne :

  • L'option Notice Bar permet d'afficher un bandeau qui informe vos visiteurs de l'utilisation de cookies sur votre blog. Vous pouvez choisir la phrase qui s'affiche (Notice Content) ainsi que le texte du bouton qui permet d'accepter la notification. Notons qu'un tel bandeau d'information n'est pas suffisant en France au regard de la loi actuelle.
  • L'option GDPR permet d'afficher un message plus complet, d'y intégrer un lien vers la politique de confidentialité du site en proposant aux utilisateurs de l'accepter ou de la refuser.
Options RGPD sur AMP pour WordPress
Options RGPD sur AMP pour WordPress

Notification push en version AMP

Cette fonctionnalité est très intéressante si vous voulez informer les internautes d'une mise à jour de votre site directement dans leur navigateur : le plugin AMP for WP s'intègre en effet avec le service OneSignal, qui affichera des notifications push dans le navigateur de ceux qui auront choisi de s'abonner.

Pour utiliser le système, votre site doit être en https et vous devez au préalable avoir créé un compte OneSignal. Il suffit ensuite de renseigner l'identifiant OneSignal dans les paramètres du plugin WordPress AMP.

Il existe aussi des possibilités d'intégration avec deux autres services, iZooto et Truepush.

Formulaire de contact (Contact Form)

Le plugin propose des intégrations avec certains plugins de formulaires pour WordPress (Gravity Forms, Contact Form 7, Ninja Forms). Elles exigent parfois d'installer un module complémentaire.

Gestion des commentaires (Comments)

Au début, quand on activait la version AMP sur WordPress, il était impossible pour les visiteurs de poster des commentaires... ce qui pouvait freiner certains utilisateurs, notamment quand votre site fait la part belle aux interactions.

Les choses ont heureusement bien évolué et aujourd'hui, on peut activer l'affichage des commentaires d'un simple clic sur les articles et sur les pages.

Vous pouvez ensuite choisir le système de commentaires que vous préférez : soit les commentaires WordPress par défaut, en indiquant combien vous souhaitez en afficher et si vous voulez que l'image de profil de l'utilisateur apparaisse ; soit un service de commentaires tiers, par exemple Disqus, les commentaires Facebook ou autres.

Gestion des commentaires sur AMP pour WordPress
Gestion des commentaires sur AMP pour WordPress

Facebook Instant Articles

Le plugin propose d'activer en un clic la prise en charge des Facebook Instant Articles. Le principe est très similaire à AMP : il s'agit de proposer des articles dans une version allégée facile à consulter sur les mobiles. Les articles se chargent directement dans l'application mobile Facebook.

Pour activer la prise en charge des Facebook Instant Articles, activez simplement l'option dans le plugin AMP for WP. Vous devez ensuite réinitialiser les réglages des permaliens en allant dans le menu Réglages > Permaliens et en cliquant sur "Enregistrer les modifications" sans toucher aux autres réglages.

Si vous retournez ensuite dans la partie "Facebook Instant Articles" du plugin AMP for WP, vous verrez le lien d'un flux ("Feed URL"). C'est ce lien que vous devrez soumettre lors de l'inscription à Facebook Instant Articles.

Le menu Tools du plugin AMP for WP

Ce menu comporte une partie intitulée "Hide AMP Bulk Tools". Elle vous permet de désactiver AMP en un clic pour certaines catégories ou certaines étiquettes de votre blog WordPress. Il suffit de rentrer les pages ou rubriques concernées.

Désactiver AMP pour certaines catégories WordPress
Désactiver AMP pour certaines catégories WordPress

L'option "Show Query Monitor data in AMP" permet une intégration harmonieuse avec le plugin Query Monitor si vous l'utilisez. C'est une extension conçue pour aider les développeurs à comprendre l'origine des erreurs et des problèmes sur un site WordPress, à identifier un thème ou un plugin présentant des soucis de performance.

Options avancées (Advanced Settings)

C'est sans aucun doute l'une des rubriques les plus riches en options du plugin AMP for WP. Elle permet aux utilisateurs un peu plus avancés d'ajouter des paramètres supplémentaires.

Parmi les options les plus intéressantes...

  • Mobile Redirection - Redirigez par défaut tous les visiteurs mobiles sur la version AMP.
  • Search Result Page in AMP - Faites en sorte que le moteur de recherche interne du site utilise AMP.
  • Change Internal Links to AMP - Modifiez automatiquement les liens internes de vos articles pour qu'ils pointent vers la version AMP.
  • Hide AMP version - Ca permet d'éliminer toute mention de la version du plugin AMP for WP utilisée dans le code source des pages.
  • Category Description - Choisissez d'afficher (ou pas) la description personnalisée des catégories sur votre site en version AMP.
  • Smooth Scrolling For Links - Permet un défilement tout en douceur quand un internaute clique sur un lien menant à un autre emplacement de la page.
  • Enter HTML in Head/Body/Footer - Ces options permettent d'ajouter du code HTML personnalisé dans le header, le body ou le footer du site.
  • Auto Add AMP in Menu URL - Ça permet de modifier automatiquement les URLs du menu AMP pour qu'elles incluent "/amp/", afin que les visiteurs mobiles ne passent pas à la version responsive du site en cliquant sur le menu mais qu'ils restent au contraire dans l'environnement AMP.
  • Category/tag base remove in AMP - Il s'agit de retirer le mot "category" ou "tag" de l'URL AMP, comme on peut le faire pour les URL "classiques" de WordPress.
  • Featured Image from Custom Fields - Ça permet de choisir l'image mise en avant à partir d'un champ personnalisé, dans le cas où vous avez créé un champ personnalisé pour ça :)
  • Featured Image from The Content - L'image mise en avant est la première image trouvée dans le contenu.
  • Show Featured Image if already preset in content - Permet de mettre en avant une image même si elle est aussi présente dans le contenu.
  • Retina Images - Une option à activer si vos images paraissent floues sur les appareils Apple.

Vous disposez enfin d'options pour les développeurs (mode développement) et vous pouvez décider si toutes les données du plugin sont supprimées lors de la désinstallation de celui-ci.

E-commerce en version AMP

Si votre blog est associé à un site e-commerce sous WordPress, vous pouvez activer ici la prise en charge d'AMP pour WooCommerce (moyennant l'installation d'une extension supplémentaire) ainsi que celle du plugin Easy Digital Downloads, qui permet de vendre des biens "virtuels" (logiciels, ebooks, photos, graphismes, etc).

Traduire le plugin : Translation Panel

La partie "Translation Panel" vous permet de personnaliser les traductions des différents éléments importants du plugin. Indispensable pour que vos visiteurs n'aient pas l'impression d'être lésés, linguistiquement parlant, par rapport aux utilisateurs du site responsive !

Traduction du plugin AMP for WP
Traduction du plugin AMP for WP

Créez un menu AMP avec AMP for WP

Une fois que vous avez paramétré le plugin à votre convenance, n'oubliez pas de créer un menu AMP dédié. En effet, le plugin dispose d'un emplacement de menu spécial.

Il suffit d'aller dans la rubrique Apparence > Menus de WordPress et de créer un nouveau menu en lui affectant l'emplacement "AMP Menu".

Notez que vous pouvez aussi créer un menu de pied de page spécial pour vos pages AMP sur WordPress, grâce à l'emplacement "AMP Footer Menu".

Menu AMP sur WordPress
Menu AMP sur WordPress

Notez qu'il existe aussi une possibilité de créer un menu AMP alternatif situé sous le header du site.

AMP for WP : design des pages AMP sur WordPress

La rubrique "Design" du plugin vous permet d'abord, en version gratuite, de choisir entre plusieurs thèmes différents.

Choisir un thème sur AMP for WP
Choisir un thème sur AMP for WP

Vous disposez ensuite de plusieurs sous-rubriques pour personnaliser plus finement le design des pages AMP.

Dans la rubrique "Global", vous pouvez définir un univers de couleurs et ajouter du code CSS personnalisé si vous le souhaitez.

Code CSS personnalisé
Code CSS personnalisé

La rubrique "Header" vous permet d'ajouter un menu de navigation en haut de page ou encore d'inclure un moteur de recherche ("Search") et de personnaliser les couleurs de l'en-tête de vos pages AMP.

La rubrique "Home Page" vous permet de personnaliser la page d'accueil : avec un slider, en affichant des extraits des articles récents ("Excerpt") dont vous pouvez définir la longueur maximale, en affichant la date de publication des articles ou pas (Published Time). Vous pouvez également inclure un lien "Lire la suite" si vous le souhaitez ("Read More Link") et exclure certaines catégories des derniers articles qui s'affichent.

La rubrique "Single" permet de personnaliser les articles. Vous pouvez par exemple ajouter un effet lightbox sur les images ("Lightbox for Images"), afficher un fil d'Ariane, montrer les catégories et les étiquettes et les rendre cliquables ou non, afficher les boutons de partage sur les réseaux sociaux ("Sticky Social Icons"), des liens pour passer facilement à l'article précédent ou suivant ("Next-Previous Links").

Options de design d'un article AMP sur WordPress
Options de design d'un article AMP sur WordPress

Vous pouvez aussi gérer la pagination, afficher la biographie de l'auteur de chaque article et des articles similaires ("Related Posts"). D'ailleurs, ceux-ci possèdent leurs propres options dédiées. Vous pouvez décider sur quelle base les choisir (articles rattachés à une même catégorie, à une même étiquette), comment les classer, combien en afficher...

La rubrique "Footer" est assez réduite mais possède quelques options intéressantes : vous pouvez par exemple afficher un lien qui renvoie vers la version mobile "classique" du site, pour les utilisateurs qui ne souhaitent pas rester sur le format AMP, ou proposer un bouton "Revenir en haut de page", bien pratique si vos contenus sont assez longs.

Du côté des pages, les options de personnalisation sont plus élémentaires que pour les articles : on peut surtout activer des icônes de réseaux sociaux.

La partie "Social" est plus intéressante car elle permet de définir sur quels réseaux sociaux les utilisateurs vont pouvoir partager vos contenus (il suffit de cocher ceux qui vous intéressent) et, plus bas, d'indiquer vos profils de réseaux sociaux (Social Media Profiles). Sur certains designs, ça permet d'afficher des liens vers vos réseaux sociaux.

La rubrique "Date" vous permet de choisir si vous montrez la date sur vos posts... et, si vous le faites, quelle date afficher : date de publication ou de dernière modification de l'article, format de la date (soit la date "brute", soit un affichage du type "Publié il y a X jours/mois/années").

Enfin, quelques options supplémentaires sont disponibles, qui concernent surtout les gens qui utilisent des alphabets écrits de droite à gauche ou qui veulent afficher des sous-catégories sur la page d'une catégorie.

Extensions compatibles AMP

Le plugin AMP for WP propose une trentaine d'intégrations avec des plugins WordPress très connus : la plupart sont payantes, à des tarifs allant de 19$ à 89$.

On trouve notamment des intégrations avec les plugins de traduction WPML et Polylang, avec des plugins de formulaires comme Contact Form 7, Ninja Forms, Gravity Forms, ou encore pour le support des formats de post personnalisés, des AMP Stories ou des données structurées.

AMP for WP : version gratuite et version payante

Le plugin propose aussi une version payante, qui cible surtout les professionnels (tarifs à partir de 150 dollars/an). Elle offre surtout une approche plus poussée de certaines fonctionnalités (publicité, formulaires, e-commerce, call-to-action, cache, etc) ainsi qu'une sélection plus complète de designs pour les pages AMP.

Elle propose aussi un support technique plus réactif, à la fois lors de l'installation de l'extension et lors de sa configuration.

Comment vérifier que vos pages AMP sont valides ?

Pour vérifier que vos pages AMP ne comportent pas d'erreur, tout dépend si vous souhaitez valider une page particulière ou valider l'ensemble des pages AMP de votre site d'un seul coup.

Valider l'ensemble des pages

Je vous conseille d'utiliser Google Search Console (vous devez avoir validé votre site au préalable sur cet outil gratuit proposé par Google). Dans le menu de gauche, allez dans la rubrique "AMP".

Vous pourrez suivre l'indexation de vos pages AMP afin de vérifier qu'elles sont bien prises en compte par Google mais aussi identifier les éventuelles erreurs que comportent vos pages.

Erreurs AMP sur Google Search Console
Erreurs AMP sur Google Search Console

Si une erreur est repérée, il suffira de cliquer sur la page concernée pour que Google vous communique des informations complémentaires sur l'origine de l'erreur en question.

Valider une seule page

Si vous souhaitez vérifier la validité d'une seule page, vous pouvez faire appel à un validateur AMP.

  • Le validateur AMP en ligne : il est disponible sur le site du projet AMP lui-même. Il suffit d'y copier-coller le code de votre page web ou son URL. Le validateur vous indiquera si elle est conforme aux standards AMP.
  • L'extension de navigateur AMP Validator : il s'agit d'une extension officielle proposée par le projet AMP. Elle s'installe sur Google Chrome. Quand vous allez sur une page AMP, l'icône de cette extension s'affiche en vert si la page ne comporte pas d'erreur ; à l'inverse, si une erreur AMP est détectée, l'icône s'affiche en rouge et vous pouvez cliquer dessus pour obtenir plus d'informations sur l'erreur en question.
    AMP Validator pour Chrome

Le format AMP sur WordPress, une croissance fulgurante

J'ai mis en place AMP sur mes blogs au début de l'été 2016. A la rentrée 2016, ça représentait moins de 1% de mes pages vues mensuelles... Deux ans plus tard, 58% des pages vues l'étaient via le format AMP.

Cependant, AMP présente aussi des limites : on constate en particulier que le taux de rebond (pourcentage de visiteurs qui quittent le site en ayant consulté une seule page) est particulièrement élevé par rapport au site mobile classique. Même en offrant des articles similaires, un menu et des options pour naviguer vers le reste du contenu, ce type de page semble moins retenir les visiteurs sur le site.

Les opportunités de monétisation sont aussi plus limitées et si le format reste adapté aux pages de contenu, il l'est beaucoup moins lorsqu'il s'agit d'autres types de pages.

La version AMP reste une "version distincte" de votre site principal, qui exige presque une maintenance et un suivi séparés pour veiller à l'absence d'erreurs, de problèmes de navigation, etc. Pour beaucoup de sites, cela implique aussi de travailler sur un thème distinct afin de préserver son identité visuelle sur AMP.

Pour toutes ces raisons, j'ai choisi fin 2020 de désactiver AMP sur certains de mes sites !

Utilisez-vous AMP sur WordPress ?

Poster un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

55 commentaires sur “Plugin AMP for WP : un site mobile rapide sur WordPress
  • Angelilie

    Merci Marlène pour cet excellent article. Je viens d’installer le plugin AMP For WP, car mon score sur mobile était catastrophique (25% PageSpeed) Grâce à ton tutoriel, j’ai pu le personnaliser un peu et je suis très contente du résultat :) A savoir que j’étais réticente à installer AMP, car je craignais de perdre mon design de blog. En sachant que j’ai 37% de mes visiteurs qui viennent du mobile.

    Répondre à Angelilie
    • Angelilie

      Finalement j’ai désactivé le plugin AMP For WP, car j’ai mis un plugin de flocons de neige pour les Fêtes de Noël. Neige qui tombe aussi sur mobile :) Donc je réactiverai le plugin AMP pour début janvier 2022.

      Répondre à Angelilie
    • Marlène

      Hello, je te réponds tardivement. AMP peut être un bon « palliatif » quand on a un thème un peu lent et pas de possibilité d’en changer facilement mais comme tu le dis, ça implique certaines contraintes et fonctionnalités qui, parfois, ne sont pas compatibles. Bon week-end et joyeuses fêtes !

      Répondre à Marlène
    • Angelilie

      Merci Marlène pour ta réponse. Bon Week-end et Joyeuses fêtes :)

      Répondre à Angelilie
  • carlito

    Bonjour Marlène ,
    Super article, super tuto !!!!
    Je suis passé à la version AMP ( AMP for WP), et de temps à autre sur certaines Url cela génère une erreur 500 . Puis en actualisant la page, cette erreur disparaît mais peut revenir . Quelle peut être la cause de cette anomalie ?

    Répondre à carlito
    • Marlène

      Hello, malheureusement ces infos ne sont pas suffisantes pour donner une explication… Une erreur 500 est une erreur serveur mais pour l’expliquer, il faudrait analyser sur quelles pages elle se produit, dans quel contexte, vérifier qu’il n’y a pas de problème chez l’hébergeur au même moment. La rubrique AMP de l’outil gratuit Google Search Console peut aider à analyser les erreurs AMP.

      Répondre à Marlène
    • carlito

      Merci Marlène , je ferai le nécessaire avec Search Console .

      Répondre à carlito
  • Hélène

    Bonjour Marlène, une nouvelle fois merci pour cet article tuto de qualité. J’utilise énormément tes articles pour construire mon site. J’ai peut-être un soucis avec ce pluging. En fait, sur certains articles de mon site j’utilise le pluging Photo Gallery pour mettre une jolie galerie de photos, afin d’illustrer mon article et y mettre des liens pour renvoyer vers un site extérieur. Le pb c’est que sur la version mobile donc AMP, les photos des articles utilisant le pluging Photo Gallery se mettent en carrousel et on voit défiler pleins de photos qui appartiennent pour certaines à un autre article du blog. Alors qu’en fait en version ordi aucun pb. Le support de Photo Gallery me dit que ça vient de AMP et de creuser là. Sauf que je ne trouve pas. Aurais-tu une idée ? As tu déjà vu ce cas?
    Ou sinon qu’est-ce que tu utilises comme pluging pour afficher des photos en galerie ?
    Je te remercie par avance pour ta réponse.

    Répondre à Hélène
    • Marlène

      Hello Hélène, je te conseille de contacter le créateur du plugin pour voir s’il peut modifier son plugin afin qu’il soit compatible avec Photo Gallery. Pour ma part, je n’utilise pas de galerie.

      Répondre à Marlène
  • Ced

    Bonjour Marlene et bravo pour ce site, une mine d’OR ! J’ai résolu tellement de probleme sur mon blog, incroyable.

    Mais je rencontre un petit problème (parmi d’autres) sur AMP : j’ai des formaulaires SENDINBLUE qui ne s’affichent plus…un probleme car c’est pour ma newsletter, et jai 80% de mon (petit) traffic qui est sur mobile. Je ne trouve pas comment et où exclure un seul article (solution de bricolage car le formulaire est sur toutes les pages en widget et dans le corps), ou tout simplement le faire marcher : les extension proposées ne parlent pas de sendinblue…

    Si vous avez une solution je suis preneur ! Merci infiniement d’avance !!

    Répondre à Ced
  • carl

    Bonjour Marlène,
    J’apprécie le tuto et l’intégralité des explications,c’est un très bel article. Cependant une question me préoccupe. Si j’ai bien compris en modifiant les URL (ajouter amp) cela génère une adresse pour version mobile et une autre pour la version PC ? Donc 2 adresses pour le même article? Duplicate content?

    Répondre à carl
    • Marlène

      Hello, aucun problème de duplicate avec ce plugin AMP car les pages AMP ont une URL canonique vers la version desktop.

      Répondre à Marlène
    • carl

      Ok, donc c’est impeccable. Merci pour ce complément d’information .

      Répondre à carl
  • Sabrina

    Bonjour et merci pour cet article très détaillé qui m’a permis de m’en sortir avec AMP :-)

    Répondre à Sabrina
  • Atfut

    Une très belle article, vraiment pertinente. une préoccupation comment ajouté de pub adsense sur AMP?

    Répondre à Atfut
    • Marlène

      Bonjour, cet aspect est justement expliqué dans l’article ;)

      Répondre à Marlène
  • kayla

    Bonjour,
    J’ai activé AMP qui était déjà dans mon thème. Sur ma page d’accueil il y a des slides dynamique il n’y figure plus en recherchant le site sur Google mais apparaissent bien sur d’autre moteur de recherche (sur mobile). En ouvrant le site on a l’impression que la page est vide. Comment rectifier le problème ? Pour info il y a une erreur dans le lien deux (-) apparaîssent sur le lien au lieu d’un seul. Est-ce normal ? Merci pour les réponses

    Répondre à kayla
    • Marlène

      Bonjour, si le slider n’est pas compatible AMP il faudrait se tourner vers le créateur du thème ou du plugin de slider pour voir comment le contenu peut être adapté en cas d’usage d’AMP.

      Répondre à Marlène
    • kayla

      ok merci pour ta réponse

      Répondre à kayla
  • Mathieu

    Bonjour Marlene,

    cela fait quelques articles très interessant que je lis et qui me permettent d’améliorer mon site (blog bien pour debutants mais aussi pour ceux qui sont un peu plus loin dans le projet, c’est moins courant)

    Je viens de paramétrer entierement le plug in et j’ai un soucis avec adsense. J’ai bien rentré mes codes mais adsense ne s’affiche pas , j’ai juste l’espace blanc avec un petit « ad » écrit pendants une seconde.

    Si je suis adsence, je suis cense copier le code dans le header et dans le corps du site. Dans l’article ce n’est pas mentionné. Il y a t-il un header AMP ? je ne le trouve pas

    Merci d’avance pour ton aide

    Répondre à Mathieu
    • mathieu

      Bon finalement, je vais me répondre à moi meme. J’ai trouvé mon problème, je n’avais pas mis le bon code. En effet, il est important de suivre le conseil de Marlene, de créer le bloc, puis de prendre la valeur du code dans ce bloc.
      bonne continuation

      Répondre à mathieu
    • Marlène

      Hello Mathieu, je n’ai pas été assez rapide, j’étais en plein déménagement :) Contente que le problème soit résolu !

      Répondre à Marlène
  • Emilie

    Bonsoir Marlène,

    Merci pour la qualité de ton article.
    Je me posais une question, si on active les options avancées cela a t-il une incidence sur les liens d’affiliation ?

    Merci pour tes conseils
    Emilie

    Répondre à Emilie
    • Marlène

      Hello Emilie, je suppose que tu fais référence à la fonction qui transforme automatiquement les liens en ajoutant « amp » dans l’URL. Si c’est le cas, elle ne concerne que les liens internes mais n’affecte pas les liens sortants… donc pas de souci pour l’affiliation.

      Répondre à Marlène
  • Sissi Piriou

    Hello Marlène ! J’ai installé amp et j’en suis à peu près contente. Mon score sur pagespeed sur mobile est de 64% ! En effet, si je navigue sur mon site sur mobile, il y a une petite lenteur de chargement d’une page à l’autre qui donnerait presque envie de partir. Ayant optimisé le poids de mes images, nettoyant ma base de données régulièrement et autres actions d’optimisation de mon blog, je me demande si je ne devrais pas réinstaller WP SUper Cache (que j’avais désinstallé je ne sais plus pourquoi). Je me dis que s’il est bénéfique pour mon blog sur ordinateur, les bénéfices devraient se répercuter sur mobile, non ? Ou suis-je à côté de la plaque ? Merci :)

    Répondre à Sissi
    • Marlène

      Hello, un plugin de cache peut améliorer les performances, que ce soit Super Cache ou autre (WP Rocket, WP Fastest Cache, W3 Total Cache)… Selon le site et ses paramètres, je constate que certains plugins fonctionnent mieux que d’autres donc l’idéal est de tester !

      Répondre à Marlène
  • Sapiens

    Bonjour Marlène,
    Un grand merci pour ton article qui m’a sauvé la mise suite à la maj algo de Google au mois de Mars.
    Ton article est super complet !!! J’espère maintenant que mon analytics va remonter au plus haut de sa forme ;-)
    Encore merci à toi !!!

    Répondre à Sapiens
    • Marlène

      Hello, je ne sais pas si AMP peut suffire à faire « remonter » un site… mais en tout cas, c’est un format qui a du succès auprès des utilisateurs mobiles !

      Répondre à Marlène
  • Angelilie

    Merci Marlène pour cet article. Je viens d’installer le plugin AMP for wordPress (l’officiel) car j’ai un score catastrophique sur mobile, mesuré depuis pagespeed : 36% en rouge!! et un bon score sur ordinateur : 98%. Cependant, j’ai peur qu’avec le plugin cela déforme mon design de blog sur téléphone et que ça casse mes URL. Je teste on verra bien.

    Répondre à Angelilie
    • Marlène

      Par curiosité, pourquoi as-tu fait le choix du plugin officiel ? AMP modifie quoi qu’il arrive le design du blog car l’idée même du format est d’alléger le poids des pages. On peut toutefois créer un design qui reprend le même univers que celui du blog… mais il faut le coder :)

      Répondre à Marlène
    • Sandrine Monllor

      Bonjour, le principe de l’amp est bien de débarrasser la page de tout ce qui n’est pas utile pour privilégier la rapidité de l’accès à l’information pour des utilisateurs qui ne s’impliquent probablement pas sur la page de la même manière vu le support … Dans tous les cas il y a des modifications mais le gain par ailleurs semble assez évident …

      Répondre à Sandrine
  • Alexandre

    Bonsoir, Merci pour votre blog que je lis très régulièrement. J’ai une question concernant ce plugin. Malheureusement, j’ai un doublon concernant la partie « Related posts » et « Author Bio ». J’ai à la fois la version AMP et la version Non AMP. Comment avez-vous réglé ce problème ? Merci par avance

    Répondre à Alexandre
    • Marlène

      Bonjour, je ne suis pas sûre de comprendre la question car je n’ai pas du tout rencontré ce problème : ces éléments s’affichent deux fois sur la page ? Ce doit être lié à une personnalisation précédente (ajout dans le fichier functions.php du thème WordPress).

      Répondre à Marlène
  • Sandrine

    Bonjour Marlène, j’avais adopté ce plugin, après avoir vu que mon thème avait été actualisé et que la mise à jour rendait à nouveau mon thème compatible. Néanmoins bien que j’ai suivi pas à pas tes réglages, un souci apparaît toujours. Les paramétrages de Yoast pour ma page d’accueil disparaissent et ce sont les titres des derniers articles retenus pour la version amp (sans ce soit les derniers par parution) qui apparaissent. Je ne comprends pas comment corriger. C’est d’autant plus dommage que les tests renvoyaient de bonnes performances.

    Répondre à Sandrine
    • Marlène

      Ta page d’accueil doit être codée différemment des autres. En soi, ce n’est pas grave si tu l’exclus de l’AMP tout en conservant le format sur les autres pages, ça reste un bénéfice pour les visiteurs.

      Répondre à Marlène
    • Sandrine

      Merci Marlène, je viens d’exclure la page d’accueil. Mais du coup, faut-il conserver glue for yoast pour que les indications données sur Yoast soient conservées? J’avais supprimé glue en installant le plugin que tu conseilles. Ceci explique peut-être cela…

      Répondre à Sandrine
    • Marlène

      Non, Glue for Yoast n’est pas nécessaire avec ce plugin.

      Répondre à Marlène
  • Les Gros Sacs

    Hello Marlène,

    Merci pour ce nouvel article toujours aussi intéressant et bien structuré :)
    Je me rends compte du coup que j’utilise le plugin AMP officiel qui est assez light en terme de personnalisation.
    Je changerai bien pour celui dont tu parles mais j’ai un peu peur de faire cette « migration ». Est-ce qu’il y a un risque de perdre des choses en faisant la bascule ?
    Autre question a moitié liée à ce sujet : la vitesse de chargement d’une page. L’outil de google (speed insight) a été revu récemment. Lorsque j’analyse une page, elle est souvent très mauvaise en version mobile (25/100 en moyenne). En revanche quand j’analyse la version AMP de cette page je suis plutôt bien (90/100). Sachant que tous mes articles sont censés être lus en AMP sur mobile, est-ce que tu pense qu’il y a un soucis à résoudre pour la version mobile ou ça ne vaut pas le coup ? Merci :)

    Répondre à Les
    • Marlène

      Hello, normalement non, changer de plugin ne doit pas entraîner de perte. Concernant la vitesse de chargement, tout dépend de la manière dont tu gères tes pages mobiles : si tu rediriges systématiquement les gens vers la version AMP, la version mobile ne sert même pas donc ce n’est pas forcément un problème prioritaire. Si les deux versions coexistent (AMP pour les visiteurs issus des moteurs de recherche + version responsive pour les autres), oui il est préférable de s’en occuper !

      Répondre à Marlène
  • Sandrine Monllor

    Salut Marlène,
    merci pour ton article qui tombe à pic. Je me bats depuis des mois avec des erreurs AMP. On m’a d’abord fait changer de plugin, avant de revenir à l’originel qui avait été installé AMP pour WP. Puis on m’a conseillé d’en changer encore. Ensuite il a été question de changer de thème car ce serait le thème qui créerait les milliers d’erreurs de plus en plus préjudiciables. Sauf que ça semble impossible dans l’immédiat au vu du travail que ça représente. Du coup on m’oriente vers une refonte complète par un pro. Mais je n’ai pas les moyens… Donc ce problème d’erreurs AMP est devenu une plaie pour mon site en plus d’autres soucis de vitesse ou de performances que j’essaie de régler en changeant prochainement de serveur.

    A un moment j’ai pris peur en voyant toutes les erreurs mais mon ignorance me permet de comprendre les consignes de ampproject pourtant très détaillé. J’ai demandé sur divers groupes où l’on m’a répondu de ne pas trop tenir compte de ces erreurs car ça n’avait rien de dramatique … Or quand je consulte mes performances (en revenus) comme mes stats pour mes visites via les mobiles forcément c’est la catastrophe.

    Je vais relire avec intérêt ton article pour essayer de m’en sortir.

    Répondre à Sandrine
    • Sandrine Monllor

      Salut Marlène,
      Je précise que le plugin qui m’a été installé par un développeur est AMP for WordPress mais vu les copies d’écran tu parles bien de AMPforWP Accelerated Mobile Pages ? Je vais donc le tester vu que c’est ta recommandation.

      Répondre à Sandrine
    • Sandrine

      Bonjour,
      je me souviens avoir déjà essayé d’utiliser ce plugin récemment. Mais tous les contenus de mes articles sont vides ou perdent 95% de leurs contenus… quand je les teste… Je suppose que ce n’est pas normal? Je ne sais pas y remédier.
      Merci

      Répondre à Sandrine
    • Marlène

      Si AMP provoque autant d’erreurs chez toi et que tu ne sais pas les résoudre, mieux vaut à mon sens désactiver la fonctionnalité… car c’est censé être une valeur ajoutée, pas quelque chose qui te fait perdre du trafic :)

      Je parle bien de ce plugin. Si l’installation d’un plugin provoque la disparition de ton contenu, c’est peut-être effectivement lié à la manière dont le thème est conçu… et dont le contenu est mis en ligne dedans.

      Répondre à Marlène
    • Sandrine

      Bonjour Marlène,
      j’ai vérifié en suivant ton conseil. Mon thème ne fonctionne pas hélas avec ce plugin. Il ne renvoie des erreurs qu’avec l’autre plugin « officiel » dont je confonds souvent le nom avec celui-ci. Mais AMP for WordPress renvoie tellement d’erreurs liées au thème que comme tu l’indiques ça devient contreproductif. N’est-ce pas dangereux de supprimer tout l’AMP ? Je suis en quête d’un nouveau thème car je me rends bien compte des limites de la situation. Mais il y a tant de boulot que je prends peur face à l’ampleur de la tâche. Merci pour ta réactivité.

      Répondre à Sandrine
    • Marlène

      Je ne peux hélas pas te donner de réponse « rapide » sans étudier la façon dont l’AMP est mis en place, consulté, etc.

      Répondre à Marlène
  • Suny ☼

    J’ai fini par désinstaller AMP car :
    * Je trouve qu’on perd tout le design original de son blog, notre particularité visuelle, et que c’est moche avec l’AMP.
    * Je recevais de plus en plus de messages d’erreur dans ma Search Console, des messages d’erreur technique incompréhensibles.
    * C’est chiant pour mes encarts Newsletter, Thrive Leads, call to action, dans mes articles, etc…

    Je ne sais pas ce que dira l’avenir mais peut-être que c’est un modèle voué à disparaître ? Voir ici : https://www.arobasenet.com/2018/03/google-amp-sur-le-web-4518.html

    Ah oui, je rajouterai aussi que pour les Woocommerce, même si il existe un format AMP pour Woocommerce, ça peut être contreproductif pour les blogs format entreprise avec panier et tout. En fait, le format AMP est idéal pour les blogs personnels type voyage, journal personnel, écriture !

    Après ce qui m’énerve, c’est que mes blogs rencontrent effectivement des problèmes de lenteur, que j’ai pas de super score sur Gtmetrix. Et j’aurais voulu garder AMP car c’est un vrai avantage, faut le reconnaître. Gros dilemme. Là, j’ai désinstallé pour voir la différence dans le référencement, si je chute ou non, etc… Bon je verrai si je réinstallerai ou après, mon avis est susceptible d’évoluer.

    En fait, l’idéal aussi (enfin si on est un expert en codage), c’est de régler soi même les problèmes de lenteur et de vitesse de chargement de son site, d’optimiser au max et tout, comme ça, ça évite d’installer AMP. Enfin voilà quoi. ;)

    Répondre à Suny
    • Marlène

      On peut tout à fait activer sélectivement AMP sur les contenus texte et ne pas l’utiliser sur des contenus e-commerce si on le souhaite. De même, AMP n’est pas forcément « moche », on peut là aussi prendre le temps de personnaliser son thème comme on le fait avec son thème de blog principal.

      Mais sur le fond, oui, si on arrive à un site qui, sur mobile, obtient des performances identiques à AMP, il n’y a pas de raison légitime d’adopter le format.

      Répondre à Marlène
  • Bravotuto

    Salut Marlène,
    Je viens de parcourir entierièrement ton article, il est vraiement vraiment très complet. Je ne voudrais pas partir de ce site sans vous laisser un mot.
    J’adore vraiment votre façon d’aborder le sujet et les illustrations que vous avez effectuées.

    Je recommande cet article pour tout les débutants qui veulent voir leur trafic booster afin de savoir comme paramétrer sans faille le plugin amp de wordpress.
    Au plaisir

    Répondre à Bravotuto
    • Marlène

      Bonjour, merci d’avoir pris le temps de laisser un message sur le blog !

      Répondre à Marlène
  • Guigeek

    Hello ! Si j’ai bien lu, le format AMP enlève pas mal de .js. Du coup les pubs s’enlèvent non ? C’est quand même un souci pour un éditeur :(
    Est-ce qu’il est possible de rajouter des publicités sur un template amp ?

    Répondre à Guigeek
  • Aurore

    J’ai installé AMP sur mon blog hier en suivant ton tutoriel mais Google search console n’arrive pas à les repérer. Est-ce qu’il y a une manipulation particulière à faire ? Au faut-il attendre plusieurs jours simplement ?

    Répondre à Aurore
    • Marlène

      Il faut attendre que le robot de Google commence à répertorier les pages, ce qui peut prendre plus ou moins longtemps selon la fréquence à laquelle il vient sur ton blog.

      Répondre à Marlène


Si vous aimez les articles du site, n'hésitez pas à faire vos achats sur Amazon.fr via ce lien ; il me permettra de toucher une commission grâce au programme Partenaires Amazon EU.