Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Site mobile et SEO - les erreurs à ne pas commettre

4,081 views

Published on

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

Published in: Internet
  • Be the first to comment

Site mobile et SEO - les erreurs à ne pas commettre

  1. 1. 1 SMX PARIS – 16 ET 17 JUIN 2014 UNE QUESTION D'AFFICHAGE? PAS SEULEMENT…
  2. 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. 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. 4 SMX PARIS – 16 ET 17 JUIN 2014 SITE RESPONSIVE AVOIR DE QUOI S'ADAPTER À TOUTES LES SITUATIONS, ÇA PEUT ÊTRE LOURD…
  5. 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. 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. 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. 8 SMX PARIS – 16 ET 17 JUIN 2014 DYNAMIC SERVING VARY:USER-AGENT = ATTENTION AUX DOMMAGES COLLATÉRAUX 1 URL
  9. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 23 SMX PARIS – 16 ET 17 JUIN 2014 Aymeric Bouillat Twitter: @aymerictwit Consultant SEO @ Resoneo MERCI POUR VOTRE ATTENTION!

×