1.
1
SMX PARIS – 16 ET 17 JUIN 2014
UNE QUESTION D'AFFICHAGE?
PAS SEULEMENT…

2.
2
SMX PARIS – 16 ET 17 JUIN 2014
SEO ET MOBILITÉ
COMMENT FAIRE LE BON CHOIX?
- LES MOTS CLÉS UTILISÉS PAR LES MOBINAUTES SONT-ILS LES MÊMES QUE CEUX TAPÉS
PAR LES UTILISATEURS DESKTOP ?
- LES UTILISATEURS MOBILE ET DESKTOP CONVERTISSENT-ILS DE LA MÊME MANIÈRE ?
- LES SERVICES PROPOSÉS AUX MOBINAUTES SERONT-ILS DIFFÉRENTS ?
DE NOMBREUX PARAMÈTRES À PRENDRE EN COMPTE

3.
3
SMX PARIS – 16 ET 17 JUIN 2014
IL N'Y A PAS DE SOLUTION MIRACLE
Usages Performances+
= meilleure expérience utilisateur
(intimement liée au SEO)

4.
4
SMX PARIS – 16 ET 17 JUIN 2014
SITE RESPONSIVE
AVOIR DE QUOI S'ADAPTER À TOUTES LES SITUATIONS, ÇA PEUT ÊTRE LOURD…

5.
5
SMX PARIS – 16 ET 17 JUIN 2014
SITE RESPONSIVE NE RIME PAS TOUJOURS AVEC PERFORMANCES
SUR 155 SITES TESTÉS, SEULS 21 % D'ENTRE EUX SE CHARGENT EN MOINS DE 4 SECONDES
SOURCE: HTTP://WWW.TRILIBIS.COM/

6.
6
SMX PARIS – 16 ET 17 JUIN 2014
RESS, L'ALTERNATIVE?
RESS = RESPONSIVE WEB DESIGN + SERVER SIDE COMPONENTS
EX: ADAPTATION DES IMAGES POUR LE RWD (RESS)
- Détection de la taille du navigateur
- Création d'un cookie côté client
- Cookie envoyé au serveur
- Images servies redimensionnées en
fonction de la valeur du cookie
HTTP://ADAPTIVE-IMAGES.COM/
LE W3C TRAVAILLE SUR UNE SYNTAXE PERMETTANT CETTE DÉTECTION EN
NATIF VIA LES NAVIGATEURS: HTTP://RESPONSIVEIMAGES.ORG

7.
7
SMX PARIS – 16 ET 17 JUIN 2014
LE LAZY LOADING, C'EST BIEN
ON NE CHARGE QUE CE QUI S'AFFICHE À L'ÉCRAN
 HTML SNAPSHOT = PRÉVOIR UNE VERSION CACHE DE CHAQUE PAGE À
PRÉSENTER AUX CRAWLERS. (CF. AJAX https://support.google.com/webmasters/answer/174992?hl=en )
Ce que vous
voyez
Ce que vous ne
voyez pas…

8.
8
SMX PARIS – 16 ET 17 JUIN 2014
DYNAMIC SERVING
VARY:USER-AGENT = ATTENTION AUX DOMMAGES COLLATÉRAUX
1 URL

9.
9
SMX PARIS – 16 ET 17 JUIN 2014
DYNAMIC SERVING
GOOGLE RECOMMANDE L'UTILISATION DE L'EN-TÊTE VARY:USER-AGENT POUR PERMETTRE
À GOOGLEBOT-MOBILE LA DÉTECTION DES CONTENUS MOBILES
 POUR LES SERVEURS DE CACHE, CELA SIGNIFIE: UNE COPIE DE CHAQUE
PAGE HTML / USER AGENT
= DES MILLIERS DE FICHIERS POUR
UNE SEULE PAGE !
1 URL

10.
10
SMX PARIS – 16 ET 17 JUIN 2014
DYNAMIC SERVING
IMPACT SUR LES TEMPS DE CHARGEMENT
CERTAINS SERVEURS DE CACHE NE METTENT PAS EN CACHE LES PAGES QUI CONTIENNENT
"VARY: USER-AGENT" DANS LES EN-TÊTES HTTP. (EX: AKAMAI PAR DEFAUT)…
 NORMALISER LES USER-AGENT POUR AVOIR UNE VERSION SMARTPHONE, TABLETTE,
DESKTOP EN CACHE POUR CHAQUE PAGE (3 VERSIONS PAR PAGE).
1 URL

11.
11
SMX PARIS – 16 ET 17 JUIN 2014
SITE MOBILE DÉDIÉ
SOURCE: HTTP://XKCD.COM/869/
LA PORTE OUVERTE AUX REDIRECTIONS INTEMPESTIVES
2 URL

12.
12
SMX PARIS – 16 ET 17 JUIN 2014
GOOGLE
LES SERP MOBILE
LES SITES QUI NE SONT PAS MOBILE FRIENDLY PERDRONT L'AVANTAGE DANS LES SERP MOBILE
IMPLÉMENTÉ DEPUIS DEUX SEMAINES SUR GOOGLE US (ENGLISH VERSION)
SOURCE: HTTP://GOOGLEWEBMASTERCENTRAL.BLOGSPOT.FR/2014/06/FAULTY-REDIRECTS.HTML
2 URL

13.
13
SMX PARIS – 16 ET 17 JUIN 2014
J'accède à une page
spécifique sur le site
mobile
Je préfère afficher la
version classique
Je suis détecté par le
site avec un user-agent
mobile
Je ne dois pas être
redirigé vers la version
mobile!
SITE MOBILE DÉDIÉ
PROPOSER AU MOBINAUTE LA VERSION CLASSIQUE = ATTENTION AUX BOUCLES INFINIES
 REDIRECTION EN FONCTION DU REFERER OU UTILISATION DE COOKIES:
REDIRIGER L'INTERNAUTE VERS LE SITE MOBILE QUE SI IL N'Y A PAS DÉJÀ ACCÉDÉ
2 URL

14.
14
SMX PARIS – 16 ET 17 JUIN 2014
SITE MOBILE DÉDIÉ
ERREURS FRÉQUENTES
- REDIRIGER LE MOBINAUTE AYANT DEMANDÉ UNE PAGE SPÉCIFIQUE ALORS QU'AUCUNE
PAGE MOBILE ÉQUIVALENTE N'EXISTE
- PROPOSER UNE BIDIRECTIONNALITÉ SUR LA PAGINATION (CANONICAL VS ALTERNATE)
ALORS QUE LES INTERVALLES SONT DIFFÉRENTS ENTRE LES DEUX VERSIONS
- NE PAS REDIRIGER LES UTILISATEURS DESKTOP ACCÉDANT À UNE VERSION MOBILE VERS
LE SITE ADAPTÉ À LEUR DEVICE
- PENSER QUE GOOGLE VA COMPRENDRE QUE MON SITE EST MOBILE AVEC UN SOUS
DOMAINE EN "M.DOMAIN.COM" OU "MOBILE.DOMAIN.COM"
ENCORE BEAUCOUP DE SITES SE CANNIBALISENT DANS LES PAGES DE RÉSULTATS A CAUSE
DU DUPLICATE CONTENT

15.
15
SMX PARIS – 16 ET 17 JUIN 2014
SITE MOBILE
APPLICATIONS ET POPUPS
LES POPUPS QUI PROPOSENT L'INSTALLATION D'UNE APPLICATION
SUR L'APPSTORE / LE PLAYSTORE:
 mémoriser mon choix
 proposer l'application uniquement aux visiteurs réguliers
(ex: cookies)
SI VOUS DEVIEZ INSTALLER LES APPLICATIONS DE TOUS LES
SITES QUE VOUS VISITIEZ, VOTRE TÉLÉPHONE DEVIENDRAIT
VITE SATURÉ

16.
16
SMX PARIS – 16 ET 17 JUIN 2014
SITE MOBILE
POPUPS, OVERLAYS EN TOUT GENRE
- LE DOIGT DU MOBINAUTE EST PLUS LARGE QU'UN STYLET… ("X" POUR FERMER)
- L'AFFICHAGE DES BOUTONS DE PARTAGE QUI SUIVENT LE SCROLL PEUT ÊTRE GÊNANT SUR
MOBILE ET MASQUER UNE PARTIE DU CONTENU, PENSEZ-Y!

17.
17
SMX PARIS – 16 ET 17 JUIN 2014
SITE MOBILE
PARTAGES SOCIAUX
POUR UN SITE MOBILE DÉDIÉ (2 URLS), FORCER LES URL DESKTOP SUR LES BOUTONS DE
PARTAGES SOCIAUX POUR:
- REGROUPER LES SHARES, LIKE, RT.
- EVITER QUE LES UTILISATEURS DESKTOP SE RETROUVENT SUR LA VERSION MOBILE
(SI REDIRECTION UNIDIRECTIONNELLE)
EXEMPLE (facebook et bouton HTML5):
<div class="fb-like" data-href="http://www.yapasdequoi.com" data-layout="standard" data-
action="like" data-show-faces="true" data-share="true"></div>

18.
18
SMX PARIS – 16 ET 17 JUIN 2014
DETECTION DU DEVICE
LE POINT FAIBLE DE CES SOLUTIONS
PLUSIEURS PRÉCAUTIONS SONT À PRENDRE POUR
CE TYPE DE DÉTECTIONS SUR LE USER-AGENT:
- VÉRIFIER L'EXISTENCE D'UNE LISTE DE CHAÎNES DE CARACTÈRES (OU SOUS-CHAÎNES):
 mises à jour régulières afin de détecter les nouveaux user-agent, pour ne pas voir son système de
détection devenir obsolète
- NE PAS CONFONDRE TABLETTES ET SMARTPHONES EN UTILISANT DES MOTS GÉNÉRIQUES
SEULS.
EXEMPLE: ANDROID PEUT CORRESPONDRE AUX DEUX TYPES DE DEVICE

19.
19
SMX PARIS – 16 ET 17 JUIN 2014
DESKTOP, MOBILE… ET LES TABLETTES?
DIFFÉRENCIER LES TABLETTES DES TÉLÉPHONES MOBILES
- Résolutions d’écran plus proches d’un ordinateur de bureau que d’un smartphone (≈ 10’’) .
- Pas le même contexte que sur Mobile (maison, bureau, connexion WIFI).
 NE PAS DÉGRADER L’EXPÉRIENCE UTILISATEUR DES INTERNAUTES UTILISANT UNE
TABLETTE EN LES BASCULANT SUR UN SITE MOBILE

20.
20
SMX PARIS – 16 ET 17 JUIN 2014
DÉTECTION DU DEVICE
GOOGLEBOT-MOBILE VOIT IL CORRECTEMENT MON CONTENU MOBILE?
SCRIPTS ET LIBRAIRIES PERMETTANT LA DÉTECTION DU TYPE DE DEVICE:
http://detectmobilebrowsers.com/ (beaucoup de langages), http://mobiledetect.net/ (PHP), etc.
VÉRIFIER L'AFFICHAGE SUR MOBILE:
http://www.emulateurmobile.com/ (user-agent + dimension de l'écran)
http://quirktools.com/screenfly/ (dimensions de l'écran)

21.
21
SMX PARIS – 16 ET 17 JUIN 2014
LE FUTUR DU WEB MOBILE:
S'ADAPTER AUX USAGES / CONTEXTES QUI PEUVENT DÉPENDRE DE MULTIPLES FACTEURS
- orientation/inclinaison du device
- connexion wifi ou réseau operateur
- luminosité ambiante, son de l'environnement
- vitesse de déplacement du device (en voiture ou à pied ?), etc.

22.
22
SMX PARIS – 16 ET 17 JUIN 2014
MATT CUTTS
NOUS MET EN GARDE
Vers des SERP Mobile avec des résultats Desktop filtrés?...

23.
23
SMX PARIS – 16 ET 17 JUIN 2014
Aymeric Bouillat
Twitter: @aymerictwit
Consultant SEO @ Resoneo
MERCI POUR VOTRE ATTENTION!