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 à l'aide de l'outil d'inspection d'URL de la Search Console. Cet outil reproduit 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 la Search Console.

  3. Effectuez un test d'optimisation mobile de vos pages pour savoir si votre site Web est compatible avec les mobiles.

  4. Si vous utilisez des URL distinctes pour vos pages mobiles, testez à la fois 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é, utilisez des animations HTML5 qui fonctionnent dans 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 permettant une lecture 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 à l'intégration de vidéos sur la page Web Fundamentals de Google.

URL de redirection incorrectes

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

Exemples :

  • Le serveur de votre site pour ordinateur est configuré pour rediriger les mobinautes vers la page d'accueil du site pour mobile, quelle que soit l'URL qu'ils ont demandée au départ, même si son équivalent existe sur le site pour mobile.
  • Les URL de votre site pour ordinateur sont générées de façon dynamique avec des paramètres d'URL qui ne correspondent pas à 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 mobile équivalente, afin de permettre aux internautes d'accéder directement à la page qu'ils recherchent.

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

  • Utilisez la 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.

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

  • Si une page de votre site ne contient pas de page équivalente pour smartphone, laissez les internautes sur la page pour ordinateur au lieu de les rediriger vers la page d'accueil du site pour smartphone. Dans un tel cas, il est préférable de ne rien changer.

  • 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 pour mobile équivalente n'est pas elle-même une page d'erreur.

Redirections correctes
  • Utilisez la Search Console. Si vous avez validé la propriété de votre site, nous vous envoyons 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 la 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 internautes sur la page pour ordinateur. Les mobinautes préfèrent accéder au contenu qu'ils recherchaient plutôt que d'être redirigés vers une page d'erreur.

  • Utilisez un Responsive Web Design dans la mesure du possible. Cette configuration vous permet d'afficher le même contenu pour tous les internautes, quel que soit l'appareil qu'ils utilisent.

É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 dans les 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 promotion 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 que la promotion de votre application soit intégrée 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, semblable à une petite publicité ordinaire, qui renvoie vers la bonne plate-forme de téléchargement d'applications

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 pour mobile peuvent renvoyer les mobinautes vers la page d'accueil du site pour ordinateur.

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

Chargement lent des pages pour mobile

Il est important de vérifier que votre site mobile se charge rapidement. Un chargement trop lent peut être très frustrant pour les internautes.

Utilisez l'outil Google 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ésoudre 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 viewport. 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. Dans ce cas, la page ne s'ajuste 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 conçues pour avoir une meilleure apparence avec 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 oblige les utilisateurs à zoomer sur le contenu pour pouvoir le lire. 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 cette page.

É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…