2019 annonce une année particulièrement riche pour le SEO. Pour ses 20 ans, Google a présenté un plan d’attaque visant l’expérience utilisateur sur mobile. Le moteur de recherche a, par ailleurs, clairement affiché ses intentions avec le déploiement de l’indexation “mobile-first”. En résumé, si votre site n’offre pas une meilleure expérience mobile que celle de vos rivaux, il y a de grandes chances pour que vous voyiez ces mêmes sites vous surpasser dans les résultats de recherche (sur mobile comme sur desktop)…

L’adaptation mobile est devenue un facteur clé de votre classement dans les résultats de recherche.

Votre histoire d'amour avec le SEO commence ici

Je ne couvrirai pas dans cet article toutes les optimisations possibles pour votre site mobile, mais plutôt les erreurs communes à éviter, comment les identifier et des pistes pour les résoudre.

Si vous utilisez un CMS, comme WordPress, avec un thème responsive et une interface utilisateur soignée, ne pensez pas être épargné de ces erreurs pour autant. Je vous conseillerai même de redoubler de vigilance si vous utilisez des plugins. Suivez ce guide de référencement sur WordPress pour bien démarrer l’optimisation de votre site sur WordPress.

Comment savoir si votre site est concerné par une erreur mobile ?

Si la Google Search Console reste l’outil principal pour identifier ces erreurs dans le marketing mobile, plusieurs outils gratuits vous permettront d’auditer le potentiel SEO de la version mobile de votre site.

  • Google Mobile Test: Ce test vous en dira davantage sur la façon dont Googlebot voit votre site mobile et quels éléments de ce dernier sont considérés comme pénalisants ;
  • PageSpeed Insights: Cet outil de Google analyse le contenu de votre page afin de vous donner des recommandations pour rendre cette page plus rapide ;
  • Lighthouse: Encore une fois, il s’agit là d’un outil Google qui n’est accessible que sous Google Chrome et Chromium (disponible avec Web Developer Tools ou en tant qu’extension Chrome). Lighthouse vous permettra entre autres d’auditer la performance et l’accessibilité de vos pages ;
  • GTmetrix: Un autre analyseur de performance, indépendant de Google cette fois, qui vous permet en plus de comparer plusieurs pages (dont celles de vos concurrents…) entre elles ;
  • Search Console: Indispensable lorsque l’on s’intéresse à l’optimisation de son site, Google Search Console vous permettra d’identifier les pages comportant des erreurs sur mobile. La suite de cet article se concentrera principalement sur ces erreurs et comment les résoudre.

Voici les 7 erreurs communes à éviter pour optimiser votre interface mobile.

erreurs search console

1. Avoir des éléments cliquables trop près les uns des autres

Devoir zoomer à 300% sur son mobile pour pouvoir viser un bouton ou un lien: on est tous passés par là ! Et autant dire que l’expérience n’est pas plaisante (surtout quand on finit par cliquer sur le mauvais élément !).

Alors que faire ?

Se mettre à la place de ses utilisateurs et tester sa version mobile soi-même est certainement un début.

Selon Google, la taille optimale des éléments cliquables d’une page mobile devrait être celle du bout de votre doigt, soit 9 mm (48 pixels) toujours selon Google. Cela ne veut pas dire pour autant que chaque bouton, lien ou élément de navigation doit faire un minimum de 9 mm, mais que la surface cliquable doit se rapprocher de ce chiffre.

Ceci inclut l’aire de padding utilisée pour générer de l’espace autour de vos éléments. Aussi, si l’aire de votre élément n’est, par exemple, que de 24 par 24 pixels, vous pouvez toujours augmenter l’espace autour de celle-ci.

2. Donner de mauvaises indications sur la dimension de vos pages et leur ajustement aux navigateurs

On a trop souvent tendance à penser qu’il n’existe que 3 formats responsive: desktop, tablette et smartphone. Or, il existe de nombreuses variations entre chaque format. Prenez pour exemple la résolution de l’écran d’un Pixel 2 (411 x 731) et celle d’un iPhone 6 (375 x 667).

Les visiteurs de votre site utilisent tout un panel d’appareils différents et leur expérience ne sera pas la même si vos pages ne sont pas optimisées pour chacun de ces scénarios.

dimensions page

Alors que faire si vous rencontrez cette erreur ?

Identifiez la configuration de la balise viewport de votre site. Cette balise indique aux navigateurs comment ajuster la dimension et l’échelle de votre page en fonction de l’appareil utilisé pour la navigation. Pour cela, vous pouvez simplement saisir la commande suivante dans la barre d’adresse de votre navigateur:

view-source:https://votresite.com

puis chercher une ligne de code dans votre header commençant par <meta name= »viewport ».

Si vous n’avez pas encore configuré de balise viewport pour votre site, commencez par cela.

Une erreur souvent rencontrée avec les vieux sites est la présence d’une largeur fixe, quel que soit l’appareil utilisé. Ceci rend votre site non responsive par défaut.

<meta name= »viewport » content= »width=600″>

La recette d’une balise viewport optimisée est la suivante:

  • width=device-width doit être inclus pour correspondre à la largeur de l’appareil utilisé ;
  • initial-scale=1 doit être inclus pour définir un ratio d’1:1 entre les pixels CSS et les pixels indépendants de l’appareil.

<meta name= »viewport » content= »width=device-width, initial-scale=1″>

Prenez également soin de ne pas utiliser des éléments trop larges, ou inadaptés à une vue verticale. L’exemple le plus commun est l’utilisation d’une largeur CSS absolue pour les éléments d’une page. Si possible, optez plutôt pour une largeur de 100% (width: 100%).

3. Lier sans raison apparente les versions mobile et desktop

Ceci ne concerne que les sites ayant une version mobile avec URL séparée (exemple.com pour la version desktop et m.exemple.com pour la version mobile).

Lorsque vos utilisateurs visitent la version mobile de votre site (m.exemple.com) depuis une URL desktop (exemple.com/a-propos), faites en sorte qu’ils soient redirigés vers la page mobile correspondante (m.exemple.com/a-propos).

Dans le cas où la version mobile d’une page est inexistante (m.exemple.com/a-propos), une erreur commune consiste à rediriger l’utilisateur vers la page d’accueil mobile (exemple.com/a-propos -> m.exemple.com).

Si la version mobile de votre site est incomplète, préférez une redirection vers la version desktop des pages mobiles manquantes.

En résumé:

Si l’URL m.exemple.com/a-propos est inexistante alors une redirection vers exemple.com/a-propos sera toujours mieux perçue qu’une redirection vers m.exemple.com.

4. Bloquer des fichiers clés de type JavaScript ou CSS

L’utilisation de JavaScript continue de susciter des conversations animées chez les spécialistes SEO. Si les fichiers JavaScript ne nuisent pas à votre SEO de manière générale, il faut cependant respecter quelques règles.

Ne pas bloquer la plupart de ces fichiers est sûrement la règle de base. Google doit être capable d’identifier toute l’expérience utilisateur de vos pages.

Aussi, bloquer des fichiers clés de type JavaScript ou CSS empêche Googlebot d’effectuer cette reconnaissance, ce qui impactera très probablement le classement des pages concernées dans les résultats de recherche.

Fichier JS CSS bloques

Alors que faire si vous rencontrez cette erreur ?

Vérifiez le fichier robots.txt à la racine de votre site. En général, celui-ci est accessible via l’URL votresite.com/robots.txt. Faites en sorte qu’aucun fichier clé ne soit bloqué.

Un moyen de s’assurer que Google puisse accéder à l’intégralité de votre expérience utilisateur est de saisir votre page dans l’outil Fetch and Render de Google Search Console.

Si les deux captures d’écran ne sont pas identiques, c’est que vous cachez encore quelque chose aux moteurs de recherche ! Assurez-vous qu’il ne s’agisse pas d’un élément crucial de votre expérience utilisateur.

5. Avoir un temps de chargement de vos pages trop long

Sans surprise avec l’indexation « mobile-first » de Google, la vitesse de chargement de vos pages est devenue plus cruciale que jamais. Une vitesse de chargement trop longue n’est pas une erreur en soi, mais elle est certainement un facteur capital qui influencera votre classement dans les moteurs de recherche.

Mais qu’entend-on par une vitesse de chargement trop longue ? Que devrait-on considérer comme un temps de chargement optimal ?

Il n’y a pas vraiment de règle sur ce point, il s’agit plus de faire preuve de bon sens. Une fois de plus, l’utilisateur est roi. Faites l’expérience vous-même et jugez de la frustration rencontrée face à un chargement trop long.

La vitesse de chargement de votre page est la première expérience de vos utilisateurs avec votre site. Si celle-ci est mauvaise, il y a de grandes chances que vos utilisateurs quittent votre page avant même qu’elle ne soit chargée. Résultat: Google sort le carton jaune pour votre expérience utilisateur !

Alors que faire si votre site est trop long ?

Selon moi, l’élément le plus important à considérer est le chargement de la FMP (pour First Meaningful Paint en anglais). En termes simples, la FMP est la toute première image qui va suivre l’écran blanc de chargement de votre page. Elle est le premier élément visible par l’utilisateur du critical rendering path.

Voici un exemple:

Exemple de FMP

Comment identifier sa FMP ?

Le moyen le plus efficace est d’utiliser Chrome Web Developer Tools. Analysez votre page à l’aide de la commande Inspect de cette extension et sélectionnez l’onglet Network avant d’actualiser votre page de nouveau.

Avoir une FMP rapide donne un signal fort à vos utilisateurs que votre page est en train de charger.

Il y a plusieurs façons d’optimiser sa FMP. En plus de réduire le poids des fichiers de sa page, vous pouvez également:

  • Repousser le crawl des fichiers JavaScript par les bots ;
  • Séquencer votre code source différemment ;
  • Prioriser les éléments au-dessus de la ligne de flottaison…

Bien évidemment, il y a de nombreux autres moyens de réduire le temps de chargement de votre page et je vous invite à me laisser un commentaire pour en savoir plus ou à consulter les nombreux articles à ce sujet.

6. Utiliser des contenus non standard comme Flash

Certains types de contenu, comme les animations Flash et certaines vidéos, ne fonctionnent pas sur mobile.

Flash, par exemple, est la propriété d’Adobe et ne constitue pas un format web ouvert et standard, d’où son incompatibilité sur la plupart des appareils mobiles. Il en va de même pour d’autres lecteurs de contenus.

Que faire si votre site utilise Flash ou des supports de contenu incompatibles avec les versions mobiles ?

Je vous recommande d’opter pour des alternatives standards comme des balises HTML5 pour la lecture de vos contenus animés. Google Web Designer est un excellent outil de création HTML5 qui vous permettra de réaliser des contenus interactifs en HTML5.

Dans le cas de vidéos, un autre filet de sécurité consiste à rendre la transcription de la vidéo accessible à vos utilisateurs, aux navigateurs ainsi qu’aux moteurs de recherche. Cela évitera également beaucoup de frustration du côté de vos utilisateurs.

7. Utiliser des publicités interstitielles intrusives

Google pénalise l’affichage intrusif de publicités et pop-ups à l’écran qui couvrirait une majeure partie du contenu mobile mis à disposition de l’internaute.

Que faire si l’on a des modules intrusifs ?

Il est recommandé d’optimiser cet affichage, voire de le supprimer sur mobile.

En termes d’optimisation, il existe plusieurs formats d’affichage alternatifs. En voici trois exemples.

Le “native advertising” :

Il s’agit d’une intégration naturelle de vos publicités et autres contenus à l’écran. Le contenu s’intègre parfaitement au design, contexte et format de la page, si bien qu’il apparaît comme naturel au visiteur et n’interrompt pas la lecture de ce dernier.

La révélation :

De nouveau, l’affichage ne vient pas perturber la lecture puisque le contenu « intrusif » n’apparaît, dans ce cas, qu’une fois le bas de la page atteint.

La bannière :

Une simple bannière non intrusive qui ne dépasse pas ⅕ de la longueur de l’écran.

Que retenir de cet article ?

La question d’une expérience utilisateur réussie est au coeur des enjeux de Google et autres moteurs de recherche.

Avec des recherches de plus en plus mobiles, avoir un site responsive et optimiser l’expérience utilisateur sur mobile devient, non plus un avantage, mais une nécessité pour se faire une place dans les premiers résultats de recherche.

Pour y arriver, il faut non seulement faire en sorte de ne pas avoir d’erreur qui gâcherait cette expérience, mais aussi prendre du temps pour comprendre ce qui faciliterait le parcours des visiteurs sur son propre site mobile.

Voir en ligne