Comment générer et personnaliser des pages AMP pour son site WordPress ?
AMP : kesako et pourquoi l’utiliser ?
L’AMP (pour Accelerated Mobile Pages) est un format de pages web open source initié par Google en 2015. L’objectif de ce format est d’accélérer le chargement et le rendu des pages web sur les smartphones pour une meilleure expérience utilisateur.
Lors d’une recherche sur mobile, les pages AMP sont mises en avant et identifiées avec un sigle spécifique AMP (petit éclair bleu). Elles peuvent aussi apparaître dans un carrousel de résultats enrichis.
Dans les recherches sur mobile, les pages AMP sont mises en avant avec le sigle AMP.
En savoir plus sur le projet AMP.
Mon cahier des charges AMP
Voici les conditions que je me suis fixées pour la génération des pages AMP sur le site WordPress atelier-jack.com :
- Utilisation d’un plugin WordPress de référence et gratuit.
- La génération des pages AMP doit pouvoir être activée / désactivée :
- Pour chaque article : OK (au niveau de la date de publication de chaque article).
- Pour l’ensemble des pages et pour chaque page.
- Le Look and feel de la page AMP doit être personnalisable de façon à avoir le même rendu sur les pages AMP que sur les pages classiques du site.
- Google Analytics doit permettre de mesurer la fréquentation des pages AMP.
- Monétisation des pages AMP avec AdSense.
- Comme je ne prévois pas de menu dans les pages AMP, un ou plusieurs liens en bas de page doivent inciter les visiteurs à continuer sur la version classique du site.
Choix du plugin AMP et installation
A l’heure du choix de l’extension AMP à installer, plusieurs solutions possibles, dont principalement :
- AMP for WP d’Ahmed Kaludi et Mohammed Kaludi : très bien noté, ce plugin semble être le plus riche d’un point de vue des fonctions implémentées. Mais nombre de fonctions spécifiques comme le support de Contact Form 7 ou le WooCommerce nécessitent des plugins additionnels payants.
- Glue for Yoast SEO & AMP : mais je n’utilise pas Yoast …
Mon choix se tourne donc vers le plugin WordPress AMP for WordPress pour les raisons suivantes :
- Projet open source.
- Nombreux contributeurs dont Google (à l’origine du projet AMP) et Automattic (éditeur de WordPress).
L’installation se fait de façon classique, en recherchant le plugin AMP dans le menu des extensions WordPress :
Lien utiles :
Réglages de base du plugin
J’utilise actuellement la version 0.7.2 du plugin AMP for WordPress.
Lorsque le plugin est activé, une option AMP apparaît :
- Dans le menu WordPress.
- Dans le sous menu Apparence.
Activer / désactiver la version AMP de chaque page et article
Le menu AMP -> Général permet d’activer par défaut le format AMP pour les pages (la version AMP des articles est générée par défaut et ne peut pas être désactivée à ce niveau).
Pour chaque article et chaque page du site, une option AMP permet de désactiver ou activer ce format dans le bloc « Publier ».
Au passage, le sigle AMP à côté du bouton Aperçu permet de visualiser la version AMP du brouillon en cours de rédaction.
Personnaliser l’apparence des pages AMP
Dans le Menu Apparence de WordPress, l’option AMP -> Design permet une personnalisation basique des pages AMP :
- Réglage de la couleur du texte de l’entête (header).
- Sélection d’une couleur de fond de l’entête. Cette couleur s’appliquera également aux liens sur la page.
Intégration de Google Analytics
L’intégration de Google Analytics sur les pages AMP se fait simplement via le menu AMP -> Analytics en définissant le type et la configuration JSON correspondant (à personnaliser éventuellement en fonction du suivi désiré) :
Bien entendu il faut mettre à jour l’identifiant UA-XXXXX-Y avec l’ID de suivi Google Analytics qui correspond à votre site.
En savoir plus :
Utilisation d’AdSense
J’ai intégré AdSense aux pages AMP grâce au code ci-dessous inséré dans le fichier functions.php de mon thème :
function xyz_amp_add_auto_ads_code( $content ) {
$publisher_id = 'ca-pub-1234567891234567';
$ad_code = '<amp-auto-ads type="adsense" data-ad-client="' . $publisher_id . '"></amp-auto-ads>';
return $ad_code . $content;
}
add_action( 'pre_amp_render_post', 'xyz_amp_add_auto_ads_insert' );
function xyz_amp_add_auto_ads_insert() {
add_filter( 'the_content', 'xyz_amp_add_auto_ads_code' );
}
Ce code permet d’intégrer le code de la balise amp-auto-ads pour les annonces automatique AdSense. La référence à la librairie javascript correspondante est ajoutée automatiquement par le plugin AMP for WordPress.
Si vous réutilisez ce code, n’oubliez pas de mettre à jour la référence ca-pub-1234567891234567 avec celle de votre compte AdSense.
Personnalisation du contenu de la page AMP
Par défaut les pages AMP générées affichent des informations telles que le nom de l’auteur, l’âge de la publication, la catégorie, les étiquettes, … En bas de page, un lien « Propulsé par WordPress » renvoie vers le site officiel WordPress.
Il y a plusieurs méthodes pour personnaliser ce contenu, applicables selon que vous utilisiez ou non un thème WordPress personnel ou standard. Ces différentes méthodes sont documentées ici.
Les différentes modifications apportées pour mon site (J’utilise un thème WordPress personnel) sont les suivantes :
Suppression du nom de l’auteur sur la page
Suppression du nom de l’auteur et de son avatar par ajout du code suivant dans le fichier functions.php de mon thème WordPress :
add_filter( 'amp_post_article_header_meta', 'xyz_amp_remove_author_meta' );
function xyz_amp_remove_author_meta( $meta_parts ) {
foreach ( array_keys( $meta_parts, 'meta-author', true ) as $key ) {
unset( $meta_parts[ $key ] );
}
return $meta_parts;
}
Suppression de la date de publication de l’article
Suppression de la date de publication de l’article par ajout du code suivant dans le fichier functions.php de mon thème WordPress :
add_filter( 'amp_post_article_header_meta', 'xyz_amp_remove_date_meta' );
function xyz_amp_remove_date_meta( $meta_parts ) {
foreach ( array_keys( $meta_parts, 'meta-time', true ) as $key ) {
unset( $meta_parts[ $key ] );
}
return $meta_parts;
}
Suppression du lien « Propulsé par WordPress »
WordPress est un outil fantastique, mais je n’appécie pas le lien systématique en bas de chaque page AMP. Je l’ai donc supprimé en créant un sous répertoire amp dans mon thème. J’y ai placé un fichier footer.php avec le contenu suivant :
<footer class="amp-wp-footer"> <div> <h2><?php echo esc_html( $this->get( 'blog_name' ) ); ?></h2> <a href="#top" class="back-to-top"><?php _e( 'Back to top', 'amp' ); ?></a> </div> </footer>
Ce code correspond au code par défaut du footer d’une page du plugin AMP, auquel j’ai retiré les lignes correspondant à l’affichage du lien « Propulsé par WordPress ».
Liens en bas de page
Les pages AMP générées par défaut proposent des liens vers les catégories et mot-clés de l’article.
J’utilise le plugin WordPress related post qui permet de faire automatiquement des liens vers d’autres articles du blog (section « A lire aussi »).
L’ensemble de ces liens est affiché en bas des pages AMP et permet au visiteur de naviguer vers des pages non AMP de mon site, ce qui correspond à mon besoin.
AMP et données structurées
Par défaut le plugin AMP for WordPress inclut des données structurées sur les pages AMP. Ces données peuvent permettre de faire apparaître votre page AMP dans un carrousel de résultats enrichis lors d’une recherche sur mobile. Elles sont construites à partir de différents éléments tels que le logo du site, le nom du rédacteur, une image de l’article, …
Si l’un de ces éléments est manquant vous aurez probablement une erreur ou un avertissement dans l’outil de test Google des données structurées.
Tests et mise en production
Avant de mettre en ligne vos pages AMP, il vous faudra tester le rendu avec les différents types de pages et d’articles qui composent le site. Cela implique de tester par exemple et en fonction du type de contenu du site des articles et éventuellement des pages contenant :
- des vidéos,
- des photos (avec les différents alignements à gauche, centré et à droite),
- une galerie photos,
- un tableau,
- des commentaires,
- etc.
Dès que le plugin AMP est activé, les pages AMP des articles sont automatiquement créées. En cas de problème sur un type de contenu particulier (par exemple les galeries photos), il vous faudra retrouver tous les articles contenant ce type de contenu pour désactiver article par article la génération des pages AMP le temps de faire les corrections nécessaires.
La meilleure solution consiste donc à créer un site miroir de test pour vérifier les pages AMP générées avant l’activation du plugin AMP sur le site en production.
Bien entendu toutes les pages AMP publiées doivent être conformes à la spécification. Pour les pages publiées cela peut être vérifié avec cet outil. Enfin la Google Search Console permet de suivre l’indexation des pages AMP et d’identifier les pages en erreur.
Accès la version AMP de cette page si vous n’êtes pas déjà en train de la visualiser 🙂