Annonces Google

Vous êtes ici : Dossiers référencement > Référencement mobile

Le guide ultime des pages AMP (Accelerated Mobile Pages)

Par , le 03 mars 2016

Si vous avez des questions sur les pages au format AMP (Accelerated Mobile Pages) dont Google est le principal acteur, lisez ce dossier qui compile absolument toutes les questions/réponses sur AMP.

Article mis à jour le 23/04/2016 (Google Actu), publié initialement le 03/03/2016

Guide Pages AMP

Le guide ultime des Pages AMP (Accelerated Mobile Pages)

Présentation des pages accélérées pour mobiles "AMP"

Qu'est-ce que AMP ?

AMP Project

Accelerated Mobile Pages Project

AMP signifie Accelerated Mobile Pages, c'est-à-dire les "pages mobiles accélérées". Le projet AMP est une initiative open source visant à améliorer les pages web mobiles afin de les rendre beaucoup plus rapides. Ce projet est mené par des éditeurs et des fournisseurs de technologies, le plus connu étant certainement Google.

Vous pouvez trouver des informations officielles sur le site principal ampproject.org (lui-même disponible au format AMP).

L'objectif est que les pages AMP s'affichent quasiment instantanément, c'est-à-dire généralement 90% plus rapidement que d'habitude.

Grâce à cette grande vitesse, l'expérience utilisateur sur mobile se trouve largement améliorée, ce qui d'après des études fait chuter le taux de rebond.

Pour que les éditeurs web puissent adopter ce format, même si le format est vraiment très simplifié, le projet AMP a prévu la possibilité d'inclure des images, des vidéos, certains scripts de suivi d'audience ainsi que des publicités.

Comment fonctionnent les pages AMP ?

Les pages AMP utilisent le format AMP-HTML, une sorte de sous-ensemble de HTML5, une version très simplifiée (et malheureusement pas conçue à l'initiative du W3C...).

Une page AMP peut s'afficher dans n'importe quel navigateur, sans rien nécessiter de particulier.

Qui peut utiliser AMP sur son site ?

Tout le monde ! Vous n'avez rien à demander à personne, il suffit de mettre à disposition sur votre site une version AMP de chaque page, ou de certaines seulement : comme vous voulez.

Où les pages AMP sont-elles hébergées ?

Quand un éditeur de site propose une page au format AMP, elle est stockée sur son propre serveur, comme les autres pages du site. Par contre, certains acteurs du projet AMP peuvent choisir de gérer une version en cache des pages AMP trouvées, afin d'accélérer encore leur affichage. C'est le cas de Google : quand il indexe une page AMP, il la stocke en cache sur ses serveurs (on parle de CDN) ; ensuite quand un internaute consulte la page AMP listée dans les résultats de Google, c'est la version en cache chez Google qui s'affiche, ce qui permet d'avoir un affichage instantané. La durée du cache semble être de quelques minutes, vous n'avez pas de souci à vous faire à ce niveau.

C'est donc à ce niveau très différent des Facebook Instant Articles et Apple News car avec eux, vos contenus se trouvent chez Facebook et Apple...

Mettre en place AMP sur son site

Peut-on utiliser AMP sur tous types de sites ?

Oui, le format AMP n'est pas réservé à certains types de sites. Par contre, en raison des fortes contraintes de ce format minimaliste, il est difficile de l'appliquer à des sites ecommerce.

Par ailleurs, un des avantages du format AMP est d'avoir une page affichée dans le carrousel parmi les résultats Google, et pour cela il faut que la page soit une actualité ou un article de blog.

Peut-on utiliser AMP sur des pages de listings/catégories ?

Oui bien entendu, ce n'est pas réservé aux articles (même si certains plugins fonctionnent actuellement comme ça).

Peut-on gérer la version AMP en sous-domaine ou sur un autre nom de domaine ?

Oui bien entendu, vous utilisez le format d'URL que vous voulez (pas nécessairement avec /amp à la fin de l'URL). Vous pouvez même choisir d'utiliser un sous-domaine pour AMP (comme l'a fait le Guardian sur amp.theguardian.com), ou même un nom de domaine différent.

Dans tous les cas, faites bien attention à définir les relations :

  • sur votre page HTML classique, indiquez à Google qu'elle est disponible au format AMP, en intégrant une balise link rel=amphtml qui fournit l'URL de la version AMP HTML
  • sur votre page AMP HTML, indiquez à Google que la version officielle de ce contenu existe au format HTML, en intégrant une balise link rel=canonical

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

Pour avoir une chance d'être affiché sous forme de carrousel, il faut que votre page soit un article d'actualité (dans ce cas il faut la déclarer du type NewsArticle via schema.org) ou un article de blog (BlogPost), comme indiqué dans les spécs.

Mais ce n'est pas obligatoire pour toutes les pages AMP ! Malheureusement, si vous ne le mettez pas, vous aurez un message d'erreur dans Search Console, rubrique "Accelerated Mobile Pages"

Une image est-elle obligatoire pour être valide AMP ?

Non, vous pouvez avoir une page AMP valide même sans image. Par contre, pour avoir une chance d'être dans le carrousel des pages AMP, il faut en effet au moins une image (source). Déclarée par des données structurées, elle doit faire au moins 696 pixels de large.

Comment installer AMP sur un site WordPress ?

Si vous êtes sur la plateforme wordpress.com vous n'avez rien à faire, c'est déjà prévu.

Si vous utilisez le CMS WordPress sur votre propre hébergement, il faut un développement spécifique. Voyez mes explications sur les plugins AMP pour WordPress.

Comment installer AMP sur un site Joomla ?

Vous pouvez tester le plugin wbAMP pour Joomla que j'ai décrit ici.

Comment installer AMP sur un site Drupal ?

Vous pouvez tester le module AMP de Drupal que j'ai décrit ici.

Comment valider le code de ma page AMP HTML ?

Je vous donne ci-dessous un résumé, mais j'ai aussi rédigé un dossier complet sur le sujet : revue des validateurs AMP HTML.

Pour valider que le format de votre page respecte bien les exigences du AMP Project, vous pouvez tout simplement suivre ces étapes :

  1. affichez la console Javascript dans votre navigateur
  2. ajoutez #development=1 à la fin de l'URL de votre page AMP et validez pour la recharger

Astuce : pour afficher la console Javascript dans Chrome, utilisez un raccourci-clavier :

  • Sur Mac : ⌘ + Option + J
  • Sur Windows et Linux : Ctrl + Maj + J, puis cliquez sur Console

Vous devriez voir la liste des erreurs de validation AMP, ou bien le message "AMP validation successful" si tout est OK :

Validation AMP OK dans console Javascript

Remarque : pour gagner du temps, installez l'extension Chrome officielle pour faciliter les tests de validation.

Vous devriez aussi valider que les données structurées sont bien incluses. Pour cela, utilisez l'outil de test des données structurées de Google. Astuce pour gagner du temps : ajoutez cet outil à vos bookmarklets.

Peut-on afficher des publicités sur les pages AMP ?

Oui, mais seulement pour certaines régies, actuellement AdSense et DoubleClick (de Google), mais aussi A9, Ad Reactor et AdTech (AOL).

Si j'en ai oublié, merci de me l'indiquer dans les commentaires.

Pour la pub sur AMP, faut-il être en HTTPS ?

Non ce n'est pas obligatoire, contrairement à une information qui avait circulé au début. Par exemple, le site WebRankInfo diffuse des publicités via AdSense sur des pages AMP avec le protocole HTTP.

AMP dans les résultats Google (AMP et SEO)

Utiliser AMP est-il un critère pris en compte pour le référencement ?

Non, AMP n'est pas un critère de l'algorithme de classement chez Google. Pour l'instant ?

Par contre, une page AMP est tout de même avantagée en SEO car elle est très rapide et compatible mobile.

Qu'est-ce que le carrousel des pages AMP ?

Google affiche parfois dans ses pages de résultats des carrousels, constitués d'une galerie de résultats affichés de façon proéminente comme ici :

Exemple de carrousel pages AMP dans les résultats mobiles de Google

Exemple de carrousel pages AMP dans les résultats mobiles de Google

Une fois que vous consultez un article, vous pouvez passer au précédent ou au suivant du carrousel d'un coup de doigt en balayant vers la droite ou vers la gauche.

Pour mieux vous en rendre compte, regardez ma démo en vidéo :

Retrouvez cette vidéo "Démo du carrousel des pages AMP" sur la chaîne Youtube de WebRankInfo

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

Il faut :

  • que la page soit au format AMP, sans erreur de validation
  • que la page contienne les bonnes données structurées (voir ci-dessous)
  • que la page soit indexée par Google
  • que la page soit sélectionnée pour figurer dans le carrousel

Comme vous l'avez compris, il faut remplir certaines conditions techniques, mais ça n'est pas une garantie...

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

Une page AMP ne nécessite pas de données structurées pour être valide, par contre ces données sont nécessaires pour avoir une chance d'apparaître dans le carrousel parmi les résultats Google.

Pour l'instant, seuls les pages présentant un article ou une vidéo sont acceptés par Google dans les "Top Stories" (carrousels).

Si votre page est un article, vous devez choisir un des 3 types suivants :

  • schema.org/Article
  • schema.org/NewsArticle
  • schema.org/BlogPosting

Si votre page est une vidéo, le type doit être  schema.org/VideoObject.

Pour les détails, lisez les spécs ici (données structurées pour les "Top Stories").

Des pages AMP peuvent-elles apparaître ailleurs que dans le carrousel ?

Icône AMP

Icône AMP dans les résultats Google

Oui, Google commence à tester d'autres emplacements dans ses pages de résultats, en mélangeant totalement les pages HTML classiques et les pages AMP. Les pages au format AMP sont signalées par le sigle AMP en gris (au début c'était en vert).

Pages AMP dans Google Actu

Depuis avril 2016, Google commence à intégrer des pages au format AMP dans les résultats Google Actu (source). Il s'agit d'un format prévu pour les mobiles (smartphones), annoncé fin 2015 et sorti début 2016, qui permet d'accélérer fortement le chargement des pages web. C'est une sorte de HTML 5 allégé pour le mobile.

Sur mobile (iOS ou Android), Google affiche dans la partie Headlines un carrousel de pages AMP, c'est-à-dire 14 vignettes (image + résumé) pointant vers des articles référencés par Google Actualité.

Carrousel AMP Google Actualités

Carrousel de pages au format AMP dans Google Actualités

Pour l'instant il n'y a pas d'avantage officiel accordé à ceux qui utilisent AMP, mais si Google les affiche de façon prépondérante, il y a au final un impact en termes de visibilité dans les SERP.

A noter que l'affichage du carrousel de pages AMP dans Google News ne concerne pour l'instant que la version américaine (Google News USA). Je mettrai à jour cet article quand cela sera étendu à d'autres pays, dont la France.

Pour en savoir plus : référencement Google Actualités

Comment éviter les contenus dupliqués avec la version AMP ?

Vous n'aurez pas de problèmes si vous suivez les consignes suivantes, valables pour un site utilisant la technique du responsive design :

  • sur votre page HTML classique, indiquez à Google qu'elle est disponible au format AMP, en intégrant une balise link rel=amphtml qui fournit l'URL de la version AMP HTML
  • sur votre page AMP HTML, indiquez à Google que la version officielle de ce contenu existe au format HTML, en intégrant une balise link rel=canonical

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

Si vous avez opté pour la méthode d'un site mobile à part (par exemple m.example.com), vous devrez indiquer 2 balises link dans votre page HTML desktop et 1 balise d'URL canonique dans chaque version mobile :

  • sur votre page HTML desktop, indiquez à Google qu'elle est disponible sur votre site dédié mobile, en intégrant une balise link rel=alternate qui fournit l'URL de la version mobile
  • toujours sur votre page HTML desktop, indiquez à Google qu'elle est disponible au format AMP, en intégrant une balise link rel=amphtml qui fournit l'URL de la version AMP HTML
  • sur votre page mobile, déclarez l'URL de la page HTML desktop en tant qu'URL canonique
  • sur votre page AMP, déclarez l'URL de la page HTML desktop en tant qu'URL canonique

Les liens internes doivent-ils pointer vers la version AMP ?

Dans le contenu de vos articles en version AMP, vous pouvez faire en sorte que les liens internes vers d'autres de vos articles pointent vers leur version AMP. Je ne pense pas que cela pose de problèmes SEO, et c'est sans doute mieux pour l'internaute. Si vous avez un avis ou un retour d'expérience à ce sujet, merci d'avance !

Faut-il ajouter les pages AMP dans un fichier sitemap.xml ?

Ce n'est pas la peine, surtout qu'il s'agit d'URL qui ne sont pas les canoniques. Mais pour accélérer le crawl la première fois, vous pouvez faire un sitemap spécifique. Ensuite, retirez-le.

Les pages AMP consomment-elles le budget de crawl ?

C'est une question qui peut paraître étranger ou incompréhensible pour certains, alors je l'explique un peu... Ce que j'appelle le budget de crawl (crawl budget), c'est l'idée qu'il existe une limite au nombre d'URL crawlées chaque jour sur un site donné. Peut-être que ce "budget" n'est pas un nombre d'URL mais du temps ou de la bande passante, mais au final il faut comprendre que Google ne dispose pas de ressources infinies ! Il est donc important de ne pas faire crawler à Google des URL sans aucun intérêt, car c'est au détriment des bonnes URL.

Donc oui :

Si jamais vous proposez une version AMP de toutes les pages de votre site, cela pourrait donc diminuer par 2 le nombre d'URL crawlées par jour, en tout sur l'ensemble de votre site. Notez que c'est très théorique, mais il vaut mieux l'avoir en tête...

Comment savoir si Google a indexé mes pages AMP ?

Dans votre compte Google Search Console, consultez le rapport "Accelerated Mobile Pages" situé dans la rubrique "Apparence dans les résultats de recherche" (que j'ai décrit ici).

Le rapport AMP affiche le nombre de pages AMP correctement indexées ou présentant des erreurs liées aux fonctionnalités AMP rencontrées lors de l'exploration de votre site par Google. Les erreurs de connectivité, les liens non fonctionnels et autres erreurs ne figurent pas dans ce rapport. Les pages qui présentent des erreurs AMP ou pour lesquelles des éléments de données structurées obligatoires sont manquants ne s'affichent pas parmi les pages AMP des résultats de recherche Google.

Voici à quoi cela ressemble au lancement du support de AMP en février 2016 :

Rapport AMP Search Console

Exemple de graphique du rapport des pages mobiles accélérées dans Google Search Console

Les erreurs sont regroupées par type : cliquez sur une ligne pour voir les pages concernées, puis sur une page pour accéder aux détails.

Pour télécharger la liste des URL posant problème, vous devez d'abord sélectionner un type d'erreur puis cliquer sur le bouton Télécharger.

Une fois l'erreur corrigée sur une page, vous devrez attendre que Google la crawle à nouveau, puis que les rapports soient mis à jour dans Search Console (quelques jours de délai).

Pour accélérer le crawl, ajoutez vos pages dans un fichier sitemap. Si vous en avez très peu, demandez à Google de les explorer immédiatement avec la fonctionnalité "Explorer comme Google" située dans Search Console, rubrique Exploration.

A propos d'indexation Google : en mai, au cours de la conférence I/O 2016, Richard Gingras (Google) a indiqué que 125 millions de pages AMP sont pour l'instant indexées, issues de 640 000 (noms de) domaines.

Autres questions sur AMP

AMP est-il compatible avec AdWords ?

Pour l'instant il n'y a aucune indication officielle que AdWords puisse utiliser le format AMP. Pourtant, il me semble naturel de proposer une landing page au format AMP à un internaute mobile, surtout qu'AdWords tient compte du temps de chargement des pages d'atterrissage.

Peut-on suivre le trafic des pages AMP dans Google Analytics ?

Oui, il faut intégrer Google Analytics à vos pages AMP. Vous pouvez le faire dans une nouvelle propriété, ou dans la même que le reste de votre site. Si les pages au format AMP sont facilement identifiables par leur URL, vous pourrez isoler ce trafic à l'aide d'un filtre ou d'un segment avancé dans Google Analytics.

Où peut-on obtenir de l'aide à propos du format AMP ?

Vous pouvez poser vos questions dans le forum officiel mais aussi plus simplement dans le forum de WebRankInfo !

A propos de l'auteur : Olivier Duffez Olivier Duffez sur Google+ Olivier Duffez sur Twitter Olivier Duffez sur Facebook Olivier Duffez sur Pinterest Olivier Duffez sur LinkedIn

Consultant en référencement, Olivier Duffez a travaillé pour les plus grands sites (Doctissimo, FNAC,...). Il édite le site WebRankInfo qu'il a créé en 2002, devenu la + grande communauté francophone sur le SEO (+300.000 membres, 1,5 million de posts). Il est aussi cofondateur de Ranking Metrics, leader des formations webmarketing en France (SEO, AdWords, Analytics, réseaux sociaux) et éditrice de la plateforme MyRankingMetrics (crawler et audit SEO en ligne).

Article (Le guide des pages AMP (Accelerated Mobile Pages)) publié par WebRankInfo dans la rubrique Référencement mobile. Si vous souhaitez publier un extrait de cet article sur votre site, assurez-vous de respecter les conditions générales d'utilisation de WebRankInfo.

10 commentaires

  • Jimmy a dit le

    Merci pour ces informations c'est vraiment très complet.

    Par contre pour les sites qui ne sont pas dans Google news, des sites d'informations mais pas d'actualités, je n'ai encore pas vu de pages AMP dans les résultats de recherches mobile.

    Pour mon site par exemple j'ai 2/3 des pages validées en AMP depuis plusieurs jours. Pour vérifier si elles apparaissent dans Google en AMP sur mobile je tape site:espace-musculation.com avec mon iPhone et je ne vois rien. Que des résultats avec "site mobile" (comme d'hab).

    Donc bon.... c'est bien gentil tout ça mais pour l'instant on ne voit pas le résultat de nos efforts. Je comprends que Google ne puisse pas mettre en cache AMP tout le web mais au moins il pourrait proposer nos versions à nous des pages AMP dans les recherches... Je sais pas si je me suis bien fait comprendre...

    Bref. Déçu pour l'instant de Google qui fait perdre du temps au webmaster.

    Passage au mobile friendly => aucun bénéfice

    Passage à l'HTTPS => aucune bénéfice avec en prime -30 % d'Adsense en moins

    Passage à l'AMP => Rien

    #JohnMueller #ZinebAitBahajji #PasContent

  • Olivier Duffez a dit le

    @Jimmy : comme pour la compatibilité mobile et le HTTPS, je pense que c'est une erreur de ne penser qu'à l'impact direct SEO. Si c'est bien meilleur pour les internautes (ou pour d'autres raisons annexes), alors c'est suffisant. Cela dit je suis d'accord, pour l'instant les pages AMP sortent trop peu dans les SERP de Google : attendons la suite...

  • Laurent Simon a dit le

    Sur la page desktop, il n'est pas nécessaire de répéter deux fois la balise "link rel" pour spécifier les deux natures de relations (alternate et amphtml). HTML autorise de remplacer les deux occurrences par une seule de la forme:

    Link rel=" alternate amphtml"

    Techniquement comme semantiquement, c'est strictement équivalent.

  • Olivier Duffez a dit le

    @Laurent : en effet, on peut mettre plusieurs valeurs pour l'attribut rel, mais uniquement si c'est pour la même destination (attribut href), ce qui n'est pas le cas dans mon exemple. Je dis de mettre une balise link rel=alternate vers la version mobile (non AMP) et une autre balise link rel=amphtml vers la version AMP.

  • Christophe BENOIT a dit le

    Les pages AMP utilisent le budget crawl des bots comme n'importe quelle autre page web. Sur les gros sites, l'impact peut ne pas être négligeable.
    Source : http://www.thesempost.com/amp-pages-do-use-sites-crawl-budget/

  • Olivier Duffez a dit le

    Merci de ce rappel Christophe, je l'ajoute dans mon article (ça me semblait tellement naturel que je ne l'avais pas mis...)

  • x5francois a dit le

    Voilà un bel article bien calibrer, merci Olivier...
    J'avais justement prévu de me pencher sur les pages AMP aujourd'hui, j'ai bien fait d'attendre, ça va m'économiser pas mal de temps !

  • @RaphSEO a dit le

    Hello Olivier, une ressource qui explique un petit Hack pour aller plus loin avec AMP (formulaire...)
    http://searchwilderness.com/amp-forms-hack/
    ++
    Raph

  • Olivier Duffez a dit le

    Merci Raphaeël, ça peut toujours servir à certains !

  • Dom a dit le

    Merci pour cette article bien complet, je ne savais pas que l'AMP était déjà sur WordPress, moi j'ai installé le plugin AMP d’Automattic, ensuite pour ceux qui veulent mettre des Adsenses simplement sur les pages AMP il y a ce tuto :

    http://sens2lavie.com/mettre-publicites-sur-les-pages-amp-wordpress/

Postez un commentaire !

Les champs marqués du signe * sont obligatoires. L'adresse email ne sera pas affichée.

En postant un commentaire, vous acceptez les CGU du site WebRankInfo.

Annonces Google

Catégories des dossiers

Consultez les dossiers par thématiques :

Annonces Google

Formation référencement et webmarketing

Venez chez Ranking Metrics vous former au référencement, à Google AdWords et Analytics ainsi qu'aux réseaux sociaux ! Plus de 4000 entreprises sont déjà venues (Dossier possible OPCA, DIF...).

Préparés et animés par Olivier Duffez (WebRankInfo) et Fabien Faceries (AgentWebRanking), 2 professionnels reconnus dans le domaine, nos modules sur le référencement naturel sont très complets tout en laissant une grande place à l'interactivité pour répondre à toutes les questions des participants.

Pour connaître le plan détaillé de chaque module, le prix, les dates et les lieux, consultez le site de Ranking Metrics (organisme de formation).

Hébergement web

Hébergement web mutualisé et dédié

Pour un bon référencement, il faut un bon hébergeur. Testez Sivit by Nerim, l'hébergeur choisi par Olivier Duffez pour son site WebRankInfo.

A partir de 3€ HT/mois.