AMP (Accelerated Mobile Pages)
Portrait Olivier Duffez

Olivier Duffez

Créateur de WebRankInfo,
consultant en référencement

Pages AMP : le guide ultime (Accelerated Mobile Pages)

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 02/02/2018 (consignes AMP 2018), publié initialement le 03/03/2016

Sommaire :

  1. Présentation des pages AMP
  2. Comment migrer son site vers AMP
  3. Pages AMP et référencement (SEO)
  4. Autres questions sur AMP

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 ?

Pour simplifier, on peut considérer AMP comme un framework avec ces 3 principales caractéristiques :

  • les pages sont codées en AMP HTML, une sorte de langage HTML simplifié : vous prenez le standard HTML mais vous retirez tous les éléments qui peuvent ralentir le chargement. Même la balise <img> est retirée, remplacée par un équivalent.
  • les scripts tiers sont interdits, sauf cas particuliers. Par exemple, le javascript n’est pas totalement interdit, mais seules quelques bibliothèques prédéfinies et ultra-rapides sont autorisées : il s’agit de AMP JS.
  • même si ces pages sont stockées sur votre site, il est possible de passer par une version en cache située sur les serveurs de Google : AMP CDN

Cela n’empêche pas les pages AMP d’inclure des images et même des vidéos : ouf !

Pour en savoir plus, consultez la présentation technique des pages AMP

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. Ce « CDN AMP » chez Google est gratuit.

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…

Quelles différences entre AMP et Facebook Instant Articles ?

Il est clair que le projet AMP fait penser aux Facebook Instant Articles et aux Apple News. Une grosse différence est que les pages AMP restent chez vous, sur votre site (votre serveur), contrairement aux solutions proposées par Facebook et Apple qui sont cantonnées à leurs écosystèmes.

Les pages AMP HTML sont stockées sur votre serveur, contrairement aux Facebook Instant Articles

Une autre différence est que le projet AMP étant ouvert (voir sur GitHub), vous pouvez y participer sans rien demander à personne. Alors qu’avec Facebook et Apple vous devez faire une demande et être approuvé (dites-moi si je me trompe !).

Pour ceux qui affichent des publicités sur leurs pages, sachez que cela reste possible (pas dans tous les cas) avec AMP. C’est possible aussi avec Facebook et Apple, mais ces derniers vous piqueront 30% de vos revenus au passage ! D’après la documentation, les régies pub compatibles avec AMP sont AdSense et DoubleClick (de Google), mais aussi A9, Ad Reactor et AdTech (AOL). Dites-moi si vous en avez repéré d’autres, il peut y en avoir qui s’ajoutent.

Pour les pubs, contrairement à ce qui avait été indiqué au début, il n’est pas obligatoire d’avoir son site en HTTPS pour en afficher. Vous n’êtes donc pas obligé de passer votre site en HTTPS pour profiter à la fois de AMP et de la publicité.

Au passage, ce n’est pas parce que les pubs s’affichent dans des pages au format AMP qu’elles ne peuvent pas être bloquées. Faites « confiance » aux bloqueurs de pub pour s’attaquer aussi à ces publicités…

Pour ma part, je préfère être indépendant des géants que sont Facebook et Apple. Je préfère miser sur une technologie ouverte, même si c’est encore Google qui est derrière.

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. C’est certainement plus difficile pour certains types de contenus, mais sachez que depuis le 23/08/2016 AMP est possible pour les sites ecommerce !

Tout ça est donc en pleine évolution, à vous de voir si c’est possible pour votre site ! Par exemple, eBay a développé la version AMP de 8 millions de pages en juin 2016 (source).

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.

Cela étant, Google a annoncé en août 2016 que « prochainement » n’importe quel type de site pourra voir ses pages AMP affichées dans les résultats standard (sur mobile bien entendu).

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 ! Si vous ne le mettez pas, vous aurez un message d’avertissement dans Search Console, rubrique « Accelerated Mobile Pages » (avant août 2016 c’était même considéré comme une erreur).

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.

Partagez l’info sur Twitter :

Pages AMP : pas d'avantage direct en SEO sur Google, mais indirect (rapidité et carrousel)Click to Tweet

Comment AMP s’affiche dans les SERP ?

Au début, les pages AMP ne pouvaient s’afficher que via le « carrousel », que je décris longuement ci-dessous.

Ensuite (depuis fin 2016), Google affiche la version AMP d’une page mobile (si la version AMP est correctement déclarée, voir ci-dessous).

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 affiche les pages AMP dans le reste de 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).

Pour le tester, cherchez par exemple « guide AMP WebRankInfo » sur Google mobile.

Voici à quoi ça ressemble :

Pages AMP dans résultats Google

Le label AMP s’affiche quand Google décide d’afficher la version AMP d’une page mobile dans ses SERP

Je vous ai également fait une petite vidéo de démonstration des résultats AMP dans Google :

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 »).

Dans quels pays le carrousel AMP s’affiche-t-il ?

Les pages AMP s’affichent dans la section À la une pour les utilisateurs qui effectuent des recherches sur leur mobile dans 15 pays (Allemagne, Brésil, Canada, Corée, Espagne, États-Unis, France, Inde, Indonésie, Italie, Japon, Mexique, Royaume-Uni, Russie et Turquie).

Google travaille au déploiement du carrousel À la une dans d’autres pays.

Pages AMP dans Google Actu

Depuis avril 2016, Google intègre 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.

Les pages AMP doivent-elles avoir le même contenu que la version standard ?

Certains sites se servent de leur version AMP pour inciter les internautes à aller consulter leur version standard. En gros, ils font le minimum au format AMP (le début de l’article) afin d’apparaître dans les SERP de façon spécifique.

Ceci est désormais contraire aux consignes de Google (source) :

Depuis février 2018, chaque page au format AMP doit donner accès au même contenu que celui de la version 'standard' de la page.Click to Tweet

Les sites qui ne respectent pas cette règle ne verront plus leurs pages AMP (concernées) dans les résultats Google…

Un message d’avertissement leur sera également envoyé dans Google Search Console.

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
#SEO Avec la balise link rel=amphtml, pas de contenus dupliqués pour les pages AMPClick to Tweet

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

Si vous êtes dans le cas particulier d’un site qui n’a que des pages AMP HTML, vous devez malgré tout inclure des balises d’URL canoniques (qui se référencent elles-mêmes).

Les pages AMP peuvent s'ajouter à votre version mobile. Attention à la config pour le #SEO !Click to Tweet

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.

Si vous ne connaissez pas cette notion, lisez mon dossier sur le budget de crawl.

Donc oui :

Quand Google crawle vos pages AMP, cela compte dans les ressources de crawl allouées à votre siteClick to Tweet

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…

Données structurées et Open Graph

Comme pour les autres pages HTML, vous pouvez (et devriez !) inclure des données structurées, au moins pour décrire le type de contenu, son titre, sa description et une image d’illustration. Faites cela par exemple en intégrant un script JSON-LD basé sur le référentiel schema.org.

Il semble possible d’ajouter des balises de l’open graph sur des pages AMP HTML, mais je n’en ai pas encore la confirmation.

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 ».

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.

Comment savoir si mes pages AMP génèrent du trafic ?

En allant dans votre compte Search Console, rubrique « Trafic de recherche > Analyse de la recherche », vous pouvez filtrer pour demander à ne voir que les statistiques de vos pages AMP. Il suffit pour ça de choisir « AMP » dans le filtre « Apparence dans les résultats de recherche ».

Vous saurez ainsi :

  • combien de fois une page de votre site a été affichée dans les résultats Google sous sa forme AMP
  • combien de fois ces pages ont été cliquées
  • et donc le taux de clics
  • ainsi que leur position moyenne

Voici une image qui vous indique où il faut sélectionner ce filtre:

Filtre AMP Search Console

Le filtre AMP dans Search Console permet d’avoir des stats sur les pages version AMP dans les résultats de recherche Google

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 !

Cet article vous a-t-il plu ?

Note : 4.5 (2 votes)
Cliquez pour voter !

Laisser un commentaire

Remarques :

  • Si vous souhaitez poser une question ou détailler un problème technique, il ne faut pas utiliser le formulaire ci-dessous qui est réservé aux avis. Posez votre question directement dans le forum Gmail de WebRankInfo. L'inscription est gratuite et immédiate.

  • En postant un avis, vous acceptez les CGU du site WebRankInfo. Si votre avis ne respecte pas ces règles, il pourra être refusé. Si vous indiquez votre adresse email, vous serez informé dès que votre avis aura été validé (ou refusé...) ; votre adresse ne sera pas utilisée pour vous envoyer des mailings et ne sera pas revendue ou cédée à des tiers.

55 commentaires

rick

bonjour et merci pour cet article je suis en création de e-commerce avec wordpress si j’ai bien compris il est urgent d’attendre le plugin est pas top mais je vais suivre ça merci à vous eric

Répondre
serge esteves

Salut Olivier,

Merci, Très complet comme d’habitude. Pour WordPress, c’est très simple, et ce qu’on gagne en simplicité, on le perd en possibilité mais ça va surement évoluer vu que c’est Automattic qui gère le truc. C’est le premiers CMS à avoir intégré un module AMP prêt à l’emploi à ma connaissance en tout cas.

Bonnes fêtes :)

Répondre
KrustyHack

Je teste actuellement sur 2 de mes sites. Le rendu est vraiment pas mal pour une version en développement. Après niveau identité visuelle j’en ai pas vraiment donc niveau perte y a que dalle. J’attend de voir courant Février ce que ça donne.

Répondre
EricB

Bonsoir,

Voilà, c’est partiellement en place chez moi (développement perso). Une question me vient cependant : pour tous les liens contenus dans la page, faut-il mettre les URL canoniques, ou bien pointer vers la version AMP quand elle existe ?

D’un point de vue navigation, bien sûr la seconde option semble la plus logique, ainsi, peut-être, que d’un point de vue crawl. Mais je me demande quand même dans quelle mesure c’est une bonne chose de pointer vers des URL non canoniques…

Pour le reste, à suivre, effectivement. Je guette le passage de Googlebot dans un premier temps…

Répondre
Olivier Duffez

Merci Eric, tu nous diras ce que ça donne !

Répondre
Eric B

Bonjour,

La search Console de Google donne quelques enseignement précieux sur la « bonne » construction des pages AMP. Pour ma part :
– quelques loupés sur des attributs ou valeurs d’attributs interdits (des target= un peu exotiques par exemple, ou encore du JS inline pour brouiller une adresse mail), hérités du contenu normal du site et non filtré pour les pages AMP
– 100% d’échec sur mes pages pour un point qui m’avait échappé, ou qui n’était pas mentionné : il est exigé que la page comporte les métadonnées schema.org NewsArticle. Précisément le détail dit ceci :

« Ajoutez un élément de données structurées schema.org NewsArticle à votre page. Nous exigeons que les pages AMP définissent l’élément de données structurées schema.org NewsArticle pour pouvoir utiliser les fonctionnalités d’affichage spécifiques aux pages AMP. »

Voilà pour les nouvelles ! Cela confirme bien sûr indirectement que la balise est d’ores et déjà suivie et suffisante : 100% des pages que j’ai généré ont été trouvées et analysées par la search console en à peine quelques jours.

Répondre
Olivier Duffez

Merci Eric pour ce retour d’expérience

Répondre
Amarillo

Euh ? Comment dire ? C’est pas terrible comme plugin.

Je l’ai installé, et comme je l’ai trouvé lamentable d’un point de vue graphique (les images et la pub adsense virées, les menus plus que nuls…) je l’ai désinstallé dans la foulée.

Et là, oh horreur, le plugin a laissé derrière lui une tonne de contenu dupliqué, mes pages avec /amp/ et sans /amp/ à la fin ayant exactement le même contenu, sans que ce soit signalé dans le code source.

Grosse galère, du coup je l’ai remis en place pour le moment, forcé et obligé.

Olivier, je ne comprends pas pourquoi tu as parlé uniquement de ce plugin. Pour ma part, l’autre ici https://wordpress.org/plugins/accelerated-mobile-pages/ semble au moins tout aussi bon.

En effet, à quoi ça sert d’avoir des pages plus rapides si elles sont moches et réduites à quasiment du texte à 100%. Ces sûr que comme ça elles sont ultra rapides, mais les gens sur mobile sont habitués à des interface plus agréables.

Je terminerai en me demandant l’intérêt d’un tel plugin, si on a déjà un site responsive en natif.

Bonne journée à toutes et tous,
Amar

Répondre
Olivier Duffez

Merci Amar pour ces bonnes remarques. Je ne connaissais pas le plugin que tu mentionnes, je vais le tester.

Répondre
Amarillo

Olivier,

J’attends avec impatience ton retour sur l’autre plugin.

Personnellement, vu la réponse à côté de la plaque qui m’a été faite sur le github de AMP, j’ai préféré installer celui dont je te parlais et qui transforme d’ailleurs tout le site en version AMP.

Pour info, voici à quoi ça ressemble visuellement avec et sans le plugin en action :
http://www.tuttifruttinews.org/?amp
http://www.tuttifruttinews.org/?noamp

Pour ma part, je reste encore assez dubitatif sur les bienfaits de AMP. Mais, je veux bien qu’on m’éclaire là-dessus.

Bonne fin de journée à toutes et tous,
Amar

Répondre
Olivier Duffez

@Amarillo : ça s’affiche bien ton truc, mais il manque des choses (données structurées) et par exemple la balise d’url canonique est fausse

Répondre
Anthony

Bonjour,

« Je terminerai en me demandant l’intérêt d’un tel plugin, si on a déjà un site responsive en natif. »

Bah je me demande vraiment la même chose.
A la rigueur pour un blog, mais pour un site e-commerce ce n’est pas évident sachant que le javascript est bloqué (quasiment)

Si le site est réalisé avec bootstrap en full responsive je ne vois pas du tout l’Intérêt après il faut peut être attendre un peu… voir l’évolution de la chose!

Répondre
Amarillo

Hello,

Oups, décidément, j’ai pas de chance.

Du coup, je suis repassé sur le 1er plugin, et comme par miracle les articles dont l’url se termine en /amp/ s’affichent mieux. Je ne sais pas ce qui s’est passé entre temps, mais je laisse ça comme ça : https://www.diigo.com/item/image/5ksr6/kor7

Au passage, à part les moteurs de recherche, je me demande qui va réellement voir ces pages ? Il y a quelque chose que je ne saisis pas.

Bonne fin de journée à toutes et tous,
Amar

Répondre
Anto

Bonjour,

Est-ce que Google considère l’AMP juste sur le réseau de recherche ?

Car ma question porte sur le linking :

Prenons par exemple un lien posté sur Facebook vers une page classique mais qui dispose d’une page .
Si l’utilisateur clic sur le lien Facebook depuis son mobile, sera-t-il redirigé vers ma page ?

Merci et bonne journée à tous

Répondre
Olivier Duffez

@Anto : si un lien follow pointe vers une URL au format AMP, Google en tiendra compte, mais :
– il faut s’assurer de ne pas oublier de mettre la balise d’URL canonique dans la page AMP (vers la page standard)
– c’est en théorie moins efficace que recevoir un lien directement vers la page canonique
Si le lien vient de Facebook, il est en nofollow donc ignoré par l’algo.

Si un lien (follow ou nofollow, peu importe) pointe vers une page classique disposant d’une version AMP, l’internaute sera redirigé vers la version AMP uniquement si le site l’a prévu (ce qui n’est pas le cas du plugin AMP de WordPress/Automattic).

Répondre
Detectimmobilier

Si les bénéfices sont les mêmes que l’épouvantail des pages adaptées pour mobile…….

Répondre
Olivier Duffez

Je ne pense pas que ce soit une bonne idée de décider d’évolutions de ce type en fonction du gain en visibilité Google ;-) Mais c’est clair qu’on ne sait pas encore bien ce qu’on peut y gagner en termes purement SEO.

Répondre
Jimmy

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

Répondre
Olivier Duffez

@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…

Répondre
Laurent Simon

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.

Répondre
Olivier Duffez

@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.

Répondre
Olivier Duffez

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

Répondre
x5francois

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 !

Répondre
Olivier Duffez

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

Répondre
Jonathan

@Olivier j’ai le même souci que @Amarillo après la suppression du widget AMP. La suppression du widget ne supprime pas les pages /amp, du coup comment les supprimer ?

Pour le moment, rel= »canonical » est indiqué sur les 2 pages (AMP et non-AMP) en pointant la bonne URL, pas de soucis de contenu dupliqué ainsi ? Ou faut-il ré-installer le widget ?

Répondre
Olivier Duffez

Je ne sais pas Jonathan, j’avais testé sur un site de dév mais n’ai pas eu à le faire sur un site en prod. Peut-être qu’une version ultérieure va corriger. Avec la canonique il n’y a pas de pb de contenu dupliqué.

Répondre
Rodolphe

Bon après plus de 2 mois de tests sur wordpress mes pages sont enfin reconnues correctement sur la search console en utilisant 2 plugins sous WP : AMP et Pagefrog. J’explique ici les paramétres que j’ai utilisé http://blog.laplateformedelarenovation.fr/articles-instantanes-facebook-preparer-wordpress
puisqu’ils devraient aussi servir pour les articles instantanés Facebook et le très prochain format d’Apple.

A propos de l’impact SEO… je pense que cela en a. Mes pages ont gagnées des places (beaucoup pour être honnête), essayez sur votre smartphone la recherche « avis thermostat Nest » ou « test thermostat Nest » un des articles de mon blog ressort en première page.

Mon conseil passez à l’AMP et préparer à Facebook Instant articles.

Répondre
curioso

Bonjour et merci pour vos articles,
Quel soft ou appli utilisez-vous pour faire des vidéos de l’écran de votre smartphone ?
Merci d’avance.

Répondre
Olivier Duffez

J’utilise AZ Screen Recorder

Répondre
domi5529

Bonjour, j’ai bien lu votre article et ses commentaires très instructifs. Ma question est peut-être simpliste mais je me lance.
J’ai installé le plugin AMP (Automatic) et le Glue for Yoast SEO & AMP. Lorsque j’affiche ma page http://www.webdom-concept.net/importance-de-url-referencement/ j’ai un rendu normal. avec ‘affichage de http://www.webdom-concept.net/importance-de-url-referencement/amp/ j’ai l’affichage amp. Bien, mais pratiquement, la Note #2: » this plugin only creates AMP content but does not automatically display it to your users when they visit from a mobile device. That is handled by AMP consumers such as Google Search. » Alors, que faut-il faire pour que l’affichage sur mobile se fasse automatiquement?
Merci beaucoup…

Répondre
Olivier Duffez

Si tu as déjà une version mobile en plus de AMP, il faut d’abord choisir laquelle tu veux montrer aux utilisateurs mobiles…
Et comme souvent on a déjà une version mobile, en général la version AMP n’est servie qu’aux internautes venant de Google sur mobile

Répondre
@spi

Pour ma part je n’ai pas la possibilité de filtrer AMP dans « apparence dans les résultats de recherche » dans la search console, suis-je le seul ?

Répondre
Prouted

Je viens de lire le post de Jimmy, pour ma part, nous ne sommes pas passés en HTTPS, mais nous avons fait un site mobile comme recommandé par Google, et le résultat a été fulgurant pour nous pour notre SEO en se positionnant aussi bien que le site desktop et en générant énormément de trafic !! Au niveau du CA publicitaire, nous faisons meme mieux en eCPM mobile sur site mobile versus eCPM mobile sur site desktop. Du coup, nous allons lancer en plus une version AMP ou tous les liens pointeront vers la version mobile du site (mieux pour la pub) plutot que de faire vers d’autres pages AMP qui sont tout de meme beaucoup trop limitées et impliquent trop de modification (pub, script, formulaire, css, etc). L’avantage sera de prendre des positions via le carrouselle par exemple ou encore sur le SERP et ensuite réorienter les utilisateurs sur le site mobile ;)

Partant d’un CMS construit in-house a la suite d’une formation avec WebRankInfo super orienté SEO, nos résultats sont excellents en Francais et Portugais (marché principalement Brésilien), mais c’est largement plus compliqué en Anglais et Espagnol. Pour le Chinois, Japonais, Indonésien, Vietnamien, Italien et Polonais, les résultats sont prométeurs, surtout depuis la mise en place des sites mobiles. Pour le Russe, c’est un désastre… mais on verra bien sur le long terme ;)

Encore merci a Olivier pour sa formation en 2010 a Nice ;) Nous sommes maintenant officiellement le numéro 1 en France dans notre domaine (que je ne mentionnerai pas ici pour des raisons évidentes)

Répondre
5071353a

Oui mais la Prouted on veut savoir plus sur ton site web

Répondre
Valentin

AMP est une aberration, je m’explique :
AMP permet d’afficher une page sur un Worpress en 0.5s.
Charger une page de mes sites web responsives sans AMP prend 0.1 seconde.
Le tout et de bien construire son site sans surplus inutile, sans charger des tonnes de JS pour la plupart inutile et anti UX.
Bref faire un site propre en tenant compte des internautes n’ayant pas la fibre…
En 3G mes sites se chargent instantanément sans avoir eu à attendre AMP.
Je suis horrifié de voir à quel point AMP semble LA solution pour accélérer le Web alors qu’un site bien construit se charge plus vite qu’un CMS AMP. Le coût de développement pour ajouter AMP aurait pu être évité en intégrant les contraintes d’efficacité à la conception.

Répondre
Olivier Duffez

En effet c’est aberrant d’avoir à gérer 2 versions mobiles/rapides.
Peux-tu nous donner des exemples de tes sites 5 fois plus rapides que AMP ?

Répondre
Valentin

@Olivier : La précision a son importance ici : Un site WordPress AMP n’est pas plus rapide qu’un site responsive bien construit en HTML5 standard.

Je ne suis pas le seul à travailler ainsi mais mon site http://www.valbou.fr donne un aperçu d’un site rapide avec pourtant des pages contenant plusieurs images de bonnes tailles…

La page d’accueil pèse moins de 400kb quel que soit votre support de lecture avec pourtant 13 images de 300x200px… Exit JQuery et le minimum de JS.

Je précise que ce même site en AMP pourrait peut-être « gratter » quelques microsecondes grâce entre autre au cache CDN mais le gain ne serait pas économiquement justifié (coûts de développement) et imperceptible pour l’utilisateur (microsecondes).

Je t’invite à tester par toi même pour te faire une idée ;)

Répondre
Olivier Duffez

en effet Valentin c’est rapide, bravo ! Par contre le design est très simple, les rares images sont presque de grandes icones : difficile de généraliser pour plein de sites.

Répondre
Valentin

Un design simple c’est surtout dur à vendre pour une agence web tant le design prend une place importante pour celui qui veut acquérir un site Internet.
Mais je dirais, à l’image de LeBonCoin jusqu’à cette année, que le design ne compense pas un bon concept et une bonne valeur ajoutée pour l’internaute.
Soyez prêt à alléger votre Design pour obtenir un site de qualité pour tous.
@Olivier : Ton design n’est pas exceptionnel non plus (selon moi) pourtant ta page d’accueil fait plus de 1.5Mb et ne contient que des miniatures et ton logo…

Il y a un arbitrage à faire entre esthétique et fonctionnel, entre se faire plaisir et faire de l’utile.
Un carrousel demande au moins 3 grandes images hors avec une rotation toutes les x secondes, l’internaute est soit déjà en bas de page soit sur la page suivante… C’est lourd, c’est joli mais ça n’offre pratiquement aucune visibilité à la 2e image et une visibilité nulle à la 3e. Mais c’est super IN ;)

Répondre
Olivier Duffez

en effet, bon courage pour vendre un site avec un design aussi simpliste…
PS : je n’ai jamais parlé de WRI car je sais que le design est dépassé et les pages trop lourdes ;-)

Répondre
MoutonQuiGoogle

Vous me conseillez quoi entre l’utilisation d’AMP et un thème responsive? Qu’est-ce qui offre un meilleur « boost » niveau SEO sur mobile?

Je possède plusieurs sites de niche, tous sous un thème responsive et j’entends de plus en plus parlé d’AMP.

Merci

Répondre
Olivier Duffez

pour l’instant amp n’est pas encore dans les résultats de google, donc pas d’avantage, mais ça changera sans doute ensuite
il suffit généralement d’installer un plugin pour rendre ses pages compatibles, ce n’est pas un gros effort pour des sites de niche je pense

Répondre
arnomedia

Valentin à raison. Pour ma part AMP est une sorte de rustine pour ces CMS bien lourd qui sont de plus en plus utilisés soit par gain de temps de développement, soit par manque de compétence.

Répondre
Stormyboy

AMP est il intéressant pour des contenus en grande partie dynamique?
J’ai un site qui comporte quelques dizaines de pages majoritairement statiques, mais plus de 60000 pages qui font appel à des données actualisées plusieurs fois par jour, présentées sous forme de textes et d’images légères.
De plus pour ces dizaines de milliers de pages je vais me heurter à la limite du potentiel de crawl…

Répondre
Ortolo

Bonjour Monsieur

Est-il possible au format AMP, de mettre 2 classes perso css par balise html ?

Je suis en train de convertir le script tarteaucitron en full PHP compatible AMP. ;)

Super merci pour vos infos.

Répondre
Olivier Duffez

Désolé, je ne sais pas, je n’ai pas encore testé !

Répondre
Ortolo

Bonjour Monsieur

J’ai testé avec un petit script amp-form, il semble que le validateur accepte deux classes perso sur une balise <form, mais tient compte de la dernière classe déclarée dans le style, si la seconde surcharge un attribut déjà dans l'autre classe. ( même si la dernière classes déclarée est avant la classe de la balise ).

Les deux classes sont prises en compte quand tous les attributs sont différents.

Je pense de toute façon me limiter à 2 classes max/balise pour tarteaucitron, mais j'aurai probablement à modifier en amont, les id= par défaut.

J'ai déjà porté ce script en full PHP ( sans javascript ), mais il y a encore un paramètre dans l'url, et il n'est pas compatible AMP.

Très respectueusement.

Jean François Ortolo

Répondre
Valéry Vlad

Bonjour,

Merci pour cet excellent article. Juste une question : ce langage HTML simplifié, ne risque-t-il d’affecter l’accessibilité (WCAG 2.0) du site?

Merci.

Répondre
Olivier Duffez

Désolé Valéry, je ne connais pas assez les standards d’accessibilité pour répondre à cette bonne question…

Répondre
Moi Caméléon

Hello,

Petite question par rapport à Adsense dans les pages AMP, j’ai réussi à mettre des pubs classiques (blocs d’annonce) par contre impossible de trouver comment mettre les pubs mobile dessus (à savoir les bandeaux publicitaires en bas de l’écran)

Des idées là-dessus?
Merci !

Répondre
Sandrine

Bonjour,
Merci pour tous vos conseils,
Mais quel plugin ou conseils pour Prestashop?

Répondre