Amp 2 ans après, quel impact sur votre seo en 2018

Webconférence

Accelerated Mobile Pages

(Pages AMP)

14 / 12 / 2017

Programme de la conférence45mn : 30 mn de presentation – 15 mn de questions

2

Présentation de l’agence

Les Pages AMP qu’est ceque c’est ?

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

Comment ça marche ?

L’adoptionQuel avenir pour les

pages AMP

#S4sight2017 @s4sight

Vos questions

L’AGENCE SEARCH MARKETING DU GROUPE

Des experts certifiés La garantie d’un conseil à la pointe du Search Marketing

Google Adwords

Analytics

CESEO

BotifyCrawl Analyse de logs

1ère agence certifiéede 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

Nous vous accompagnons dans votre développement international

Des experts Search locaux pilotés par nos équipespour 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

Une expérience technologiquePour vous permettre de mieux rentabiliser vos investissements IT

Parietal Lobe

Moteurs de recherche interne

Outils de webanalyse

PlateformesEcommerce

CMS

6

SF UniversityDé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 INTRAFormations 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

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

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

8

Le contexte : des pages mobiles trop lentes

Le poids des pages mobiles ne cesse d’augmenter

La faute :

A des pages RWD mal conçuesA des pages mobiles conçues avec des frameworks et des standards conçus… pour le desktop

Et pour les sites éditoriaux, c’est pire

Le problème :

Les scripts de trackingLes mouchards publicitairesLes 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 contenusDes images et des videos

10

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

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

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

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

14


Les pages AMP : comment ça marche ?

15

Les principes

Gains de perfomance

X10

Code

allégé

Mise en cache

Pré rendition / préchargement

chez Google

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 foixplus léger.

Comment ?

Des balises HTML « lourdes » interditesUne librairie javascript « couteau suisse » unique et allégée

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

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

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

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’origineAu départ, Google recommandait de pointer vers la version desktopAvec le mobile first index : la recommandation reste la même !

Pourquoi ? Pour les autres moteurs !

21

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

Tester ses pages AMPDans les pages de google

23

Tester ses pages AMP

https://search.google.com/test/amp

Dans l’outil de test

24

Tester ses pages AMP

https://validator.ampproject.org/

Dans l’outil de validation

25

Le rapport de la search console

26


Les pages AMP :Pourquoi les utiliser

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

C’est VRAIMENT plus rapideSource : Rannaa Zhou de Google, SMX West 2017

29

Et l’impact, c’est plus de conversions

30

VRAIMENT plus de conversions

Etude Wompmobile 2017

31

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

Indirectement, il y’a parfois un ranking boost

Deux exemples

Impact avec des cas de sites mobiles AMPCause : probablement le speed boostUn code plus SEO friendly ?

Mais avoir des pages AMP n’est pas un ranking factor

33

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 learndepuis fin 2015

Test label bleu « instant »en oct 2017

34

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

35

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

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 interditesConclusion : tout n’est pas supporté en AMP

Au début : beaucoup de choses utiles voire indispensables n’étaient pas disponiblesMais aujourd’hui, toutes les briques utiles sont dispo en AMP !Possibilité de faire 100% d’un site éditorial ou ecommerce en AMPMais 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


Où en sommes nous de l’adoption du standard ?

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

Beaucoup de medias ont adopté l’AMP

Evolution du trafic du top 9 des éditeurs AMP

41

La part du trafic AMP est très variable

42

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

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


Quel avenir pour l’AMP

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

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

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

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

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ètesRé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


Conclusion

51

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 majeurSi vous avez une âme d’ « early adopter » => n’hésitez pas à vous lancer

Monitorez la conversionAB testing obligatoire

Ce que l’on peut faire pour vous

53

Modules de formation

Optimisation RWDOptimisation de sites mobilesPages AMPProgressive web apps

Audits, recommandation, optimisation

Architecture, code, performances mobileStratégie sur usages mobilesASO

Merci !

Et maintenant, vos questions…

54

Prochains évènements SF

55

Petit déjeuner – Matinée de conférences

Paris 18 janvierLuxembourg 25 janvier

Webconf

11 janvier – optimiser son site pour la position zéro

Contact

[email protected]

+33 1 74 18 29 40

Slideshare.net/S4sight

@S4sight

Philippe YONNET | CEO

www.search-foresight.com

56

Amp 2 ans après, quel impact sur votre seo en 2018

Internet

Transcript of Amp 2 ans après, quel impact sur votre seo en 2018