AMP est le sigle de Accelerate Mobile Performance, ce qui vous permet de comprendre son utilité : Accélérer la Performance de votre site sur Mobile. Il concerne exclusivement WordPress et vous permet donc de charger vos pages plus rapidement sur les smartphones.
Voyons dans le détail les raisons d’installer AMP et comment s’y prendre.
Quel est le principe d’AMP ?
Le but d’AMP est donc de réduire au maximum les temps de chargement des pages WordPress. Si l’affichage des pages AMP est ultra rapide, c’est parce que ce format est limité principalement au HTML et CSS et qu’il est propulsé par un cache d’une performance inégalée.
Un site qui est consulté sur un smartphone redirigera automatiquement l’utilisateur sur sa version AMP, beaucoup plus efficace que sa version classique, sans l’accélérateur.
De fait, AMP vient encore améliorer l’expérience du mobinaute qui, en plus de bénéficier d’un format adapté grâce à un thème responsive, peut désormais surfer à une vitesse optimisée.
Pourquoi faut-il installer AMP ?
AMP est une innovation de Google et il est en plus proposé en open source. Cela vous donne donc toutes les bonnes raisons pour l’installer. D’ailleurs, Google propose de vous faire une place dans son carrousel des résultats Google Mobile si votre page est un article de blog ou une actualité.
Google vous incite donc clairement à utiliser AMP : vos visiteurs gagnent en confort et ils vous trouvent plus facilement dans les résultats de leurs recherches depuis leur smartphone. Il n’est pas question de passer à côté d’une telle opportunité.
Comment installer AMP ?
AMP a été conçu pour WordPress et un plugin lui est dédié. Vous n’aurez donc aucun problème pour le trouver grâce au moteur de recherche de WordPress, vous le téléchargez pour votre site et vous l’activez.
Une fois activé, AMP n’a besoin d’aucun paramétrage ou réglage supplémentaire, il est immédiatement utilisable en l’état.
Pour les exemples donnés plus bas, nous avons choisi le plugin AMP par Automattic.
Comment fonctionne AMP ?
AMP fabrique tout seul et automatiquement des URLs adaptées. Une fois votre plugin activé, AMP va systématiquement ajouter un /amp/ à la fin de l’adresse de tous vos articles. Chacun est formaté pour utiliser les balises au standard AMP et cela vous donne des adresses du type : www.nomdemonsite.fr/titrearticle/amp/.
Le plugin AMP supporte normalement tous les formats de médias : textes, vidéos, Youtube, Instagram…
Vous pouvez faire le choix de transformer l’intégralité de votre site WordPress en format AMP. Cela concerne les pages, les catégories, les tags, les articles… La priorité est à donner aux articles puisque le carrousel de Google ne propose que les pages d’actualité et les articles de blog.
Les codes vos articles vont être transformés de la façon suivante :
1. La mention “link rel” est ajoutée pour établir la référence à la version AMP de la page d’origine. Cela permet que les moteurs de recherche en soient informés. Le code complet est :
<link rel=”amphtml” href=”http://nomdemonsite.fr/titrearticle/amp/”/>.
2. Sur les pages générées AMP le code est modifié pour ne pas retrouver du contenu dupliqué. Donc, pour faire référence à la version canonique standard, le code complet est :
<link rel= “canonical” href= “http://nomdemonsite.fr/titrearticle/”/>
Lorsque vous avez procédé aux changements que vous souhaitiez via AMP, vous pouvez aller en vérifier la validité dans la Google Search Console qui vous indique l’état d’indexation et les éventuelles erreurs.
Des résultats probants !
Faites le test avec vos pages avant et après AMP et vous serez surpris du temps gagné. Vous allez immédiatement être convaincu qu’AMP tient ses promesses.
Le poids de vos pages est considérablement allégé et la vitesse de chargement spectaculaire.
Les conséquences d’AMP sur le CSS
L’utilisation d’AMP n’est bien sûr pas neutre sur l’apparence de la page. Dire que votre page va devenir sobre est en-dessous de la réalité ! Il ne vous reste que le texte de votre article, tout le reste est passé à la trappe. Si vous aviez des menus, des commentaires, une barre latérale, un logo… tout aura disparu.
Heureusement, tout n’est pas perdu car il est possible de personnaliser votre CSS et sans avoir à procéder manuellement. SEO by Yoast – dont la qualité n’est plus à prouver – a mis au point un plugin qui s’appelle Glue For Yoast Seo Amp. Très bien conçu, il vous permet, depuis l’interface de SEO by Yoast, de modifier le CSS d’AMP.
Tout est très simple comme toujours chez Yoast. Vous installez et activez le plugin et vous allez vous promener dans ses réglages que vous trouvez depuis SEO >> AMP. Vous avez ainsi directement accès à divers paramétrages :
– Vous pouvez sélectionner les contenus pour lesquels AMP doit s’activer. Cela vous permet de choisir les articles, les pages…
– Vous pouvez régler certains paramètres de CSS pour modifier l’apparence des couleurs, des liens, des blockquotes…
– Vous avez également accès au code source dans lequel vous allez pouvoir ajouter du CSS personnalisé et du code.
– Vous obtenez un code de suivi personnalisé qui vous permet de suivre vos statistiques AMP dans Google Analytics.
Comment ajouter des images à la une avec AMP ?
Les articles sous AMP n’affichent pas les images à la une mais il est possible de les ajouter en effectuant quelques lignes de code dans le fichier functions.php de votre thème.
Attention : comme à chaque fois que vous modifiez le fichier functions.php de votre thème, pensez à le sauvegarder avant.
Si vous avez intégré AMP grâce au plugin d’Automattic, voilà le code à reproduire en copier/coller :
/**
* 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’ );
Vous voilà maintenant prêt à passer à l’action pour que vos pages de WordPress se chargent à la vitesse de l’éclair sur les smartphones. Vos visiteurs apprécieront ce confort qui change radicalement la consultation des sites. Cela ne peut qu’améliorer votre popularité et votre audience !10
J’espère que cet article a pu vous être utile. N’hésitez pas à partager notre article ou à nous donner votre avis sur AMP en commentaire 🙂