Configurer WordPress pour AMP (Accelerated Mobile Pages)

1
171
views

Tout le monde parle de l’AMP (Accelerated Mobile Pages) et je ne vais pas déroger à cette règle. Ainsi, je vais essayer de vous expliquer comment configurer votre site WordPress pour le rendre compatible avec le format AMP.

Mais que veut dire AMP

Avant de rentrer dans le vif du sujet, il peut être utile de rappeler la signification de l’AMP.
Cette initiative, encouragée et soutenue par Google, devrait permettre à une page de se charger en un temps record sur mobile (smartphone donc).
Le discours officiel indique même que « l’affichage des pages est quatre fois plus rapide sur le mobile en utilisant dix fois moins de data ».

C’est donc tentant

Dois-je vraiment configurer mon site WordPress pour AMP?

En consultant mes statistiques Google Analytics, j’ai constaté que depuis le début de l’année, 39% des visiteurs de mon site le consulte à partir d’un mobile.

pourcentage-visiteur-mobile

Pour le bien-être de ces visiteurs, il serait agréable que les articles de https://www.tranquille.ch puissent s’afficher plus rapidement grâce à des pages au format AMP.

Ce chiffre est non seulement important, il est aussi en constante évolution. Ainsi, il est donc essentiel de prêter une attention particulière à ce type de visiteurs.
Dois-je vraiment configurer mon site WordPress pour AMP? Je pense que la réponse est OUI.

Configurer WordPress pour AMP

Par quoi commencer pour permettre d’afficher vos articles sous WordPress au format AMP ?
Je ne vais pas ré-inventer la roue. Deux plugins majeurs (j’imagine qu’il y en a d’autres) existent pour cela.
Il s’agit de AMP d’Automattic
amp-wordpress-plugin

et de Accelerated Mobile Pages des Kaludi
accelerated-mobile-pages

Et finalement, je me suis arrêté sur AMP d’Automattic. La communauté et le soutien me semblait plus présent que pour le second.

Son installation se fait en 1 clic et ne nécessite aucune configuration.
Le plugin fait son job et mes pages sont, comme par magie, accessible en AMP. Pour cela, il suffit de d’ajouter dans l’URL de son article le terme /amp.

Exemple d’URL

Adresse initiale

https://www.tranquille.ch/les-bonnes-idees/on-a-teste-hommesauxpoils-com-rasoirs-abonnement-4979

Adresse AMP

https://www.tranquille.ch/les-bonnes-idees/on-a-teste-hommesauxpoils-com-rasoirs-abonnement-4979/amp

Le format AMP est orienté utilisateur, ne l’oublions pas

Cependant, le format AMP est orienté utilisateur. Cette notion est à garder en mémoire. Ce qui est très bien pour les utilisateurs. Plus de javascript. Plus d’artifice inutile.
Les pages se chargent en un temps record. La preuve en image.

Score PageSpeed Insights en mode responsive (sans AMP donc)

Article standard (non AMP)

Score PageSpeed Insights au format AMP

Article au format AMP

Le résultat est donc sans équivoque.

Je me répète, ceci est, évidemment, très bien en soi. Mais en tant qu’éditeur de contenu, je me vois confronté à quelques soucis.
Fondamentalement ceux-ci ne sont pas très important, mais certaines choses me dérange tout de même. Par défaut, en installant un des plugins AMP cités ci-dessus, vous n’aurez :

  1. pas de statistiques Google Analytics,
  2. pas de Google Adsense,
  3. pas de bouton de partage pour les réseaux sociaux,
  4. pas les commentaires de vos visiteurs sur vos articles (soumission et consultation).

Après avoir installé votre plugin AMP, le travaille ne fait que commencer. Ainsi l’idée est maintenant de voir comment faire pour essayer d’obtenir ces informations dans mes articles au format AMP.

Comment intégrer Google Analytics dans un article au format AMP

Deux options s’offrent à moi. Soit, je réinvente la roue, soit j’installe le plugin Glue For Yoast SEO & AMP.
J’opte pour cette seconde possibilité. Au niveau SEO, les amis de Yoast sont déjà bien connus par les utilisateurs de WordPress, donc je pars en terrain connu.
Ce plugin outre le fait de pouvoir permettre l’intégration du tag Google Analytics donne aussi la possibilité de modifier la CSS des pages au format AMP (car par défaut, celles-ci ont toutes la même apparence).

Glue For Yoast SEO & AMP

Le code Google Analytics s’intègre via l’onglet « Analytics » et doit impérativement avoir le format suivant :


<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXX-Y"   // A remplacer avec votre ID
  },
  "triggers": {
    "trackPageview": {  
      "on": "visible",
      "request": "pageview"
    }
  }
}
</script>
</amp-analytics>

Il est recommandé de créer un nouvel ID dans Google Analytics afin de bien différencier les visiteurs « AMP » des autres. Cela vous permettra aussi de voir, de manière plus simple, si la consultation des articles au format AMP est véritablement utilisée.

Comment intégrer Google Adsense dans un article au format AMP

Je n’ai pas trouvé de plugin satisfaisant pour intégrer les Google Adsense dans un article AMP. Pour cela, il va falloir se retrousser les manches. Pas d’affolement, rien de bien compliqué.

Pour commencer, il faut être familier avec la notion de Child-Theme.
Dans le répertoire de mon thème, j’ai créé un répertoire amp. Dans lequel, j’ai :

  1. Copié le fichier single.php se trouvant dans plugin-> amp-> template dans ce nouveau répertoire amp
  2. Créé un fichier functions.php dans ce même répertoire (monThème > amp)
  3. Dans ce fichier functions.php, ajouter le code suivant:
    add_filter( 'amp_post_template_file', 'set_myamp_template', 10, 3 ); //definition de notre custom template
    function set_myamp_template( $file, $type, $post ) {
                if ( 'single' === $type ) {
                            $file = dirname( __FILE__ ) . '/amp/single.php';
                }
      return $file;
    }
    

    Ici, au lieu d’appeler le template fournit par le plugin AMP, nous utilisons le nôtre.

  4. Ajouter le code suivant à l’emplacement désiré dans votre page AMP :

    
       <amp-ad  width=336 height=280
         type="adsense"
         data-ad-client="ca-pub-XXXXXXXXXXXXXXXXX"
         data-ad-slot="XXXXXXX">
       </amp-ad>
    

    N’oubliez pas de saisir vos différents ID ainsi que la taille des annonces désirées.

Comment ajouter des boutons partages pour les réseaux sociaux dans un article au format AMP

Apparemment, ceci n’a pas encore été intégré par l’équipe qui gère l’AMP Project (détail ici : https://github.com/ampproject/amphtml/issues/1201), qu’à cela ne tienne, il y a d’autres solutions envisageable qui n’utilise pas de Javascript.
Je vais uniquement m’intéresser à Facebook, Twitter et Google+.

Partager ces articles au format AMP sur Facebook

Concrètement le lien permettant le partage ressemble à ceci :

http://www.facebook.com/sharer.php?u={url}

Dans notre cas (utilisation de WordPress), il suffit d’utiliser les fonctions natives que nous fournit WordPress pour construire notre URL, soit :


<a href="http://www.facebook.com/sharer.php?u=<?php echo  esc_url(  get_permalink() );?>/a>

Libre à vous d’ajouter une image ou non.

Partager ces articles au format AMP sur Twitter

Concrètement le lien permettant le partage ressemble à ceci :

https://twitter.com/share?url={url}&text={title}&via={via}

Dans notre cas (utilisation de WordPress), il suffit d’utiliser les fonctions natives que nous fournit WordPress pour construire notre URL, soit :


<a href="https://twitter.com/intent/tweet?text=<?php echo get_the_title(); ?>&url=<?php echo  esc_url(  get_permalink() );?>&via=TranquilleCH" target="_blank" title="twitter"> Twitter</a>

Libre à vous d’ajouter une image ou non.

Partager ces articles au format AMP sur Google+

Concrètement le lien permettant le partage ressemble à ceci :

https://plus.google.com/share?url={url}

Dans notre cas (utilisation de WordPress), il suffit d’utiliser les fonctions natives que nous fournit WordPress pour construire notre URL, soit :


<a href="https://plus.google.com/share?url=<?php echo  esc_url(  get_permalink() );?>/a>

Libre à vous d’ajouter une image ou non.

Comment permettre l’affichage et la soumission de commentaires sur un article au format AMP

Malheureusement, je n’ai pas trouvé la réponse… Si quelqu’un a une solution, je suis plus que preneur.
Affaire à suivre donc.

Comment Google sait-il que mon article possède une version AMP

Google sait tout. Dans les faits, on l’aide à un brin quand même. En effet, le plugin « AMP » ajoute dans le code HTML de vos articles une balise qui indiquera à Google que l’article est aussi au format AMP.
Sur la page standard, une référence à la version AMP se présentera sous la forme suivante :

<link rel="amphtml" href="https://www.tranquille.ch/les-bonnes-idees/on-a-teste-hommesauxpoils-com-rasoirs-abonnement-4979/amp" />

Inversement, sur la page au format AMP, la référence sur la version canonique standard est présente :

<link rel="canonical" href="https://www.tranquille.ch/les-bonnes-idees/on-a-teste-hommesauxpoils-com-rasoirs-abonnement-4979" />

Dans les faits, doit-on passer au format AMP

Il n’y a pas de réponse toute faite. J’aurais tendance à dire oui. Mais après, j’ai tout de même l’impression qu’il est encore bien tôt pour avoir un avis définitif.

Conclusion sur le format AMP

Voilà ce que j’ai mis en place pour mon site. Si vous avez d’autres recommandations, je suis évidemment preneur.
Je ferais un pointage mensuel quant à la fréquentation de mon site pour les articles dans ce format.
A ce jour, je ne constate rien de particulier sur la consultation de mes articles AMP. Donc je ne me prononce pas encore, attendons encore un peu pour voir si Google va vraiment encourager ce format.

MrTranquille
@TranquilleCH

Vignette : Patrick Tomasso

1 COMMENT

VOTRE COMMENTAIRE

Please enter your comment!
Please enter your name here