Vous avez peut-être entendu parler du terme « SAP » ces derniers temps. Que sont exactement les pages mobiles accélérées, que signifient-elles pour la recherche et comment pouvez-vous vous y préparer ? Dans cette semaine Britanique Whiteboard Friday, Will Critchlow et Tom Anthony de Distilled exposent tous les détails importants.
Cliquez sur l’image du tableau blanc ci-dessus pour ouvrir une version haute résolution dans un nouvel onglet !
Transcription vidéo
Tom : Salut, fans de Moz, et bienvenue au British Whiteboard Friday. Nous tournons cela au QG londonien de Distilled. Voici le fondateur et PDG, Will Critchlow. je suis Tom Antoineresponsable du département R&D, et aujourd’hui nous allons parler des pages mobiles accélérées.
Sera…
Qu’est-ce qu’une page mobile accélérée (AMP en abrégé) ?
Will : Je suis content que tu demandes, Tom. Ainsi, une page mobile accélérée (ou AMP, pour faire court) est un projet de Google et Twitter conçu pour créer des pages mobiles très rapides. Dans son essence, il s’agit essentiellement d’un forme simplifiée de HTML, un HTML de régime si vous voulez. Tom parlera un peu plus des détails réels à ce sujet.
Mais fondamentalement, il s’agit d’une page HTML conçue pour être extrêmement légère et conçue de manière critique pour un chargement très rapide. Donc, Google, Twitter, un tas d’autres entreprises ont déployé cela – en quelque sorte en réponse à des projets comme le projet Facebook Instant Articles de Facebook et Apple News, etc. Ceci est conçu pour être la réponse ouverte. Alors c’est Open sourceet il y a toutes sortes d’éléments d’ouverture au projet.
Qu’est-ce qui rend AMP si rapide ?
Tom : Absolument. Donc, comme l’a dit Will, c’est comme un HTML de régime. Alors certaines balises HTML que vous ne pouvez tout simplement pas utiliser. Des choses comme les formulaires, qui sont sortis. Vous devez également utiliser une version simplifiée de CSS. Vous pouvez utiliser la plupart des CSS, mais certaines parties relèvent des meilleures pratiques et ne sont tout simplement pas autorisées à être utilisées. Alors JavaScript n’est fondamentalement pas autorisé du tout. Vous devez utiliser une bibliothèque JavaScript prête à l’emploi qu’ils vous fournissent, et qui fournit des choses comme le chargement paresseux.
L’idée est donc que toute la plate-forme est conçue uniquement pour une lisibilité pure, une vitesse pure. Des choses telles que des images ne se chargent pas tant qu’elles ne sont pas affichées, et le JavaScript fait tout cela pour vous. Nous prévoyons qu’ils en seront au point où la bibliothèque JavaScript est intégrée à certains systèmes d’exploitation, vous n’en avez donc même pas besoin non plus. Et alors tout cela est conçu pour être très fortement mis en cache afin que Google puisse héberger ces pages, héberger votre contenu réel sur place, et qu’ils n’aient même plus besoin de vous le récupérer.
Will, tu vas nous dire comment ça marche ?
Comment cela fonctionne sur votre appareil mobile
Will : Ouais, donc c’est le diagramme que nous avons au milieu ici. Nous sommes donc tous habitués à cette idée d’une page Web régulière. J’ai appelé ce WWW dans le diagramme. Il s’agit de la version de bureau standard de la page. Dans le code source, si vous avez une version AMP, vous l’indiquerez avec le lien HTML AMP rel, qui pointe vers votre, ce que nous appelons la “page AMP hébergée”.
Alors il s’agit d’une page sur votre propre domaine construite à partir de cette forme simplifiée de HTML. Donc, si vous voulez voir cela en action, j’ai fait référence au Guardian ici. Ils ont été l’un des premiers partenaires de référence. Vous pouvez mettre /amp à la fin de n’importe quel reportage sur le site Web du Guardian et voir le HTML AMP. Il est lié en affichage avec le lien AMP HTML dans le code source.
C’est donc l’AMP hébergé. Cela n’a rien à voir avec Google. Vous pouvez simplement le faire, et il est conçu pour être plus rapide. Mais ils ont également déployé cette partie gratuite de la plate-forme hébergée en cache de l’accord, qui est étiquetée ici avec le gstatic.
Ainsi, lorsque vous voyez réellement ces éléments apparaître dans les résultats de recherche Google, dont nous parlerons dans un instant, la version qui y apparaît sera généralement hébergée sur un gstatic.com, en d’autres termes une version en cache hébergée par Google. Et surtout, les deux, à la fois celui que vous hébergez vous-même et la version qui est mise en cache sur Internet potentiellement même par d’autres personnes également, les deux contiendraient le rel=canonical retour à l’original. C’est similaire. C’est comme une réelle alternative dans un monde mobile.
C’est donc rapide parce que le HTML est réduit, mais il est également potentiellement conçu que ces éléments sont des éléments de contenu qui peuvent être potentiellement mis en cache par n’importe qui sans que rel=canonical ne vous renvoie.
Tom : Je pense que cela vaut la peine de dire que même sur la version en cache des pages, Google a déclaré que vous pourrez toujours fournir vos propres publicités. Nous n’en connaissons pas encore les détails, mais ils ont construit une plate-forme sur laquelle vous pouvez diffuser des publicités d’AdSense, d’Outbrain, de la plupart des principales plates-formes publicitaires, et vous continuerez à générer tous les revenus. Ils ne prennent rien de tout ça.
Aussi avec les versions en cache, vous pouvez utiliser Analytics. Pour le moment, la version déployée, vous pouvez simplement utiliser un pixel de suivi. Mais nous savons qu’ils travaillent sur une plate-forme où il s’agit d’une sorte de plate-forme indépendante du fournisseur pour des choses comme Google Analytics, Omniture et tout ça. Ainsi, vous pouvez toujours obtenir toutes les analyses. Vous pouvez toujours fournir des publicités à vos pages et tout, même lorsque vous êtes servi via les versions en cache des pages.
Will : Ouais, c’est très important. Cela fait partie de ce cadre JavaScript dont nous parlions, où vous obtenez ces conteneurs limités, qui sont une sorte de fonctionnalité JavaScript très limitée que vous pouvez utiliser vous-même.
Impact sur les SERP
Parlons donc un peu de la façon dont cela pourrait réellement apparaître dans les résultats de recherche. Donc, tout d’abord, ce que nous savons pour le moment, c’est qu’il semble que ce soit uniquement mobile. C’est juste là dans le nom, Accelerated Mobile Pages, c’est pourquoi j’ai apporté mon tableau blanc mobile pour vous le démontrer. Il s’agit de la version AMP qui apparaît sur un appareil mobile, une tablette, une phablette, sans savoir exactement quel format.
En ce moment c’est mobile uniquement. Il s’agit d’être mobile. Il n’est même pas encore déployé. Mais dans la démo que nous avons vue, il apparaît comme un carrousel au-dessus des liens bleus réguliers, généralement pour les termes liés à l’actualité, car la plupart d’entre eux se concentrent évidemment sur la lecture de contenus. Les personnes qui ont déployé cela en premier sont généralement des éditeurs de nouvelles. Vous recherchez donc un terme lié à l’actualité. Vous voyez ce carrousel d’images glissables au-dessus des liens bleus. Cliquez sur l’un d’entre eux, il s’ouvre très rapidement, c’est tout l’intérêt, puis vous pouvez glisser vers une autre page AMP en face.
C’est en fait aussi déplacer ou apparaître pour certains termes où vous vous attendez à voir des annonces de recherche payante. Je ne lirais pas trop là-dedans. C’est juste dans la démo à ce stade. À long terme, il existe peut-être des versions payantes de cela, qui sait.
Nous nous attendons à ce que cela soit bientôt disponible. La dernière ligne officielle de Google est peut-être février 2016. Mais, d’une manière ou d’une autre, nous nous attendons à voir cela dans le monde très bientôt.
Ce n’est donc pas encore là, mais ce sera pour bientôt.
Que pouvons-nous faire pour nous préparer, Tom ?
Tom : Il y a donc deux choses. Tout d’abord, vous voulez pouvoir commencer à créer des pages AMP pour votre site, et vous voulez vous assurer que ces pages sont valides, car comme nous l’avons dit, c’est comme une version allégée du HTML, mais c’est très, très strict sur la façon dont vous construire le HTML. Les balises doivent être dans certains ordres et à certains endroits. Vous ne pouvez pas utiliser certaines choses. Et si vous faites cela, votre page AMP n’est pas valide et ils ne l’utiliseront probablement pas.
De manière à valider vos pages AMP, vous utilisez en fait un outil intégré à Chrome. Donc, si vous ouvrez les outils de développement dans Chrome, il y a un système là-bas — et vous pouvez le rechercher sur le site Web du projet AMP — où vous pouvez réellement aller sur une page et vous pouvez lui demander de valider, “Est-ce une page AMP, ” et il vous indiquera tout problème avec cette page.
Donc, un, créez des pages AMP et assurez-vous que vous le faites bien, et le deuxième élément consiste à trouver comment rationaliser la création de pages. Si vous utilisez une sorte de CMS ou quelque chose comme ça, alors vous voulez évidemment que cela fasse partie intégrante de votre processus à l’avenir. Vous voulez que les pages AMP soient quelque chose que toutes les pages ou autant de pages que possible ont une version AMP de ces pages. Il y a donc déjà – pour les CMS les plus populaires, des choses comme WordPress ont déjà des plugins disponibles – que vous pouvez partir, vous pouvez télécharger ce plugin, et fondamentalement pour beaucoup de pages, il fera beaucoup de travail pour vous dans la création ces pages AMP. De plus, évidemment, si vous construisez votre propre CMS, vous devriez donner la priorité à essayer d’obtenir des fonctionnalités similaires dans ce CMS.
Will : Et c’est maintenant qu’il faut le faire, parce qu’être là au lancement est le moment d’obtenir le genre de coup de pied, le bénéfice du moment où ces choses se déploient. C’est donc une grande partie de l’arrière-plan.
Pour une lecture plus détaillée, nous avons ici quelques ressources que vous pouvez consulter. Il s’agit d’une démonstration réelle de ce à quoi cela pourrait ressembler dans les résultats de recherche. Vous pouvez essayer vos propres recherches sur ce type de Google simplifié.
Tom : Cela vaut la peine de dire que pour le moment, vous ne verrez évidemment que les résultats de la démo sur cette page. Vous ne pouvez donc que…
Will : Oui, et sur un appareil mobile.
Tom : Et sur un appareil mobile, oui.
Will : Et puis c’est l’original, la page web principale du projet où vous pouvez trouver le référentiel de code GitHub et tous ces types de validateurs et ainsi de suite, et nous en avons écrit d’autres ici. Ceci est un lien vers notre site Web.
Alors oui, nous vous recommandons de le vérifier si vous aimez l’édition. C’est une opportunité pour les éditeurs de prendre une longueur d’avance sur le mobile.
Alors merci de vous joindre à nous sur ce tableau blanc vendredi. A bientôt.
Tom : Au revoir.
Transcription vidéo par Speechpad.com
Informations et ressources supplémentaires
- g.co/ampdemo – Démonstration de ce à quoi les AMP pourraient ressembler dans les résultats de recherche
- ampproject.org – La page Web principale du projet, où vous trouverez une introduction technique, un didacticiel, un référentiel GitHub, etc.
- dis.tl/amp-pages – Plus d’informations sur les AMP et leur fonctionnement
(Article traduit de moz.com)
