Installer AMP sur WordPress, c’est un jeu d’enfant. Objectif? Vitesse et référencement pour votre site. Suivez le guide en 3 étapes seulement…
Installer AMP sur WordPress, c’est un jeu d’enfant. Objectif? Vitesse et référencement pour votre site. Suivez le guide en 3 étapes seulement…
AMP? Comprenez Accelerated Mobile Pages ou “Accélérer la Performance Mobile”. Il s’agit d’un nouveau standard lancé récemment par Google en vue de proposer un chargement plus rapide des pages d’un site sur mobile. Comment? via un système de cache ultra-performant et une limitation à un simple HTML/CSS des pages d’un site web.
Depuis le mois de février, Google a commencé à pousser les pages AMP dans ses pages de résultats. Il serait dommage de ne pas en être, non? On vous explique comment créer simplement et en trois étapes une version AMP sur WordPress pour accélérer son temps de chargement et optimiser pour le référencement.
1. Installer AMP sur WordPress: un jeu d’enfant!
Merci les plugins WordPress! Le plugin AMP signé Automattic fait le job très efficacement et en deux clics seulement. Son fonctionnement est simple, puisqu’il parse automatiquement les pages de votre site en créant les versions alternatives sous le format standard monsite.com/monarticle/amp/.
Côté code, le plugin ajoute un “link rel” signalant l’existence d’un version AMP de votre page à Google:
<link rel="amphtml" href="http://monsite.com/ monarticle/amp/" />Dans le même temps, il ajoute aussi un “link rel” canonique sur la page AMP créée pour vous éviter les mauvaises blagues de duplicate content:
<link rel= "canonical" href= "http://monsite.com/monarticle/" />2. Monitorer son site WordPress AMP dans Google
Une fois le plugin activé, vérifiez que les pages AMP fonctionnement correctement sur mobile. Pour qu’elles soient reprises dans les résultats Google, elles doivent en effet répondre à certaines consignes ergonomiques.
Vous n’avez alors plus qu’à tenir à l’œil les rapports d’indexation (ou d’erreur) via la Search Console Google.
3. Personnaliser ses pages AMP sur WordPress
Par défaut, le rendu visuel de vos pages AMP est réduit à sa plus simple expression. Exit votre logo, vos menus, votre barre latérale… Vous pouvez évidemment mettre les mains dans le cambuis du CSS, ou optez pour la solution concoctée par les créateurs de Yoast: le plugin Glue For Yoast Seo Amp directement intégré à l’interface de gestion.
Vous n’avez qu’à choisir les contenus à activer, définir les éléments visuels et ajouter facilement des CSS personnalisées. En bonus, vous pouvez même suivre vos webanalytics AMP avec un code de suivi personnalisé.
Une dernière chose. Pour ajouter les images à la Une avec le plugin AMP Automattic, rendez-vous dans le fichier functions.php pour ajouter le code suivant:
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;
}
Et voilà! Vous avez une version AMP optimisée et personnalisée de votre site WordPress. De quoi gagner en vitesse et en visibilité!
Elle est pas belle la vie sur WordPress?