Comment adopter le format AMP pour des pages web rapides sur mobile ?


À la fin de l’année 2015, Google a commencé à communiquer autour d’un nouveau format de pages web destiné spécifiquement aux mobiles : le format AMP (Accelerated Mobile Pages ou « Pages mobiles accélérées »).

Vous le savez sans doute, Google attache beaucoup d’importance à l’expérience utilisateur et cherche à prendre en compte les évolutions de la navigation sur Internet et l’essor du mobile. C’est pour cette raison qu’il est aujourd’hui indispensable d’avoir un site web responsive et d’avoir des pages qui se chargent rapidement. Le projet AMP s’inscrit dans la même tendance.

Dans cet article, je vais vous expliquer de quoi il s’agit et comment mettre en place AMP sur votre site web sans trop mettre les mains dans le code.

Vitesse

Pourquoi adopter AMP ?

Le format 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 permet 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 votre blog, vous pouvez donc réduire le taux de rebond et augmenter le temps moyen passé sur les pages.

Ensuite, compte tenu de la communication intense développée par Google autour de ce projet Open Source, il est possible qu’à terme le format AMP devienne un critère de référencement. Ce n’est pas encore le cas à l’heure où j’écris l’article mais on constate néanmoins que 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 maintenant !

Enfin, Google peut mettre en avant certaines pages AMP sous forme d’un carrousel dans les résultats de recherche, un gage de visibilité non négligeable.

À quoi ressemble une page 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 sur AMP :

Aperçu d'une page AMP
Aperçu d’une page AMP

Le résultat est bluffant. Si vous regardez ci-dessous, je compare avec l’outil Test My Site de Google l’un de mes articles en version classique et en version AMP. On voit tout de suite que la rapidité de chargement n’est pas du tout la même.

Vitesse de chargement avec et sans AMP
Vitesse de chargement avec et sans AMP

Est-il facile de mettre en place AMP sur son site ?

Tout dépend de la plateforme que vous utilisez. La plateforme gratuite WordPress.com a mis en place AMP pour tous ses membres, vous n’avez donc rien à faire de particulier pour activer AMP. Si vous êtes sur WordPress chez un hébergeur, je vais vous montrer comment mettre en place AMP facilement sur votre site sans connaissances techniques poussées.

Mais dès que vous voulez entrer dans une personnalisation plus poussée ou que vous avez codé votre site à la main, mieux vaut avoir des compétences en développement web pour tirer pleinement profit de ce format. Google a créé un site dédié au projet AMP, qui comporte des tutoriels pour aider les développeurs à s’approprier son fonctionnement.

Activer AMP sur WordPress

C’est plutôt simple ! L’équipe de WordPress a créé un plugin AMP officiel. Vous devez l’installer en allant dans le menu Extensions > Ajouter de votre administration WordPress. Vérifiez bien que vous installez le plugin créé par Automattic. A ce jour, ce n’est pas le mieux noté de tous mais pour avoir testé différents plugins, c’est celui qui m’a renvoyé le moins d’erreurs !

Le plugin AMP Automattic
Le plugin AMP Automattic

Vous n’avez qu’à activer ce plugin. Il va automatiquement créer une version AMP de vos articles, que vous pourrez consulter en ajoutant /amp à la fin de l’adresse de la page.

Pour visualiser par exemple mon article https://www.notuxedo.com/5-signes-hebergement-payant/ au format AMP, je dois entrer https://www.notuxedo.com/5-signes-hebergement-payant/amp/ dans mon navigateur.

Le plugin ajoute aussi quelques lignes de code qui signalent à Google qu’il s’agit de deux versions d’une même page : sur votre article d’origine, il signale qu’il existe une version AMP de cet article ; sur la version AMP, il indique grâce à la balise link rel="canonical" que l’article d’origine reste la version « principale » de la page. Ça évite que les deux pages ne soient considérées comme du duplicate content, ce qui serait néfaste en termes de référencement.

L'URL canonique sur une page AMP
L’URL canonique sur une page AMP

Aller plus loin avec AMP

Si vous utilisez le plugin Yoast SEO, il existe une extension bien pensée pour faciliter la personnalisation de vos pages AMP. Elle s’appelle Glue for Yoast SEO & AMP et vous pouvez l’installer depuis le menu Extensions > Ajouter de WordPress.

Glue for Yoast SEO & AMP
Glue for Yoast SEO & AMP

Cette extension va ajouter un sous-menu AMP au menu SEO de Yoast. Dedans, vous disposez de 3 onglets.

  • L’onglet Post Types vous permet de choisir sur quel type de contenu vous activez AMP. Pour ma part, je l’ai activé sur les articles uniquement à ce jour.
  • L’onglet Design vous permet de personnaliser un peu plus le look de votre page AMP, notamment les couleurs. Gardez à l’esprit qu’AMP reste un format très épuré donc les possibilités de personnalisation sont limitées. Vous pourrez cependant entrer du code CSS de votre choix, afficher une icône en haut de l’écran, etc.
    Personnaliser une page AMP
  • L’onglet Analytics vous permet d’entrer un code de suivi Google Analytics pour vos pages AMP. Attention : celui-ci n’a pas le même format qu’un code Google Analytics classique ! Pour être compatible AMP, il doit s’afficher comme ça (pensez à remplacer l’ID de suivi UA-XXXXXXX-XX par votre propre ID de suivi) :
    <amp-analytics type="googleanalytics" id="analytics1">
    <script type="application/json">
    {
      "vars": {
        "account": "UA-XXXXXXX-XX"  
      },
      "triggers": {
        "trackPageview": {  
          "on": "visible",
          "request": "pageview"
        }
      }
    }
    </script>
    </amp-analytics>

Aller (encore) plus loin avec AMP

En l’état, votre page AMP fait la part belle au contenu mais il n’y a plus aucune fonctionnalité annexe dessus. Fort heureusement, certains développeurs ont déjà écrit des fonctions dédiées à AMP pour apporter des fonctionnalités complémentaires : ajouter des boutons de partage sur une page AMP, ajouter des articles similaires sur une page AMP ou encore ajouter un menu à une page AMP.

Ces fonctions doivent être copiées dans le fichier functions.php de votre thème WordPress. Pour ma part, j’ai ajouté des boutons de partage et des articles similaires.

Personnaliser AMP

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. Dans le menu de gauche, allez dans la rubrique « Apparence dans les résultats de recherche » puis dans le sous-menu « Accelerated Mobile Pages ». 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.

Pages 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. Dans mon cas, c’est mon code Google Analytics qui comportait une erreur au départ (courbe rouge).

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

Mon expérience

J’ai mis en place AMP au début de l’été 2016. Aujourd’hui, ça représente un peu moins de 1% de mes pages vues mensuelles mais pour quelques articles, jusqu’à un tiers des visites sont effectuées sur la version AMP de la page. Ça reste donc encore timide mais le projet AMP est soutenu par tellement de géants du web à travers le monde (LinkedIn, Twitter, Pinterest, etc.) qu’il mérite de se pencher dessus !


Poster un commentaire

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

Lorsque vous postez un commentaire sur le blog, le nom indiqué dans la case "Prénom" ainsi que votre message apparaîtront publiquement. Votre adresse e-mail restera confidentielle.

27 commentaires sur “Comment adopter le format AMP pour des pages web rapides sur mobile ?

  • 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
  • Nathanael

    Salut marlène,

    Je voulais juste savoir comment tu obtenais des listes à puces sur le site AMP à la place des ‘cases à cocher’ avec le petit v rouge sur le site normal?

    Sur mon site amp, je n’ai pas les puces, je n’ai rien.

    Merci! :)

    Répondre à Nathanael
    • Marlène

      Hello, je ne fais rien de particulier. Ma liste de cases à cocher est déjà une liste à puces, c’est juste que j’ai personnalisé le design des puces pour qu’il ressemble à des cases à cocher mais en termes de code HTML, c’est une liste à puces très basique… qui reste donc une liste à puces en AMP :)

      Si la tienne ne s’affiche pas, c’est peut-être que le code CSS du blog ne prévoit pas l’affichage de puces à cause d’une instruction du type list-style-type:none;

      Répondre à Marlène
    • Nathanael

      Ah, en fait j’ai mis le plugin « AGP Font Awesome Collection » que tu avais conseillé dans un de tes articles, et du coup, je mets manuellement le code « [fac_icon icon= »check-square » color= »#dd3333″ color_hover= »#dd3333″ font_size= »14px »] » devant chaque ligne que je veux « pucer ». Sans doute pour ça qu’elle n’apparaissent pas sous forme de puces en AMP.

      Tu n’aurais pas un « truc » pour lier le code de ce plugin aux puces?

      Merci :o)

      Répondre à Nathanael
    • Marlène

      Hello, tu peux personnaliser le CSS des pages AMP en allant dans le menu AMP > Design > Global – Custom CSS… mais à mon sens, comme la version AMP est une version très light, elle n’est pas liée au plugin utilisé sur la version desktop classique, il faut donc charger la police FontAwesome indépendamment (via le menu Settings > Advanced Settings > Enter HTML in Head).

      Répondre à Marlène
  • mat

    salut Marlène, merci pour tous tes articles très instructifs…j’ai une question concernant Amp et ton site.. vu que le plugin d’Automattic ne prend pas en charge la page d’accueil et les archives, ( et plein d’autres trucs), n’aurais tu pas par hasard installé amp for wp ou d’autres plugins plus complets?? sinon aurais tu des pistes de tutos pour la prise en compte de la home et des archives via le plugin d’automattic parce que j’en trouve pas?? merci !

    Répondre à mat
    • Marlène

      Hello, j’utilise effectivement AMP for WP. Encore pas mal de bugs mais énormément d’options et un développeur très actif qui met à jour le plugin en permanence, j’ai d’ailleurs prévu de réécrire cet article de A à Z pour en faire un tutoriel détaillé sur ce plugin.

      Répondre à Marlène
  • pat3@

    AMP, c’est la privatisation du web par Google qui avance presque à découvert. Si j’étais le seul à le craindre, ça irait, mais des développeurs réputés le disent aussi (Ethan Marcotte, qui a popularisé le responsive web design, le dit ici:https://ethanmarcotte.com/wrote/ampersand/ – et pour ceux qui ne lisent pas l’anglais, c’est traduit là:https://nota-bene.org/Une-situation-qui-AMPire#main). La majorité du flux web est capté par Google et Facebook, et AMP n’est que la réponse de Google à Facebook Instant Articles…
    Faudra pas se plaindre d’avoir un web privatisé par ces deux là quand on aura soi même implémenté les outils qui leur permette de capturer le flux de données…

    Répondre à pat3@
    • Marlène

      Je me suis fait la réflexion quand j’ai constaté que l’adresse des contenus AMP renvoyait à… Google. Ça reste, pour l’instant, un format souple, dans la mesure où on peut l’activer/le désactiver à volonté, où AMP ne supplante pas la version mobile d’un site (=> on désactive AMP, on reste référencé correctement à ce jour). Mais il faut voir ce que ça donnera à long terme…

      Répondre à Marlène
  • Emma - Odieusement Belles

    Je viens tout juste d’activer le plugin et le message d’erreur suivant apparaît pour chaque article : « Warning: fopen(https://i2.wp.com/www.odieusement-belles.com/wp-content/uploads/2017/01/Florentina-ma-découverte-olfactive-signée-Sylvaine-Delacourte-1.jpg?fit=1024%2C1024): failed to open stream: HTTP request failed! HTTP/1.1 400 Bad Request in /homepages/19/d456687316/htdocs/wp-content/plugins/amp/includes/lib/class-fastimage.php on line 31″
    As-tu une idée pour le faire disparaître ? :)

    Répondre à Emma
    • Marlène

      Hello Emma, je ne connais pas l’origine de cette erreur donc je te conseille de poser la question sur les forums de WordPress. fopen() est une fonction qui peut être bloquée par la configuration du serveur me semble-t-il, par exemple si le « Safe mode » est activé sur le serveur où est stocké ton site. C’est peut-être une piste à creuser auprès de ton hébergeur si les forums ne t’apportent pas de réponse…

      Répondre à Marlène
  • 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
  • Sinno

    hello on fait comment sur blogger ?

    Répondre à Sinno
    • Marlène

      Bonjour, lis ma réponse au premier commentaire de l’article ;)

      Répondre à Marlène
  • Milie

    Hello ! J’hésite beaucoup…
    On gagne en rapidité mais on peut toute l’interactivité du blog…
    J’ai installé le plugin et testé une page en amp…
    Par contre, lorsque le lecteur va sur le blog sur son mobile, il tombe directement sur la version amp ? ou il a le choix ?
    Merci ;)

    Répondre à Milie
    • Marlène

      Hello, il n’y a pas de système de choix. Par défaut, c’est la version « normale » du site qui s’affiche. La version AMP s’affiche uniquement si la personne clique sur un résultat AMP dans son moteur de recherche, tu as un exemple sur cette image avec le petit logo indiquant une page compatible.

      Le format AMP enlève pour l’instant les formulaires… donc effectivement, ça fait disparaître les commentaires par exemple. En fait, ils ont l’intention de proposer le support des formulaires mais ce n’est pas encore fonctionnel. La dernière mise à jour sur le sujet date d’il y a 19 jours : « Much of the functionality is built, but is only available experimentally ».

      Répondre à Marlène
    • Milie

      Merci ;)

      Répondre à Milie
  • prettylittletruth

    Super article! Je file telecharger le plugin! :)

    Répondre à prettylittletruth
  • Pascal

    Cool ! Je voulais rendre mes sites compatibles AMP (et Facebook Instant Pages) mais sans savoir par où commencer, ni quelle extension installer. Je vais pouvoir m’y mettre au moins pour AMP… sans grand enthousiasme à vrai dire :| mais en personnalisant (je ne pensais pas que l’on puisse). Merci Marlène !

    A propos, je trouve bien sympa ta nouvelle page d’accueil !

    Répondre à Pascal
    • Marlène

      Je ne me suis pas du tout penchée sur Facebook Instant Pages de mon côté…

      Répondre à Marlène
  • la fille fauchée

    Merci pour cet article…Pour blogger la marche à suivre est elle la même ?

    Répondre à la
    • Marlène

      Pour Blogger, c’est plus que confus à ce jour :) Google a dit très clairement qu’ils ne proposaient pas AMP sur Blogger pour le moment mais que c’était « une fonctionnalité envisagée ». Certains essaient de bidouiller pour mettre en place AMP sur Blogspot mais en l’occurence, j’ai testé son site et ça me renvoie une multitude d’erreurs AMP.

      A ce stade, je n’essaierais pas de le mettre en place sur Blogger. D’ailleurs, ça m’étonne toujours de voir à quel point Google a l’air de délaisser la plateforme (c’est quand même fou que WordPress propose AMP avant Blogger… alors qu’AMP est un projet Google et que Blogger appartient à… Google). C’est dommage qu’ils ne la fassent pas davantage évoluer.

      Répondre à Marlène
    • Suny ☼

      Salut Marlène,

      En ce moment, avec les gros bouleversements numériques à venir et surtout niveau mobile à partir de juillet, c’est un peu la panique, on fait tout pour mettre à jour nos blogs et pas forcément évident. Là, je suis en train de faire passer sur AMP mes blogs. Je voulais juste te faire un feed back :
      J’ai pris le plugin AMP de Automattic, celui de WordPress ; par contre, sur mes 2 blogs, j’ai eu des erreurs, même plusieurs. Je trouve que le plugin est assez minimaliste.
      Par contre, j’ai testé un autre plugin gratuit : AMP for WP – de Ahmed Kaludi, Mohammed Kaludi ,
      j’ai l’impression que c’est beaucoup mieux et peux mieux intéresser tes lecteurs , déjà j’ai pas eu d’erreurs et en plus, tu peux configurer une tonne de choses : header, messages, notifications, seo, footer, page accueil, thème, logo, etc… franchement top. Et il semble très bien noté dans les téléchargements WordPress. C’est beaucoup plus complet que celui de Automatic qui est assez minimaliste.
      Après je sais pas ce que ça vaut sur le plan technique et efficacité. Voilà juste te faire ce petit retour. J’espère que tu as prévu de publier de nouveaux articles sur le mobile et AMP, car c’est chaud en ce moment avec les gros bouleversements à venir, pas mal d’inquiétudes, on a peur d’être pénalisé, etc… bonne journée, a+!

      Répondre à Suny
    • Marlène

      J’utilise aussi le plugin AMP for WP depuis pas mal de temps. Il faudrait que je remette à jour cet article mais je n’ai pas le temps actuellement.

      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.