Mobile et e-commerce 2017 : Google AMP, Mobile First Index
-
Upload
sandra-boyer -
Category
Mobile
-
view
60 -
download
0
Transcript of Mobile et e-commerce 2017 : Google AMP, Mobile First Index
CONFERENCE WELCOM 15 FEVRIER 2017
LE MOBILE, ENJEU MAJEUR DU E-COMMERCE
LE MOBILE, EST-CE VRAIMENT INDISPENSABLE POUR MON
E-COMMERCE ?
LES VERSIONS MOBILE 2017 2018
2015 2016
2013 2014
2012 2013
2011 2012
55% DES VISITES WEB PROVIENNENT D’UN TERMINAL MOBILE* EN FRANCE EN 2016.
2013
76%
2016
51%
49%
ÉVOLUTION DES REQUÊTES PAR TYPE D'APPAREIL**
24% Smartphones
Ordinateurs
et tablettes
LES ENJEUX DU MOBILE EN 2017- WELCOM 15 FEVRIER 2017
DES UTILISATEURS POSSÈDENT UN SMARTPHONE EN 2016 EN FRANCE
71%
Progresse 200 % fois plus rapidement que l’e-commerce en 2017 (dans le monde).
Fin 2016 : croissance + 30% en 1 an des ventes effectuées depuis un device mobile
A doublé en 2016 par rapport à 2015
LES CHIFFRES DU M-COMMERCE
M-COMMERCE E-COMMERCE
2017 2018
2015 2016
2013 2014
2012 2013
2011 2012
QUELLE TECHNOLOGIE MOBILE FRIENDLY ?
QUELLE TECHNOLOGIE MOBILE FRIENDLY ?
SITE MOBILE Site web à part entière développé pour le mobile. m.monsite.com Monsite.com/m/
Les+ : Plus de possibilités graphiques et sur mesure (UX), rapidité de chargement.
Les - : Maintenance, long à développer, risqué en SEO
RISQUE EN SEO OUI
URL VS SITE WEB DIFFERENTE
CODE SOURCE DIFFERENT
(APPLICATION MOBILE) Programme téléchargeable, gratuit ou payant, pour promouvoir un service, un jeu, un social media en particulier.
Les+ : Mise en avant de l’app sur Google lors de vos recherches web, envoie de notification, Géolocalisation…Panier moyen plus élevé
Les - : Maintenance, long à développer, plus cher que le responsive et les sites mobiles.
2017 2018
2015 2016
2013 2014
2012 2013
2011 2012
RESPONSIVE DESIGN Faculté d’adaptation à tous les formats d’écrans
Les + : URL unique, peu couteux, SEO Friendly
Les - : Temps de téléchargement, long a développer et plus complexe, contenus peu créatifs
RISQUE EN SEO NON
URL VS SITE WEB IDENTIQUE
CODE SOURCE IDENTIQUE
DYNAMIC SERVING Faculté d’adaptation à tous les formats d’écrans (même fonctionnement que le responsive design) mais le code source est différent.
Les + : chargement plus rapide
Les - : Risqué en SEO, duplication de contenu si mal géré
RISQUE EN SEO OUI
URL VS SITE WEB IDENTIQUE
CODE SOURCE DIFFÉRENT
2017 2018
2015 2016
2013 2014
2012 2013
2011 2012 LES ENJEUX DU MOBILE EN 2017- WELCOM 15 FEVRIER 2017
QUELLE TECHNOLOGIE MOBILE FRIENDLY ?
GOOGLE AMP: LA VERSION MOBILE DU FUTUR?
Accelarate Mobile Pages (projet open source) Affichage instantané des pages sur mobile
La performance pour un affichage ultra rapide ! « Standard AMP » : format d’écriture HTML
complété et optimisé (deux versions HTML pour ses pages web
Est de plus en plus appliqué au m-commerce :
Ebay en juillet 2016, Wizishop en janvier 2017 Nouvel onglet dans Google Search Console
depuis fin 2016
GOOGLE AMP C’EST QUOI
TOUJOURS PLUS VITE ! 2017 2018
2015 2016
2013 2014
20122013
2011 2012
GOOGLE AMP EN PRATIQUE
LE CARROUSSEL LE SEARCH
2017 2018
2015 2016
2013 2014
2012 2013
2011 2012
VERSION AMP
VERSION MOBILE
HTML,CSS, JS super light
Balises HTML AMP spécifiques
Système de cache (CDN mis à dispo gratuitement par Google)
Pré chargement depuis la SERP
GOOGLE AMP FONCTIONNEMENT
2017 2018
2015 2016
2013 2014
2012 2013
2011 2012
https://www.google.fr/amp/s/www.melty.fr/amp/brad-pitt-apres-son-divorce-il-se-lance-dans-un-nouveau-projet-a589719.html
GOOGLE AMP
LES + Pages 10 fois moins lourdes, 4 fois
plus rapides
Une mise en avant des pages via un
carrousel, puis depuis peu dans les
résultats de recherche
Mise en Cache et CDN Google
Pas que Google : Facebook, Twitter
LES – - Contraintes techniques importantes, codage
très strict (une seule erreur et la page est
refusée)
Fichier CSS commun à toutes les pages
AMP inférieur à 50 ko
Impossibilité de tracker autant
d’informations que sur les versions
classiques, Difficultés d’implémentation de
la publicité, il faudra passer par une régie
accréditée
HTTPS obligatoire
2017 2018
2015 2016
2013 2014
2012 2013
2011 2012
QUELLE TECHNOLOGIE MOBILE FRIENDLY ? EN RESUME
Version mobile URL IDENTIQUE Code HTML
IDENTIQUE
FACILITE DE MISE
EN PLACE
Dynamique serving oui non Oui
Site mobile non non Non
Responsive Web
Design oui oui Oui
AMP non non ?
2017 2018
2015 2016
2013 2014
2012 2013
2011 2012
LE RÉFENCEMENT MOBILE : COMPRENDRE LE CRAWL ET
L’INDEXATION
OUI
NON
L’INDEXATION ET LE CRAWL GOOGLE
LIENS INTERNES
LIENS EXTERNES
SEARCH CONSOLE
IN
DE
XA
TI
ON
? 1 2 CRAWL / EXPLORATION INDEXATION
PERFORMANCES
2017 2018
2015 2016
2013 2014
2012 2013
2011 2012 LES ENJEUX DU MOBILE EN 2017- WELCOM 15 FEVRIER 2017
OUI
NON
L’INDEXATION ET LE CRAWL GOOGLE EN 2013
LIENS
INTERNES
LIENS
EXTERNES
SEARCH
CONSOLE
IN
DE
XA
TI
ON
?
1 2 CRAWL / EXPLORATION INDEXATION
PERFORMA
NCES
2017
2018
2015
2016
2013
2014
2012
2013
2011
2012
DYNAMIQUE SERVING Le serveur utilise un code HTML différent
en fonction du robot qui demande l’accès
Entête HTTP « Vary » : indication serveur
pour GoogleBot Smartphone
COMMENT GOOGLE BOT DÉTECTE MA VERSION MOBILE ?
SITE MOBILE Si Bonne détection du user agent , bonnes
redirections servers, annotations
bidirectionnelles.
URL CANONIQUE (rel="canonical" ),
depuis la page mobile
URL ALTERNATIVE (rel="aternate" depuis
la page desktop
2017 2018
2015 2016
2013 2014
20122013
2011 2012
RESPONSIVE DESIGN Googlebot et Google Smartphones
Détection automatique avec le CSS
AMP Détection du Url canonique
ATTENTION: Si URL différente pour un même
contenu URL canonique !
L’URL CANONIQUE
PAGE-1 PAGE-2
<head> <link rel="canonical" href="http://www.page-2/" /> </head>
2017 2018
2015 2016
2013 2014
20122013
2011 2012
MUTATIONS DU CRAWL ET DE L’INDEXATION EN 2017
MOBILE-FRIENDLY SEARCH RESULTS - 21 AVRIL 2015 Nouveau critère de classement : Contenus adaptés
au mobile sont favorisés dans les résultats de
recherche mobile.
AMP PROJECT CHEZ GOOGLE, FEVRIER 2016 Prise en charge du nouveau format mobile par
MOBILE FIRST INDEXING - 04 NOVEMBRE 2016 Indexation en priorité de la version mobile d’un site.
2017 2018
2015 2016
2013 2014
2012 2013
2011 2012
DEUX NOUVEAUX CRITÈRES DE RANKING SEO !
Le design Mobile friendly
Le temps de changement mobile
MUTATIONS DU CRAWL ET DE L’INDEXATION
OUI
NON
L’INDEXATION ET LE CRAWL GOOGLE
LIENS INTERNES
LIENS EXTERNES
SEARCH CONSOLE
IN
DE
XA
TI
ON
? 1 2 CRAWL / EXPLORATION INDEXATION
PERFORMANCES
2017 2018
2015 2016
2013 2014
2012 2013
2011 2012
OUI
NON
L’INDEXATION ET LE CRAWL GOOGLE APRES 2017
LIENS INTERNES
LIENS EXTERNES
SEARCH CONSOLE
1 2 CRAWL / EXPLORATION INDEXATION
PERFORMANCES
2017 2018
2015 2016
2013 2014
20122013
2011 2012
IND
EX
AT
ION
?
LES ENJEUX DU MOBILE EN 2017- WELCOM 15 FEVRIER 2017
MOBILE FIRST INDEXING
MOBILE FIRST INDEXING =
La version mobile sert de référence pour ranker sur le mobile ET SUR LE DESKTOP !
LES ENJEUX DU MOBILE EN 2017- WELCOM 15 FEVRIER 2017
2017 2018
2015 2016
2013 2014
2012 2013
2011 2012
QU‘EST-CE QUE CA CHANGE?
POUR LE CONTENU
Seul les sites mobiles seront impactés car contenus différents
POUR LES PERFORMANCES
Peu impacter tout le monde
QUE FAIRE POUR OPTIMISER MA VERSION MOBILE?
UN RETARD D'UNE SECONDE…
TAUX DE CONVERSION
TAILLE DU PANIER
NOMBRE DE PAGES VUES
TAUX DE REBOND
LES PERFORMANCES MOBILES
DES INTERNAUTES QUITTENT UN SITE MOBILE S’IL CHARGE TROP LENTEMENT !
49%
2017 2018
2015 2016
2013 2014
2012 2013
2011 2012
OPTIMISER MON TEMPS DE CHARGEMENT 2017 2018
2015 2016
2013 2014
2012 2013
2011 2012
Mise en cache du navigateur
Réduisez les ressources externes
Minimiser les redirections
Optimiser le chargement de la ligne
de flottaison au maximum en premier
Compresser le poids des images
BEST PRATCICES
TEMPS DE CHARGEMENT <1 SEC TEMPS DE RÉPONSE SERVEUR
< 200/300 MS
LE REFENCEMENT MOBILE EN RESUME
A NE PAS FAIRE Bloquer JS, CSS images (impossible
de détecter la version mobile)
Trop de 404 mobiles ou mauvaises
redirections
Pas de pop-up, bannières interstitielles
gênantes
A FAIRE Mettre en place correctement ses
annotations HTML sur site desktop
Implémenter correctement les balises
sémantiques (Hn, Richs Snippets
données enrichies)
Utiliser des balises HTML 5 (vidéos,
animations)
2017 2018
2015 2016
2013 2014
2012 2013
2011 2012
COMMENT TESTER MA VERSION MOBILE ?
TEST DE PERFORMANCES https://developers.google.com/speed/pagespeed/
https://www.webpagetest.org/
COMPATIBILTÉ MOBILE COMMENT SE PRÉPARER?
TEST DES DONNÉES STRUCTURÉES https://search.google.com/structured-data/testing-tool/u/0
TEST DE RENDUS https://search.google.com/search-console/mobile-
friendly
85/ 100
2017 2018
2015 2016
2013 2014
2012 2013
2011 2012
TEST D’UNE REQUETE PRODUIT SUR GOOGLE DESKTOP ET GOOGLE MOBILE
CAS PRATIQUE 2017 2018
2015 2016
2013 2014
20122013
2011 2012
SEO MOBILE 1. Amazon 2. Leroy Merlin 68/100 3. C discount 4. M.Rue du commerce 60/100
SEO DESKTOP
1. Amazon 2. Rue du Commerce 3. C Discount 4. Leroy merlin
COMPATIBILTÉ MOBILE
COMMENT SE PRÉPARER AU SEO DE DEMAIN ?
L’INDEXATION MOBILE EN 2017
MA CHECK LIST
Je teste ma version mobile
Je vérifie ses performances
Je vérifie les bonnes pratiques SEO selon ma
configuration (site mobile, responsive balises
canoniques etc…)
Balisage Hn, Balises titles et Meta description
toujours très importantes
J’ajoute mon Site Mobile dans la Search
Console, je crée un sitemap si URL
différentes.
2015 2016
2013 2014
20122013
2011 2012
2017 2018
MOBILE IS THE NEW SEO
Le SEO sur desktop, c’est fini ?
Dois-t-on réellement avoir le même contenu sur mobile et sur desktop ?
SWIPE IS THE NEW CLIC
Sur mobile, en e-commerce : rapidité, images, design épuré, pas de clic (Snapchat, Pinterest)
L’INDEXATION MOBILE EN 2017 2017 2018
2015 2016
2013 2014
20122013
2011 2012