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 :

[su_note]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[/su_note]

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 :

[pastacode lang= »php » manual= »add_action(%20’pre_amp_render_post’%2C%20’xyz_amp_add_custom_actions’%20)%3B%0Afunction%20xyz_amp_add_custom_actions()%20%7B%0A%20%20%20%20add_filter(%20’the_content’%2C%20’xyz_amp_add_featured_image’%20)%3B%0A%7D%0A%0Afunction%20xyz_amp_add_featured_image(%20%24content%20)%20%7B%0A%20%20%20%20if%20(%20has_post_thumbnail()%20)%20%7B%0A%20%20%20%20%20%20%20%20%2F%2F%20Just%20add%20the%20raw%20%3Cimg%20%2F%3E%20tag%3B%20our%20sanitizer%20will%20take%20care%20of%20it%20later.%0A%20%20%20%20%20%20%20%20%24image%20%3D%20sprintf(%20’%3Cp%20class%3D%22xyz-featured-image%22%3E%25s%3C%2Fp%3E’%2C%20get_the_post_thumbnail()%20)%3B%0A%20%20%20%20%20%20%20%20%24content%20%3D%20%24image%20.%20%24content%3B%0A%20%20%20%20%7D%0A%20%20%20%20return%20%24content%3B%0A%7D » message= »Ajouter les images au plug-in AMP » highlight= » » provider= »manual »/]

Etape 8 : Ajouter des articles connexes pour prolonger la lecture

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

[pastacode lang= »php » manual= »%2F**%0A%20*%20Template%20tag%20to%20show%20related%20posts%20on%20AMP%0A%20*%20Output%20is%20an%20unordered%20list%20of%20links%0A%20*%20%40param%20int%20%24count%20the%20number%20of%20posts%20to%20list%0A%20*%2F%0A%20%0Afunction%20my_amp_related_posts(%20%24count%20%3D%202%20)%20%7B%0A%20%0A%20global%20%24post%3B%0A%20%24taxs%20%3D%20get_object_taxonomies(%20%24post%20)%3B%0A%20if%20(%20!%20%24taxs%20)%20%7B%0A%20return%3B%0A%20%7D%0A%20%0A%20%2F%2F%20ignoring%20post%20formats%0A%20if(%20(%20%24key%20%3D%20array_search(%20’post_format’%2C%20%24taxs%20)%20)%20!%3D%3D%20false%20)%20%7B%0A%20unset(%20%24taxs%5B%24key%5D%20)%3B%0A%20%7D%0A%20%0A%20%2F%2F%20try%20tags%20first%0A%20%0A%20if%20(%20(%20%24tag_key%20%3D%20array_search(%20’post_tag’%2C%20%24taxs%20)%20)%20!%3D%3D%20false%20)%20%7B%0A%20%0A%20%24tax%20%3D%20’post_tag’%3B%0A%20%24tax_term_ids%20%3D%20wp_get_object_terms(%20%24post-%3EID%2C%20%24tax%2C%20array(%20’fields’%20%3D%3E%20’ids’%20)%20)%3B%0A%20%7D%0A%20%0A%20%2F%2F%20if%20no%20tags%2C%20then%20by%20cat%20or%20custom%20tax%0A%20%0A%20if%20(%20empty(%20%24tax_term_ids%20)%20)%20%7B%0A%20%2F%2F%20remove%20post_tag%20to%20leave%20only%20the%20category%20or%20custom%20tax%0A%20if%20(%20%24tag_key%20!%3D%3D%20false%20)%20%7B%0A%20unset(%20%24taxs%5B%20%24tag_key%20%5D%20)%3B%0A%20%24taxs%20%3D%20array_values(%24taxs)%3B%0A%20%7D%0A%20%0A%20%24tax%20%3D%20%24taxs%5B0%5D%3B%0A%20%24tax_term_ids%20%3D%20wp_get_object_terms(%20%24post-%3EID%2C%20%24tax%2C%20array(‘fields’%20%3D%3E%20’ids’)%20)%3B%0A%20%0A%20%7D%0A%20%0A%20if%20(%20%24tax_term_ids%20)%20%7B%0A%20%24args%20%3D%20array(%0A%20’post_type’%20%3D%3E%20%24post-%3Epost_type%2C%0A%20’posts_per_page’%20%3D%3E%20%24count%2C%0A%20’orderby’%20%3D%3E%20’rand’%2C%0A%20’tax_query’%20%3D%3E%20array(%0A%20array(%0A%20’taxonomy’%20%3D%3E%20%24tax%2C%0A%20’field’%20%3D%3E%20’id’%2C%0A%20’terms’%20%3D%3E%20%24tax_term_ids%0A%20)%0A%20)%2C%0A%20’post__not_in’%20%3D%3E%20array%20(%24post-%3EID)%2C%0A%20)%3B%0A%20%24related%20%3D%20new%20WP_Query(%20%24args%20)%3B%0A%20%0A%20if%20(%24related-%3Ehave_posts())%20%3A%20%3F%3E%0A%20%0A%20%3Caside%3E%0A%20%3Ch3%3ENe%20manquez%20pas%20%3A%3C%2Fh3%3E%0A%20%3Cul%3E%0A%20%0A%20%3C%3Fphp%20while%20(%20%24related-%3Ehave_posts()%20)%20%3A%20%24related-%3Ethe_post()%3B%20%3F%3E%0A%20%0A%20%3Cli%3E%3Ca%20href%3D%22%3C%3Fphp%20echo%20amp_get_permalink(%20get_the_id()%20)%3B%20%3F%3E%22%20title%3D%22%3C%3Fphp%20the_title_attribute()%3B%20%3F%3E%22%3E%3C%3Fphp%20the_title()%3B%20%3F%3E%3C%2Fa%3E%3C%2Fli%3E%0A%20%0A%20%3C%3Fphp%20endwhile%3B%20%0A%20wp_reset_postdata()%3B%20%3F%3E%0A%20%0A%20%3C%2Ful%3E%0A%20%3C%2Faside%3E%0A%20%0A%20%3C%3Fphp%20endif%3B%0A%20%0A%20%7D%0A%20%0A%7D%0A%20%0A%2F**%0A%20*%20Add%20related%20posts%20to%20the%20AMP%20template%20footer%0A%20*%2F%0Afunction%20my_add_related_posts_to_amp(%20%24template%20)%20%7B%0A%20%3F%3E%0A%20%3Cdiv%20class%3D%22amp-wp-content%22%3E%0A%20%3C%3Fphp%20my_amp_related_posts(%203%20)%3B%20%3F%3E%0A%20%3C%2Fdiv%3E%0A%20%3C%3Fphp%0A%7D%0Aadd_action(%20’amp_post_template_footer’%2C%20’my_add_related_posts_to_amp’%20)%3B » message= »Ajouter les articles connexe au plugin AMP site wordpress » highlight= » » provider= »manual »/]

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 😉