plugin amp site wordpress : avant/apres installation

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 :

Plugin AMP site wordpress résultat SEO
Une fois la technologie AMP utilisée sur votre site wordpress : c’est bon pour le SEO !

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 :

plugin AMP site wordpress, comment ça marche sur google
La page non AMP du JDN
plugin AMP site wordpress, comment ça marche sur google
La page AMP du JDN

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

https://www.google.fr/amp/www.journaldunet.com/solutions/seo-referencement/1185066-les-pages-amp-sont-arrivees-dans-les-resultats-classiques-de-google/%3foutput=amp

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/

installer plugin amp site wordpress

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

Plugin AMP pour site wordpress
Regénérer ses permaliens en appuyant sur Enregistrer les modifications

 

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

plugin amp site wordpress : avant/apres installation
Plugin amp site wordpress : avant/apres installation

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;
}
Ajouter les images au plug-in AMP

 

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' );
Ajouter les articles connexe au plugin AMP site wordpress

 

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 performances de vitesse de chargement après installation du plugin AMP sur site wordpress
Avant l’installation du plugin AMP sur mon site wordpress (non optimisé)
Les performances de vitesse de chargement après installation du plugin AMP sur site wordpress
Après l’installation du plugin AMP sur mon site wordpress (non optimisé)

 

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.

Les urls rel canonical installées par le plugin AMP pour site wordpress

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 :

résultat technique de l'installation du plugin AMP sur un site wordpress
Vous noterez l’ajout de la ligne LINK REL=AMPHTML dans vos pages habituelles

 

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 😉

Plugin AMP pour site WordPress
4.96/5 sur 101 votes

Une réflexion au sujet de « Plugin AMP pour site WordPress »

Laisser un commentaire