Site icon SmartKeyword

Les pages mobiles accélérées AMP Google : l’avenir de vos pages mobiles

Le paysage SEO évolue chaque année à vitesse grand V. Depuis 2016 environ, nous entendons parler du format AMP (Accelerated Mobile Pages). Jusqu’ici, il s’avérait trop contraignant pour l’appliquer à la majorité des sites et notamment les sites e-commerce. Mais depuis que certaines barrières techniques ont été levées, l’AMP est devenu le format de l’avenir pour les pages sur mobile. 

Contrairement aux idées reçues ce projet a été soutenu par Google mais il ne lui appartient pas. En effet, en plus des 160 plateformes publicitaires qui financent la recherche, l’AMP est également soutenu par les autres moteurs de recherche comme Bing, Baidu et Yahoo Japan. En 2018, Bing a même mis au point son propre cache AMP pour améliorer l’expérience mobile de ses utilisateurs. L’AMP est disponible sur plusieurs CMS réputés comme WordPress, Prestashop ou Drupal et peut être intégré facilement grâce à différents plugins à installer. L’AMP est donc devenu rapidement un projet d’envergure, soutenu par de gros acteurs du web, qui placent l’UX (expérience utilisateur) au coeur de toutes leur préoccupations.

Sommaire

Qu’est-ce qu’une page mobile accélérée ?

AMP signifie Accelerated Mobile Pages. Comme son nom l’indique, il s’agit d’un format de pages spécifiquement conçu pour se charger très rapidement sur les mobiles. Les pages AMP, reconnaissables par un petit éclair dans les SERP, offrent une expérience utilisateur assez extraordinaire. Très légères, elles se chargent instantanément et offrent une version épurée du contenu. Faciles à lire, rapides à charger : pourquoi ce format n’est-il pas généralisé à toutes les pages sur mobile ? Tout simplement parce que pour obtenir un tel résultat, il était obligatoire de réduire au maximum les requêtes et autres JS (JavaScript) qui ralentissent les temps de chargement. De ce fait, l’AMP est aujourd’hui surtout utilisé pour les sites de presse et les sites de contenus. 

Pourquoi ce format est-il apparu ?

Le web comporte un nombre exponentiel de mobinautes, c’est à dire des internautes surfant sur internet avec leur smartphone. Si optimiser un site pour le desktop est chose relativement aisée, l’optimiser pour le mobile est une toute autre affaire. La navigation mobile engendre en effet beaucoup plus de contraintes techniques, tant au niveau du code que du webdesign. En fait, c’est plutôt facile à comprendre : pour passer du desktop au mobile, il faut faire rentrer tout un contenu et toutes les technologies présentes dans le desktop, dans un écran parfois 10 fois plus petit ! Google a donc proposé ce nouveau format afin d’aider les sites dans leur transition vers la navigation sur mobile. Il va s’en dire que le format AMP est quelque peu lié à la mise en place du Mobile First Index !

Les différents critères d’une page AMP

Pour faire simple, une page AMP est une page sans fioritures. Le framework AMP permet aux développeurs de construire des pages en utilisant trois éléments de base : AMP HTML, AMP JavaScript et AMP CDN. 

Les pages sont codées en AMP HTML, c’est à dire un code HTML ultra simplifié et dépourvu des balises pouvant ralentir son chargement (comme les balises images). Le JS (JavaScript) n’est plus totalement exclu, mais des bibliothèques de JS prédéfinies sont imposées. On parle ici d’AMP JS. Enfin, ces pages sont stockées dans le cache de Google, l’AMP CDN, qui permet d’améliorer encore plus le temps de chargement.

Peut-on utiliser AMP sur tous les sites ?

Aujourd’hui, tous les sites peuvent utiliser le format AMP. Néanmoins, son implémentation engendre pas mal de sacrifices côté webdesign et UX de vos page web. AMP HTML fait passer les performances avant l’esthétique. Heureusement, de multiples commandes vous permettent désormais de modifier les documents AMP pour les rendre plus adaptés à votre stratégie de référencement et à votre image de marque. Il serait donc dommage de vous en priver, même si vous possédez un site e-commerce. Le site de commerce électronique Greenweez en est d’ailleurs un très bon exemple. La majorité de ses pages de destination sont en AMP sans que cela ne vienne perturber l’UX. Nous vous déconseillons simplement l’AMP si vous monétisez votre site. En effet, vous devez savoir que l’AMP n’autorise qu’une seule balise publicitaire par page. Il est donc à éviter dans ce cas précis. 

Quel nom de domaine ou sous-domaine donner à sa page AMP ?

Vous pouvez conserver votre domaine ou même utiliser un domaine ou sous-domaine différent. Les seules précautions à prendre se situent au niveau des relations entre les pages. Sur la version HTML normale de vos pages, vous devez indiquer à Google qu’elle est aussi disponible en format AMP. Pour ce faire, utilisez une balise link rel=amphtml. A l’inverse, sur la page au format AMP, vous devez indiquer au moteur de recherche qu’il existe une page officielle. Pour cela, vous devrez intégrer simplement la traditionnelle balise link rel=canonical.

Comment associer une image à sa page AMP ?

Dans AMP, vous ne devez pas utiliser la balise <img> pour charger les images. Utilisez plutôt l’élément personnalisé <amp-img> car il gère l’optimisation du chargement de toutes les images de votre page.

Où apparaissent les pages AMP ?

Les pages AMP apparaissent dans les résultats de recherche sur mobile uniquement. Elles sont facilement reconnaissables grâce au petit éclair situé juste à côté du titre de la page. Certaines d’entre elles sont situées dans le carrousel AMP, situé en haut de la première page de résultats. Dans ce cas de figure, le format AMP offre une visibilité immense ! D’autres pages AMP apparaissent plus bas, dans les résultats traditionnels.

Dans quels pays le carrousel AMP est-il présent ?

Seuls 12 pays bénéficient pour l’heure de résultats de recherche avec un carrousel AMP : France, Brésil, Inde, Espagne, Allemagne, Etats-Unis, Italie, Royaume-Uni, Indonésie, Russie, Japon et le Mexique. C’est donc un élément à prendre en compte si votre site est multilingue.

Comment installer AMP ?

Installation sur WordPress

Plusieurs options s’offrent à vous pour installer AMP sur un site WordPress. Vous pouvez utiliser le plugin “AMP for WordPress”. Bien que la version par défaut se montre assez limitée concernant la personnalisation, vos options peuvent être étendues en installant des plugins supplémentaires. Deuxième plugin intéressant : AMP for WP – Accelerated Mobile Pages. En plus de fournir une interface conviviale et intuitive, ce plugin WordPress AMP peut s’utiliser avec de nombreux autres outils WP comme WooCommerce. 

Installation sur Joomla

La façon la plus simple d’installer AMP sur un site Joomla est d’utiliser wbAMP. Il s’agit d’un plugin Joomla qui intègre les directives du projet AMP. La version complète vous donne accès à beaucoup plus de paramètres sur vos pages AMP.

Installation sur Drupal

Vous pouvez installer l’AMP en utilisant le module AMP de Drupal. Celui-ci nécessite Composer Manager, qui activera le packaging pour PHP et vous permettra d’installer et configurer le module. Drupal 8 utilise un autochargeur PHP, vous n’aurez donc pas besoin d’utiliser Composer Manager. 

Les questions techniques

Comment faire pour apparaître dans le carrousel des pages AMP ?

Vous devez dans un premier temps vous assurer que vos pages AMP sont bien valides. Pour cela, utilisez l’outil de validation de Google disponible dans la Google Search Console. Associez-lui ensuite une image et faites en sorte de proposer du contenu pertinent. Pour le reste, c’est Google qui décide !

Quelles données structurées faut-il inclure dans les pages AMP

Google recommande d’utiliser les mêmes balises de données structurées pour les pages canoniques et AMP. Cela signifie que vous devez aligner les données structurées de votre version AMP sur la page canonique. AMP Project suggère d’inclure ces quatre propriétés schema.org pour donner une chance à vos pages AMP d’être visibles : le type de contenu (particulièrement utile pour les sites d’actualité), le titre, la date de publication et les images (vignettes). Comme pour vos versions canoniques, plus vous enrichirez vos données structurées, plus vous faciliterez la bonne compréhension de votre contenu par Google.

Faut-il baliser ses pages avec le type NewsArticle de schema.org ?

La section Newsarticle est réellement intéressante si vous tenez un site de presse ou un blog. Dans le cas d’un site e-commerce ou d’un site vitrine qui publierait une simple page CMS, le type Newsarticle de schema.org s’avère inutile.

Quelles balises inclure pour déclarer AMP sur un site mobile à part ?

Pour intégrer les balises AMP, il convient d’avoir quelques notions de développement (sauf si vous utilisez un plugin AMP sur votre CMS). Une page AMP se décompose comme suit :

        • Une balise <!doctype html>
        • Une balise html spécifique : <html amp>:  c’est elle qui permettra aux moteurs de recherche de savoir que la page existe en AMP
        • Une balise <head /> et <body />: rien d’exceptionnel jusqu’ici, c’est la base d’une page html.
        • Une balise <meta charset= »utf-8″ />: c’est ce charset là et aucun autre qu’il faudra utiliser
        • Une balise <link rel= »canonical href= »#url » /> qui renvoie vers la version non-AMP de la page. Cette balise est essentielle pour éviter le contenu dupliqué.
        • Une balise <meta name= »viewport » content= »width=device-width,minimum-scale=1″>, L’attribut initial-scale=1 est recommandé pour contrôler la mise en page du contenu.

Le script AMP JS via la balise <script async src= »https://cdn.ampproject.org/v0.js« ></script> qui doit être implémenté à la fin du <head/>

Quel est l’impact de l’AMP sur le SEO ?

Est-ce un critère pris en compte pour le référencement ?

Google a déclaré que les pages AMP ne constituent pas un facteur de classement. Pourtant, avec l’arrivée du Mobile First Index, beaucoup de référenceurs pensent que l’AMP est l’avenir de la navigation sur mobile. Mais l’AMP n’est rien sans une optimisation On-site globale. Aujourd’hui, ce format peut clairement être un plus en termes de visibilité grâce au carrousel, mais il n’est pas magique pour autant.

Le contenu de l’AMP doit-il être différent de la version standard ?

Le contenu de la page AMP doit être similaire à la version canonique. En effet, de petits malins se sont amusés à proposer une version différente et sur-optimisée pour manipuler les robots et générer plus de trafic. Mais Google a très vite mis le hola et exige aujourd’hui que les pages AMP soit similaires (ou presque) aux pages canoniques.

Comment éviter le contenu dupliqué avec la version AMP 

La balise rel=canonical, si elle est correctement implémentée, vous protège du contenu dupliqué. Combinée à la balise link rel=amphtml, vous êtes assuré de ne pas générer de contenu dupliqué. 

Conclusion

Pour résumer, le format AMP présente de nombreux avantage mais génère néanmoins un certain coût, qui doit être mesuré. Certains sites web et notamment ceux spécialisés dans l’actualité ou les secteurs hautement concurrentiels ont tout intérêt à mettre en place l’AMP qui leur permettrait d’apparaître dans le carrousel des résultats de recherche. Dans ce cas de figure précis, l’AMP s’avérera très vite rentable. Si vous comptez utiliser l’AMP dans l’unique but de réduire le temps de chargement de vos pages, sachez qu’il s’agit d’un pansement sur une jambe de bois. C’est une stratégie qui ne sera jamais payante. Il est largement préférable d’améliorer les performances globales du site, soigner le contenu et mettre en place des données structurées. L’AMP doit donc rester un “plus” pour votre site mais ne doit pas remplacer un travail de fond fondé sur l’éditorial, les performances et le netlinking.

   Article rédigé par Louis Chevant

Complétez votre lecture

Le guide complet sur le référencement des sites e-commerce

Les 6 étapes clés à suivre pour optimiser correctement votre site e-commerce avec un bon référencement naturel. 

Quitter la version mobile