Il s'agit de présenter le contexte autour de la mise en place du Mobile Index First, les conséquences, et les moyens pour s'y préparer.

1. Nicolas Vidal
Mobile Index First
1er Mars 2018

2. 1. Le contexte
2. Les scénarii
3. Les points d'attention
4. Les outilsSommaire

3. Qui suis-je ?
● Nicolas Vidal | Expert SEO depuis 14 ans.
● Passionné par la conception UI et UX.
● Mail : nvidalseo@gmail.com. | https://kseo-conseil.fr
● Mobile : 06 87 15 11 70.
● https://www.meetup.com/fr-FR/SEO-UX-UI/
● https://www.linkedin.com/in/nicolas-vidal/

4. Le contexte

5. Mobile Index First : Le bouleversement
 Google se met à indexer la version mobile d'un site.
 Considérer la version mobile comme vraiment stratégique.
 Navigation mobile différente de la navigation desktop.

6. Mobile Index First : Pourquoi
 Favoriser la mobilité des internautes via une approche « Cross-Device ou Multi-Support »
(plus de dépendance à l’index desktop).
 L’explosion du trafic mobile (selon les zones géographiques : en Asie et en Afrique
versus en Amérique et en Europe).
 Google entame la « mutation » de son index vers le mobile afin de matcher avec
les besoins des internautes.
==> Afin de continuer à augmenter votre volume de trafic et conversions, vous avez donc
tout intérêt à ne pas rater cette « migration » vers le Mobile Index First : en terme
d’ergonomie mobile, d’expérience utilisateur mobile.

7. Mobile Index First : Ce qui change vraiment
 Besoin désormais de réfléchir “Mobile First” (conception de page, ergonomie ou
affichage des éléments sur la page).
 Avoir un site RWD (Responsive Web Design) n’est pas suffisant :
 Corriger les erreurs de navigation sur mobile.
 Optimiser la navigation mobile.
 Communiquer efficacement avec ses personas.
 Susciter une émotion.
 Répondre efficacement à leurs attentes.
 Fournir ainsi une offre de service efficace.

8. Mobile Index First : Comment savoir si on est prêt
• Bascule lourde de conséquences, et de nombreux tests sont requis.
• La bascule ne se fera pas en une seule fois mais de manière évolutive,
sur plusieurs années (5 ans selon certaines sources).
• Analyser les logs serveurs : Voir la part de Googlebot Mobile.

9. Critères de classement sur le Mobile Index First
 La vitesse de chargement (d’où le réel besoin d’optimiser le temps de chargement
pour desktop et encore plus sur mobile : les mobinautes sont plus impatients encore
que les internautes).
 L’expérience utilisateur: ergonomie, affichage et hiérarchisation des contenus,
navigation, taille des contenus, facilité de lecture.
 Qualité des contenus.

10. Les scénarii

11. Mobile Index First : Cas des sites en RWD
 Le design de la page s'adapte à la largeur de l'écran.
 Pas de détection du type de device nécessaire
(pas de changement de code).
 Google recommande l'utilisation du RWD.
 Pas de changement d'url.
 Compatible avec tous les navigateurs.
 Malus :
 Non accessible en mode hors connexion.
 Ne peut accéder aux fonctions natives du mobile
(appareil photo par exemple).

12. Responsive ou Adaptive

13. Responsive ou Adaptive
 Responsive : Le contenu de la page s'adapte à la largeur de l'écran quelque soit le
device : Afficher au mieux la page via les media queries.
Le contenu d'une même page sera consulté sur n'importe quel device.
 Adaptive (amélioration progressive) : Affiche un contenu adapté à chaque device pour
une meilleure expérience utilisateur. Les interactions sont adaptées.
En revanche, plus complexe à développer, nécessite de bien connaître ses personnas.

14. Mobile Index First : Cas de la version mobile dédiée
 Si la version mobile est moins riche que la version desktop, moins travaillée ou moins mise à
jour, il y a de fortes pertes à prévoir.
 Prévoir dans ce cas de passer à la version RWD pour ne plus avoir ce problème de contenu
non mis à jour.
Mobile > Desktop >

15. Mobile Index First : Cas des sites sans version mobile
 Prévoir une version mobile, très vite.

16. Les points
d'attention sur
Mobile

17. Points d'attention : Structure
• Configuration classique : Sitemap, robots.txt, rattachement à la search console, pas
de contenu dupliqué, url propres, temps de chargement optimisé.
• Le balisage de correspondance : Rel Alternate versus Rel Canonical.
• Adapter l’affichage au device: entre mobiles, tablettes, phablettes, les tailles de
devices sont nombreuses. La règle de la balise View-Port reste la même:
meta name=viewport content= »width=device-width, initial-scale=1″

18. Points d'attention : Templating
• Faire un check des templates: sont-ils seo-friendly? Fil d’Ariane, Balises méta,
Balise H1, Balises Hn, microdata, contenu éditorial, boutons Call To Action, liens
internes, versions /amp.
• Gérer les zones cliquables: préférer les boutons aux liens textes, difficilement
accessibles sur mobile.
• Chaque élément cliquable aura la taille minimum de 7mm et sera espacé des autres
éléments de 2 mm

19. Points d'attention : Compatibilité Desktop Mobile
• Valider la compatibilité mobile de la hp et des pages profondes, grâce à l’outil « Test
d’optimisation mobile » (lien disponible ci-après).
• Affichage des contenus entre la version mobile et desktop : Google continuera de
prendre en compte le contenu « caché » de la version desktop.
• Les contenus entre mobile et desktop doivent être synchronisés (login par exemple),
de telle sorte que le user peut naviguer entre les deux devices facilement.

20. Points d'attention : Utilisabilité Mobile
• Avertir le mobinaute des notifications, alertes, mises à jour peut se faire via le canal
haptique (vibreur).
• Limiter si possible l’utilisation du clavier.
• Permettre aux mobinautes d’identifier les éléments cliquables.
• Les appareils mobiles recèlent de tout un tas de fonctionnalités qui peuvent être
utilisées sur le site mobile.
• Adapter au contexte d’utilisation du user: jour ou nuit, bruit ou silence (prévoir des
chartes graphiques différentes).

21. Outils

22. Outils
Test d'optimisation mobile :
https://search.google.com/test/mobile-friendly?hl=fr
https://testmysite.withgoogle.com/intl/fr-fr
Analyse du temps de chargement de page par Google :
https://developers.google.com/speed/pagespeed/insights/?hl=fr

23. MERCI

24. Mobile Index First : Cas des sites en Dynamic Serving
 Même fonctionnement qu'avec le RWD.
 L’url reste identique, mais le code HTML diffère suivant le support utilisé par l’internaute.
 Le serveur web détecte (via l'entête “vary”) le device utilisé afin d'afficher le contenu adapté au
device.
 Quand l'utiliser ? Quand le RWD n'est pas possible.