AMP & WordPress : Pourquoi et comment l’installer ?

Vous souhaitez installer AMP sur WordPress ? Faisons le tour de la question. AMP, c’est quoi ? A quoi ça sert ? Comment l’installer sur son site web WordPress ?

AMP est un acronyme pour Accelerated Mobile Pages soit « Accélérer la vitesse des pages mobiles ».  Il s’agit d’un nouveau format de pages mobiles rapides. C’est Google qui a mis en place ce format. L’objectif est bien sur que l’internaute puisse accéder très rapidement à l’information qu’il recherche.

Tu peux tout savoir sur Google, WordPress, le référencement et le format AMP en rejoignant ma formation vidéo avancée

Le constat actuel

Nous savons maintenant tous que Google prend en compte le temps de chargement des pages dans son algorithme. Avoir un site rapide à charger est devenu indispensable. C’est un bon point pour le SEO mais aussi pour ne pas perdre l’internaute qui va quitter le site si celui-ci met trop de temps à s’afficher.

Sur desktop, ce n’est pas trop compliqué d’avoir un bon temps de chargement (et encore), il suffit d’optimiser le poids des images et le code de chaque page. J’utilise pour ça les plugins WordPress Wp Rocket (plugin de cache) et Imagify (pour les images). Mais sur mobile, c’est un peu plus compliqué. Il suffit d’être dans un lieu avec une connexion faible et les sites trop longs à charger deviennent inaccessibles.

Dans un monde ou plus de 50% des internautes sont des mobinautes, il fallait trouver une solution.

La solution Google : le format AMP

Google nous propose AMP. AMP, c’est un format de page pour mobile hyper allégé pour un chargement ultra rapide. L’objectif est de réduire et simplifier la structure d’une page pour un affichage quasi-immédiat. Certains sites web pourront gagner jusqu’a 80% de temps de chargement en plus. C’est énorme. De plus, il semble que Google améliore le positionnement des pages AMP (à confirmer).

• Comment cela fonctionne ? C’est très simple, AMP sur WordPress va transformer le design de vos pages mobiles pour le simplifier, le rendre très basique. Il faut noter que le format AMP va principalement cibler les articles de blog. Il y a des avantages et des inconvénients à cela, j’en parle un peu plus bas.
• Pourquoi passer vos pages WordPress en AMP ? Il y a deux  raisons principales : offrir un temps de chargement plus rapide à vos clients et gagner en référencement naturel.
• Qui cela concerne ? Les pages AMP concernent particulièrement les producteurs de contenu. Si vous n’avez pas de partie blog sur votre site web, vous pouvez oublier le format AMP sur WordPress. Mais comme produire du contenu de façon quotidienne est un excellent moyen d’avoir un référencement naturel, je ne vois pas pourquoi vous n’auriez pas de blog. Les pages AMP ne vous concernent également pas si seulement une petite partie de votre trafic provient du mobile. Sur mon site web, le trafic mobile est inférieur à 20%, je n’ai donc pas activé les pages AMP. Si votre site web est déjà très rapide sur mobile, cela ne vous concerne pas non plus.
• Comment installer AMP sur WordPress ? je vous montre comment faire un peu plus bas, il faudrait simplement installer 2 nouveaux plugins. En 5 minutes, le tour est joué.

Article de blog normal

Article de blog AMP

Avantages du format AMP sur WordPress

• AMP est libre et open source.
• AMP permet d’améliorer le temps de chargement de vos pages WordPress
• Google semble favoriser les pages AMP dans les résultats de recherche, c’est donc un gain de trafic supplémentaire et un meilleur référencement naturel global.
• Le format est assez récent donc amené à évoluer et améliorer encore les performances et la personnalisation des pages AMP.

Inconvénients du format AMP pour WordPress

• Certains plugins peuvent entrer en conflit avec les plugins AMP de WordPress et créer des bugs sur le site
• Le design des pages mobiles est très simpliste. Vous allez perdre les modules sociaux, les articles liés et les images à la une. Le format peut avoir un impact sur vos conversions si vous utilisez des formulaires de capture ou des boutons dans vos articles car ils vont disparaître.
• Retirer le format AMP sur WordPress n’est vraiment pas facile

On reconnait une page AMP dans les résultats de recherche grâce au logo AMP

Installer Google AMP sur WordPress

Il y a principalement 2 plugins WordPress sur le marché :

• AMP  : plugin officiel simple à installer mais peu puissant
• AMP for WP : plugin plus complexe à paramétrer mais aussi beaucoup plus puissant notamment pour personnaliser le design.

C’est le premier que je vais présenter dans un premier temps, le second fera l’objet d’un autre article. A noter :

• Peu importe le plugin choisi, il y a un critère très important à prendre en compte. Le format AMP va dupliquer les pages existantes, il faut donc faire attention au contenu dupliqué entre la page de base et la page AMP. Les deux plugins que je présente ajoute automatiquement une balise canonical qui indique à Google que les deux pages sont identiques et qu’il faut qu’il prenne en compte la page AMP et pas la page basique.
• Vos pages WordPress au format AMP ne vont s’afficher à l’internaute que dans les pages ouvertes depuis le moteur de recherche. Si l’internaute arrive sur une page depuis un lien par exemple, c’est la page « normale » qui s’affichera.

Etape 1 : télécharger le plugin AMP for WordPress

Dans un premier temps, rendez-vous dans « extensions » – « ajouter » et taper « AMP » dans la barre de recherche de WordPress. Installez le plugin « AMP » par WordPress.com.

Rendez-vous maintenant dans les réglages du plugin. Un nouvel onglet « AMP » est apparu dans la sidebar de gauche. Vous avez alors 3 choix de template :

• Native
• Paired
• Classic

Vous pouvez en savoir plus à propos de ces templates sur le site officile de Google AMP. Pour avoir essayez les 3, les deux premiers faisaient buger le design de mon site alors que le mode classic fonctionnait parfaitement.

C’est bon ! AMP est bien installé sur votre site web. Vous pouvez le vérifier en allant sur une page mobile et une page desktop et ajouter /amp/ à la fin de l’URL.

Etape 2 : Aller dans « Permaliens »

Rendez-vous dans les réglages de WordPress – « Permaliens » et cliquez seulement sur « Enregistrer les modifications ». C’est une simple étape de validation.

Etape 3 : télécharger le plugin Glue for Yoast SEO & AMP

Le design du site est très simpliste et ressemble à n’importe quel autre page AMP. Vous pouvez alors installer le plugin Glue for Yoast SEO & AMP pour pouvoir jouer un peu plus sur le design.

Installez le plugin directement depuis « extensions » – « ajouter ». Vous devez au préalable avoir bien installer et configurer le plugin Yoast SEO. Dans l’onglet de Yoast, une nouvelle entrée « AMP » apparaîtra alors. Vous pourrez alors jouer sur les couleurs pour adapter les pages AMP de WordPress à votre charte graphique.

Etape 4 : rajouter les articles liés

Le design est très simple mais on peut le modifier en passant directement par le CSS. Tous dépend ce que vous souhaitez modifier, vous trouverez des tas de petits bout de code sur le net pour modifier certains éléments de design. Un des plus importants pour moi est la fonction « articles liés ».

Un élément important pour le SEO puisqu’il permet à l’internaute de naviguer sur un autre article une fois terminé l’actuel. Cela me permet de garder l’internaute sur le site web.

/**
 * 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' );

Le code a été écrit par Isabelle Castillo

Comment contrôler les résultats ?

Une fois le format AMP activé sur WordPress, vous devez contrôler les résultats, via :

• Google Search Console : vérifiez l’onglet AMP, dans la nouvelle search console. Google vous enverra une notification par mail s’il y a des erreurs dans vos pages. Il vous indiquera alors comment les corriger.
• Le page speed de Google : le temps de chargement de mon blog sans AMP et avec AMP.
• Le validateur de page AMP
• Google Analytics : via le plugin Glue for Yoast SEO & AMP, vous pouvez ajouter votre Id de tracking analytics et vérifier le trafic sur vos pages AMP. Vérifiez également l’évolution du trafic global sur mobile.

Une chose très importante est à noter : installer Google AMP pour WordPress est très facile. En revanche, pour supprimer les pages AMP, ce n’est pas une mince affaire, il ne suffira pas de supprimer le plugin, voilà un tuto pour désinstaller vos pages AMP.

Pour aller plus loin, vous pouvez jeter un œil à mon tuto WordPress gratuit.