Quel ROI attendre d'un projet de création de pages AMP ?

Quel ROI pour les pages AMP ?
Philippe YONNET
Ceo Groupe Neper
Where Digital Marketing meets Science
WEBINAR
1er décembre 2020
3 heures de
SEO TECHNIQUE

Programme de la conférence
2
Introduction
Les Pages AMP qu’est
ce que c’est ?
Quel est l’intérêt
des pages AMP ?
Comment ça marche ?
Quel avenir pour les
pages AMP ?
Vos questions

L’intervenant
Philippe YONNET
+de 20 ans d’expérience dans le Digital
17 ans d’expérience en tant que spécialiste SEO
Entrepreneur et Business Angel
Président du centre de formation Know Y
Organisateur des conférences Search Y
Fondateur de l’agence Neper
Premier président de l’association SEO Camp
3

Les pages AMP, qu’est-ce que
c’est ?

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

Un code sérieusement allégé
6
Une page AMP contient 5 fois moins de
trackers en moyenne qu’une page
« normale », et un code 6 fois plus léger.
Comment ?
Des balises HTML « lourdes » interdites
Une librairie javascript « couteau suisse » unique et
allégée

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
7

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
8

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

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

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
11

Tester ses pages AMP
Dans les pages de google
12

https://search.google.com/test/amp
Dans l’outil de test
13

https://validator.ampproject.org/
Dans l’outil de validation
14

Le rapport de la search console
Il y’a aussi un rapport d’améliorations dans la nouvelle Search Console
15

Quel est l’intérêt de créer des
pages AMP ?

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

Et l’impact, c’est plus de conversions
18

Exemple d’étude sur le traffic boost
7% des sites, 21% du trafic
envoyé par Google depuis les
SERPs
Avant après : +260% sur les
exemples étudiés
Nota bene : l’impact est souvent
plus modeste
Source : Milestoneinternet

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

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
21

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
22

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

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

Où en sommes nous de
l’adoption des pages AMP ?

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

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

La part du trafic AMP est très variable
Source ACPM – mars 2019
28

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
29

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
31

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
32

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

Sauf qu’en mai 2021 : plus de traffic boost !
Dans le carrousel en top position, les
pages AMP seront mélangées avec
d’autres pages pourvu qu’elles soient
rapides

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
AMP
Mobile

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
36

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/e
ngaging-users-through-high-quality-amp.html
37

Et il y’a toujours le problème de l’attribution
Le trafic est attribué à … Google
Corrigé par certains outils / panels mais a
posteriori
Si une page doit poser un cookie, son
domaine est … Google
Donc c’est un cookie tiers
Résolu théoriquement avec « signed
exchange » mais adoption lente
Solution provisoire :
Et des cookies tiers…
Set-Cookie: widget_session=abc123; SameSite=None; Secure

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 …
39

L’adoption de nouveaux standards
Mise à jour en mai 2021 : les sites
avec de mauvais scores perdront
ils des positions ?
En attendant, les pages AMP ont
de meilleurs scores sur les Core
Web Vitals
Mais il faudra avoir de bons scores
sur TOUTES les pages…
Faire des sites avec de bons scores de Core Web Vitals

Conclusion : quel ROI pour les pages AMP ?
Pour un site éditorial, nous recommandons de
créer une version AMP
Mais attention à la perte de monétisation
Pour un site ecommerce, nous recommandons de
réaliser un POC pour voir quelles difficultés
techniques résoudre et comment les résoudre
Monitorez la conversion
AB testing obligatoire
ROI généralement mauvais, sauf occasion de générer un projet
« from scratch » ou contexte favorable
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 !

Quel ROI attendre d'un projet de création de pages AMP ?

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (19)

Ähnlich wie Quel ROI attendre d'un projet de création de pages AMP ?

Ähnlich wie Quel ROI attendre d'un projet de création de pages AMP ? (20)

Mehr von Semrush France

Mehr von Semrush France (20)

Quel ROI attendre d'un projet de création de pages AMP ?