Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Retour d'expériences - Implémentation AMP chez M6 Web

5,571 views

Published on

AMP est désormais partout dans les SERPS : articles simples, actualités, recettes de cuisine, ecommerce et depuis peu featured snippets et adwords ! Ce gain de visibilité dans les pages de résultats n’est pourtant pas si simple et nécessite une vraie réflexion. Retour d’expériences sur sa mise en œuvre, sa monétisation et ses évolutions au sein d’un groupe média comme M6Web sur les sites https://www.radins.com ou https://www.cuisineaz.com

Published in: Internet
  • Be the first to comment

Retour d'expériences - Implémentation AMP chez M6 Web

  1. 1. Entre mythe et réalité : retour sur 2 ans d’évolution et d’implémentation AMP Alexandre Thuriot – Novembre 2017 - Metz
  2. 2. Metz – Novembre 2017 Présentation et retours d’expérience AMP Alexandre Thuriot Qui suis-je ?
  3. 3. Metz – Novembre 2017 Présentation et retours d’expérience AMP Alexandre Thuriot Contexte Etat de l’Internet Mobile
  4. 4. Metz – Novembre 2017 Présentation et retours d’expérience AMP Alexandre Thuriot Usage Mobile … mais beaucoup de sites mobiles … Constat des habitudes web mobile:
  5. 5. Metz – Novembre 2017 Présentation et retours d’expérience AMP Alexandre Thuriot Développement mobile Développements Responsive : Maintenir un site mobile performant peut demander des équipes de développements spécifiques ou des compétences avancées ! -> Investissement très couteux pour avoir un site dans les recommandations techniques : Speed Index < 1000 - Temps de chargement < 500ms – TTFB 200ms – Start Render < 1s
  6. 6. Metz – Novembre 2017 Présentation et retours d’expérience AMP Alexandre Thuriot Effet du mobile sur la conversion • Amazon perd 1% de ventes tous les 100ms (1.5 milliard $ - 2012) • Amélioration de 2.2s augmente la conversion de 15.4% sur page de téléchargement Firefox (60 millions) • A/B Testing avec écart de 3s a augmenté de 14% les donations lors de la campagne d’Obama en 2011 (34 millions $) • Dégrader le temps de chargement de 0.4 à 0.9s occasionne perte de 20% de trafic & revenus chez Google
  7. 7. Metz – Novembre 2017 Présentation et retours d’expérience AMP Alexandre Thuriot La promesse de Google pour améliorer la webperf : AMP
  8. 8. Metz – Novembre 2017 Présentation et retours d’expérience AMP Alexandre Thuriot AMP est une initiative open-source visant à rendre le web meilleur pour tous. Le projet permet la création de sites Web et d'annonces toujours rapides, plus engageant, et qui permette une meilleure monétisation sur mobile. Pourquoi AMP ? 2016 - https://www.ampproject.org Business Mobile pour Google : • Monopolisation du web mobile par les Apps • Riposte aux adblockers afin de proposer des formats respectueux pour les utilisateurs (Coalition for better Ads) Début 2018 • ‘Less is More’ : plateforme contrainte et maitrisée
  9. 9. Metz – Novembre 2017 Présentation et retours d’expérience AMP Alexandre Thuriot AMP {est|deviendra} t-il un critère de ranking SEO ? Google se base sur l’url canonique pour établir son ranking SEO ; décliner sa page RWD en AMP ne change donc rien selon Google. Qu’en est-il si le site est uniquement AMP ?
  10. 10. Metz – Novembre 2017 Présentation et retours d’expérience AMP Alexandre Thuriot Comment accéder à une page AMP ?
  11. 11. Metz – Novembre 2017 Présentation et retours d’expérience AMP Alexandre Thuriot Comment accéder à une page AMP ? Les pages au format AMP sont uniquement mises en avant par Google dans les SERPS : • SERP Mobile uniquement • Carrousel Google Actu Haut de page • Carrousel Recettes individuel • Featured Snippet • Google Images • Google Actu
  12. 12. Metz – Novembre 2017 Présentation et retours d’expérience AMP Alexandre Thuriot Visibilité AMP au sein des SERPs AMP & Featured Snippets AMP & Carrousel SERP AMP & Google Images
  13. 13. Metz – Novembre 2017 Présentation et retours d’expérience AMP Alexandre Thuriot Le Graal AMP : Carrousel A la Une Carrousel Actu + Viewer • Emplacement réservé en priorité aux pages AMP • Jusqu’à 12 widgets dans le carrousel A la Une • Possibilité d’avoir plusieurs fois sa marque • PV d’opportunité avec slice au sein du viewer • Sous conditions : accessible aux sites non validés dans Google Actu mais AMP
  14. 14. Metz – Novembre 2017 Présentation et retours d’expérience AMP Alexandre Thuriot Spécifications techniques AMP
  15. 15. Metz – Novembre 2017 Présentation et retours d’expérience AMP Alexandre Thuriot La plateforme AMP
  16. 16. Metz – Novembre 2017 Présentation et retours d’expérience AMP Alexandre Thuriot WorkFlow AMP Nécessité de développer 1 template / URL dédiée URL consultée par l’internaute se trouve chez Google Nécessité de faire le double linking amphtml / canonical !
  17. 17. Metz – Novembre 2017 Présentation et retours d’expérience AMP Alexandre Thuriot AMP Validator Validation en ligne, Console / Plugin Navigateur : il est facile de détecter et corriger les erreurs
  18. 18. Metz – Novembre 2017 Présentation et retours d’expérience AMP Alexandre Thuriot Les possibilités de la plateforme AMP Autant de déclinaisons que d’acteurs utilisant AMP qui intègrent des galeries photos, des vidéos, ecommerce, pubs, votes, effet parallax … Après 2 ans ; AMP est aujourd’hui un Framework complet pour le développement mobile
  19. 19. Metz – Novembre 2017 Présentation et retours d’expérience AMP Alexandre Thuriot Pourquoi beaucoup de SEO n’aiment pas AMP ? Trop souvent, AMP est installé via un plugin CMS (Article) Dans ces conditions : • Pas d’identité de marque • Pas d’intéractivité • Souvent limité aux articles • Taux rebond en hausse • Peu de pages vues En plus de la problématique d’URL hébergée chez Google :
  20. 20. Metz – Novembre 2017 Présentation et retours d’expérience AMP Alexandre Thuriot Les composants disponibles sur AMP • amp-access-laterpay • amp-access • amp-accordion • amp-ad • amp-analytics • amp-anim • amp-app-banner • amp-audio • amp-bind • amp-brid-player • amp-brightcove • amp-call-tracking • amp-carousel • amp-dailymotion • amp-dynamic-css- classes • amp-experiment • amp-facebook • amp-fit-text • amp-font • amp-form • amp-fx-flying-carpet • amp-fx-parallax • amp-gfycat • amp-gist • amp-google-vrview- image • amp-hulu • amp-iframe • amp-ima-video • amp-image-lightbox • amp-img • amp-instagram • amp-install- serviceworker • amp-jwplayer • amp-kaltura-player • amp-lightbox • amp-list • amp-live-list • amp-mustache • amp-o2-player • amp-pinterest • amp-pixel • amp-reach-player • amp-selector • amp-sidebar • amp-social-share • amp-soundcloud • amp-springboard- player • amp-sticky-ad • amp-timeago • amp-twitter • amp-user- notification • amp-video • amp-vimeo • amp-vine • amp-youtube • amp-user- notification with Server Endpoint • Autosuggest • Click-to-play overlay for amp-video • ComboBox • Custom Loading Indicators • Favorite Button • How to create interactive AMP pages? • How to support Images with unknown Dimensions? • Image Galleries with amp-carousel • Integrating Videos in AMP an Overview • Layout System • Linked Dropdowns • Long List of amp- instagram Embeds • Paged List • Payments in AMP • Rich Media Notifications • Show More Button • Star Rating • Tab Panels with amp-selector • Using the AMP URL API • Using the Google AMP Cache • Video Carousels with amp-carousel Les composants basiques : Les composants complexes :
  21. 21. Metz – Novembre 2017 Présentation et retours d’expérience AMP Alexandre Thuriot AMPByExample – AMP Carrousel
  22. 22. Metz – Novembre 2017 Présentation et retours d’expérience AMP Alexandre Thuriot AMPByExample Playground Un simple intégrateur HTML/CSS peut désormais ajouter des composants riches à sa page.
  23. 23. Metz – Novembre 2017 Présentation et retours d’expérience AMP Alexandre Thuriot Adoption AMP en France
  24. 24. Metz – Novembre 2017 Présentation et retours d’expérience AMP Alexandre Thuriot Adoption AMP en France
  25. 25. Metz – Novembre 2017 Présentation et retours d’expérience AMP Alexandre Thuriot • Sur les 50 sites média qui font le plus d'audience : 25 l’ont désormais adopté • AMP est en hausse dans le trafic mobile total des éditeurs : autour 30% de leur trafic • La monétisation reste en deçà des attentes : moins de 10% des revenus • Médiamétrie et l'ACPM mettent en place de nouvelles mesures Contre ce format, des médias leaders refusent de basculer sur la plateforme de Google : Refus AMP en France
  26. 26. Metz – Novembre 2017 Présentation et retours d’expérience AMP Alexandre Thuriot Implémentation AMP Chez M6 Web
  27. 27. Metz – Novembre 2017 Présentation et retours d’expérience AMP Alexandre Thuriot Le mobile chez M6 Web Cela dépend des thématiques, mais le mobile génère de +/+ de PV. Il est important de connaitre l’usage de ses clients ; dans l’univers Cuisine : 2/3 de la recherche s’effectue depuis un mobile
  28. 28. Metz – Novembre 2017 Présentation et retours d’expérience AMP Alexandre Thuriot Google & M6 Web > AMP? • ADN de marque M6 Web : envie de tester des nouveaux leviers de croissance • Groupe Web média avec une acquisition majoritairement Google (60 - 75%) • L’apprentissage technique d’AMP est aisé • La webperf de nos sites est plutôt moyenne en raison des nombreux appels de scripts tracking / pub avec une promesse de gain
  29. 29. Metz – Novembre 2017 Présentation et retours d’expérience AMP Alexandre Thuriot AMP sur Radins.com 3 templates en ligne depuis Octobre 2016 • Article / NewsArticle • Custom (Code Promo) Composants classiques : • Amp-Analytics • Amp-Img • Amp-Video • Amp-Carrousel • Amp-Social • Amp-Ad (Outbrain / Digiteka) Activé en majorité sur les pages médias / contenus (moins prioritaire pour le business)
  30. 30. Metz – Novembre 2017 Présentation et retours d’expérience AMP Alexandre Thuriot AMP sur Radins.com • Implémentation : 5 jours • 8400 Articles / NewsArticles • Audience croissante • Peu d’évolution du template • Augmentation des VU (+46%) • Baisse des PV/V (1.09 vs 1.90) • AMP représente 30% des sessions • 25% des sessions mobile • Pas de pub pendant très longtemps
  31. 31. Metz – Novembre 2017 Présentation et retours d’expérience AMP Alexandre Thuriot AMP sur CuisineAZ.com 2 templates en ligne depuis Octobre 2016 • Recette (Recipe) • Listing de recettes / categories Composants classiques : • Amp-Analytics • Amp-Img • Amp-Video • Amp-Carrousel • Amp-Social • Amp-Ad (Tous formats)
  32. 32. Metz – Novembre 2017 Présentation et retours d’expérience AMP Alexandre Thuriot AMP sur CuisineAZ.com • Implémentation : 10 jours • 45k Recettes et 5k Catégories • Audience croissante • Augmentation des VU (+71%) • Baisse des PV/V (1.23 vs 1.87) • 27% des sessions • 55% des sessions mobile • Monétisation faible : 60% RWD
  33. 33. Metz – Novembre 2017 Présentation et retours d’expérience AMP Alexandre Thuriot Erreurs AMP sur CuisineAZ.com Erreur : !important; dans une feuille de style CSS Alerte Search Console sous 48H Correction sous 7 jours Invalidation / validation rapide des pages
  34. 34. Metz – Novembre 2017 Présentation et retours d’expérience AMP Alexandre Thuriot AMP et l’analyse de logs sur CuisineAZ.com L’activation d’AMP multiplie par 4 le passage de GoogleBot L’augmentation du crawl du fait d’AMP est additionnel au crawl habituel (80%) Erreurs pages AMP sur Crawl GoogleBot :
  35. 35. Metz – Novembre 2017 Présentation et retours d’expérience AMP Alexandre Thuriot Effet des erreurs AMP sur le trafic SEO CuisineAZ.com En cas d’erreur AMP : Google remplace simplement la page AMP par sa version classique RWD
  36. 36. Metz – Novembre 2017 Présentation et retours d’expérience AMP Alexandre Thuriot Analyse des positions AMP • Suivre les SERP Mobile • Avoir des urls AMP facilement identifiables • Tracker les URLS AMP dans les SERPS • Identifier les caroussels • Suivre les P0/PAA qui font la promotion des URLS AMP Important pour le suivi Positions / Analytics / Search Console : avoir un répertoire /amp/ (on évite le ?amp)
  37. 37. Metz – Novembre 2017 Présentation et retours d’expérience AMP Alexandre Thuriot • Amélioration de la visibilité dans les SERPS • Maitrise intégrale de la présentation • 100% des revenus reviennent à l’éditeur • Contrainte technique faible • Augmentation des visiteurs uniques • Projet OpenSource qui évolue rapidement • Webperf améliorée • Multiplication par 4 du Crawl • Baisse des pages vues par sessions • Limitation technique (JS personnalisé) • Impossible de pousser des formats pubs intrusifs rémunérateurs (Coalition for better ads) • Header Biding pub impossible • Comptabilisation incomplète de l’audience AMP pour Médiamétrie Bilan AMP chez M6 Web AMP doit être considéré comme un véritable framework de développement mobile
  38. 38. Metz – Novembre 2017 Présentation et retours d’expérience AMP Alexandre Thuriot Les autres évolutions importantes AMP : Ecommerce
  39. 39. Metz – Novembre 2017 Présentation et retours d’expérience AMP Alexandre Thuriot AMP : désormais opérationnel pour l’ecommerce Google accompagne des grandes marques pour adopter sa nouvelle technologie pour l’ecommerce
  40. 40. Metz – Novembre 2017 Présentation et retours d’expérience AMP Alexandre Thuriot Les autres évolutions importantes AMP : La publicité
  41. 41. Metz – Novembre 2017 Présentation et retours d’expérience AMP Alexandre Thuriot AMP et la publicité L’expérience utilisateur est au centre des préoccupations du projet AMP : Il n’est pas possible d’inclure des formats intrusifs : • Interstitiels • Autoplay Vidéo • Large stickys Ads -> cela arrive en 2018 sur tous les supports A partir de cette date, la monétisation AMP vs Non AMP risque de s’équilibrer
  42. 42. Metz – Novembre 2017 Présentation et retours d’expérience AMP Alexandre Thuriot AMP et la publicité Il est tout à fait possible désormais de faire de bonnes intégrations pub
  43. 43. Metz – Novembre 2017 Présentation et retours d’expérience AMP Alexandre Thuriot AMP et la publicité De plus en plus de formats sont disponibles sur AMP, et même certains novateurs La pub se charge trop lentement (€) Evolution chargement de la pub
  44. 44. Metz – Novembre 2017 Présentation et retours d’expérience AMP Alexandre Thuriot Merci Remerciements à Yoann & Alix

×