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…

google-amp-project

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.

amp-demo

 

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.

wpf normal wpf responsive Version 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 :

code source 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.

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 ConsoleAssurez-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

google-search-console-amp

 

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 :

article wpf article 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.

glue1

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/

wpformation
NE MANQUEZ PLUS RIEN !
Inscrivez-vous pour recevoir le meilleur de WordPress dans votre boîte de réception, chaque mois.

Nous ne spammons pas ! Consultez notre politique de confidentialité pour plus d’informations.

A propos de l'auteur...

Avatar de WPFormation

WPFormation

Fabrice Ducarme, spécialiste & formateur WordPress je suis éditeur, auteur et fondateur de WP Formation.com. Conférencier lors des WordCamp Paris 2013 & 2015, Marseille 2017 et au WP Tech Nantes 2014, je vous propose plus de 500 articles & tutoriaux à propos de WordPress, mes trucs & astuces mais aussi des coups de gueule...

39 commentaires pertinents à ce jour ;)

  • Excellente description et résumé de ce qu’est AMP. Je vais tester prochainement, le temps de chargement divisé par 5 ça fait rêver ! ça va certainement et simplement devenir un standard du WEB comme l’est devenu dernièrement le Responsive.

  • @luc la réduction du temps de chargement est effectivement une bonne chose, en supprimant le JS et les applications tierces c’est plus facile aussi!

    A noter que Twitter mettra également en avant les liens AMP directement sur sa plateforme via son application “Twitter Moments” et sa section dédiée sur l’application Twitter : https://blog.twitter.com/2016/explore-links-in-moments-1

  • Merci pour ce super article ! :)
    As-tu eu l’occasion de tester Pagefrog ? Avec les Instant Articles de Facebook et les Apple News ça pourrait t’intéresser.

  • Merci pour ce tuto très complet – j’avais fait un essai mais pas très concluant. Question, qu’en est-il de adsense ? De ce que je comprends, il part également avec l’eau du bain. C’est un peu étonnant de la part de Google inc.

  • Super cet article, je pense que tout le monde se pose des questions ;-)
    Je essayer tout çà bientôt alors !
    Merci Fabrice

  • @paul il est possible de l’intégrer, voir le lien dans l’article vers plus de customizations ;)

  • Merci @martial

    C’est à essayer, attention toutefois son principal intérêt est surtout pour les articles. Les produits ecommerce n’en bénéficieront pas^^

  • C’est ce que je me suis dis en lisant l’article…çà peut quand même aider aux articles…
    Mais du coup peut on ne pas mettre les produits (donc les laisser en responsive design) et mettre le reste en AMP (du partiel donc !)

  • @martial-couderette oui, teste une page de WPFormation en AMP (donc en ajoutant /amp/ à la fin de l’URL), tu verras que les liens internes qui pointent vers du contenu WPF pointent vers la version “responsive”.

    De plus si une page n’a pas de version amp alors c’est la version standard qui s’affiche!

  • Bonjour,
    Merci pour cet article qui me fait découvrir une fonctionnalité intéressante.

    L’intérêt de permettre aux pages statiques de passer en AMP dépend des sites web. Sur le mien, j’ai des pages statiques qui sont mises à jour régulièrement comme les photos de paquets de tabac ou celles de leurs caractéristiques (nicotine, CO, goudrons).

    Limiter AMP aux articles n’a du coup pour mon site que peu d’intérêt ! Dommage. Il y a un plugin complémentaire à AMP, c’est « Custom AMP » https://fr.wordpress.org/plugins/custom-amp-accelerated-mobile-pages/ mais sauf erreur de ma part, il ne permet de passer les pages statiques non plus en AMP.

    Sinon, l y a un autre plugin qui n’a pas cette limitation et qui fait passer les pages statiques en AMP c’est « Accelerated Mobile Pages » https://fr.wordpress.org/plugins/accelerated-mobile-pages/ Le problème est qu’il allonge vers les bas les miniatures de photos de cigarettes (qui au départ sont en 150×150).
    Du coup, je vais attendre que ces plugins mûrissent avant de les installer.

    Quant à pagefrog, je ne sais pas si je peux m’en servir car je ne lie pas mon site avec facebook et je n’ai même pas activé les boutons like ni ceux des réseaux sociaux.

  • Merci pour cet article qui redonne le courage de se pencher sur la question ^^

  • @luciole135 oui actuellement AMP donne la priorité aux articles et aux news, de fait les pages et CPT n’ont actuellement aucune chance d’apparaître dans le carrousel Google.

    Comme je le dis très souvent à mes élèves, ne négligez pas la puissance des articles et des catégories. Dans les mois à venir, il y aura aussi “instant articles” de Facebook à prendre en compte, sans oublier que Twitter va aussi pousser le format AMP. 3 poids lourds du Web qui veulent accélérer le web mobile, il ne faut pas passer à côté.

    Merci pour les ressources supplémentaires, toutefois à titre personnel je donne bien plus de crédit au plugin d’Automattic ;)

  • Merci @frank pour la ressource, toutefois attention j’ai testé et c’est pas terrible en terme de rendu (donc il faudra mettre du CSS) et en fonctionnalités cela reste limité

  • Effectivement Fabrice, CSS obligatoire parce que c’est un peu brut de pomme tel quel ;)

  • Ah ben, j’avais lu des AMP à droite à gauche sans faire trop gaffe. Merci pour cet article très complet – il va falloir que je me penche sur les billets relatifs parce que là, j’ai eu l’impression que c’était une query assez classique et je veux l’adapter pour Contextual Related Posts.

  • Bonjour,
    Merci pour ces explications claires et précises. Dans mes articles j’ai des champs personnalisés ACF et il n’apparaissent pas sur la page AMP est ce que tu as une idée pour les inclurent ?

  • Merci pour cet article complet.

    Du coup, est-ce qu’il y aurait un intérêt de rediriger les pages responsives ouvertes depuis un mobile vers les pages /amp ?

  • @stephane AMHA non, Ok pour le carrousel SEO Google mais ensuite retour au responsive sinon avec amp on perd toutes les conversions (formulaire, Newsletters etc….) donc dans mon cas c’est non;)

  • très bon article merci + découverte de PageFrog qui a l’air pas mal

  • Bonjour,
    J’ai finalement activé le plugin officiel car ce sont mes articles qui sont le plus lus. Je viens de recevoir 5 jours plus tard un mail de Google me disant que l’attribut image de l’auteur est obligatoire.
    Je ne comprends pas comment faire puisque mon mail est associé à mon gravatar !
    Voici la capture d’écran de Google Webmaster: http://www.hostingpics.net/viewer.php?id=797246StructuredDataTestingTool.png
    Avez-vous une idée ?
    Merci !

  • Merci,
    J’avais déjà utilisé cet outil de test car Google propose de l’utiliser depuis sa console. Et j’ai fini par comprendre le problème, mais je ne sais pas encore le résoudre.
    les articles dans lesquels les commentaires sont désactivés n’affichent pas l’image de l’auteur alors que celles où les commentaires sont activés l’affichent.
    Certainement un bug du plugin.

  • 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.

  • 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 .

  • 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.

  • 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 :)

  • 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)

  • 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.

  • 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.

  • 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

  • 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.