Google AMP : le guide complet

Accélérez vos pages mobiles avec Google AMP

Texte
@largowGoogle AMP : le guide SEO - AMP is coming @largow

@largowGoogle AMP : le guide SEO - AMP is coming @largow
A l’origine d’AMP, le besoin de résoudre un problème sur mobile

Google AMP : le guide SEO - AMP is coming @largow
Version responsive / desktop

Version responsive / mobile Version AMP

Fonctionnement de Google AMP
+
Cache

Fonctionnement de Google AMP
Source : Google Hangout du 07/03/2016

L’usage du mobile explose

1 critère de ranking de + en + fort : Le design Mobile friendly
Source : Search Engine Watch

Autre critère de ranking de + en + fort : le temps de changement mobile
Source : Smart Insights

HTML super light
(standard)
+
Système de cache
(CDN mis à dispo gratuitement)
+
Pre rendering depuis la SERP
=

Quel gain ?
Communication officielle Google :
15 à 85% de gain* en vitesse d’affichage
Réalité (pages AMP hors cache Google) :
13 et 72% de gain* (Source : Fastrize)
* par rapport à une page mobile « normale »

Retour d’expérience du Washington Post
Avant AMP
Taux de revisite sous 7 jours : 51%
Avec AMP
Taux de revisite sous 7 jours : 63%
Doit aussi beaucoup à l’UX du carrousel AMP...

Comment font t’ils ?
 Texte et images sont téléchargés en 1er
 Le reste est relégué au second plan
 HTML super light
 JS réduit au minimum
 Chargement asynchrone des iframes pour gagner encore en temps de
chargement.
 Nombre de requêtes réduit drastiquement : load de 10x moins de
data qu’une page mobile classique (Source : Google)

Source : Google Hangout du 07/03/2016

Le navigateur ainsi que les supports partenaires repèrent la présence
de l’éclair dans la balise HTML d’ouverture pour basculer le lien vers
un contenu AMP depuis un mobile.
 Google recommande de privilégier l’UTF-8
 Obligatoire : déclarer toutes les autres pages canoniques (web
et/ou mobiles)
 AMP peut être la page canonique, c’est à dire la seule disponible
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<link rel="canonical" href="$Url_page_canonique">
<meta name="viewport" content="width=device-width,minimum-
scale=1,initial-scale-1">

Des possibilités étendues de personnalisation
 On peut obtenir à peu près tous les
rendus possibles en CSS
 On peut inclure des embed en iframe
 On peut inclure de la pub
 On peut inclure des rebonds contextuels

Suivez-moi sur Twitter
https://twitter.com/largow

Google AMP : le guide SEO - AMP is coming
TECHNOLOGIES
PARTENAIRES
@largow

Technologies partenaires : CMS

Technologies partenaires : Analytics
https://www.ampproject.org/docs/reference/extended/amp-analytics.html

Technologies partenaires : Ad Servers
+ de 20 ad servers partenaires en tout
https://www.ampproject.org/docs/reference/amp-ad.html#supported-ad-networks

Technologies partenaires : Native Advertising

Technologies partenaires : Plateformes vidéo

Technologies partenaires : Plateformes tierces

Un projet Open Source … Work in Progress

Quelques stats AMP fournies par Google
 7 300 développeurs utilisaient AMP en mai 2016
 1 900 soumissions de code (mai 2016)
 150 millions de pages au format AMP dans l’index Google
 6 millions de nouvelles pages chaque semaine (aout 2016)
@largow / @gbournizien
Source des data : Google & Google I/O 2016

Des limitations
 Interstitiels et formulaires sont interdits
 Fichier CSS commun à toutes les pages AMP inférieur à 50 ko
 Frames, iframes, embed,… sont interdits et doivent être
remplacés par des composants AMP
 Codage strict : on est obligé par AMP de donner les
dimensions de tous les objets comme les images. Width et
height.

Adapter le code issu du wysiwyg pour tout le contenu riche
Des composants sont disponibles pour gérer ces cas :
Composant Type d'usage
amp-img Images
amp-anim GIF animés
amp-Youtube Embed
amp-facebook Embed
amp-twitter Embed
amp-pinterest Embed
amp-instagram Embed
amp-lightbox Popup
amp-carousel Diaporama
amp-list Liste à puces
amp-analytics Tag stats
amp-iframe
Iframes et tout ce qui n'est pas disponible via autres
composants
amp-ad Publicités
Tous les composants : https://www.ampproject.org/docs/reference/extended.html

Les composants par l’exemple
Tous les exemples : https://ampbyexample.com/

OUTILS
@largow

Etape 1 : validation en développement
Avec le navigateur Chrome
1. Ajouter #development=1 à la fin de l’url AMP
2. Ajouter la console DevTools (Afficher/Outils pour
développeurs/Console Javascript

Etape 1 : validation en développement
http://tools.maxxeight.com/amp-html/

Etape 2 : validation en recette
http://technicalseo.com/seo-tools/amp/

Etape 3 : validation du microformat
NewsArticle, Article, BlogPosting ou VideoObject
https://developers.google.com/structured-data/testing-tool/

Etape 3/4 : Extension Chrome AMP Validator

Etape 4 : suivi de l’indexation et des rejets
https://developers.google.com/structured-data/testing-tool/
Attention, 1 semaine de délai entre l’analyse de la page et le reporting dans Search Console

Pages AMP en erreur ? Tu sors !
Une page AMP ne sera pas acceptée tant qu’elle comportera
une erreur, aussi petite soit t’elle.

Replay des confs largow en vidéo

DEPLOYER AMP SUR WORDPRESS,
JOOMLA ou DRUPAL
@largow

https://wordpress.org/plugins/amp/

https://wordpress.org/plugins/pagefrog/

https://weeblr.com/joomla-accelerated-mobile-pages/wbamp

Au delà d’AMP : Facebook Instant Articles, Linkedin Pulse, Medium,..

Pour l’instant, les pages AMP
remontent surtout dans le carrousel
Pour être dans le carrousel il faut :
 Une page AMP valide
 Des meta data valides
Pas réservé aux sites « Google
News » mais en pratique pour le
moment quasiment seuls les sites
qui y sont listés rankent…

… A quelques exceptions près.
Image : @eseoref

Critères de déclenchement du carrousel
 Le carrousel ne se déclenche pas
sur toute les requêtes
 Il se déclenche s’il y a assez de
volume de recherches et de pages
AMP disponibles sur une requête.
 La fraicheur est un critère mais ce
n’est pas le seul.
 Critères de ranking proches de
ceux de Google News Box ?

0
500000
1000000
1500000
2000000
2500000
3000000
3500000
4000000
4500000
Mai Juin Juillet Aout Septembre
Evolution du nombre de résultats AMP (requêtes contenu)
Mai - Septembre 2016
Source des data :

Source des data :
0
20000
40000
60000
80000
100000
120000
140000
160000
180000
Evolution du nombre de carrousels AMP (requêtes contenu)

Source des data :
0
20000
40000
60000
80000
100000
120000
140000
Evolution du nombre de résultats texte AMP (requêtes contenu)

Source des data :
0
500000
1000000
1500000
2000000
2500000
Mai Juin Juillet Aout Septembre
Evolution du nombre de Newsbox AMP (Texte et carrousel)
Baisse à prévoir de la visibilité AMP News au profit des pages AMP hors news

Carrousel AMP de + en + déployé sur les requêtes news
89 %
11 %20%
19%
24%
29%
Juin Juillet Aout Septembre
Source des data :

Une fois la phase d’exploration initiale terminée, seuls (surtout ?) les
nouveaux articles (moins de 30 jours ?) semblent rester indexés.
Source : Search Console

Vous aimez cette présentation ?
Suivre @largow sur Twitter
Twitter ces slides

QUELLE AUDIENCE ?
QUELS GAINS/RISQUES EN SEO ?
6

Selon John Mueller, AMP n’est pas un ranking factor.

Sauf que…
 Le Page Speed l’est
 Le mobile friendly aussi
 Les pages AMP rankent très haut dans les SERP’s, dans
un carrousel imagé et très visible.
Attention, AMP ne résout pas les problématiques de page
speed ou d’ergonomie sur votre site mobile !

Perspectives d’audience
Trafic qui peut être fort sur un article unitaire mais sur le
global pour le moment, audience limitée.
=> Il faut attendre que beaucoup plus de sites rejoignent
AMP pour déclencher le carrousel sur beaucoup plus de
requêtes longue traîne.

Page article sur
mon site
⚡
Page AMP
?amp ou /amp
⚡
Page AMP
dans le
Google CDN
rel="amphtml"
rel="canonical"
Gestion du duplicate dans Google AMP

La problématique Domain Authority subsiste
L’autorité de votre ndd pourrait pâtir d’AMP sur la durée, car les
backlinks et signaux sociaux pourraient aller sur la version Google
cache de la page AMP et non sur celle hébergée sur votre site

Les audiences AMP sont non comptabilisées Mediamétrie
Car la page vue est faite sur le domaine Google et non sur celui
de l’éditeur. Mais ça va changer courant 2017

Une monétisation encore balbutiante
 Contrôle complet sur la commercialisation
 Beaucoup d’ad servers compatibles
MAIS
 Pour le moment peu d’audience donc difficulté à monétiser
 Pas de data first party pour le ciblage
 Interstitiels et habillages publicitaire interdits
 Header bidding (programmatic advertising) impossible

S’abonner à la newsletter largow

Extension au e-commerce (product & product listing pages), aux
annonces immobilières, aux chansons et aux recettes de cuisine

AMP dans Google News, gestion du paywall (contenus payants)
Sites non AMP de fait pénalisés en visibilité par leur absence du carrousel

API temps réèl

Carrousel dédié « live » tout en haut de page
sur les sujets très chauds
Pour y être, il faudra utiliser l’api Google indexing (cache CDN Google obligatoire).

@largow
Google enterre l’App Indexing
« Users searching from mobile devices
will be directed to the relevant AMP
pages even if an equivalent app page
exists. »
Google

Déploiement massif d’AMP
AMP est deployé dans les « liens bleus » hors « newsbox » aux US depuis mi septembre.
Prévu mi octobre en France
Source image : Search Engine Land

Redesign du « viewer » AMP
Ajout d’une croix
pour fermer
Bandeau passé de bleu vif à gris

Bing entre dans la danse
Source image : Search Engine Land

Et aussi
 Multi size ads pour une même emplacement pub
 Nouveaux formats pub
 Outils d’A/B Testing
 Tracking Analytics plus poussé
 Etc.
La plateforme évolue très très vite. Et bien.

https://www.ampproject.org/

Chiffres clés et infographies sur Pinterest
https://fr.pinterest.com/largow/

Titre
Mes blogs
Café Numérique
Digital Marketing Caféine
http://www.cafe-numerique.com
Café Référencement
La pause SEO qu’il vous faut
http://www.cafe-referencement.com
@largow

Et sur les réseaux sociaux :Contact :
virginie@largow.com
Mobile : 06 27 26 67 08
Virginie Clève
Digital Strategist
@largow
www.largow.com
#GrowthMarketing
#SocialMedia #Product
#SEO #Mobile #ASO
#Medias

Google AMP : le guide complet

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Google AMP : le guide complet

Ähnlich wie Google AMP : le guide complet (20)

Mehr von Virginie Clève - largow ☕️

Mehr von Virginie Clève - largow ☕️ (16)

Google AMP : le guide complet