Installer Google AMP sur votre site WordPress

Installer Google AMP sur votre site WordPress

Publié le 7 décembre 2016

Vous avez sans doute remarqué que lire certains contenus web sur smartphone est long, très long, voire interminable… Heureusement, Google est là ! En lançant fin février 2016, le format Open source AMP (Accelerated Mobile Pages), Google compte accélérer le temps de chargement des pages sur mobiles et donc améliorer le confort de lecture des mobinautes.  Nous allons voir dans cet article comment installer AMP et ainsi optimiser votre site WordPress.

 

En savoir plus sur AMP

Les pages en AMP sont une version dépouillée de vos pages web, tout en conservant tout le contenu important. En fait, le balisage des pages AMP peut être différent des pages HTML classiques. Elles comportent aussi des restrictions importantes, notamment sur l’utilisation du JavaScript et du CSS.
Le but de l’AMP est de générer des pages statiques qui vont être mises en cache par Google. Quand un mobinaute cliquera sur votre lien dans les résultats de recherche, la page sera donc affichée instantanément. Selon Google, vous gagnez entre 15 et 85% de temps de chargement, au détriment cependant d’un design un peu poussé.

De plus en plus, Google considère la vitesse de chargement des pages et l’aspect mobile-friendly d’un site comme des critères essentiels pour le référencement. Un site optimisé AMP sera certainement mieux positionné que les autres. Sachant que plus de 40% des utilisateurs quittent une page dont le temps de chargement excède 3 secondes, un site plus rapide augmentera votre taux de conversion sur mobile.

Recherche AMP - Yes You WebLe format AMP est compatible avec toutes les applications (iOS, Android, Windows…) et tous les navigateurs.

Quand vous faites une recherche sur mobile, les sites AMP sont signalés par un petit éclair et la mention AMP, comme vous pouvez le voir sur l’image ci-contre.

 

Les Pour et les Contre Google AMP

Les experts du SEO mettent en avant 2 arguments concernant Accelerated Mobile Pages :

  • AMP va vous permettre d’être mieux positionnés dans Google
  • AMP améliore l’expérience utilisateur pour les mobinautes qui ont une connexion internet peu performante

D’autres professionnels, propriétaires de site e-commerce, bloggeurs et marketeurs ont un point de vue différent :

  • Dans la mesure où l’HTML, le javascript et la CSS sont restreints en AMP, certaines fonctionnalités, plugins ou widgets ne fonctionneront pas sur mobile : fini les Facebook like boxes, les formulaires d’abonnements aux newsletters et autres scripts dynamiques.
  • Google AMP est compatible avec Google Analytics uniquement, les autres plateformes de statistiques ne le sont pas.
  • Google AMP n’est compatible qu’avec quelques plateformes de publicité en ligne.
  • Ils reconnaissent néanmoins que les pages AMP seront mieux positonnées dans Google et voient ainsi une progression de leur trafic provenant des recherches sur mobile.
Pour aller pus loin, vous pouvez lire 2 articles très intéressants de bloggeurs qui sont Contre Google AMP :- L'article d'Alex Kras (15 oct 2016) : Google May Be Stealing Your Mobile Traffic- L'article  Terrence Eden (27 nov 2016) : Google's AMP is a gilded cage

 

Comment installer AMP sur votre site WordPress

Si vous avez décidé d’installer Accelerated Mobile Pages sur votre site WordPress, vous devez installer et activer le plugin AMP

Une fois le plugin activé, rendez-vous dans votre menu WordPress à gauche : Apparence / AMP. Vous pouvez visualiser le rendu de votre site sur mobile (si vous voyez votre tableau de bord WordPress à la place du site, cliquez dans la fenêtre du mobile sur la petite maison / aller sur le site).

Plugin AMP - Yes You Web

Vous pouvez changer la couleur de fond du haut de votre site (header background), couleur qui sera réutilisée pour vos liens et la couleur du texte sur cette bande du haut. Votre logo ou favicon sera repris par le plugin si votre thème le permet.
N’oubliez pas d’enregistrer vos modifications.

Vous pouvez maintenant visualiser tous vos contenus en AMP en ajoutant juste /amp/ à la fin de l’URL de vos pages.

AMP view - Yes You Web

En regardant le code source de votre page, vous allez voir 2 lignes de code :

Code source AMP - Yes You Web

L’URL canonique permet d’éviter le contenu dupliqué entre la page classique et la page AMP. Le script en dessous permet d’appeler la librairie javascript AMP JS.

NB : si jamais vous avez une erreur 404 en essayant de voir votre page AMP, rendez-vous dans Réglages / Permaliens et cliquez juste sur le bouton « Enregistrer les modifications » sans avoir rien touché.

 

Voir AMP dans Google Search Console

Si vous voulez voir comment sont indexées vos pages AMP, vous pouvez consulter Search Console : Apparence dans les résultats de recherche / Accelerated Mobile Pages.
Dans notre exemple, il n’y a pas de résultat car nous avons activé AMP juste pour les besoins de rédaction de cet article. De plus, il faut un peu de temps à Google pour indexer les pages AMP et avoir des chiffres dans Search Console.

Search Console AMP - Yes You Web

 

SEO : personnalisez vos pages AMP

Le plugin AMP ne contient que peu d’options de personnalisation. D’autres plugins vont vous le permettre.
Si vous utilisez déjà Yoast SEO, vous devez installer et activer Glue for Yoast SEO & AMP, c’est une extension de Yoast SEO.

Une fois le plugin activé, rendez-vous dans la colonne de gauche de WordPress dans SEO / AMP.

Yoast SEO - Yes You Web

Vous pouvez autoriser AMP pour vos articles, vos pages ou vos medias.
Dans l’onglet design, vous pouvez choisir différentes couleurs, télécharger un logo et une image de header par défaut quand un article n’a pas sa propre image à la une.

Options design Yoast SEO - Yes You Web

Dans l’onglet Analytics, vous pouvez saisir votre ID Google Analytics. N’oubliez pas d’enregistrer vos modifications.

Il existe de nombreux plugins qui vous permettent de faire figurer certains modules dans vos pages AMP : les articles associés, les widgets du footer, vos icônes de réseaux sociaux… Si vous les utilisez, faites valider vos pages AMP après installation.

 

Conclusion

Voilà, vous venez d’apprendre comment rendre les pages de votre site WordPress compatibles avec Accelerated Mobile Pages. Nous espérons que cet article vous aura été utile. S’il vous a plu, vous pouvez le partager sur les réseaux sociaux.
Si vous avez des questions, posez-les en commentaires ci-dessous. N’hésitez pas à partager vos propres retours d’expérience !

imprimer
Marine LE GUERNIGOU

Marine LE GUERNIGOU

Consultante web freelance, plus de 15 ans d'expérience en webmarketing, mon objectif est de rendre la vie de mes clients plus simple ! Pour chaque problématique étudiée, je partage avec vous le résultat de mon analyse, en espérant que cela vous serve aussi...
Marine LE GUERNIGOU

2 Avis

  1. Yohann 5 mois ll y a

    Bonjour,
    Sur mon site, j’essaie tant bien que mal de faire une version AMP des pages (au sens WP) mais cela ne fonctionne pas. Autant pour les articles, aucun souci, autant pour les pages, impossible. Et j’ai fais ce qui est inscrit dans l’article…
    Yohann

    • Auteur
      Marine LE GUERNIGOU 5 mois ll y a

      Bonjour Yohann,

      Effectivement, pour le moment, le plugin AMP ne concerne que les articles. Les pages et les archives ne sont pas prises en compte mais ils travaillent sur le sujet. Nous allons mieux préciser cela dans cet article.
      Si votre site contient des articles et des pages et que vous ne souhaitez pas attendre la prochaine mise à jour d’AMP (en espérant qu’elle contienne les pages), vous pouvez regarder le plugin AMP for WP : https://fr.wordpress.org/plugins/accelerated-mobile-pages/

      Bonne fin de journée,
      Marine

Laisser une réponse

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

*