Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

L'AMP pour les sites e-commerce - 22 février - Lille

233 vues

Publié le

Les fonctionnalités des pages AMP couvrent à présent tous les besoins d'un site e-commerce (ou presque). Mais quels bénéfices attendre de pages AMP pour un site marchand ? Quels sont les avantages et les inconvénients ? Y a-t-il des contre indications ?

Intervenant : Philippe Yonnet - Directeur Général - Search Foresight

Publié dans : Internet
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

L'AMP pour les sites e-commerce - 22 février - Lille

  1. 1. Accelerated Mobile Pages (Pages AMP) et ecommerce 14 / 12 / 2017
  2. 2. Programme de la conférence 45mn : 30 mn de presentation – 15 mn de questions 2 Présentation de l’agence Les Pages AMP qu’est ce que c’est ? Quel est l’intérêt des pages AMP ? Comment ça marche ? L’adoption Quel avenir pour les pages AMP #S4sight2017 @s4sight Vos questions
  3. 3. Agence conseil en stratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics Les pages AMP qu’est-ce que c’est ? 3
  4. 4. Le contexte : des pages mobiles trop lentes Le poids des pages mobiles ne cesse d’augmenter La faute : A des pages RWD mal conçues A des pages mobiles conçues avec des frameworks et des standards conçus… pour le desktop
  5. 5. Et pour les sites éditoriaux, c’est pire Le problème : Les scripts de tracking Les mouchards publicitaires Les gestionnaires de bannières La monétisation implique l’emploi de scripts javascripts nombreux, lourds et lents Par ailleurs, ces sites présentent : Pages avec beaucoup de contenus Des images et des videos 5
  6. 6. Une lenteur qui fait fuir les internautes A partir d’un load time de 2 sec, on perd un internaute sur deux Bref, le web mobile est partiellement inutilisable, car le chargement des pages est trop lent ! Et ce n’est pas qu’un problème de bande passante, de 3G vs 4G 6
  7. 7. Une réponse à Facebook Instant Articles Facebook a lancé en mai-juin 2015 un nouveau format de pages pour accélérer l’affichage de pages de contenu en usage mobile C’est un projet « fermé » : il s’agit de pages qui ne peuvent s’afficher que dans l’écosystème Facebook La monétisation est contrôlée par Facebook, qui prend 30% de taux de régie pour les pubs vendues par sa régie
  8. 8. Une initiative open source très téléguidée… Accelerated Mobile Pages : une initiative Open Source pour • Promouvoir un standard pour construire des pages allégées, optimisées pour le mobile • Mettre à disposition un CDN dédié pour accélérer encore l’accès à ces contenus • Et proposer une diffusion large de ces contenus par des acteurs majeurs du web Un projet initié par Google et Twitter, présenté officiellement le 8 octobre 2015 AMP est d’ores et déjà implémenté par un groupe d’acteurs majeurs
  9. 9. Pour en savoir plus : http://www.ampproject.org 9
  10. 10. Agence conseil en stratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics Les pages AMP : comment ça marche ? 10
  11. 11. Les principes Gains de perfomance X10 Code allégé Mise en cache Pré rendition / préchargement chez Google
  12. 12. Un code sérieusement allégé 12 Une page AMP contient 5 fois moins de trackers en moyenne qu’une page « normale », et un code 6 foix plus léger. Comment ? Des balises HTML « lourdes » interdites Une librairie javascript « couteau suisse » unique et allégée
  13. 13. A quoi ressemble ce code ? AMP c’est du HTML5 Mais un « sous ensemble » du HTML5 A droite : le code d’une page AMP ultra simple 13
  14. 14. Les prérequis techniques Les documents codés en AMP HTML doivent : Débuter par la balise doctype <!doctype html>. Contenir une balise top-level <html ⚡> (<html amp> est également valide). Contenir forcément au moins une balise <head> et <body> (C’est optionnel en HTML classique). Contenir une balise <link rel="canonical" href="$SOME_URL" /> dans la zone head qui pointe vers la page HTML classique équivalente, ou vers la même page s’il n’existe pas de version normale. Contenir une balise <meta charset="utf-8"> dans la zone head. Contenir une balise <meta name="viewport" content="width=device-width,minimum-scale=1"> dans la zone head. Il est recommandé d’inclure la valeur d’attribute “initial-scale=1”. Contenir une balise <script async src="https://cdn.ampproject.org/v0.js"></script> en tant que dernier élément de la zone head. Contenir <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript> dans la zone head. 14
  15. 15. Un CDN dédié Un CDN (content delivery network) est un ensemble de serveurs : • Conservant une version « en cache » de la page • Et répartis partout dans le monde, près des utilisateurs Google fournit le CDN dédié aux pages AMP Remarque : la mise en cache systématique rend la création de pages AMP entièrement dynamiques « server side » impossible Par contre, on peut créer des pages partiellement dynamiques 15
  16. 16. SEO : attention aux doublons La page AMP est un doublon quasi parfait du contenu de la page « normale » Il faut donc « canonicaliser » la page AMP Lien link rel=canonical pointant vers le contenu d’origine Au départ, Google recommandait de pointer vers la version desktop Avec le mobile first index : la recommandation reste la même ! Pourquoi ? Pour les autres moteurs ! 16
  17. 17. Peut-on faire des pages AMP sa version mobile ? Si vous déclarez l’AMP comme votre version mobile via les rel=alternate, alors les pages AMP seront votre version mobile Sinon : vous n’avez pas de version mobile ! Pour le mobile first index, si vous n’avez pas de version mobile déclarée, c’est la version desktop qui sera indexée, pas la version AMP ! Tout à fait, mais attention aux balises rel=alternate 17
  18. 18. Tester ses pages AMP Dans les pages de google 18
  19. 19. Tester ses pages AMP https://search.google.com/test/amp Dans l’outil de test 19
  20. 20. Tester ses pages AMP https://validator.ampproject.org/ Dans l’outil de validation 20
  21. 21. Le rapport de la search console Il y’a aussi un rapport d’améliorations dans la nouvelle Search Console 21
  22. 22. Agence conseil en stratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics Les pages AMP : Pourquoi les utiliser
  23. 23. Adopter l’AMP : parce que c’est plus rapide Test fait en 2016 sur les pages responsive du Guardian, comparé avec la version AMP Le score Google pagespeed passe de 57% à 94% ! L’amélioration de l’UX est réelle et spectaculaire
  24. 24. C’est VRAIMENT plus rapide Source : Rannaa Zhou de Google, SMX West 2017 24
  25. 25. Et l’impact, c’est plus de conversions 25
  26. 26. VRAIMENT plus de conversions Etude Wompmobile 2017 26
  27. 27. Et parce qu’il y’a un ranking boost ! Et donc un traffic boost parfois 27 Sur mobile, les carrousels AMP pour les news sont placés en tête des résultats (position zéro) Pour être présent dans ce carrousel, il n’est pas nécessaire d’être indexé dans google news, il faut juste le balisage schema.org ad hoc et des pages AMP Evidemment, cela met en valeur les pages AMP vs les pages « normales » Le gain maximal est atteint si on est dans la première case du carrousel
  28. 28. Indirectement, il y’a parfois un ranking boost Deux exemples Impact avec des cas de sites mobiles AMP Cause : probablement le speed boost Un code plus SEO friendly ? Mais avoir des pages AMP n’est pas un ranking factor 28
  29. 29. Il y’a aussi le « label » AMP sur les résultats Question : quelle est la proportion d’utilisateurs qui ont compris que les résultats avec ce label s’affichaient plus vite Pas d’étude sérieuse, mais ils sont visiblement minoritaires Notons que l’affichage du label n’est pas stable, il y’a eu beaucoup de test and learn depuis fin 2015 Test label bleu « instant » en oct 2017 29
  30. 30. Et c’est vrai à l’international Les carrousels AMP envahissent les versions internationales de google 30
  31. 31. De plus en plus de diffuseurs exploitent l’amp Les principales plateformes qui exploitent l’AMP en dehors de Google : Pinterest, LinkedIn, et Twitter 31
  32. 32. Quels sont les limitations de l’AMP ? L’AMP est rapide car il n’embarque qu’un certain nombre limité de fonctionnalités, certaines balises, scripts ou façon de codées sont volontairement interdites Conclusion : tout n’est pas supporté en AMP Au début : beaucoup de choses utiles voire indispensables n’étaient pas disponibles Mais aujourd’hui, toutes les briques utiles sont dispo en AMP ! Possibilité de faire 100% d’un site éditorial ou ecommerce en AMP Mais au prix de certaines concessions Changement d’outils de trackings, d’ad servers, de régies, de systèmes de paiement, ou de méthodes de conception Il y’en a, de moins en moins gênantes, et plus vraiment bloquantes 32
  33. 33. Agence conseil en stratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics Où en sommes nous de l’adoption du standard ?
  34. 34. Le nombre de sites AMP a explosé 4 milliards de pages AMP, 25 millions de domaines
  35. 35. International : Baidu supporte l’AMP ! Son format MIP est devenu AMP compatible depuis le printemps 2017
  36. 36. Beaucoup de medias ont adopté l’AMP
  37. 37. Evolution du trafic du top 9 des éditeurs AMP 37
  38. 38. La part du trafic AMP est très variable 38
  39. 39. Et les sites ecommerce s’y mettent Le « traffic boost » est moins net que pour le site media Le « conversion boost » est néanmoins intéressant 39
  40. 40. En théorie, on peut construire un site marchand complet en AMP Il faut faire de nombreuses concessions pour que le parcours utilisateur soit compatible AMP Tous les services de tracking ne sont pas forcément compatibles, ni tous les Tag Managers Les urls amp ne sont pas dans le domaine => pb de cookies, d’attribution, de privacy etc. Contournement possible attendu pour dans quelques mois (mais pas complètement satisfaisant) Il faut repenser le site de A à Z Si les problèmes de mise en cache ne sont pas résolus, l’architecture logicielle ne permettra pas une bascule vers l’AMP complète et aisée En pratique, ce n’est pas si simple 40
  41. 41. Agence conseil en stratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics Quel avenir pour l’AMP
  42. 42. D’après Google et le consortium, AMP a un avenir brillant devant lui
  43. 43. La réalité : une rustine malcommode C’est une version de plus à maintenir C’est un standard théoriquement ouvert, en réalité on est dépendant de fait de l’écosystème Google Le précédent Android fait réfléchir C’est plus une approche « tactique » que stratégique L’avenir, c’est un vrai standard pour fabriquer des pages légères et un web performant FBIA AN Mobile
  44. 44. Une fonctionnalitée déjà détournée Certains créent des pages AMP dont le seul objectif est de détourner l’audience vers des pages normales ! Motif : c’est plus facile, et on a le traffic boost 44
  45. 45. Une pénalité pour pages AMP détournées Si vous affichez ces « teasers » Amp, vous pourrez recevoir une pénalité manuelle Impact : les pages AMP seront ignorées, et vous n’aurez plus accès aux zones réservées aux pages AMP https://webmasters.googleblog.com/2017/11/engaging- users-through-high-quality-amp.html En place dès le 1er février 2018 : vous êtes prévenus ! 45
  46. 46. Quelle évolution attendre ? Les progressive web apps sont des pages web mobiles dont les fonctionnalités web sont enrichies de fonctionnalités normalement réservées aux apps Rend l’indexation des apps obsolètes Résistance d’Apple : support incomplet sur iOS On peut créer des PWA utilisant du code AMP https://www.ampproject.org/docs/guides/pwa- amp Vers un nouveau standard pour la conception de page webs ? La fusion avec un autre projet mieux né : le PWA … 46
  47. 47. Agence conseil en stratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics Conclusion 47
  48. 48. Conclusion : testez l’AMP ! Pour un site éditorial, nous recommandons de créer une version AMP Pour un site ecommerce, nous recommandons de réaliser un POC pour voir quelles difficultés techniques résoudre et comment les résoudre La bascule vers l’AMP pourra se faire rapidement dès que le traffic boost sera majeur Si vous avez une âme d’ « early adopter » => n’hésitez pas à vous lancer Monitorez la conversion AB testing obligatoire Autre alternative Appliquez les bonnes pratiques introduites en AMP Exploitez les possibilités du PWA Gagnez en expérience utilisateur et en conversions sans les contraintes de l’AMP !
  49. 49. Ce que l’on peut faire pour vous 49 Modules de formation Optimisation RWD Optimisation de sites mobiles Pages AMP Progressive web apps Audits, recommandation, optimisation Architecture, code, performances mobile Stratégie sur usages mobiles ASO
  50. 50. Merci ! Et maintenant, vos questions… 50
  51. 51. Prochains évènements SF 51 Petit déjeuner – Matinée de conférences Paris 18 janvier Luxembourg 25 janvier Webconf 11 janvier – optimiser son site pour la position zéro
  52. 52. Contact philippe.yonnet@search-foresight.com +33 1 74 18 29 40 Slideshare.net/S4sight @S4sight Philippe YONNET | CEO www.search-foresight.com 52

×