34
CONFERENCE WELCOM 15 FEVRIER 2017

Mobile et e-commerce 2017 : Google AMP, Mobile First Index

Embed Size (px)

Citation preview

Page 1: Mobile et e-commerce 2017 : Google AMP, Mobile First Index

CONFERENCE WELCOM 15 FEVRIER 2017

Page 2: Mobile et e-commerce 2017 : Google AMP, Mobile First Index

LE MOBILE, ENJEU MAJEUR DU E-COMMERCE

Page 3: Mobile et e-commerce 2017 : Google AMP, Mobile First Index

LE MOBILE, EST-CE VRAIMENT INDISPENSABLE POUR MON

E-COMMERCE ?

Page 4: Mobile et e-commerce 2017 : Google AMP, Mobile First Index

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%

Page 5: Mobile et e-commerce 2017 : Google AMP, Mobile First Index

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

Page 6: Mobile et e-commerce 2017 : Google AMP, Mobile First Index

QUELLE TECHNOLOGIE MOBILE FRIENDLY ?

Page 7: Mobile et e-commerce 2017 : Google AMP, Mobile First Index

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

Page 8: Mobile et e-commerce 2017 : Google AMP, Mobile First Index

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 ?

Page 9: Mobile et e-commerce 2017 : Google AMP, Mobile First Index

GOOGLE AMP: LA VERSION MOBILE DU FUTUR?

Page 10: Mobile et e-commerce 2017 : Google AMP, Mobile First Index

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

Page 11: Mobile et e-commerce 2017 : Google AMP, Mobile First Index

GOOGLE AMP EN PRATIQUE

LE CARROUSSEL LE SEARCH

2017 2018

2015 2016

2013 2014

2012 2013

2011 2012

VERSION AMP

VERSION MOBILE

Page 12: Mobile et e-commerce 2017 : Google AMP, Mobile First Index

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

Page 13: Mobile et e-commerce 2017 : Google AMP, Mobile First Index

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

Page 14: Mobile et e-commerce 2017 : Google AMP, Mobile First Index

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

Page 15: Mobile et e-commerce 2017 : Google AMP, Mobile First Index

LE RÉFENCEMENT MOBILE : COMPRENDRE LE CRAWL ET

L’INDEXATION

Page 16: Mobile et e-commerce 2017 : Google AMP, Mobile First Index

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

Page 17: Mobile et e-commerce 2017 : Google AMP, Mobile First Index

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

Page 18: Mobile et e-commerce 2017 : Google AMP, Mobile First Index

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 !

Page 19: Mobile et e-commerce 2017 : Google AMP, Mobile First Index

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

Page 20: Mobile et e-commerce 2017 : Google AMP, Mobile First Index

MUTATIONS DU CRAWL ET DE L’INDEXATION EN 2017

Page 21: Mobile et e-commerce 2017 : Google AMP, Mobile First Index

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

Google

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

Page 22: Mobile et e-commerce 2017 : Google AMP, Mobile First Index

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

Page 23: Mobile et e-commerce 2017 : Google AMP, Mobile First Index

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

Page 24: Mobile et e-commerce 2017 : Google AMP, Mobile First Index

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

Page 25: Mobile et e-commerce 2017 : Google AMP, Mobile First Index

QUE FAIRE POUR OPTIMISER MA VERSION MOBILE?

Page 26: Mobile et e-commerce 2017 : Google AMP, Mobile First Index

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

Page 27: Mobile et e-commerce 2017 : Google AMP, Mobile First Index

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

Page 28: Mobile et e-commerce 2017 : Google AMP, Mobile First Index

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

Page 29: Mobile et e-commerce 2017 : Google AMP, Mobile First Index

COMMENT TESTER MA VERSION MOBILE ?

Page 30: Mobile et e-commerce 2017 : Google AMP, Mobile First Index

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

Page 31: Mobile et e-commerce 2017 : Google AMP, Mobile First Index

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

Page 32: Mobile et e-commerce 2017 : Google AMP, Mobile First Index

COMMENT SE PRÉPARER AU SEO DE DEMAIN ?

Page 33: Mobile et e-commerce 2017 : Google AMP, Mobile First Index

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

Page 34: Mobile et e-commerce 2017 : Google AMP, Mobile First Index

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