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

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

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