Voir les blog

Comment préparer son site au Mobile First Indexing de Google

80
Wow-Score
Le Wow-Score montre la capacité d'engagement d'un billet de blog. Il est calculé en fonction de la corrélation entre le temps de lecture actif de l'utilisateur, sa vitesse de défilement et la longueur de l'article.
En savoir plus

Comment préparer son site au Mobile First Indexing de Google

Yann ANDRÉ
Comment préparer son site au Mobile First Indexing de Google

Au niveau mondial, depuis maintenant plus d'un an, l'usage du mobile a supplanté l'usage de l'ordinateur de bureau. Il semble logique que cela se répercute sur la consultation de sites web à partir des smartphone. De plus Google a annoncé dernièrement qu'il prend "à bras le corps" l'indexation des sites mobiles.

Cool 😎 Retroussons nos manches et voyons ensemble quelles sont les pistes d'amélioration envisageables pour ce nouvel enjeu.

Desktop vs Mobile Market Share Worldwide

Qu’est-ce que le Mobile First Index ?

Pour faire simple, jusqu’à présent les sites web dans leur version desktop étaient indexés par les bots de Google lors de crawls successifs. L’indexation de ces sites était l’index par défaut.

Google a annoncé en 2016 l’indexation prioritaire de la version mobile des sites web. Dans un avenir proche, l’indexation de référence sera désormais celle effectuée par les crawls du bot sur la version mobile.

Rappelons rapidement les deux méthodes les plus courantes de proposer du contenu sur mobile :

  • Proposer à l'utilisateur une version mobile complètement autonome, accessible depuis un sous-domaine (ex.: https://m.exemple.com). L’avantage de cette technique est de fournir à l'utilisateur un contenu particulièrement optimisé sur la forme (optimisation du temps de chargement des pages et de certaines expériences utilisateurs). Cependant, le principal inconvénient est d’administrer et de mettre à jour deux sites web distincts à la fois la version desktop et la version mobile.
  • S’appuyer sur la technologie des media queries et réagencer alors le contenu desktop pour qu’il s’affiche correctement sur les smartphones. C’est la technique la plus répandue, la plus simple à déployer et celle qui semble être recommandée par Google pour le mobile first-indexing.

Mon site mobile est-il indexé ?

Si vous possédez un site web, il est très probablement indexé. Pour le savoir, le plus simple est d’aller faire un tour sur Google Search Console (d’ailleurs présenté sous une nouvelle forme, depuis peu).

Si ce n’est pas le cas, il est alors franchement temps de configurer votre site web depuis votre console. Cependant, Google Search Console ne vous permet pas de savoir avec précision l’état de l’indexation et plus précisément quel type de bot (mobile ou desktop) est passé sur votre site web.

La seule méthode est l’analyse des fichiers de logs forcément disponibles tant pour un hébergement mutualisé que pour un serveur dédié. Si vous n’avez pas accès à ce type d’infos, c’est le moment d’aller demander de l’aide à la personne concernée en charge de l'infrastructure réseau de votre entreprise, à votre prestataire, ou bien à agir en solo.

Préparez-vous alors à utiliser quelques commandes UNIX avec le Terminal de votre Mac ou à partir d’un logiciel gratuit tel que Cygwin pour PC. Au préalable, il faut vous connecter à votre serveur en SSH, et accéder au dossier qui héberge vos fichiers de logs. À vous les "ls", "cd" et "grep". Pour le moment, une méthode proposée par Julien de Databulle permet de savoir rapidement si votre site est "mobile-first indexed".

Le ratio GoogleBot Mobile et GoogleBot Desktop

Dans cet exemple, 1012 logs pour Googlebot Desktop contre 30 pour Googlebot Mobile.
Verdict : le site n’est pas "mobile-first indexed".

Je vous conseille également de consulter cet article publié sur le blog portant sur l’analyse des logs avec plein d’explications à la clé.

Je compléterai l’analyse des logs avec deux outils pertinents :

  • SEO Log File Analyzer : payant, mais le tarif est raisonnable et le logiciel est facile à prendre en main.
  • Seolyzer.io : gratuit, et installable sur un hébergement mutualisé ou un serveur dédié avec une rubrique dédiée à la répartition de l’indexation "Desktop vs Mobile".

    Seolyzer en action avec les logs GoogleBot mobile et GoogleBot desktop

Optimisez son site mobile pour une indexation future

Google a clairement fait savoir que la méthode à privilégier pour proposer du contenu à destination des utilisateurs mobiles était par le biais d’un site construit en mode "responsive design".

Néanmoins, passons en revue les points clés pour savoir que votre site mobile est un site mobile dédié ou un site en responsive.

Dans les deux cas, profitez de l'optimisation pour vérifier à la fois le code http de vos pages et les backlinks. L'outil Audit de site de SEMrush est particulièrement efficace pour entamer cette optimisation.

semrush-audit-de-site.png

Si votre site est un site mobile dédié

  • Vérifiez que les contenus desktop et mobile sont similaires.
  • En tant que site mobile dédié, il est nécessaire de prendre les mêmes précautions que pour le développement d’un site desktop, savoir nommer les fichiers média avec des URL explicites, renseigner les balises alt, etc.
  • Vérifiez que les balises meta pour le titre et la description soient renseignées et identiques sur les versions desktop et mobile.
  • Enregistrez le site web mobile dédié dans Google Search Console et validez alors un sitemap XML.
  • Afin d’éviter le "duplicate content", sanctionné par Google, assurez-vous que les pages de votre site desktop contiennent le code suivant :
    <link rel="alternate" media="only screen and (max-with:640px)" href="http://m.example.com/page-1">

    Et du coté du site mobile :

    <link rel="canonical" href="http://www.example.com/page-1">
  • Pour les sites web multilingues, utilisez l’attribut hreflang="" de manière distincte entre vos versions mobile et desktop.
  • Utilisez des données structurées suivant le balisage Schema.org si votre contenu s’y prête. Reconnaissons cependant que ce balisage n’est très simple à mettre en place.
  • Vérifiez votre temps de chargement qui normalement ne devrait pas être un paramètre critique, car le site dédié aux supports mobiles est très certainement optimisé.

Si votre site mobile est un site en responsive design

Techniquement, si le site desktop est déjà optimisé, peu de changements sont à prévoir.

Cependant, passons en revue quelques points importants.

Tout d’abord, idéalement et c’est encore plus vrai dorénavant, les sites web devraient être construits suivant la technique du Mobile First par opposition à celle majoritaire du "desktop-first". De quoi s’agit-il ? Dans la plupart des cas, les sites web sont construits d’abord pour un usage de bureau (desktop-first), notamment avec l’utilisation des feuilles de styles CSS. Puis, pour la version mobile, on adapte le contenu en redimensionnant, voire en masquant certaines parties de mise en page.

Bilan : le temps de chargement sur mobile n'est pas toujours optimisé, puisque les règles "media queries" se retrouvent typiquement à la fin du fichier CSS.

En effet, rappelons que le Mobile First est envisageable quand on développe un site web à partir de zéro ou à partir de frameworks tels que Foundation Zurb ou Bootstrap et que c’est moins le cas avec des templates prêts à l’emploi pour un CMS tel que Wordpress.

Si vous souhaitez vous lancer dans la méthode de développement Mobile First, je vous conseille cet ouvrage écrit par Luke Wroblewski : Mobile first. Même si l’ouvrage n’a pas été actualisé depuis 2012, l’essentiel est là.

Prenez également le temps de réagencer votre contenu surtout si vous démarrez d’un site en version "desktop". En effet, veillez à ce que certains contenus en version mobile soient correctement placés. Par exemple, un formulaire de contact situé à gauche du contenu principal peut être un placement judicieux en version "desktop", tandis qu’en version mobile ce formulaire va se retrouver en haut de la page avant même le contenu principal. Avec un peu de développement, vous pouvez le réagencer assez facilement. Les frameworks évoqués ci-dessus permettent ce type de manipulations juste avec des classes CSS.

Content is king. Encore et encore. Les algorithmes des moteurs de recherche sont de plus en plus sophistiqués, et il est donc crucial de fournir un contenu de qualité accompagné des images et des vidéos. Ne laissez rien au hasard, misez sur le maillage interne, les liens externes et les backlinks.

En mode RWD, pour le multilingue, vérifiez les liens entre les différentes langues. Vous devriez avoir dans votre code HTML une syntaxe qui ressemble à cela (ici, la langue française à partir de la version anglaise) :

<link rel="alternate" hreflang="fr" href="https://fr.xyz.com">

Et cela pour chacune des langues embarquées. Merci à Google pour les infos supplémentaires.

Conclusion

L'usage croissant des smartphones est en train de révolutionner la manière de consommer le web. Il est primordial dans un premier temps de faire évoluer les contenus desktop, et d'optimiser les contenus mobiles existants. Restons à l'affût, le terrain de jeu est immense, de nouvelles technos sont déjà en place : AMP, les Progressive Web Apps… À suivre donc. Comme toujours.

Vérifiez la santé de votre site

Avec l'outil Audit de site de SEMrush

Please specify a valid domain, e.g., www.example.com

Vous aimez cet article ? Suivez-nous via le RSS et lisez d'autres articles intéressants :

RSS
Partager cet article
ou

Commentaires

Il reste 2000 caractères
Arnaud Decurninge
Bonjour, sympa votre article. Par contre j'ai analysé les logs de plusieurs de mes sites, et il semble que ce soit le bot de google en mode Desktop qui passe le plus (60% pour le bot desktop). N'est ce pas contradictoire avec le mobile first ? Des infos à ce sujet ?
Yann ANDRÉ
Bonjour Greg,
volontairement je n'ai pas parlé de la technologie AMP pour rester assez simple dans cette approche. D'autant que les recommandations Google soulignent l'importance d'avoir un site en rwd dans un premier temps. Optimiser son site mobile est déja à mon sens un chantier "engageant" avec l'optimisation du temps de chargement des pages, l'optimisation des styles CSS et bien évidemment le parcours utilisateur (qui dans certains cas peut-être très différent de celui du site dans sa version desktop). Et en effet, l'AMP c'est tout de même faire le sacrifice d'une identité graphique déjà bien définie. Mais là il s'agit alors plus de privilégier le fond que la forme.
Greg
Yann ANDRÉ
Merci d'avoir répondu. Je suis bien d'accord avec toi. Continuez comme ça les gars, votre blog est instructif.
Yann ANDRÉ
Greg
Merci pour tes encouragements. Stay tuned!
Greg
Bjr,
Perso je n'ai pas encore passé le pas vers AMP, mon site étant responsive design et assez rapide. Je ne sais pas si ce serait un + ou un - (la perte de mon design).