Le web est en constante évolution et pour beaucoup de propriétaires d’entreprises, cela signifie la nécessité de rester au courant de tous les changements avec Google. Si vous ne vous adaptez pas, vous risquez d’être laissé en arrière. Google AMP, leur initiative mobile pour accélérer le Web, approche maintenant de son premier anniversaire. Puisqu’il est beaucoup plus stable maintenant qu’il y a 6 mois, nous avons pensé que ce serait un bon moment pour partager avec vous quelques étapes sur la façon de démarrer avec Google AMP dans WordPress, ainsi que certains des avantages et inconvénients de cette nouvelle plateforme.
- Qu’est-ce que Google AMP ?
- Avantages de Google AMP
- Inconvénients de Google AMP
- Comment configurer Google AMP dans WordPress
- Validation de votre code Google AMP
Qu’est-ce que Google AMP ?
Google AMP (Accelerated Mobile Pages Project) a été lancé en octobre 2015. Le projet s’appuie sur AMP HTML, un nouveau framework ouvert entièrement construit à partir de technologies web existantes, qui permet aux sites web de construire des pages web légères. Pour le dire simplement, il offre un moyen de servir une version épurée de votre page Web actuelle.
Dès le premier jour, la rapidité a été l’une des priorités de l’AMP. C’est sans doute l’une des choses les plus frustrantes sur le Web mobile – confirmée par une étude récente de Google qui montre que 53% des gens quitteront un site qui ne se charge pas en trois secondes ou moins. C’est le pire des mondes pour les utilisateurs, les entreprises, les éditeurs, les sites Web et le Web mobile dans son ensemble. – David Besbris, chef de projet AMP chez Google
Selon le dernier rapport d’Akamai sur l’état des performances du commerce de détail en ligne, chaque dixième de seconde compte. Même une légère augmentation du temps de chargement des pages à 2,8 secondes a entraîné une baisse de 2,4 % du taux de conversion.
Beaucoup de grandes entreprises ont adopté Google AMP au cours de l’année écoulée, notamment WordPress, Reddit, eBay, Pinterest, Washington Post, Wired, Gizmodo, etc. Selon Google, Slate a connu une augmentation de 44 % du nombre de visiteurs uniques mensuels et de 73 % du nombre de visites par visiteur unique mensuel.
Lorsqu’une page est servie via AMP dans Google, le symbole AMP apparaîtra à côté de la page, comme indiqué ci-dessous dans la démo du New York Times. Notez que vous devez être sur un appareil mobile pour la tester. Vous pouvez également utiliser l’émulateur de périphérique dans Chrome devtools. Le balisage structuré des données permet à Google de présenter votre contenu de manière plus visible dans les résultats de recherche. Par exemple, les articles AMP qui incluent les propriétés de balisage appropriées peuvent obtenir le point convoité du carrousel dans les SERPs comme indiqué ci-dessous.
Et voici un exemple de ce à quoi ressemble une page AMP sur le site Web du New York Times. Comme vous pouvez le voir, c’est très basique et simpliste, ce qui est l’objectif d’AMP. Cela garantit un chargement rapide et une meilleure ergonomie.
Comme pour toute nouvelle plateforme, vous devez peser le pour et le contre et décider si c’est le bon choix pour votre entreprise ou votre site Web.
Avantages de Google AMP
- AMP est libre et open source.
- AMP peut certainement améliorer les temps de chargement de votre site WordPress. Et rappelez-vous que la vitesse est un facteur de classement.
- Meilleurs placements dans les SERPs avec possibilité de carrousel pour un meilleur CTR. Dans une implémentation avec un éditeur populaire, Google AMP s’est traduit par un CTR de 600% !
- Google AMP impose un grand nombre de pratiques recommandées en matière de performances Web, telles que la prévention des grands frameworks CSS et JS.
- Cela pourrait avoir un impact positif sur vos conversions.
- De nombreuses améliorations ont été apportées au cours de l’année écoulée et les options de publicité sont maintenant facilement disponibles dans Google AMP. Cela signifie que les magazines et les nouvelles publications peuvent conserver ou même augmenter leurs revenus AdSense.
- Optimisation automatique des images (même conversion au format WebP !)
- AMP Lite introduit une optimisation supplémentaire pour les connexions réseau lentes. Google a vu une réduction combinée de 45% en octets.
Inconvénients de Google AMP
- L’AMP n’est pas actuellement un facteur de classement, mais il pourrait l’être à l’avenir. Cela pourrait être considéré à la fois comme un pour et un contre.
- AMP peut être difficile à mettre en œuvre et à tester si vous n’êtes pas développeur. Cependant, heureusement, la plateforme WordPress est un peu plus facile que les autres.
- Lancement d’une toute nouvelle plateforme séparée et d’une fonctionnalité dont vous devez vous préoccuper. Qu’en est-il de l’optimisation de nos sites mobiles ?
- Cela pourrait nuire ou affecter vos conversions d’une manière négative.
- Il y a eu des rapports de Google AMP qui ont créé des soucis avec les statistiques dans Google Analytics.
- Certains ont connu un engagement plus faible et des taux de rebond plus élevés.
- Toujours des scripts et des applications tiers qui ne sont peut-être pas supportés.
- Aucun support de certains navigateurs plus anciens tels qu’Internet Explorer 11. Ils ont déclaré qu’en général, ils supporteront les 2 dernières versions des principaux navigateurs comme Chrome, Firefox, Edge, Safari et Opera. Et ils prennent en charge les versions bureau, téléphone, tablette et affichage Web des navigateurs respectifs.
- Lisez l’opinion de Jan Dawson sur les raisons pour lesquelles Google AMP rend plus difficile, et non plus facile, la publication sur le Web.
- Lisez l’article d’Alex Kras sur certains des problèmes avec Google AMP, ainsi qu’une réponse du responsable technique du projet AMP chez Google.
- Tim Kadlec partage son opinion sur Google AMP et le besoin d’une meilleure alternative : les politiques de performance de contenu.
À partir de février 2017, Google AMP a commencé à afficher les URL des éditeurs directs. Auparavant, il ne montrait que la version de Google qui était servie à partir du cache. Cela présentait les préoccupations des gens du point de vue de la promotion de l’image de marque. Heureusement, Google s’en est rendu compte également et a fait un changement. Maintenant, le champ URL d’un navigateur continuera à afficher une URL Google. Cependant, la zone d’en-tête AMP affichera un lien ou une icône de chaîne, ce qu’elle appelle le bouton « ancre ». En cliquant sur ce bouton, l’URL directe de l’éditeur apparaîtra, de sorte qu’elle puisse être facilement copiée et collée. Ce n’est pas encore une solution parfaite, mais c’est mieux que rien.
Voici un autre exemple de perte d’image de marque.
Another reason to not use Google AMP –> You lose your brand 🙂 cc @HuffingtonPost you might want to think about it 🙂 pic.twitter.com/n3LEHIOEBZ
— Syed Balkhi (@syedbalkhi) January 19, 2017
Il est également important de noter que si la seule page de la version mobile qui existe est une version AMP, Google utilisera toujours la version de bureau pour l’indexation, même lorsque Google bascule son index sur l’index mobile-first.
So @maileohye confirmed that in a situation where there is desktop and AMP, Google will index desktop for mobile first. #StateofSearch
— Jennifer Slegg (@jenstar) November 14, 2016
Comment configurer Google AMP dans WordPress
Heureusement, il est maintenant beaucoup plus facile d’implémenter Google AMP dans WordPress qu’il y a 6 mois. Beaucoup de progrès ont été réalisés sur les plugins WordPress et la plateforme dans son ensemble. Rappelez-vous cependant que votre code doit être validé par Google pour afficher la version AMP de votre site dans les SERPs. Un plugin transformera votre article en version AMP mais c’est Google qui décide d’afficher la version AMP à la place.
Fondamentalement, comment cela fonctionne, c’est que votre article WordPress reçoit une URL différente qui lui est assignée. Tout cela est géré automatiquement par le plugin WordPress. Généralement /amp ou /?amp est ajouté à votre article courant. En voici un exemple :
URL originale de l’article de blog : https://domain.com/blog-post
URL AMP de l’article de blog : https://domain.com/blog-post/amp/
Plugins WordPress Google AMP
Il y a actuellement 2 plugins WordPress populaires dans le répertoire qui peuvent vous aider à installer Google AMP. Le premier est le plugin AMP officiel gratuit, qui est actuellement développé par l’équipe d’Automattic.
Au moment d’écrire ces lignes, il y a actuellement plus de 200 000 installations actives avec une note de 3,5 étoiles sur 5. Vous pouvez le télécharger à partir du répertoire WordPress ou en le recherchant dans votre tableau de bord WordPress sous « Ajouter » extensions. Vous pouvez personnaliser un peu l’apparence dans l’éditeur « Apparence AMP » (voir ci-dessous). Cependant, vos options sont assez limitées avec le plugin et il dépend de votre capacité à implémenter des filtres supplémentaires pour des fonctionnalités telles que AdSense ou Analytics.
Il est également important de noter qu’il ne supporte que les articles, pas les pages. Bien qu’ils aient annoncé qu’ils travaillent sur l’ajout de cette fonctionnalité. Voici un exemple de ce à quoi ressemble notre article WordPress après l’installation du plugin.
Si vous voulez un moyen facile d’ajouter des fonctionnalités supplémentaires, c’est ici que le plugin gratuit AMP for WP entre en jeu. Il s’agit essentiellement d’une version plus avancée du plugin AMP officiel qui vous offre des fonctionnalités et un support supplémentaires. Il est développé par Ahmed Kaludi et Mohammed Kaludi qui gèrent également une boutique de thèmes WordPress.
Au moment d’écrire ces lignes, il compte actuellement plus de 70 000 installations actives avec une note de 4,6 sur 5 étoiles. Vous pouvez le télécharger à partir du répertoire WordPress ou en le recherchant dans votre tableau de bord WordPress sous « Ajouter » extensions. Ce plugin vous permet de personnaliser beaucoup plus avec votre configuration Google AMP. De plus, il supporte les pages. Ci-dessous, nous allons nous plonger dans les personnalisations et les fonctionnalités disponibles dans les paramètres du plugin AMP dans votre tableau de bord.
Nous utilisons actuellement ce plugin chez Kinsta ! Vous pouvez voir AMP en cours d’exécution sur cet article si vous allez sur la page https://kinsta.com/blog/google-amp/amp/. (Mise à jour : Début septembre, nous n’avons plus d’AMP sur notre site. Consultez notre étude de cas sur les raisons pour lesquelles nous avons choisi de désactiver Google AMP) Et vous pouvez voir un exemple dans les SERPs d’un article de blog Kinsta ci-dessous. Vous pouvez voir le logo AMP.
Général
Sous l’écran général, vous pouvez ajouter un logo, personnaliser la taille et choisir si vous voulez ou non activer l’AMP sur les pages. En fonction de votre site et de votre trafic, vous voudrez peut-être seulement activer AMP sur votre blog (types d’articles).
Page d’accueil
Sous Page d’accueil, vous pouvez activer ou désactiver la prise en charge de la page d’accueil, remplacer la taille de la vignette de la page d’accueil et choisir ce que vous voulez quand les utilisateurs cliquent sur le logo (allez à la version AMP ou la version non-AMP).
Constructeur de pages
Sous Page Builder, vous pouvez l’activer pour permettre l’utilisation des widgets AMP.
Design
Sous Design, vous pouvez lancer le générateur de messages ou sélectionner un modèle prédéfini. Vous pouvez activer le HTTPS pour la recherche et aussi ajouter un bouton d’appel maintenant. Il y a alors une option pour les CSS personnalisés. Sur notre site par exemple, nous ajoutons le code suivant pour personnaliser la couleur de l’en-tête :
.amp-wp-header {background-color:#5CC0C0;}
Single
Sous Single, vous pouvez activer les icônes sociales, désactiver les liens, afficher la biographie de l’auteur, et même modifier les options des articles associés.
Advertisement
Sous Advertisement, vous pouvez activer AdSense et choisir les placements. Ce plugin est l’un des moyens les plus simples d’ajouter AdSense avec Google AMP. Pour ceux d’entre vous qui comptent sur la publicité pour faire fonctionner vos sites, cela peut être une fonction très utile (lecture suggérée : Comment ajouter Google AdSense à WordPress).
Menu AMP
Sous Menu, vous pouvez choisir d’ajouter ou non /amp/ à la fin des URLs du menu. Peut-être voulez-vous que vos visiteurs restent sur votre site avec AMP activé, si c’est le cas, alors vous devrez l’activer.
Social
Sous le menu Social, vous pouvez ajouter les réseaux sociaux que vous souhaitez afficher sur votre mobile à des fins de partage. Pour Facebook, vous devrez enregistrer un ID d’application gratuit.
SEO
L’écran SEO est probablement l’un des plus importants, car il concerne la façon dont Google va voir et classer votre contenu AMP. Nous vous recommandons d’activer l’option « Meta Description ». Si vous utilisez le plugin Yoast SEO, nous vous recommandons également d’activer les options « Meta Tags from Yoast » et « Yoast Description in Id+json ».
Analytics
L’écran Analytics vous permet d’ajouter vos scripts de suivi pour Google Analytics, ainsi que Google Tag Manager. Vous devrez le faire pour vous assurer que vos données de statistiques restent à jour.
Il prend également en charge Segment Analytics, Piwik Analytics, Quantcast Measurement, comScore, Effective Measure, StatCounter, HitStats Analytics, Yandex Metrika, et Chartbeat Analytics.
Données structurées
L’écran de données structurées vous permet de personnaliser le logo de données structurées par défaut et d’afficher une image.
Contact Form
L’écran du formulaire de contact vous permet simplement d’activer le support de Contact Form 7.
Notifications
Sous l’écran Notifications, vous pouvez l’activer pour afficher un avertissement de cookie. Cela peut être utile pour ceux qui se trouvent dans des pays où les lois sur la protection de la vie privée sont plus restrictives.
Comments
Sous l’écran Comments, vous pouvez activer la prise en charge des systèmes de commentaires tiers tels que Disqus et les commentaires Facebook.
Advanced Settings
Dans Advanced Settings, vous pouvez activer la redirection mobile. N’oubliez pas que par défaut, seul l’AMP sera activé pour les utilisateurs mobiles qui cliquent à partir des SERPs. Si un utilisateur mobile navigue directement sur votre site, il n’obtiendra pas la page AMP activée sauf si vous activez la redirection. Vous pouvez également saisir du HTML personnalisé sur cet écran et modifier l’action du lien de pied de page.
Extensions
Les développeurs ont également des extensions premium que vous pouvez acheter pour étendre encore plus le plugin AMP. Parmi les plus populaires, il y a les options de courriel, les boutons CTA et la prise en charge de Custom Post Type.
Et voici à quoi ressemble notre article avec le plugin AMP for WP sur le blog de Kinsta.
Les mêmes développeurs d’AMP for WP ont également récemment publié un nouveau plugin, AMP WooCommerce, qui vous permet d’activer AMP sur votre boutique en ligne.
Validation de votre code Google AMP
Après avoir installé Google AMP sur votre site WordPress, vous devrez vous assurer que votre code est valide. Si ce n’est pas le cas, Google n’affichera pas la version AMP dans les SERPs. Vous pouvez tester votre site WordPress via l’outil Google AMP Validator. Il vous montrera au bas de l’écran si vous réussissez ou échouez.
Vous pouvez également télécharger gratuitement l’extension Chrome AMP qui validera chaque page. Si elle s’affiche en rouge, vous pouvez cliquer dessus et voir rapidement les erreurs ou les avertissements sur la page.
Si une page ne passe pas la validation, vous pouvez voir une erreur comme celle-ci : « Not a valid AMP page » Dans l’exemple ci-dessous, c’est dû à l’utilisation de balises HTML anciennes et non supportées, <deltime> et <instime>. Vous pouvez voir une liste complète des balises HTML supportées par AMP. Les pages AMP invalides n’auront pas de fonctionnalités spécifiques à AMP dans les résultats de recherche Google.
Vous pouvez également vérifier si votre site présente des problèmes AMP dans la Google Search Console sous la rubrique « Search Appearance ». Il est important de noter que de nombreux utilisateurs ont signalé d’importants retards dans les rapports AMP dans la Google Search Console. C’est très probablement parce qu’il s’agit d’une plateforme encore relativement nouvelle et que les crawls ne sont pas aussi fréquents.
En cas d’erreur, Google vous informera par email que vous devez ajouter les données structurées requises à vos pages AMP.
Google AMP SEO
Un autre aspect que vous pourriez vous demander est le côté SEO des choses parce que vous avez maintenant deux copies de la même page ou du même article. Vous n’avez pas à vous soucier du duplicate content car les deux plugins ci-dessus utilisent des balises canoniques avec AMP. Les balises canoniques indiquent à Google que le contenu original est votre version de bureau. Google détectera automatiquement les pages AMP sur votre site au fur et à mesure que votre page d’origine est servie avec une balise d’en-tête dirigeant Googlebot vers votre page AMP.
Exemple sur votre page d’origine :
<link rel="amphtml" href="https://domain.com/amp/">
Exemple sur votre page AMP :
<link rel="canonical" href="https://domain.com/">
Le plugin AMP for WP mentionné ci-dessus fonctionne également très bien avec le plugin Yoast SEO afin d’ajouter vos balises meta et OG à des fins SEO et sociales. Voir l’exemple ci-dessous.
Surveillance New Relic avec Google AMP
Il est également important de noter pour les clients qui utilisent la surveillance New Relic (licence nécessaire), que le validateur Google AMP peut échouer en raison d’une erreur de script d’une tierce partie :
The tag 'script' is disallowed except in specific forms.
En effet, les pages HTML formatées pour Google AMP ne peuvent pas contenir de JavaScript tiers. Le plugin AMP for WP mentionné ci-dessus supporte entièrement New Relic. Mais si vous avez besoin de désactiver New Relic Browser sur les pages AMP, suivez les instructions dans Désactiver la surveillance du navigateur pour des pages spécifiques. Il existe également un plugin WordPress gratuit, Disabled NewRelic For AMP, que vous pouvez installer.
Activation de l’AMP pour les liens externes avec Cloudflare
Cloudflare a une nouvelle fonctionnalité qu’ils ont lancée récemment qui vous permet d’activer l’option Accelerated Mobile View pour les liens externes qui ont AMP en cours d’exécution. L’un des avantages pour votre site est que le contenu AMP est chargé dans une visionneuse directement sur le site qui est lié au contenu. Ce qui signifie qu’une fois que le lecteur a fini de lire le contenu, ils ferment la visionneuse, et cela les renvoie à votre site. Dans un sens, cela pourrait donc augmenter le temps passé sur votre site dans son ensemble. Vous pouvez l’activer dans le tableau de bord des performances Cloudflare.
Résumé
Comme vous pouvez le constater, il existe des moyens simples de faire fonctionner Google AMP sur votre site WordPress. Devriez-vous sauter sur Google AMP tout de suite ? Cela dépend vraiment du type de site WordPress que vous avez actuellement. Si vous êtes un magazine ou un site d’actualités, il peut être judicieux de mettre en œuvre cette mesure immédiatement et de commencer à tester les positions AdSense. Si vous êtes une entreprise SaaS, cela pourrait nuire à vos conversions si vous ne faites pas attention. Google AMP est certainement un changement majeur, surtout si vous avez déjà beaucoup de trafic mobile. Nous vous conseillons de commencer les tests, car c’est le seul moyen de savoir si votre entreprise obtiendra des résultats positifs ou négatifs.
Avez-vous d’autres conseils sur l’utilisation de Google AMP avec WordPress ? Si oui, nous aimerions en entendre parler dans les commentaires ci-dessous ! Aussi, n’oubliez pas de consulter la Roadmap officielle de AMP.
Brian a une grande passion pour WordPress, l'utilise depuis plus de dix ans et développe même quelques plugins de qualité. Brian aime les blogs, les films et les randonnées. Connectez avec Brian sur Twitter.
Laisser un commentaire