Jean ROCHARD
Je partage ma passion de Wordpress dans des articles techniques sur les plugins, thèmes, nouveautés geek et optimisation SEO "on-site".
Jean ROCHARD

@jean_rochard

Chez Terre Digitale, on mange du Wordpress dès le petit-dej'.
Petit guide pour mettre en place les Facebook Instant Articles à partir de vos posts Wordpress : https://t.co/lSbzdM6z9j - 7 mois ago

Depuis le 24 février 2016, Google a officiellement intégré dans ses résultats de recherche un nouveau type de page Web : les Accelerated mobile pages (ou AMP). Au menu de cet article, comment les mettre en place sur votre blog WordPress.

Les Accelerated mobile pages, c’est quoi exactement ?

L’AMP est un projet open-source lancé par de gros éditeurs de contenu et des sociétés comme Google pour répondre à la problématique suivante : comment faire pour faciliter et accélérer l’accès aux contenus Web sur les supports mobiles (smartphones, tablettes…) ?

La réponse AMP est simple : dépouiller une page Web du superficiel pour ne garder que l’essentiel ,c’est à dire le contenu principal et les images associées. Point. Sur cette base, une page sera beaucoup plus légère (en terme de kilo octets) et consommera donc beaucoup moins de bande passante. Elle sera par conséquent « accélérée » (ou disons plutôt « moins ralentie »).

Comme ces pages sont « normées » par le code inclus dans le projet et identifiées par une URL standardisée se terminant par /amp/ ; il devient facile pour Google de les mettre en avant dans les résultats de recherche et de le présenter sous forme de carousel de news par exemple. Car oui, vous l’avez compris, cette technologie est plutôt réservée aux sites / blogs avec actualités et parutions régulières (même si rien n’empêche de transformer tout type de contenu sous forme AMP).

Vous pouvez découvrir l’article de présentation des AMP sur le webmaster google central blog. Les AMP sont aussi une réponse aux Facebook instant articles qui débarquent avec le même objectif d’accélérer le web mobile. La principale différence est que les AMP concernent les articles de votre propre site alors que les FBIA concernent seulement les articles parus sur votre Facebook. Notez aussi l’officialisation de la génération automatique des pages AMP pour les sites hébergés sur WordPress.com.

Voici d’ailleurs à quoi ressemblera une page AMP sur un mobile :

amp-exemple

Et un exemple de carousel AMP pour les résultats de recherche pour la requête « 20 minutes » (le journal) :

amp-carousel

Oui mais…

Derrière cette volonté (louable) d’économiser la bande passante mondiale et d’accélérer l’expérience utilisateur, il faut aussi bien voir que les normes AMP, malgré l’aspect open-source du projet, sont totalement sous contrôle de leurs « géniteurs » (dont Google) et en dehors des normes W3C qui elles sont soumises à un processus d’élaboration beaucoup plus consensuel.

Comme nous allons le voir, l’indexation d’une page AMP par Google est soumise à un processus de validation assez stricte et tout code Javascript en dehors des spécifications sera considéré comme bloquant. La liste des « applications tierces » autorisées à exécuter du code Javascript en AMP est assez réduite et limitée « aux plus gros » (tweeter, instagram, facebook, youtube…).

Encore une fois, après l’épisode de la grande panique des sites « mobile friendly » d’avril 2015, on peut considérer cette initiative AMP comme une nouvelle tentative de normalisation et de contrôle des contenus et design Web ; à prendre ou à laisser… car en gagnant en rapidité et bande-passante, on risque de devenir encore plus Google dependant (s’il est possible de faire encore plus).

Et c’est donc ce que je vais m’appliquer à vous montrer maintenant !

Etape 1 : installer le plugin AMP sur votre site WordPress

Automattic, l’équipe qui maintient et développe le coeur de WordPress, a sorti ce plugin AMP pour prendre en charge la cette technologie dans vos articles. Installez et activez le.

Attention ; il se peut que vous ayez besoin de vider votre cache si vous en utilisez un ; et de resauvegarder votre structure de permaliens (astuce trouvée sur un billet de yoast seo).

C’est tout ! Vos articles en AMP sont maintenant disponibles à leur URL habituelle prolongée de « /amp/ ». Exemple pour cet article :  http://benefacere.fr/accelerated-mobile-pages-amp-wordpress/amp/

Etape 2 : la validation AMP

Pour vérifier que vos pages AMP sont valides, procédez ainsi :

  • ouvrir la console d’inspection de code Chrome (clic droit ou raccourci ctrl + maj + i) et aller sur l’onglet « console »
  • ajouter  le paramètre « /#development=1 » à l’URL de la page à tester. Exemple : http://benefacere.fr/accelerated-mobile-pages-amp-wordpress/amp/#development=1
  • vérifier dans la console que le test est « successfull » ; sinon vous devrez corriger les erreurs dans votre code

Si vous avez des erreurs, voici une liste de ce que j’ai pu moi même constater comme soucis (pour le moment) :

  • incompatibilité de la minification CSS avec le plugin W3TC (qui semble en panne d’évolutions depuis mi 2015) ou autoptimize (qui sera par contre prochainement compatible)
  • incompatibilité avec la protection email fournie par cloudflare (utiliser le commentaire HTML email_off dans ce cas) ou par tout plugin qui se chargerait de l’obfuscation d’une adresse mail dans le contenu grâce à du javascript
  • tout code javascript qui ne ferait pas partie des applications tierces autorisées (cf au début de l’article)
  • des éléments comme des iframe ne sont pas bloquants pour la validation mais viennent polluer la page AMP visuellement, il faudra alors programmer de façon différentielle selon les types de page puor insérer ou non ce type de blocs…

Une page AMP qui passe ce test de validation, ça donne ça :

amp-validation

Etape 3 : des données structurées complètes et valides

Si vous voulez que vos contenus aient une chance d’apparaître dans les carousels AMP, ils doivent contenir des données structurées valides. Ces informations sont en fait des balises meta utilisant la structure schema.org (au choix, type Article, NewsArticle ou BlogPosting).

Pour renseigner ces meta informations, plusieurs plugins peuvent vous aider :

Attention toutefois, il faut être vigilant sur le code source généré par ces plugins (surtout yoast) car il est important de bien maîtriser et comprendre ce qui est ajouté comme meta données. Une fois l’un de ces plugins configuré, vous pourrez tester la validité de vos micro données avec cet outil de test Google :

amp-datastructured

Si vous utilisez yoast SEO, vous risquez de rencontrer quelques soucis de validation (notamment pour le logo, qui par défaut correspond à la favicon WordPress). Pour y parer et avant de sortir une version compatible AMP, yoast propose un plugin pour vous permettre de compléter / affiner les données structurées. Ce plugin se nomme glue for yoast seo amp.

Pour le plugin add meta tags, il est très complet mais pourrait vous générer des données en doublons si vous utilisez yoast SEO en parallèle. Il est possible de régler cela par l’utilisation de hooks spécifiques ; mais on rentre là dans des considérations techniques plus avancées.

Etape 4 : ajouter analytics et adsense à vos pages AMP

Pour ajouter analytics et adsense à vos pages AMP, vous pouvez utiliser le très bon plugin FBIA & Google AMP Pages by PageFrog. Ce plugin vous permettra aussi un contrôle fin des contenus à passer en AMP (vous pouvez activer / désactiver les articles un par un ou tous les sélectionner par exemple) et aussi de caler le style CSS de ces pages.

Etape 5 : faire le suivi de l’indexation et des erreurs dans la search console Google

Pour demander l’indexation de vos pages AMP, vous n’avez rien à faire au niveau de votre sitemap car le plugin AMP d’Automattic vous génèrera une balise link amptml qui fera le lien automatiquement entre l’article original et sa version AMP. Concernant le contenu dupliqué, rien à craindre non plus car ce même plugin fera un link canonical vers l’article original ; selon les recommandations du support google.

Enfin, vous pourrez suivre l’indexation et les erreurs éventuelles dans la search console (webmaster tools) dans le nouveau menu « Apparence dans les résultats de recherche -> Accelerated Mobile Pages ». Il faut compter quelques jours avant que les premiers résultats n’apparaissent :

amp-searchconsole

Etape 6 : vérifier les pages AMP dans le cache Google

Pour vérifier vos pages AMP indexées en cache Google, vous pouvez le faire sur un mobile à l’adresse : http://www.google.fr/amp/url-de-vote-page-amp/

Par exemple : http://www.google.fr/amp/benefacere.fr/comment-creer-facilement-un-moodboard/amp/

Etape 7 : voir dans analytics le trafic correspondant

Dernier point, pour suivre le trafic spécifique vers vos pages AMP dans analytics, vous pouvez le faire en filtrant par exemple les pages de destination contenant /amp/

Conclusion

Pour un site WordPress éditant régulièrement des articles et news, et dont le trafic à partir d’un mobile est stratégique, le passage aux AMP semble être plus que conseillé vu la position que sont censées prendre ces pages dans les résultats de recherche d’ici les prochains mois.

Par contre, le passage à cette norme AMP n’est pas si évident et demandera quelques aménagements techniques parfois difficilement conciliables ; avec un risque de devoir faire à certains endroits une double programmation, celle pour les pages « classiques » et celle pour les pages AMP. A vous de voir si le jeu en vaut la chandelle !