Plugin AMP pour site WordPress

AMP signifie Accelerated Mobile Pages. Google a encore une fois insisté sur l'importance pour les sites de disposer d'une version AMP. À partir du 21 septembre 2016, Google va déployer son affichage de page AMP dans le monde entier. Ne ratez pas le coche et profitez-en pour passer devant les gros sites qui n'ont pas encore franchis le pas ! On en profite pour vous présenter le plugin AMP site WordPress.

AMP sur Google Mobile, c'est quoi ?

La technologie AMP permet de réduire la quantité de code au maximum afin de permettre à Google de stocker une image de votre site dans son cache et de la proposer le plus rapidement possible à son audience. Sur son moteur de recherche, Google repère les contenus au format AMP par une icône :

Comme vous le voyez, le site du JDN a d'ores et déjà mis en place AMP et dispose de pages accélérées pour le chargement sur mobile. Google nous l'indique avec l'icône et le texte AMP. Voilà ce que donne la page du JDN avec et sans AMP sur mobile :

Pour ce qui concerne le format des urls servi par google sur mobile, ça ressemble à cela :

Quel plugin AMP pour site WordPress ?

Automatic a lancé il y a quelques mois un plugin simple à installer et à utiliser dont le nom est aussi simple que son utilisation : AMP. Voilà un très bon plugin AMP site wordpress. Vous trouverez ci-dessous une démo de l'installation, de la mise en place et des résultats.

Etape 1 : télécharger le plugin

L'adress officielle de téléchargement du plugin sur le répertoire de wordpress est : https://fr.wordpress.org/plugins/amp/

Éape 2 : installer le plugin

Téléchargez le plugin AMP site wordpress, ouvrez l'archive et déposez le dossier dans le dossier des plugins de votre site wordpress via FTP.

Étape 3 : Activer le plugin

Rendez-vous dans le menu extensions de votre site WordPress. Après avoir placé le plugin AMP pour WordPress dans votre dossier plugin, vous devriez voir apparaitre le plugin AMP site wordpress dans la liste des plugin disponible. Cliquez sous le nom AMP, sur Activer l'extension.

Étape 4 :  Configurer le plugin AMP site wordpress

Pas besoin. Tout est presque prêt !

Éape 5 : regénérer vos permaliens

Rendez-vous dans la parti Réglages/Permaliens. Allez en bas de la page et sauvegarder sans rien changer.

Étape 6 : premièr aperçu de vos pages AMP

Ce sont donc des pages qui conservent uniquement le texte, le nom du blog et… rien d'autre que vous mettrez à disposition de google pour la mise en cache et l'apparition dans les résultats de recherches mobiles. Pour pouvoir ajouter quelques options à tout cela, nous allons modifier le fichier functions.php de notre theme enfant. C'est parti !

Étape 7 : Ajouter les images à vos pages AMP (via le functions.php)

Voila le code à ajouter à votre fichier funcitons.php, dans le dossier de votre theme enfant. Attention, ce code fournit directement par Automatic sur leur GitHub :

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;
}

Etape 8 : Ajouter des articles connexes pour prolonger la lecture

Le code a été écrit par Isabelle Castillo :

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

Les résultats (performance) de l'installation du plugin AMP sur mon site wordpress

En chargent un rendu minimaliste, le plugin AMP réduit énormément le temps de chargement de mon site wordpress qui n'a pas encore été optimisé au niveau de la vitesse de chargement.

Les résultats techniques après l'installation du plugin AMP

Rel Canonical sur les nouvelles pages AMP

Les gens de chez Automatic ont fait les choses bien, ils ont ajouter une balise canonical aux pages générées par les articles en AMP. Voyez ci-dessous la ligne de code ajoutée qui évite l'indexation d'un contenu dupliqué et donc une éventuelle pénalité Google.

L'indication des url en AMP sur les pages de votre blog

Et pour mentionner à Google la présence d'une version AMP de chaque article, le plugin ajoute une ligne link AMPHTML à votre template :

Si vous voulez voir l'une des pages AMP de mon site, avec des images et des liens connexes c'est par ici et ça parle d'Inbound Marketing pour gagner des clients 😉