Le guide ultime pour optimiser son référencement mobile

Quand on sait que 60% des personnes font leur recherche sur leur mobile, il est évident de bien optimiser son référencement mobile.

Sommaire

• Qu’est-ce que le référencement mobile ?
• Comment optimiser son site pour le référencement mobile ?
• Comment améliorer la vitesse de ses pages sur mobile ?
• Comment savoir si mon site est optimisé pour le référencement naturel sur mobile ?

Qu’est-ce que le référencement mobile ?

Le référencement mobile ou mobile SEO rassemble toutes les techniques d’optimisation d’un site destiné à être affiché sur les smartphones et tablettes. Cette optimisation passe également par la mise à disposition des ressources en format mobile pour les robots des moteurs de recherche.

Les nouvelles habitudes de navigation des internautes ont considérablement changé ces dernières années. On constate aujourd’hui que presque 60% des recherches sont effectuées à partir d’un téléphone. Ces nouvelles habitudes ont poussé Google (et les autres moteurs de recherche) à développer des algorithmes spécifiques au référencement mobile, au grand dam des annonceurs qui ont dû rapidement modifier en profondeur leurs sites.

Google est même allé plus loin qu’un simple algorithme en créant le Mobile First Index.

Qu’est-ce que le Google Mobile First Index et quelles sont ses conséquences sur le référencement mobile ?

Le concept du Mobile First index est très simple : si auparavant il existait 2 types d’index sur Google (l’index ordinateur et l’index mobile), aujourd’hui il n’en existe plus qu’un, le mobile. En d’autres termes, même si vous effectuez une recherche depuis votre ordinateur, vous verrez apparaître les mêmes résultats que si vous aviez lancé votre recherche sur un mobile. Quel que soit l’appareil que vous utilisez, Google affiche les résultats de son index mobile.

Il est possible que vous n’ayez encore rien constaté en termes de référencement, pour 2 raisons :

Votre site était déjà adapté à la navigation sur smartphone et tablette, donc Google n’avait aucune raison de vous pénaliser ou de vous faire progresser significativement.
Votre site n’est pas encore passé en Mobile First Index. En effet, tous les sites ne sont pas encore passés à la moulinette ! Certains sont jugés comme “pas encore prêts” par Google… Ce qui veut tout et rien dire ! Certaines études mettent en avant le lien entre l’utilisation trop prononcée du Javascript et le passage au MFI. Cette théorie se tient étant donné que le JS n’est pas aimé de Google et encore moins sur mobile ! Est-ce un sursis qu’accorde Google ? Va-t-on voir des sites tomber d’un coup au bout d’un certain temps ? Seul l’avenir nous le dira…

Pour savoir si votre site est passé en Mobile First Index, il suffit d’analyser les logs. Si vous ne constatez plus aucun crawl du Search Bot, au profit du Bot Mobile, alors votre site est passé en MFI ! La Google Search Console envoie également depuis peu une notification lorsque le site est passé en MFI, ce qui est plutôt pratique pour ceux qui ne sont pas équipés d’un analyseur de logs.

Comment optimiser son site pour le référencement mobile ?

Il existe 3 méthodes pour rendre son site compatible avec la navigation mobile : le responsive design, la version mobile et l’application. Si Google aurait tendance à préférer le responsive design, à vrai dire il n’existe pas de meilleur choix. Celui-ci dépend simplement du budget et des ressources humaines de chaque société. Il vaut mieux un bon responsive design plutôt qu’une version mobile bâclée.

Le responsive design (ou site web adaptatif)

Il s’agit d’un système de “reformatage” des images qui rend un site facilement accessible quelle que soit la taille de l’écran. Le responsive design offre ainsi la meilleure expérience utilisateur possible. Les sites utilisant cette technique ont pour la grande majorité d’entre eux connu une belle ascension dans les SERP.

Quels sont les avantages du responsive design ?

Comme nous l’avons évoqué précédemment, Google a tendance à préférer les sites en responsive. On peut même dire qu’avec la sortie de son algorithme Hummingbird, le moteur de recherche incite clairement les sites à privilégier ce système.

L’une des raisons principales est que le responsive ne touche pas aux URLS, ce qui facilite leur partage avec les autres sites et met à l’abri des erreurs de contenu dupliqué. De plus, en conservant une seule URL on évite une redirection 301 qui améliore également les temps de chargement.

Au final, peut-être que Google ne favorise pas vraiment le responsive, il privilégie simplement les sites qui sont techniquement conformes à ses exigences, comme l’absence de contenu dupliqué ou la vitesse de chargement, qui ne sont pas des critères propres au Mobile First Index.

De plus, les utilisateurs sont devenus très exigeants et veulent une expérience mobile rapide et intuitive. Selon les données de Google, 61 % des visiteurs retournent dans les résultats de recherche si le site sur lequel ils sont arrivés n’est pas adapté au mobile ; 71% des utilisateurs sur mobile partiraient même après cinq secondes d’attente pour charger une page, ce qui est à la fois très court et très long !

Le taux de rebond est ainsi devenu l’un des critères les plus importants sur mobile. Un site en responsive design permet donc de réduire le taux de rebond qui est en corrélation directe avec le positionnement de vos pages.

Quels sont les inconvénients du responsive design ?

Aucune technique n’est parfaite, surtout pour Google qui a une fâcheuse tendance à se contredire sur certains aspects du SEO.

Le responsive design est contraignant et requiert une grande expertise technique pour les sites qui ne sont pas administrés avec un CMS de type Prestashop, Magento, WordPress etc. Comme les pages d’un site responsive doivent tenir compte de toutes les tailles d’écran, cela les rend plus compliquées à créer au départ. Et pour couronner le tout, Google demande de servir une seule dimension pour chaque image, ce qui va totalement à l’encontre du principe même du responsive design. Alors Google, on a un peu cafouillé sur ce coup-là ?

De plus, ce type de site à la navigation “hybride” doit satisfaire les besoins des utilisateurs sur ordinateur et des utilisateurs sur mobile. Mais les formats des écrans sont tellement différents qu’il peut parfois être difficile de contenter tout le monde. Il n’est donc pas rare de croiser des pages soi-disant “responsive” et pourtant peu User Friendly voire même … moches !

Enfin, il existe également un flou sur les différents besoins d’affichage. Prenons l’exemple d’une page d’accueil, joliment alimentée avec un gros texte optimisé qui se trouve au milieu de la page. Sur un écran d’ordinateur, ce texte n’entrave en rien la bonne navigation, surtout si le site est en full screen. Mais sur mobile, nos 500 mots deviennent totalement indigestes et anti-ergonomiques ! On pourrait donc être tentés de tronquer le texte et d’afficher un “voir plus”. Or, Google a dit il y a fort longtemps que le contenu caché dans les “voir plus” n’est pas pris en compte pour le référencement. Et aujourd’hui, il dit qu’il peut être pris en compte sur mobile s’il a été caché pour des raisons UX. La belle affaire ! Comment être sûr que notre texte sera pris en compte ? Et comment savoir à partir de quelle ligne il faut tronquer le texte, pour être sûr de ne pas être anti-UX mais dans les clous niveau SEO ? (Ceci-dit, ce problème n’est pas spécifique au responsive design).

Le site en version mobile

Les sites en version mobile fonctionnent inévitablement mieux que les sites en responsive car ils ont été spécifiquement conçus pour les petits écrans. Mais contrairement au responsive, le site mobile nécessite un changement d’URLS. Généralement, on reconnaît la version mobile grâce au petit “m” qui se situe avant le nom de domaine (exemple : m.monsite.com) ou avec un slug /mobile à la fin de l’url (monsite.com/mobile).

Les visiteurs sont automatiquement redirigés vers la version du site appropriée en fonction du type d’appareil qu’ils utilisent. Un site mobile dédié est en quelque sorte une version condensée d’un site desktop. Ses contenus et fonctionnalités sont rationalisés pour que les visiteurs puissent y accéder aussi vite que possible. Les éléments trop lourds à charger comme certaines images ou vidéos sont souvent supprimés.

Quels sont les avantages d’un site mobile ?

Les sites mobile permettent de créer des expériences de navigation “sur mesure” et adaptées à chaque appareil. Par exemple, si vos différentes analyses démontrent que vos visiteurs sur mobile accèdent très fréquemment à certaines informations, mais qu’ils lisent rarement vos communiqués de presse, vous pouvez choisir de ne pas afficher ces derniers, ce qui n’est pas possible avec un site en responsive design.

De plus, ce type de site étant spécifiquement conçu pour les mobiles, il est plus facile à développer. Il est en effet toujours plus facile de partir de zéro et de construire un site qui répond à nos besoins, plutôt que d’adapter l’existant qui pose parfois de grosses contraintes techniques.

Enfin, de par leur légèreté et la simplicité de leur code, les sites mobiles surpassent de loin les sites responsive en termes de temps de chargement, ce qui est appréciable pour la fluidité de la navigation et pour les utilisateurs qui ne possèdent qu’un petit forfait mobile.

Quels sont les inconvénients d’un site mobile ?

Une version “allégée” d’un site implique inéluctablement certains manques, notamment au niveau de certains contenus et informations. Ceci pose un problème, surtout quand on sait que nombreux sont les internautes qui passent d’un appareil à l’autre et qui s’attendent ainsi à retrouver les mêmes contenus sur leur ordinateur que sur leur mobile.

De plus, les sites mobiles engendrent un risque d’erreur au niveau des redirections. Il peut en effet arriver que des visiteurs ne soient pas redirigés vers la version mobile, accédant ainsi à un site pas du tout adapté à la navigation mobile (et gare au taux de rebond !). De plus, en ayant des URLS différentes, vous vous exposez à certaines complications au niveau du netlinking. Certaines personnes peuvent en effet partager la mauvaise URL.

Enfin, qui dit 2 versions de site, dit 2 fois plus de maintenance et de mises à jour. Tout doit être fait en double. Certains sites sont configurés de sorte qu’ils soient automatiquement mis à jour lorsque le site principal est mis à jour, mais ce n’est pas toujours le cas. Avec les nouveaux appareils qui arrivent chaque année sur le marché, le site mobile implique aussi une veille constante pour s’assurer qu’il reste adapté à ces nouveaux smartphones et tablettes.

L’application mobile

Contrairement aux sites mobile et responsive design, les applications doivent être téléchargées à partir de portails spécifiques tels que Google Play Market ou l’App Store. Elles offrent un accès plus rapide au contenu et des interactions plus fluides, mais ne conviennent pas à tous les sites. Elles sont à privilégier pour les activités très spécifiques (par exemple un GPS ou des maps) ou pour les plateformes qui nécessitent l’accès à divers contenus dynamiques. Les applications sont également intéressantes pour les sites de jeux ou les sites de services (banques, assurances …)

Quels sont les avantages de l’application mobile ?

L’avantage N°1 est sans nul doute sa praticité. Elle s’ouvre immédiatement depuis le bureau, se charge instantanément et est très intuitive. Elle permet également de paramétrer des notifications push et des fonctionnalités spécifiques qui maintiennent l’attention du client. D’un point de vue commercial, les applications mobiles constituent un excellent support pour les campagnes marketing.

Un autre avantage non négligeable est qu’il est possible de l’utiliser hors ligne. Comme elle est installée sur un appareil mobile, elle permet d’accéder aux contenus déjà chargés même sans connexion Internet.

Quels sont les inconvénients de l’application mobile ?

L’une des problématiques majeures de l’application mobile est que son fonctionnement est conditionné par le système d’exploitation utilisé par l’appareil. Certaines applications sont développées pour Android et iOS, néanmoins, les frameworks applicatifs multiplateformes ne prennent pas en charge tous les modules et toutes les fonctionnalités de chaque système d’exploitation. Ces restrictions peuvent ainsi avoir un impact direct sur le fonctionnement de l’application.

De plus, une application disponible sur plusieurs plateformes nécessite des mises à jour régulières, qui doivent être téléchargées par l’utilisateur. Et on sait que les internautes sont parfois fainéants … Certains préfèrent parfois désinstaller une appli plutôt que de s’embêter à faire les mises à jour !

Éviter les interstitiels trop intrusifs

Les Pop-in et Pop-up sont dans le collimateur de Google depuis plusieurs années car elles sont jugées trop intrusives. Elles perturbent aussi la navigation et peuvent ralentir le chargement de la page. Google autorise aujourd’hui uniquement certains formats d’interstitiels qui ne cachent pas totalement le contenu que l’internaute est venu chercher. C’est pourquoi, sur mobile, il faut les éviter autant que possible.

Faciliter la lecture du site sur mobile

Pour rendre la lecture sur mobile fluide, un seul mot d’ordre : sobriété et minimalisme ! Il faut éviter les changements intempestifs de police, de taille, de couleur … De plus, lorsqu’on souhaite intégrer un texte sur une image, il est important de le faire en CSS et non pas en fusionnant le texte directement sur l’image. Ainsi, le texte pourra s’adapter à la taille de l’écran et restera lisible. De plus, en termes d’ergonomie, il faut utiliser l’espace négatif pour construire sa page. L’espace négatif est en fait l’espace « blanc » que l’on trouve autour des éléments d’une page. Il permet d’aérer les contenus et d’améliorer la lisibilité.

Configurer la balise de contenu Viewport et utiliser le HTML5

La balise Viewport permet de définir la zone visible d’une page web. Avant l’arrivée des tablettes et smartphones, les pages étaient statiques. Aujourd’hui, la taille de la fenêtre d’affichage varie en fonction de l’appareil car les pages desktop « statiques » seraient trop grandes et leurs contenus illisibles.

Le HTML5 a marqué un tournant dans le système de codage des pages et a conduit à l’introduction de la balise meta « Viewport » qui donne les instructions d’affichage aux navigateurs. Elle s’implémente de la façon suivante :

La partie width=device-width définit la largeur de la page en fonction de la largeur de l’écran du périphérique. L’échelle initiale = 1,0 définit le niveau de zoom initial lorsque la page est chargée pour la première fois par le navigateur.

À noter que le HTML5 doit aussi être utilisé pour l’intégration de vidéo et de contenu animé.

Utiliser les barres d’onglets

Les barres d’onglets, avec leurs boutons intuitifs, permettent d’accepter rapidement aux différentes fonctionnalités d’un site. Elles peuvent également servir pour inciter les utilisateurs à se rendre sur les réseaux sociaux.

Optimiser ses titres de page

Etrangement, le nombre de caractères affichés sur les résultats mobile est plus important que sur desktop (70 contre 78 en moyenne). Vous pouvez donc écrire des titres plus longs, qui seront tronqués sur bureau mais qui seront plus efficaces sur mobile, qui rappelons le, rassemble aujourd’hui le plus gros du trafic.

Utiliser les données structurées

Les données structurées sont importantes aussi bien sur desktop que sur mobile. Sur les sites mobile, les webmasters ont tendance à les négliger. Ce sont pourtant d’excellents moyens d’attirer l’œil des internautes et de pousser au clic, ce qui améliorera le CTR !

Comment améliorer la vitesse de ses pages sur mobile ?

Le temps de chargement d’une page est une donnée importante sur ordinateur et cruciale sur mobile. Si vous souhaitez optimiser votre site pour le référencement naturel sur mobile, améliorer la vitesse de vos pages est l’un des premiers chantiers que vous devrez attaquer. Il s’agit ici d’une partie technique qu’il convient de confier à un développeur.

Réduire le temps de réponse du serveur

Si le code possède une influence sur la vitesse d’une page, le temps de réponse du serveur joue également un rôle déterminant. Mobile1st ainsi que les experts de Google et GTMetrix recommandent que votre serveur commence à transmettre le premier octet de ressources dans les 200 millisecondes suivant une requête. Si vous constatez que votre serveur est lent, il existe plusieurs solutions pour réduire ses temps de réponse :

Améliorer le logiciel ou la configuration de votre serveur web.
Assurer des ressources CPU et une mémoire adéquates.
Réduire les ressources et requêtes requises pour chaque page web.

Réduire les redirections pour accélérer la vitesse des pages mobile

Les redirections 301 ou 302 consomment de précieuses millisecondes sur des appareils mobiles qui dépendent de réseaux moins performants que l’ADSL ou la fibre. Google recommande de les réduire au maximum voire de les supprimer.

Charger le contenu au-dessus de la ligne de flottaison en premier

Un seul mot d’ordre pour le chargement du contenu : priorité au contenu visible ! En effet, il n’est pas utile de charger toute la page avant de l’afficher. En utilisant des techniques comme le lazyloading, vous pourrez charger uniquement les textes et images qui doivent s’afficher en premier.

Placer le JS en bas et le CSS en haut des fichiers HTML

D’une façon générale, il faut éviter les JavaScript, qui servent à l’interactivité de la page. Mais lorsqu’on n’a pas le choix, il faut les placer en bas du code, sous la ligne de flottaison car ils empêchent les chargements en parallèle. Les feuilles de style CSS elles, conditionnent le bon affichage de la page, elles doivent donc être chargées en premier. De plus, les bonnes pratiques veulent que les fichiers CSS et JS soit minimifiés pour réduire encore plus le poids de la page mobile. La « minification  » élimine les données redondantes ou simplement non pertinentes sans affecter l’affichage d’une page. Il existe plusieurs outils pour détecter ces données et assainir votre code.

L’AMP

L’AMP n’est pas vraiment une méthode pour améliorer sa vitesse de chargement, mais elle a les mêmes effets. Le format AMP est en fait un code HTML ultra allégé très restrictif (il ne tolère pas les JS par exemple). Les pages se chargent donc à vitesse grand V et sont en plus conservées dans le cache de Google. Elles sont particulièrement adaptées aux blogs et autres sites d’actualité. Le format AMP a néanmoins du mal à se faire une place chez les e-commerçants qui ont besoin d’interactivité (ne serait-ce que pour mettre au panier !). Certains ont tout de même tenté l’expérience comme Greenweez ou Ebay qui utilisent l’AMP pour leurs pages catégories.

Comment savoir si mon site est optimisé pour le référencement naturel sur mobile ?

Vérifier les performances et la constitution des pages

Pour vous assurer que votre site est bien optimisé pour le mobile, il existe plusieurs outils, dont certains développés par Google :

La Google Search Console : vous alerte en cas d’anomalie.
Le Test d’Optimisation Mobile de Google : met en avant les erreurs d’ergonomie.
GT Metrix et Pagespeed Insights : indique l’état de votre site d’un point de vue temps de chargement et utilisation des ressources. Met également en avant les différents problèmes de lenteur (images trop lourdes, JS mal positionnés etc).
Les options avancées de Chrome et Firefox qui permettent de voir le rendu de son site sur mobile (clic droit de la souris ou le raccourci clavier « ctrl + maj + i »).

Mesurer son CTR et son taux de rebond

Comme nous l’avions évoqué précédemment, le taux de clic (CTR) et le taux de rebond peuvent être des indicateurs de la pertinence d’un site sur mobile. Pour cela, il est intéressant de les comparer aux CTR et taux de rebond des mêmes pages sur ordinateur. Vous pouvez pour cela utiliser Google Analytics > Comportement > Contenu du site > Pages de destination. Si l’une de vos pages affiche un plus fort taux de rebond sur mobile que sur ordinateur, il y a fort à parier qu’elle comporte des anomalies d’affichage.

   Article rédigé par Louis Chevant