Erreurs fréquentes

Cette page décrit certaines des erreurs les plus fréquentes commises par les webmasters lors de la conception d'un site Web mobile.

Fichiers JavaScript, CSS et image bloqués

Pour garantir une indexation et un affichage optimaux de votre page, Googlebot doit pouvoir accéder aux fichiers JavaScript, CSS et image que votre site Web utilise, afin de l'explorer comme un internaute ordinaire. Si le fichier robots.txt de votre site empêche l'exploration de ces éléments, cela nuit directement à l'affichage et à l'indexation de votre contenu par nos algorithmes. Par conséquent, il est possible que le classement du site ne soit pas optimal.

  1. Assurez-vous que Googlebot peut explorer vos fichiers JavaScript, CSS et image avec la fonctionnalité Explorer comme Google de notre Search Console. Cet outil reproduit fidèlement la façon dont Googlebot voit et affiche votre contenu, et vous aide à identifier et à corriger un certain nombre de problèmes d'indexation sur votre site.

  2. Vérifiez et testez votre fichier robots.txt dans notre Search Console.

  3. Effectuez un Test d'optimisation mobile de vos pages pour savoir si votre site Web est compatible avec les mobiles selon nos systèmes.

  4. Si vous utilisez d'autres URL pour vos pages mobiles, assurez-vous de tester les URL mobiles et pour ordinateur, afin de vérifier que la redirection est reconnue et peut être explorée.

Contenu ne pouvant être lu

Certains types de vidéo et de contenu, tels que les médias sous licence ou les animations Flash, ne peuvent pas être lus sur les appareils mobiles. En outre, certains lecteurs ne sont pas compatibles avec les appareils mobiles. L'impossibilité de lire le contenu d'une page Web peut être très frustrante pour les internautes.

Lorsque les internautes consultent une page dont le contenu n'est pas compatible avec un appareil mobile, un message d'erreur semblable à celui ci-dessous s'affiche :

Vidéo ne pouvant être lue

C'est le genre d'expérience que les mobinautes n'apprécient guère.

Au lieu d'utiliser un lecteur vidéo propriétaire ou de créer un contenu dans des formats non compatibles, nous vous recommandons d'utiliser les balises standards HTML5 pour inclure des vidéos ou des animations.

Pour le contenu animé affiché à l'aide de Flash ou d'autres lecteurs multimédias, pensez à utiliser des animations HTML5 qui sont acceptées par tous les navigateurs Web. Google Web Designer permet de créer facilement ces animations en HTML5.

  • Utilisez les balises standards HTML5 pour vos animations afin d'offrir une bonne expérience à tous vos internautes.
  • Utilisez une intégration vidéo lisible sur tous les appareils.
  • Envisagez de mettre la transcription de la vidéo à disposition des internautes. Votre site sera ainsi accessible aux utilisateurs de technologies de navigation assistée ou à ceux dont les navigateurs ne peuvent pas lire un format de vidéo propriétaire.

Pour en savoir plus, consultez les Bonnes pratiques relatives aux vidéos de nos Web Fundamentals (Principes fondamentaux du Web – en anglais).

URL de redirection incorrectes

Si vous avez des URL mobiles distinctes, vous devez rediriger les mobinautes de chaque URL du site pour ordinateur vers l'URL mobile adéquate. Une redirection vers d'autres pages, comme la page d'accueil, serait incorrecte.

Exemples :

  • Le serveur de votre site pour ordinateur est configuré de manière à rediriger les mobinautes vers la page d'accueil du site mobile, et cela indépendamment de l'URL demandée au départ, même si son équivalent existe sur le site mobile.
  • Les URL de votre site pour ordinateur sont générées de façon dynamique à l'aide de paramètres d'URL qui ne sont pas correctement mappés avec l'URL équivalente pour mobile. Par exemple, un internaute qui recherche les horaires de train pour une date précise sur le site pour ordinateur n'appréciera pas d'être redirigé vers une page générale de recherche d'horaires sur le site mobile. Nous vous recommandons de configurer correctement la redirection si vous disposez d'une URL équivalente pour mobile, afin de permettre aux internautes d'accéder à la page qu'ils recherchent.

  • Votre site pour ordinateur redirige certains appareils mobiles, mais pas tous. Par exemple, il est possible qu'un site ne redirige vers la version mobile que les utilisateurs d'appareils Android, et non les utilisateurs d'iPhone ou de Windows Phone.

  • Utilisez notre Search Console. Si vous êtes un utilisateur validé, nous vous envoyons un message lorsque nous détectons que l'une des pages de votre site redirige les utilisateurs de smartphones vers la page d'accueil. Nous vous indiquons également toutes les URL de redirections incorrectes que nous détectons dans la section Erreurs d'exploration (smartphones) de la Search Console. Utilisez les exemples d'URL des outils pour les webmasters comme point de départ pour identifier la source du problème de configuration de votre serveur.

  • Configurez votre serveur de sorte qu'il redirige les mobinautes vers l'URL équivalente sur votre site pour smartphone.

  • Si une page de votre site n'offre pas de page équivalente pour smartphone, laissez les mobinautes sur la page pour ordinateur au lieu de les rediriger vers la page d'accueil du site pour smartphone. Devant pareille situation, il est préférable de ne rien faire plutôt que de mal agir.

  • Essayez d'utiliser un Responsive Web Design, qui affiche le même contenu pour les utilisateurs d'ordinateurs et de smartphones.

Erreurs 404 uniquement sur mobiles

Certains sites affichent du contenu pour les utilisateurs d'ordinateurs, mais affichent une page d'erreur pour les mobinautes.

Erreurs 404 uniquement sur mobiles

Pour garantir une meilleure expérience utilisateur, si vous détectez qu'un internaute accède à une page pour ordinateur depuis un appareil mobile et que vous disposez d'une page mobile équivalente sur une URL distincte, redirigez-le vers cette URL au lieu d'afficher une page d'erreur 404 ou une page d'erreur de type "soft 404". Vérifiez également que la page mobile équivalente n'est pas elle-même une page d'erreur.

Redirections correctes
  • Utilisez notre Search Console. Si vous avez validé la propriété de votre site, nous vous enverrons une notification dans le centre de messagerie.

  • Si vous avez un site pour smartphone sur une autre URL, configurez votre serveur de sorte qu'il redirige les utilisateurs de smartphones vers l'URL équivalente sur votre site pour smartphone.

  • Si vous utilisez une diffusion dynamique, assurez-vous que la détection des user-agents est bien configurée.

  • Si une page de votre site ne dispose pas d'une page équivalente pour smartphone, laissez les utilisateurs sur la page pour ordinateur. Le mobinaute préférera accéder au contenu qu'il souhaitait consulter, plutôt que d'être redirigé vers une page d'erreur.

  • Utilisez un Responsive Web Design dans la mesure du possible. Cette configuration vous permet de présenter le même contenu aux internautes, quel que soit l'appareil qu'ils utilisent.

  • Consultez le rapport Erreurs d'exploration de notre Search Console. L'onglet "Smartphone" affiche une liste des URL détectées qui renvoient des erreurs 404 uniquement sur smartphone.

Éviter les interstitiels

Sur de nombreux sites Web, des interstitiels ou des superpositions masquent en partie ou totalement le contenu de la page consultée par l'internaute. Ces interstitiels, fréquents sur les appareils mobiles qui font la promotion de l'application native d'un site Web, sur les formulaires d'inscription à une liste de diffusion ou sous forme de publicités, peuvent nuire à l'expérience utilisateur. Dans des cas extrêmes, il arrive que l'interstitiel soit conçu pour que l'internaute peine à le faire disparaître et à consulter le véritable contenu de la page. L'espace à l'écran est limité sur les appareils mobiles, c'est pourquoi les interstitiels ont un impact négatif sur l'expérience utilisateur.

Interstitiels de téléchargement d'applications

Nombreux sont les webmasters qui font la promotion des applications natives de leur entreprise auprès des visiteurs de leur site Web mobile. Si cette opération n'est pas effectuée avec prudence, elle peut engendrer des problèmes d'indexation et perturber l'utilisation du site.

Éviter les interstitiels
L'interstitiel empêche le mobinaute d'effectuer ses tâches.
Bannière d'application
Tout en présentant l'application, la bannière permet aux mobinautes d'effectuer leurs tâches.
  • Utilisez une simple bannière pour promouvoir votre application en l'intégrant au contenu de votre page. Vous pouvez intégrer cette bannière à l'aide des éléments suivants :

    • Une bannière compatible avec le navigateur, comme une bannière Smart App pour Safari ou une bannière d'application native pour Chrome
    • Une bannière ou une image HTML, similaire à une petite annonce ordinaire, qui renvoie vers la bonne plate-forme de téléchargement d'applications
  • Si vous possédez une application Android, pensez à mettre en œuvre l'indexation des applications : lorsque votre application comporte un contenu indexé qui répond à une requête spécifique, nous affichons un bouton d'installation dans les résultats de recherche afin que les internautes puissent télécharger votre application et accéder directement à la page souhaitée sur cette dernière.

Lorsqu'un site Web affiche du contenu mobile à l'aide d'URL différentes, il est courant qu'elles contiennent un lien vers la version optimisée pour les ordinateurs, et réciproquement. Une erreur fréquente consiste à rediriger les internautes vers des pages non pertinentes. Par exemple, des pages mobiles peuvent renvoyer les mobinautes vers la page d'accueil du site pour ordinateur.

  • Vérifiez que vos liens renvoient les mobinautes vers la page appropriée.

Chargement lent des pages mobiles

Il est important de vérifier que votre site mobile se charge rapidement. Un chargement trop lent risque d'être frustrant pour les internautes.

Utilisez notre outil PageSpeed Insights pour détecter si votre page présente des problèmes qui peuvent ralentir son chargement, en vous concentrant sur la sous-rubrique "Vitesse". Essayez de régler les problèmes marqués comme "À corriger".

Pour en savoir plus, consultez les pages suivantes :

Configurer correctement votre fenêtre d'affichage

Étant donné que les visiteurs de votre site utilisent différents appareils dont la taille d'écran varie, vos pages doivent spécifier une fenêtre d'affichage à l'aide de la balise Meta associée. Cette balise indique aux navigateurs comment ajuster les dimensions de la page et les modifier pour qu'elles s'adaptent à l'appareil. Voici deux problèmes courants :

  • Utilisation de fenêtres d'affichage à largeur fixe. La page ne s'adapte alors pas correctement à toutes les tailles d'appareils (qui sont très nombreuses). En savoir plus
  • Définition d'une largeur minimale non réaliste pour la fenêtre d'affichage. Cela peut forcer les utilisateurs ayant des appareils plus petits à faire défiler la page horizontalement pour lire son contenu. Cela se produit lorsque des pages utilisent des valeurs absolues dans des déclarations CSS ou des images optimisées pour une largeur de navigateur particulière (980 px, par exemple). Pour corriger cette erreur, assurez-vous que les pages utilisent des valeurs relatives de largeur et de position pour les éléments CSS, et vérifiez que la taille des images est également évolutive. En savoir plus

Petite taille de police

Évitez de définir une taille de police trop petite et donc non lisible sur les appareils mobiles. Cela force les utilisateurs à "pincer pour zoomer" afin de lire le contenu. Après avoir spécifié une fenêtre d'affichage pour vos pages Web, définissez les tailles de police afin qu'elles s'adaptent correctement dans la fenêtre d'affichage. Pour en savoir plus sur les bonnes pratiques relatives à la taille de la police, consultez la page Utiliser des tailles de police lisibles.

Éléments tactiles trop proches

Évitez de définir des éléments tactiles tels que des boutons et des liens si proches les uns des autres qu'il est difficile pour un mobinaute de toucher avec un doigt l'élément de son choix sans atteindre un élément à proximité. Pour corriger ces erreurs, assurez-vous de dimensionner et d'espacer les boutons ainsi que les liens de navigation afin qu'ils soient adaptés aux mobinautes. Pour en savoir plus, consultez la page Dimensionner les éléments tactiles de manière appropriée.

Envoyer des commentaires concernant…