Pourquoi et comment installer AMP pour WordPress ?

Nous en entendons parler depuis un bon moment ! AMP par ci, AMP par là… Il faut l’installer…ou pas ? Mais de quoi s’agit-il exactement ?

J’ai donc décidé de me pencher sur cet acronyme étrange. Nous allons voir dans cet article ce qu’est AMP, à quoi il sert, si il faut absolument l’installer et comment, enfin quelques astuces pour le customiser…

C’est quoi AMP et à quoi ça sert ?

AMP est l’acronyme de Accelerate Mobile Performance, littéralement en français “Accélérer la Performance Mobile“. Le but d’AMP est un chargement plus rapide des pages de votre WordPress sur mobile.

AMP est un format d’affichage plus rapide car limité principalement au HTML et CSS, le tout propulsé par un cache ultra-performant. De fait, l’affichage de pages AMP est quasi instantané.

Ainsi si un mobinaute clique sur le lien d’une page web qui dispose d’une version AMP, il sera redirigé vers cette version AMP et non vers la version standard de la page. L’objectif étant ici de réduire drastiquement les temps de chargement.

Attention de ne pas confondre site responsive et AMP, ce n’est pas la même chose. De plus, votre site à beau être “responsive”, c’est à dire qu’il s’adapte aux dimensions selon les écrans, il n’en demeure pas moins qu’il reste long à charger pour les utilisateurs naviguant sur mobile.

 

Faut-il installer AMP ?

Le format AMP est lancé par Google sous la forme d’un projet open source, ce dernier prône des pages légères qui puissent se charger rapidement sur les mobiles. Faut-il donc absolument l’installer ? Autant vous dire que quand Google préconise fortement quelque chose, il vaut mieux être à l’écoute. Toutefois on peut aussi se rappeler de la balise Rel Author et de Google+ :p

Un des avantages du format AMP, outre le gain en vitesse sur mobile, est d’avoir une page affichée dans le carrousel parmi les résultats Google mobile, pour cela il faut que la page soit une actualité ou un article de blog.

Quoiqu’il en soit, le 24 février 2016 dernier, la firme Google a commencé à pousser des pages AMP dans les pages de résultats de son moteur de recherche sur mobile, il serait vraiment dommage de ne pas y être, non?

 

A quoi ça ressemble AMP pour WordPress ?

Plutôt qu’un long discours, voici en 3 images les différentes versions de WPFormation. La première (en partant de la gauche) c’est la version normale, la deuxième c’est la version responsive, et enfin la dernière c’est AMP.

  

On est d’accord, visuellement la version AMP ça casse pas 3 pattes à un canard (et encore j’ai modifié le CSS de base) mais c’est juste bluffant en terme de vitesse ^^ Nous y reviendrons plus en détails plus bas dans cet article.

Pour les plus curieux/septiques, voici le code source d’une page AMP :

 

Comment installer AMP simplement ?

Bande de petits veinards… Vous êtes sous WordPress et comme par hasard il existe déjà des plugins qui le font pour vous ;)  Il y a principalement 2 plugins WordPress qui font le job AMP :

• AMP  : plugin officiel simple à installer mais peu puissant
• AMP for WP : plugin plus complexe à paramétrer mais plus puissant avec de nombreux add-ons payants

Pour activer en deux petits clics AMP sur votre WordPress, je vous conseille le plugin d’Automattic sobrement appelé AMP.

Une fois le plugin installé, ce dernier va créer automatiquement des URLs avec un /amp/ à la fin de l’adresse sur tous vos articles, ce qui vous donnera une URL de type : monsite.com/monarticle/amp/. En résumé, le contenu de l’article est parsé et remplacé par les balises au standard AMP.

Le plugin d’Automattic supporte les différents médias, les tweets, les embeds, les vidéos Youtube, instagram, etc… Par défaut, il affiche le contenu de l’article, son auteur, la date de publication, la catégorie.

En théorie, on peut passer tout le contenu de son WordPress (pages, catégories, tags…) au format AMP mais compte tenu des limitations de l’affichage du carrousel Google (réservé aux actualités et articles de blog), je ne vois pas l’intérêt d’y passer autre chose que des articles.

Le plugin ajoutera dans le code de vos articles, un “link rel” qui fera référence à la version AMP de la page pour que Google et les autres plates-formes en aient connaissance. Voici ce qui est ajouté : <link rel=”amphtml” href=”http://monsite.com/ monarticle/amp/” />. En revanche sur les pages AMP générées, il ajoutera <link rel= “canonical” href= “http://monsite.com/monarticle/” /> pour faire référence à la version canonique standard et éviter ainsi le contenu dupliqué. CQFD !

Laisser mijoter et Google viendra crawler et indexer vos pages AMP. Vous pourrez par ailleurs consulter l’état d’indexation et les erreurs AMP directement depuis la Search Console. Assurez-vous que vos pages AMP soient valides, fonctionnent comme prévu pour les mobinautes et qu’elles puissent s’afficher parmi les pages AMP des résultats de recherche. Les pages AMP non valides ne bénéficieront pas de certaines fonctionnalités de la recherche Google. Plus d’informations sur les consignes Google à ce sujet sur https://support.google.com/webmasters/answer/6340290

 

AMP et la vitesse

La vitesse sur mobile, c’est au final le but premier d’AMP ! Pour la quantifier, j’ai simplement mesuré le site en version standard versus la version d’AMP. A gauche la version standard du site et à droite la version AMP :

 

Les gains en terme de vitesse sont juste impressionnants ! On passe de 1,10 secondes à 286 ms pour la version AMP. A noter également le nombre de requêtes qui passe de 83 à 13 et que dire du poids de la page tout simplement divisé par 5.

Bien sûr, on peut directement ressentir le gain de vitesse en navigant avec son mobile mais les chiffres ci-dessus parlent d’eux-mêmes. Bon, en même temps en faisant sauter quasiment tous les scripts et le JS,  c’est sûr que ça va beaucoup plus vite;)

 

Comment personnaliser le CSS d’AMP ?

Le rendu visuel de la version AMP est épuré à l’extrême. De votre rendu habituel, il ne reste que l’essence de votre article. Tout le reste à disparu, plus de barre latérale, plus de logo, plus de menus, exit les commentaires… Bref, uniquement le contenu de l’article!

Il faut bien le dire, le rendu visuel de base est assez moche : une couleur primaire bleue, absence de logo:/

On peut parfaitement modifier le CSS manuellement mais nos amis de chez Yoast ont récemment sorti un petit plugin nommé Glue For Yoast Seo Amp qui permet de modifier le CSS d’AMP directement depuis l’interface de leur plugin éponyme SEO by Yoast (ils envisagent même de l’intégrer dans SEO d’ici quelques mois), et je dois avouer que c’est bien pratique.

Une fois le plugin Glue installé, vous retrouverez ses réglages depuis SEO>>AMP. Cela vous permettra de sélectionner sur quels contenus AMP doit s’activer (articles, pages ou CPT), de régler le CSS à votre convenance (couleurs, liens, blockquotes), d’ajouter du CSS personnalisé et du code dans le <head>. Enfin, vous pourrez suivre vos stats analytics AMP avec un code de suivi personnalisé.

 

Ajouter les images à la une

Par défaut les articles sous AMP n’affichent pas les images à la une, si vous souhaitez les ajouter, il vous suffira d’inclure le code suivant dans le fichier functions.php de votre thème (c’est encore mieux si c’est dans votre thème enfant) :

add_action( 'pre_amp_render_post', 'xyz_amp_add_custom_actions' );
function xyz_amp_add_custom_actions() {
    add_filter( 'the_content', 'xyz_amp_add_featured_image' );
}

function xyz_amp_add_featured_image( $content ) {
    if ( has_post_thumbnail() ) {
        // Just add the raw <img /> tag; our sanitizer will take care of it later.
        $image = sprintf( '<p class="xyz-featured-image">%s</p>', get_the_post_thumbnail() );
        $content = $image . $content;
    }
    return $content;
}

Nota 1 : N’oubliez pas de sauvegarder votre functions.php avant de le modifier.
Nota 2 : Le code ci-dessus ne fonctionne qu’avec le plugin AMP d’Automattic.

Plus de customisations disponibles sur https://github.com/Automattic/amp-wp/

 

Ajouter les articles en rapport avec AMP

Une fois que vous avez modifié le CSS, un élément important reste absent : les articles en rapport. A l’instar des commentaires, ces derniers ont aussi disparu. Pas top pour inciter le lecteur à parcourir notre site plus en profondeur.

Pas de panique ! Un simple ajout dans le fichier functions.php de votre thème va venir combler ce manque. Ajoutez juste le code suivant :

/**
 * Template tag to show related posts on AMP
 * Output is an unordered list of links
 * @param int $count the number of posts to list
 */
 
function my_amp_related_posts( $count = 2 ) {
 
 global $post;
 $taxs = get_object_taxonomies( $post );
 if ( ! $taxs ) {
 return;
 }
 
 // ignoring post formats
 if( ( $key = array_search( 'post_format', $taxs ) ) !== false ) {
 unset( $taxs[$key] );
 }
 
 // try tags first
 
 if ( ( $tag_key = array_search( 'post_tag', $taxs ) ) !== false ) {
 
 $tax = 'post_tag';
 $tax_term_ids = wp_get_object_terms( $post->ID, $tax, array( 'fields' => 'ids' ) );
 }
 
 // if no tags, then by cat or custom tax
 
 if ( empty( $tax_term_ids ) ) {
 // remove post_tag to leave only the category or custom tax
 if ( $tag_key !== false ) {
 unset( $taxs[ $tag_key ] );
 $taxs = array_values($taxs);
 }
 
 $tax = $taxs[0];
 $tax_term_ids = wp_get_object_terms( $post->ID, $tax, array('fields' => 'ids') );
 
 }
 
 if ( $tax_term_ids ) {
 $args = array(
 'post_type' => $post->post_type,
 'posts_per_page' => $count,
 'orderby' => 'rand',
 'tax_query' => array(
 array(
 'taxonomy' => $tax,
 'field' => 'id',
 'terms' => $tax_term_ids
 )
 ),
 'post__not_in' => array ($post->ID),
 );
 $related = new WP_Query( $args );
 
 if ($related->have_posts()) : ?>
 
 <aside>
 <h3>Ne manquez pas :</h3>
 <ul>
 
 <?php while ( $related->have_posts() ) : $related->the_post(); ?>
 
 <li><a href="<?php echo amp_get_permalink( get_the_id() ); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></li>
 
 <?php endwhile; 
 wp_reset_postdata(); ?>
 
 </ul>
 </aside>
 
 <?php endif;
 
 }
 
}
 
/**
 * Add related posts to the AMP template footer
 */
function my_add_related_posts_to_amp( $template ) {
 ?>
 <div class="amp-wp-content">
 <?php my_amp_related_posts( 3 ); ?>
 </div>
 <?php
}
add_action( 'amp_post_template_footer', 'my_add_related_posts_to_amp' );

(source : http://isabelcastillo.com/related-posts-wp-amp) 

Si vous souhaitez faire apparaître 2, 3, 5 ou plus d’articles en rapport, changez le “3” de cette ligne <?php my_amp_related_posts( 3 ); ?>, à votre convenance.

Nota 1 : N’oubliez pas de sauvegarder votre functions.php avant de le modifier.
Nota 2 : Le code ci-dessus ne fonctionne qu’avec le plugin AMP d’Automattic.

 

Conclusion AMP et WordPress

Le Web pour mobile prend de plus en plus d’importance et Google pousse dans ce sens. Entre ce projet open source amp, les instant articles de Facebook et les applis android pour WordPress, il y a de quoi faire!

Bien ou pas bien ? Là n’est pas la question ! Si le principal moteur de recherche commence à donner un avantage dans les SERPs mobile aux sites qui tirent partie d’AMP, il est, à mon avis, pas idiot d’y aller aussi !

Qui plus est, quand l’installation est aussi simple sur notre CMS favori pourquoi s’en priver ? Pour infos, en tout et pour tout l’installation d’AMP sur WP Formation ne m’a pris que 5 minutes.

• Les avantages : Le temps de chargement de vos articles sur mobile, le confort de lecture procuré au lecteur, le gain SEO dans les SERPs pour mobile.

• Les inconvénients : La disparition des barres latérales, logos, formulaires, etc… Bref, plus de JS ! L’impossibilité de convertir (newsletter, contact), l’absence de navigation que l’on peut toutefois atténuer avec les articles en rapport.

En conclusion de cet article je dirais que AMP n’est pas pensé pour nous (éditeurs de site) mais bien pour nos lecteurs ! Jamais le web mobile n’aura été aussi rapide et comme aime à le dire si souvent Google : Web should be fast !

A bon entendeur, salut ;)

 

Post-scriptum : Si vous avez envie de consulter cet article au format AMP et de voir à quoi cela ressemble, cliquez sur https://wpformation.com/amp-wordpress/amp/