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 ?

Plutôt qu’un long discours, voici en 3 images les différentes versions de WP Formation. 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à un plugin qui le fait pour vous ;) L’installation est très simple et quant aux réglages c’est encore plus simple, il n’y en a pas ! Tu l’installes, tu l’actives et tu l’oublies…

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=”amphtmlhref=”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/

5 sur 5 (7 votes)

Cet article a été modifié le 04/11/16 9:31

Voir Commentaires (39)

  • Merci pour cet excellent article . Cependant je trouve que votre article est incomplet puisque vous navez pas parler de la chose la plUs importante : la publicité et google adsense. Comment insérer adsense et continuer à monétiser avec AMP.

  • Merci pour cet article, je viens de tester ça marche. (J'ai rajouté /amp a la fin d'un article°
    Par contre j'ai besoin d'une petite information comment google prend en compte amp?
    Je viens de cliquer sur un de mes articles via mon smartphone et il apparaît pas avec la /amp a la fin

  • Promis après ce lui-ci j'arrête ;o)
    En fait j'ai essayé d'autres plugins (mon choix s'est porté sur Social Share Buttons by Supsystic) et en fait il faut placer les boutons de partage en sidebar et non lié au contenu. Sinon on continue à avoir le problème.

  • Petit tour ce matin sur la console Google Search : 35 pages en erreur (La balise "plusone" n'est pas autorisée.) dû au plugin Sociable qui n'est pas éliminé dans la version AMP de la page. Donc il faut vraiment que je remplace Sociable par un autre plugin sociable ? Un conseil sur le sujet ? Merci.

  • Installation ce matin. Petite incompatibilité avec le plugin Sociable : si vous avez des plugin de ce type plus performant, je suis preneur.
    Merci encore @wpformation (Fabrice) ;o)

  • Merci pour ce tuto ! C'est amusant, car la vitesse du site AMP de WPformation sur pingdom, c'est la même vitesse de chargement que l'un de mes sites en version classique avec wp-rocket dessus. D'ailleurs, je crois qu'on peut mettre en cache les pages AMP.

    J'avais fait des tests à la sortie du format AMP, effectivement, ça envoit du lourd.

    Encore merci :)

  • Hello @wpformation ,

    J'ai fini par tester cette solution. Cela fonctionne à merveille avec Wp-Rocket.

    Par contre, un conseil, pour ceux et celles qui utilisent un plugin de redirection d'erreurs 404, il se peut que ce dernier, les versions redirige /amp/ vers l'URL canonique si la fonction redirection automatique est activée.

    Pour finir, en testant les versions /amp/ , j'ai pu constater une cohérence de résultats avec Gtmetrix et Google Insights. Tous aux verts à 90 % sur mobile avec GI. Yes.

  • Bonjour,
    merci pour ce bel article à la pointe de l'optimisation.

    Bonjour,

    Je choisi exprès des thèmes responsives pour leur compatibilité mobile et tablette (Avada et Enfold).

    Si je comprends bien, AMP va "écraser" le rendu web sur mobile pour le remplacer par un style plus opérationnel mais complètement épuré ou minimaliste ? Ce qui sur un site commercial peut gêner fortement.

    1-Est-il possible de conserver le même look & feel sur mobile ? (Peut-être contradictoire avec le principe même du plugin)

    2-S'il ne concerne que les articles, concerne t-il aussi les articles portfolios aussi, et quid des autres pages du site non "AMPisées" ?

    3-Y a t-il des conflits identifiés avec WP Minify ou autre plugin d'optimisations et/ou de conversion de sites au format mobile, ou est-ce juste incompatible ?

    Merci
    JMDP

    • Avec plaisir @jmdp
      AMP n'écrase rien car il ajoute un répertoire /amp/. Pour répondre à vos questions:

      1/ C'est effectivement contradictoire, le but est d'alléger la page le + possible en faisant fi de tout le superflu.

      2/ Réservé aux articles uniquement (cf le projet amp).

      3/ Rien de relevé à ce jour, il faudra suivre les fils sur le forum du plugin. Ici AMP est utilisé sans conflit avec un plugin de cache .

  • Bonjour, merci beaucoup pour l'article. Je l'ai installé mais j'ai un "petit soucis", ou une petite question plutôt: comment cacher sur les pages AMP la catégorie de l'article, et pourquoi pas comment cacher l'auteur (puisqu'il y en a qu'1 sur mon site)? Merci beaucoup! Bien cordialement

    • @delphine les pages AMP doivent respecter certaines données structurées (auteur, date, catégorie...) pour être validées, je pense donc que c'est une mauvaise idée.

      Si vous souhaitez toutefois les enlever, il faudra modifier le plugin ou utiliser un "display none" en CSS.

Commentaires fermés.