L’AMP (Accelerated Mobile Pages) est un projet initialement annoncé l’année dernière (2016) par Google. Au cours du développement d’un an, il a attiré de plus en plus d’intérêts.
Techniques d’optimisation Google AMP
Qu’est-ce que l’AMP ?
L’AMP, en général, est un document HTML5 concis et spécialement conçu qui comporte quelques contraintes conçues pour améliorer l’expérience de chargement et de rendu des pages pour les appareils mobiles. Par exemple, les pages AMP ne peuvent avoir qu’un CSS en ligne, de sorte que la mise en page peut être déterminée sans avoir à charger des feuilles de style CSS externes. Javascript a également été limité là où le JS synchrone ne peut être placé qu’à l’intérieur d’un iframe.
Pourquoi AMP ?
AMP est conçu pour la vitesse même sur les réseaux lents. Le plus grand avantage d’AMP est qu’il peut être chargé/rendu 3 à 4 fois plus rapidement. Les raisons pour lesquelles AMP est ultra-rapide sur les appareils mobiles sont :
- Moins d’éléments sont chargés. Prenez WordPress par exemple, de nombreux widgets ne sont pas affichés.
- Les AMP sont mis en cache par Google CDN (Content Delivery Networks) ou CloudFlare CDN, donc lorsque les résultats de la recherche sont affichés, les AMP sont préchargés via Google/CloudFlare CDN, lorsqu’ils sont affichés, ils sont déjà téléchargés et servis à partir du cache de votre navigateur, ce qui est juste éclair rapide.
- Comme mentionné, la mise en page AMP peut être déterminée sans avoir à charger de JS / CSS externe, donc sur les écrans mobiles, la mise en page est statique, ce qui est rapide.
Qui a besoin d’AMP ?
Si vous vous souciez de la vitesse et de l’expérience utilisateur, ou si vous avez beaucoup de contenu (texte/images statiques), alors AMP est définitivement quelque chose que vous devez avoir.
AMP améliore-t-il le référencement ?
Selon Google Official, cela n’affecte pas le référencement, du moins directement. Cependant, comme AMP améliore la vitesse de chargement des pages, cela affecte le référencement. En fait, selon les recherches, avec AMP activé, les visiteurs restent plus longtemps sur le site et le taux de rebond est augmenté.
Sur les appareils mobiles, les pages AMP seront affichées en priorité et avec une balise AMP claire. Google a supprimé l’utilisation de "Mobile Friendly" pour autoriser l’AMP affiché. En fait, tous les AMP valides sont déjà valides pour les utilisateurs mobiles.
Comment activer AMP avec WordPress Blog ?
Les AMP sont des formats HTML spéciaux et la syntaxe est très stricte. Il n’est pas possible de modifier un modèle de page existant et il est sage de ne pas le faire. Si vous avez beaucoup d’articles (beaucoup d’URL), il n’est pas pratique de le faire manuellement.
Pour activer AMP dans WordPress, vous devez ajouter/activer le plugin AMP officiel.
wordpress-official-amp-plugin
Une fois ce plugin activé, pour chaque article (et non pour les pages), il y aura une URL canonique qui sera ajoutée avec /amp/. Oui, il vous suffit d’activer le plugin AMP qui fait la majeure partie du travail.
Comment valider AMP ?
-
Vous pouvez installer l’ extension Chrome AMP, qui affichera une bulle verte si la page actuelle est un AMP valide. Il vous indiquera également si la page actuelle a une version AMP
-
Appuyez sur F12 dans Chrome pour appeler la console, si vous voyez quelque chose comme ça, cela signifie que l’AMP est activé !
Powered by AMP ⚡ HTML – Version 1489777197505 -
Aller au Web AMP Validator: Ceci est souvent utile car vous pouvez copier et coller la source AMP directement dans l’utilitaire.
-
Exécutez la commande curl pour vérifier via l’utilitaire CloudFlare amp :
Dans Google Webmaster, il indique le nombre de pages AMP indexées et le type d’erreurs des pages AMP. AMP avec des erreurs critiques ne sera pas indexé, vous devez donc les corriger. Google fournit également un autre validateur AMP.
google-webmaster-shows-indexed-amp
Comment ajouter le suivi Google Analytics aux pages AMP ?
Selon l’officiel, vous devez :
-
Ajoutez ce qui suit avant ledans wp-content/plugins/amp/templates/single.php
-
Ajoutez ce qui suit avant ledans wp-content/plugins/amp/templates/single.php
Comment ajouter Google Adsense aux pages AMP ?
Le code Google Adsense traditionnel ne fonctionne pas en AMP, à la place vous avez besoin de :
-
Ajoutez ce qui suit avant ledans wp-content/plugins/amp/templates/single.php
-
Ajoutez ce qui suit avant ou après post_amp_content dans wp-content/plugins/amp/templates/single.php
Exemple de modèle AMP pour WordPress Single Post (par exemple, single.php)
exemple-wordpress-template-single-for-amp-pages
Quand les AMP sont-ils indexés par les moteurs de recherche ?
Tous les moteurs de recherche ne prennent pas en charge AMP, mais apparemment Google connaît mieux AMP. Cela peut prendre quelques heures voire des jours à Google pour se rendre compte que vos pages ont des alternatives AMP. Dans vos pages de publication normales, il y aura quelque chose comme ceci pour indiquer au moteur de recherche l’URL de la version AMP :
Et dans sa version AMP, il sera lié à l’aide de la balise canonique :
Il est normal que toutes vos pages n’aient pas d’alternatives AMP. Il est également OK que certains AMP ne soient pas validés, le pire des cas est que cet AMP ne soit pas indexé, ce qui ne nuit pas à vos autres pages c’est à dire au SEO. L’AMP est fourni en tant que mise en page alternative (modèle), vous pouvez donc le considérer comme une version optimisée pour les performances.
Comment savoir si la page actuelle est AMP en PHP ?
Vous devrez peut-être désactiver certains filtres de contenu (via add_filter, la fonction WordPress) dans le modèle functions.php, puis vous aurez besoin de la fonction suivante pour vérifier si la page actuelle est en version AMP. Il nécessite la fonction PHP endsWith. Dans WordPress, vous pouvez également utiliser la fonction is_amp_endpoint() pour voir si l’URL wordpress actuelle est AMP. Sinon, pour un site spécifique, la solution générale consiste à vérifier si l’URL se termine par /amp ou contient /amp/
Au cas où vous ne l’auriez pas remarqué, l’URL de la version AMP est indiquée dans chaque message et vous pouvez trouver les archives des pages AMP ici. Vous pouvez utiliser le code PHP suivant pour afficher uniquement les URL AMP des publications au lieu des autres types de pages dans WordPress :
if (get_post_type( get_the_ID()) == 'post') {
// show AMP URL
}Pour les pages qui ne prennent pas en charge AMP, l’URL canonique AMP sera redirigée en 301 vers sa version normale.
À quoi ressemble la page AMP sur les petits écrans ?
Ce qui suit, à gauche, est la version AMP, avec une publicité (adsense responsive) affichée au-dessus du contenu.
AMP-versus-mobile-convivial
AMP peut être considéré comme un modèle (style) distinct pour vos publications. Les deux URL existent pour la version mobile et la version AMP. L’entrée d’AMP provient principalement du moteur de recherche tandis que les liens d’origine dans les messages restent intacts. Cependant, vous voudrez peut-être utiliser l’ AML de CloudFlare qui remplace les liens de publication dans la publication vers la version AMP, le cas échéant.
cloudflare-enable-accelerated-mobile-links
Si votre page AMP contient des erreurs critiques, il se peut qu’elle ne soit pas indexée par les moteurs de recherche. Google peut vous indiquer des erreurs dans le résultat de la recherche, qui est lié à votre webmaster Google.
Message d’erreur AMP dans les résultats de recherche Google