Référencement de site mobile: les erreurs à ne pas commettre. Conférence sur le SEO mobile lors du SMXParis 2014 avec :
- Aymeric Bouillat, Consultant SEO, Resoneo (partie présentée ci dessus) @aymerictwit
- Zineb Ait Bahajji, Webmaster Trends Analyst, Google
- Rebecca Birnbaum, Responsable des partenariats produit, google
Modérateur :
- Virgile Juhan, Journaliste, Journal du Net
Site mobile et SEO - les erreurs à ne pas commettre
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!