L’AMP (Accelerated Mobile Pages) vient de fêter ses 2 ans. Google va pénaliser les mauvaises utilisations d’AMP dès 2018. Durant ce webinar, nous vous proposons de faire le point en 30 à 45 min sur le sujet et verrons quelles utilisations seront impactées, les bonnes pratiques à tenir, notamment sur vos contenus… Intervenant : Philippe Yonnet, Directeur Général, Search Foresight

1. Webconférence
Accelerated Mobile Pages
(Pages AMP)
14 / 12 / 2017

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. L’AGENCE SEARCH MARKETING DU GROUPE

4. Des experts certifiés
La garantie d’un conseil à la pointe du Search Marketing
Google Adwords 
Analytics
CESEO
Botify
Crawl  Analyse de logs
1ère agence certifiée
de France
• 15 experts certifiés Adwords
• 7 certifiés Google Analytics
• Agence agréée Google
Partner Premier
• Membre
« Google s’engage »
Bing
Google Partner
Experts certifiés
4

5. Nous vous accompagnons dans votre
développement international
Des experts Search locaux pilotés par nos équipes
pour adresser vos problématiques SEO et SEA dans le monde
5
Un réseau d’experts
internationaux
• Langue Locale + Anglais/Français
• Des experts natifs et locaux
• Profils seniors : 5 ans d’expérience + certifications Search
+ formations SF
Plusieurs langues et zones
couvertes
• Principaux pays d'Europe (Allemagne, Italie,
Royaume-Uni, Espagne, Pays-Bas)
• Etats-Unis, Chine et Canada
• Partenaires ou sourcing ad-hoc sur les autres zones

6. Une expérience technologique
Pour vous permettre de mieux rentabiliser vos investissements IT
Parietal Lobe
Moteurs de
recherche interne
Outils de
webanalyse
Plateformes
Ecommerce
CMS
6

7. SF University
Découvrir ou se perfectionner au SEO-SEA au travers de modules techniques ou marketing adaptés a tous.
 Organisme de formation agréé depuis 16 ans
 L’offre de formation Search Marketing la plus pointue du marché
 Plus de 600 participants en formations inter, intra, Académies &
Kickoff
 Cycles de formation sur mesure : Evaluer, Former et faire Evoluer
 Partenaires des réseaux et animations des sessions
 Certificat Grandes Ecoles
7
Formation INTER
Sessions organisées régulièrement sur Paris,
selon un calendrier fixé à l’avance.
Maximum une quinzaine de participants.
La formule la plus économique.
Formation INTRA
Formations sur-mesure destinées aux
salariés d’une même entreprise ayant pour
objectif d’être à l’écoute des besoins
spécifiques de l’entreprise.
Cycles de formations
avancés
•Formation SEO For Experts
•Formation SEO For GURUS
>> Devenez des professionnels du Search

8. Agence conseil en stratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics
Les pages AMP
qu’est-ce que c’est ?
8

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

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

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

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

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

14. Pour en savoir plus :
http://www.ampproject.org
14

15. Agence conseil en stratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics
Les pages AMP :
comment ça marche ?
15

16. Les principes
Gains de
perfomance
X10
Code
allégé
Mise en cache
Pré rendition /
préchargement
chez Google

17. Un code sérieusement allégé
17
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

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

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

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

21. 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 !
21

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

23. Tester ses pages AMP
Dans les pages de google
23

24. Tester ses pages AMP
https://search.google.com/test/amp
Dans l’outil de test
24

25. Tester ses pages AMP
https://validator.ampproject.org/
Dans l’outil de validation
25

26. Le rapport de la search console
26

27. Agence conseil en stratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics
Les pages AMP :
Pourquoi les utiliser

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

29. C’est VRAIMENT plus rapide
Source : Rannaa Zhou de Google, SMX West 2017
29

30. Et l’impact, c’est plus de conversions
30

31. VRAIMENT plus de conversions
Etude Wompmobile 2017
31

32. Et parce qu’il y’a un ranking boost !
Et donc un traffic boost parfois
32
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

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

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

35. Et c’est vrai à l’international
Les carrousels AMP envahissent les versions internationales de google
35

36. De plus en plus de diffuseurs exploitent l’amp
Les principales plateformes qui exploitent l’AMP en dehors de Google :
Pinterest, LinkedIn, et Twitter
36

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

38. Agence conseil en stratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics
Où en sommes nous de
l’adoption du standard ?

39. Le nombre de sites AMP a explosé
4 milliards de pages AMP, 25 millions de domaines

40. Beaucoup de medias ont adopté l’AMP

41. Evolution du trafic du top 9 des éditeurs AMP
41

42. La part du trafic AMP est très variable
42

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

44. International : Baidu supporte l’AMP !
Son format MIP est devenu AMP compatible depuis le printemps 2017

45. Agence conseil en stratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics
Quel avenir pour l’AMP

46. D’après Google et le consortium, AMP a un
avenir brillant devant lui

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

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

49. 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 !
49

50. 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 …
50

51. Agence conseil en stratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics
Conclusion
51

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

53. Ce que l’on peut faire pour
vous
53
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

54. Merci !
Et maintenant, vos
questions…
54

55. Prochains évènements SF
55
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

56. Contact
philippe.yonnet@search-foresight.com
+33 1 74 18 29 40
Slideshare.net/S4sight
@S4sight
Philippe YONNET | CEO
www.search-foresight.com
56