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

Entre mythe et réalité : retour sur 2 ans
d’évolution et d’implémentation AMP
Alexandre Thuriot – Novembre 2017 - Metz

Metz – Novembre 2017 Présentation et retours d’expérience AMP Alexandre Thuriot
Qui suis-je ?

Contexte
Etat de l’Internet Mobile

Usage Mobile
… mais beaucoup de sites mobiles …
Constat des habitudes web mobile:

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

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

La promesse de Google pour améliorer la
webperf : AMP

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

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 ?

Comment accéder à une page AMP ?

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

Visibilité AMP au sein des SERPs
AMP &
Featured Snippets
AMP &
Carrousel SERP
AMP &
Google Images

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

Spécifications techniques AMP

La plateforme AMP

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 !

AMP Validator
Validation en ligne, Console / Plugin Navigateur :
il est facile de détecter et corriger les erreurs

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

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 :

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 :

AMPByExample – AMP Carrousel

AMPByExample Playground
Un simple intégrateur HTML/CSS peut désormais ajouter des composants riches à sa page.

Adoption AMP en France

• 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

Implémentation AMP
Chez M6 Web

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

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

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)

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

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)

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

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

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 :

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

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)

• 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

Les autres évolutions importantes AMP :
Ecommerce

AMP : désormais opérationnel pour l’ecommerce
Google accompagne des grandes marques pour adopter sa nouvelle technologie pour l’ecommerce

Les autres évolutions importantes AMP :
La publicité

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

Il est tout à fait possible désormais de faire de bonnes intégrations pub

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

Merci
Remerciements à Yoann & Alix

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

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (20)

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