Le site mobile friendly est celui dont la navigation est conviviale pour les utilisateurs d’appareils mobiles. Pour modifier un site web, vous pouvez utiliser la conception adaptative, l’affichage dynamique ou les URL séparées. L’exécution de ces méthodes et les concepts qui les entourent seront développés en détail à travers ce guide complet.
Conditions de Google pour un site mobile friendly
Depuis novembre 2014, Google (voir aussi notre guide de Google Actualités Récentes) donne la priorité aux sites qu’il considère comme étant un site mobile friendly. Encore faut-il savoir ce qui rend un site web convivial pour des appareils mobiles ?
Google souligne trois points à cette fin, à savoir la conception, le contenu et la vitesse de téléchargement. Il fixe aussi des critères spécifiques pour le marquage d’un site web sous la formule « site mobile friendly » :
- Un site mobile friendly ne doit pas utiliser de logiciels non supportés par les appareils mobiles.
- Le contenu textuel du site doit être lisible sans qu’il soit nécessaire de faire un zoom avant.
- La taille minimale de la police doit être de 12 pixels.
- La police elle-même doit être claire et facile à lire.
- L’utilisation d’images avec du texte doit être réduite au minimum.
- Les informations sur le site doivent être fournies de manière à s’afficher entièrement à l’écran. La navigation ne doit pas requérir un défilement horizontal ou une mise à l’échelle.
- Les liens doivent avoir assez d’espace pour que l’utilisateur n’ait pas de difficulté à cliquer dessus. Google recommande d’allouer au moins 48 dp pour l’espace entre les liens.
Google suggère aussi de concevoir le site de sorte que les utilisateurs n’aient pas à utiliser une souris. Ce dernier accessoire n’est pas en effet conçu pour fonctionner sur des appareils tactiles. La pression tactile sur un bouton devrait suffire pour ouvrir un menu plus complet. Les pop-up doivent également être minimisés. Leur abondance irrite autant les utilisateurs d’appareils mobiles que de PC.
Il ne serait pas en outre très avisé d’utiliser des pages intermédiaires dans votre site web. Placez plutôt des boutons de téléchargement rapide et d’autres éléments avec un marquage clair. Toutes ces mesures viseront à rendre la navigation du site aussi pratique et facile que possible.
Différentes façons de créer un site mobile convivial
Le contenu d’un site mobile friendly doit être dimensionné pour s’afficher clairement dans la fenêtre du navigateur de l’appareil mobile. Il ne doit pas requérir un zoom avant ou un défilement pour son affichage. Veillez aussi à ce que le contenu puisse être visualisé sur les appareils mobiles. Cela peut se faire de trois manières, à savoir une conception web adaptative, un affichage dynamique et des urnes séparées.
En passant, vous pouvez aussi consulter notre guide complet sur Google My Business. Cet article vous propose des stratégies pour apprendre comment Google My Business peut-il aider le commerce local.
Conception adaptative de site web
Google (voir aussi l’histoire derrière le logo Google) vous recommande d’utiliser dès le départ un modèle adaptatif pour votre site web. Ce dernier utilisera alors le même code HTML et la même adresse URL, quel que soit le dispositif à partir duquel il est consulté. Le site s’adaptera toutefois automatiquement à la taille de l’écran de l’utilisateur.
Cela facilite le partage et la recherche de contenus pour les moteurs de recherche. Les moteurs de recherche auront aussi plus de facilité à indexer les contenus concernés. Les sites avec une conception adaptative peuvent être entièrement personnalisés suivant l’appareil utilisé.
Cela s’applique non seulement à l’affichage du texte, mais aussi aux différentes caractéristiques du site web concerné. Ce type de site considère à la fois l’orientation en paysage et en portrait. Le temps de téléchargement est réduit, ce qui élimine la nécessité d’une redirection vers d’autres pages.
La conception adaptative a toutefois aussi ses lacunes. La création d’un design web personnalisé et de qualité pour chaque type d’appareil peut notamment prendre beaucoup de temps. Une conception adaptative de mauvaise qualité va pourtant créer une impression négative sur les utilisateurs.
L’erreur la plus courante à ce titre est de gonfler le contenu. Les utilisateurs d’appareils mobiles sont alors obligés de télécharger des images en taille réelle. Ces dernières sont pourtant conçues pour la navigation sur PC et non pour l’accès à partir d’un smartphone ou d’une tablette tactile. Une bonne conception adaptative implique la réduction des demandes HTTP, du CSS et de JavaScript. Le téléchargement de contenu visible est une priorité absolue dans cette démarche.
Ne bloquez jamais l’accès de Google à vos fichiers CSS, JavaScript et images. Google doit y avoir accès pour savoir si votre conception est adaptative. Si ces éléments sont bloqués, Google ne pourra pas qualifier votre site mobile friendly de quelques manières que ce soit.
Affichage dynamique du contenu
Les sites à affichage dynamique utilisent les mêmes URL, quel que soit le dispositif à partir duquel le site est consulté, mais utilisent des versions différentes de HTML pour chaque type de dispositif, en se basant sur le fait que le serveur peut déterminer le type d’utilisateur du navigateur.
L’affichage dynamique fournit un historique personnalisé de l’utilisateur. Le contenu du site peut être personnalisé pour un appareil spécifique et conserver son affichage d’origine sur d’autres appareils. Vous avez plus d’options pour optimiser le contenu et accélérer la vitesse de chargement sur chaque appareil. L’affichage dynamique utilise aussi la même URL pour tout dispositif. Les utilisateurs peuvent ainsi partager plus facilement des liens vers le contenu.
L’utilisation de l’affichage dynamique pour créer un contenu sur un site mobile friendly a toutefois aussi ses inconvénients. Cela commence par l’existence de plusieurs pages avec le même contenu. Toute mise à jour d’une page ou d’un article devra être faite ailleurs, ce qui complique la gestion du contenu.
Les serveurs peuvent certes identifier l’appareil à partir duquel une personne se connecte. Cette identification n’est pas toutefois totalement précise. C’est d’autant plus vrai lorsque les scripts de détection vous autorisent à dépasser les dates d’enregistrement du contenu. Les utilisateurs vont alors obtenir la mauvaise version de votre site lorsqu’ils essayeront d’y accéder.
L’adaptation de l’affichage du site à chaque appareil signifie aussi que le site s’affichera autrement selon la version utilisée. Cela crée la confusion auprès des utilisateurs et nuit ainsi à leur impression initiale. Il arrive que les robots de recherche ne détectent pas immédiatement que vous exploitez différentes versions de HTML selon l’appareil utilisé. Pour résoudre ce problème, utilisez la méthode d’en-tête HTTP standard. Pour les sites complexes, assurez-vous que Google a accès à tous vos fichiers de ressources.
Utilisation d’URL séparées
Certains sites web identifient l’appareil à partir duquel un utilisateur se connecte. Ils le redirigent ensuite vers une autre URL dont le code est différent pour chaque utilisateur. L’utilisation d’URL séparées est une approche plus flexible, car vous créez un site mobile friendly. La présentation du site peut être modifiée pour être un site mobile friendly sans que ces changements n’affectent pas d’autres appareils.
Le fait d’avoir plusieurs URL signifie toutefois que les utilisateurs sont redirigés suivant leurs appareils. Certains utilisateurs d’appareils mobiles peuvent arriver sur une page avec un niveau d’imbrication élevé. L’erreur la plus courante est de les rediriger vers la page d’accueil de la version mobile du site.
Vous devez vérifier que les utilisateurs de PC sont correctement redirigés vers la page qui leur est destinée. Cette disposition est importante dans la mesure où le contenu sera partagé simultanément avec des utilisateurs d’appareils mobiles. La redirection nécessaire pour cette démarche prolonge toutefois le temps de chargement du site web.
La gestion et la mise à jour de deux ensembles de contenus identiques sont toujours plus longues et plus complexes. Une annotation bidirectionnelle est nécessaire pour que Google comprenne la relation entre le contenu dupliqué pour les PC et les appareils mobiles. L’absence d’une telle annotation induira les robots en erreur et conduira à la duplication du contenu.
Par ailleurs, découvrez aussi sur notre guide le conseil sur les méthodes d’apprentissage automatique de Google.
Règles de base de l’optimisation pour les appareils mobiles
Il y a trois règles à suivre dans la création d’un site mobile friendly. Celles-ci ont toujours lieu de s’appliquer, quelle que soit la méthode choisie pour l’optimisation du site mobile friendly du site. La première est d’envoyer un signal approprié à Google pour qu’il sache que la page est formatée pour les appareils mobiles. Ce signal lui indiquera aussi où trouver une page équivalente et un site mobile friendly.
La deuxième est de s’assurer que toutes vos ressources sont compatibles avec les robots. Prêtez une attention particulière au fichier robots.txt. Ce dernier peut empêcher les robots de recherche d’accéder aux fichiers nécessaires à l’affichage de la page. Cela s’applique aux images, codes JavaScript et CSS. Un Googlebot ne peut pas déterminer que la page est mobile friendly s’il n’a pas accès à ces ressources.
Ne créez pas de contenus susceptibles de ne pas s’appliquer aux utilisateurs d’appareils mobiles. L’utilisation de contenus Flash n’est pas notamment une solution pour un site mobile friendly. Une telle approche va pousser votre site à l’extrémité des résultats de recherche (découvrez aussi : Comment la Recherche vocale de Google affecte le SEO ?) ou lui valoir un avertissement de Google.
Erreurs courantes dans la création de site mobile friendly
Il y a sept erreurs courantes que vous pouvez rencontrer dans la création d’un site mobile friendly. Vous n’allez pas rencontrer l’ensemble de ces erreurs lorsque vous modifiez le contenu de votre site pour des appareils mobiles. Certaines d’entre elles sont spécifiques de l’utilisation d’une conception adaptative ou d’un affichage dynamique. D’autres sont associées à l’utilisation d’URL séparées.
Téléchargement lent des pages mobiles
Un site mobile friendly doit se charger rapidement pour appareils mobiles. Ces derniers ont en effet une vitesse de connexion souvent plus faible que celle des PC. L’outil « PageSpeed Insights » de Google vous sera très utile à cette fin. Il comporte un onglet spécial avec toutes les ressources permettant d’optimiser la vitesse de chargement du site web pour les appareils mobiles.
La vitesse de chargement d’un site peut aussi être améliorée par l’application de certaines dispositions :
- Suppression du blocage des scripts Java et CSS dans les contenus visibles sans défilement ;
- Utilisation maximale de la mise en cache dans le navigateur
- Compression des images
- Réduction du code HTML, CSS et JavaScript
- ne pas utiliser la redirection vers la page cible.
Toutes ces actions donnent la priorité au téléchargement du contenu visible du site. Cela a un effet bénéfique sur la vitesse de téléchargement et le temps de réponse du serveur.
Blocage des fichiers de ressources
Il est peu judicieux de bloquer l’accès de Google aux fichiers de ressources comme les images, CSS et JavaScript. Google ne pourra pas visualiser le site comme le ferait un utilisateur quelconque. Cela aura un effet négatif sur le classement du site. Google ne pourra pas aussi reconnaître le site comme étant site mobile friendly. Vous pouvez vérifier comment Google visualise votre site web en utilisant l’outil « Fetch as Google ». Ce dernier est disponible dans le panneau « Outils » pour les webmasters.
Diagnostiquez le fichier robots.txt avec le Robots Testing Tool. Utilisez ensuite le « Mobile Friendly Test » (MFT) pour vérifier que le site web est mobile friendly. Si vous utilisez des URL séparées, utilisez MFT pour tester à la fois la version mobile et la version PC du site.
Voir aussi : Comment se protéger contre les attaques de Blast spam SEO ? Ce guide offre des techniques faciles à mettre en place pour vous aider à protéger votre site contre les attaques de Spammeur en SEO.
Réticulation incorrecte
Si un site est proposé en deux versions avec des URL distinctes, il y a de grandes chances que ces liens se confondent. La version PC peut sortir un lien destiné aux appareils mobiles et vice versa. Assurez-vous que chaque lien renvoie à la version requise du site. Ce problème se pose surtout lorsque la version mobile d’un site est installée sur des sous-domaines ou des sous-répertoires. Les liens associés aux versions mobiles des pages du site web auront en effet un codage plus élevé.
Page non existante
Un utilisateur d’appareil mobile peut parfois arriver sur une page destinée uniquement à l’accès sur PC. Il verra alors une erreur 404, ce qui signifie que la page n’existe pas. Pour corriger cette erreur, vous devez savoir quand un utilisateur mobile accède à une page pour PC. Celui-ci devra ensuite être redirigé de manière automatique vers la page souhaitée.
Contenu invisible
Certains types de contenu ne s’affichent pas sur les appareils mobiles. L’utilisateur voit un message d’erreur lorsqu’il tente d’y accéder. Pour corriger cette erreur, utilisez la norme HTML5 pour les contenus animés de votre page. Ce format peut être lu sur tous les types d’appareils. Il fournit aussi des transcriptions vidéo aux utilisateurs qui ne peuvent pas y accéder ou les visualiser pour d’autres raisons.
Utilisation de pages intermédiaires
Vous pouvez parfois rencontrer une page intermédiaire en visitant une page. Cette dernière propose à l’utilisateur de télécharger une application mobile pour l’utilisation du site. Cela donne une impression négative aux utilisateurs et crée des problèmes d’indexation de contenus pour les robots d’exploration. Google recommande d’utiliser une bannière pour la promotion de l’application mobile d’un site web.
Redirections défectueuses
Il arrive que les utilisateurs de PC soient redirigés par erreur vers la version mobile d’un et vice versa. Dans ce scénario, ils sont redirigés vers la page d’accueil et non vers la page équivalente. Cela arrive souvent lorsque les pages sont générées de façon dynamique et ne s’affichent pas bien sur la version mobile. Vous pouvez détecter ce problème en utilisant l’outil « Scan Errors » de Google pour webmasters.
