Comment réussir le test Google Mobile-Friendly et obtenir un score de 100 %

Il est probable que le 21 avril 2015 restera gravé à jamais dans le cerveau de chaque spécialiste du marketing numérique, c’est-à-dire la date à laquelle Google a commencé à étendre son utilisation de la convivialité mobile comme signal de classement. Vous n’avez pas besoin de chercher très fort pour trouver un article, un guide des meilleures pratiques ou une actualité qui a été influencé par le buzz autour de l’annonce. En fait, au moment où j’écris cet article, il y a déjà eu deux articles très populaires sur le blog principal de Moz soulignant ce sujet : un excellent article de Cindy Krum répondant à quelques questions importantes sur la mise à jour, et un article de Billy Hoffman sur l’optimisation de votre mobile performances des sites.

Cet article va examiner de plus près le test adapté aux mobiles de Google et mettre en évidence exactement ce que signifie réussir ou échouer le test. Je présenterai également deux outils gratuits que mon bon ami Kostas Voudouris et moi avons construits pour vous aider à analyser la convivialité mobile de votre site.

Le test adapté aux mobiles de Google

Vous connaissez probablement déjà le test adapté aux mobiles de Google :

Mis à part les “indices” sur la gauche, vous n’obtenez pas beaucoup de commentaires autres qu’une réponse “oui” ou “non” pour savoir si votre page est adaptée aux mobiles. (Notez l’utilisation du mot “page” plutôt que ” site” car cette mise à jour est une mise à jour au niveau de la page). Vous obtenez encore moins d’informations si votre page réussit le test : il n’y a pas de conseils pratiques sur la gauche indiquant les domaines qui pourraient encore être améliorés, même si la page est considérée comme adaptée aux mobiles .

Cependant, ce que la plupart d’entre vous ne savent peut-être pas déjà, c’est que derrière le test Google mobile-Friendly se cache une pléthore de données intéressantes, notamment :

• Score/pourcentage adapté aux mobiles
• Score d’impact de la règle pour chacun des domaines affectant le score/pourcentage adapté aux mobiles
• Nombre de ressources “récupérées”, y compris les URL respectives
• Nombre d’échecs de récupération de ressources

Vous pouvez désormais accéder gratuitement à ces données en utilisant l’extension Chrome du vérificateur adapté aux mobiles et le vérificateur de masse adapté aux mobiles sur URLitor.com.

Utilisation du vérificateur adapté aux mobiles

Pour obtenir un aperçu rapide des données de chaque page que vous visitez, vous pouvez utiliser l’extension Chrome. Il vous montre le score, ainsi qu’un signal pratique à code couleur indiquant si votre page est adaptée aux mobiles (vert) ou non (rouge) :

L’extension vous donne également la possibilité d’afficher la page comme Googlebot Mobile la voit, ainsi que l’intégration avec le vérificateur de masse adapté aux mobiles hébergé sur URLitor.com.

Le vérificateur de masse est un outil puissant qui vous permet de vérifier plusieurs pages à la fois et offre la possibilité de télécharger toutes ces données dans une feuille de calcul :

Il convient de mentionner que vous n’avez pas besoin d’une clé API pour utiliser l’un ou l’autre de ces outils. Ils sont tous deux gratuits pour tous et le resteront tant que nous serons en mesure d’accéder aux données de Google.

Examinons maintenant certaines de ces données et comment vous pouvez les utiliser à votre avantage.

Règles mobiles expliquées

D’après les données, cinq règles ont un impact sur le score d’adaptation aux mobiles que vous recevez de Google :

1. Configuration de la fenêtre d’affichage – Déclenché lorsque Google détecte que votre page ne spécifie pas de fenêtre d’affichage ou spécifie une fenêtre d’affichage qui ne s’adapte pas à différents appareils

2. Lisibilité de la police – Déclenché lorsque Google détecte que le texte de la page est trop petit pour être lisible

3. Utilisation de plugins incompatibles – Déclenché lorsque Google détecte l’utilisation de plugins sur votre page

4. Contenu vers la fenêtre d’affichage – Déclenché lorsque Google détecte que le contenu de la page ne tient pas horizontalement dans la taille de la fenêtre d’affichage spécifiée, obligeant ainsi l’utilisateur à effectuer un panoramique horizontal pour afficher tout le contenu

5. Taille et proximité des liens – Déclenché lorsque Google détecte que certaines cibles tactiles (par exemple, des boutons, des liens ou des champs de formulaire) peuvent être trop petites ou trop rapprochées pour qu’un utilisateur puisse appuyer facilement sur un écran tactile

Nous avons analysé les scores pour un certain nombre de pages (> 4 000). Il semble que si une page réussit le test, il existe une corrélation très étroite entre le score d’adaptation aux mobiles et les scores d’impact des règles. En d’autres termes, il semble que cela soit vrai :

Score adapté aux mobiles ≈ 100 – (total des scores d’impact des règles)

Cependant, cela ne semble pas être le cas lorsque nous examinons des pages qui ne réussissent pas le test. Par exemple, la page d’accueil de l’Associated Press (http://ap.org) ne passe pas actuellement le test adapté aux mobiles :

Score adapté aux mobiles = 55

• Configuration de la fenêtre = dix
• Lisibilité de la police = 40
• Utilisation de plugins incompatibles = 0
• Contenu à afficher = 25.033371548814813
• Taille et proximité des liens = 13.096301020408161

Total des scores d’impact des règles = 88 (au nombre entier le plus proche)

Par conséquent, en utilisant la formule ci-dessus, le score adapté aux mobiles devrait être de 12 au lieu de 55.

Notes maximales, minimales et de passage

Comme mentionné précédemment, nous avons analysé les scores de plus de 4 000 pages. Les pages que nous avons analysées étaient la page d’accueil des sites répertoriés dans la liste SEMrush Rank des meilleurs domaines pour la base de données google.com (http://www.semrush.com/info/rank.html).

À partir de notre analyse, nous avons pu déterminer que la note de passage est de 80 ou plus :

Nous en avons également déduit que le score maximum adapté aux mobiles que vous pouvez atteindre est de 100, étant donné que toutes les pages passant avec un score de 100 ont obtenu un score de 0 pour chaque impact de règle et que nous n’avons vu aucune page obtenir un score supérieur à 100.

La grande majorité des pages qui ne réussissent pas le test semblent obtenir un score compris entre 58 et 67.

Plus important encore, au 17 avril, compte tenu des 4 000 pages que nous avons analysées, environ 75 % des pages étaient considérées comme adaptées aux mobiles.

Alors que le score minimum possible pour chaque impact de règle est clairement de 0, le score maximum possible pour chaque règle est moins clair. Examinons chaque règle individuellement :

Configuration de la fenêtre

D’après l’analyse jusqu’à présent, nous n’avons observé que quatre scores différents pour cette règle : 0, 0,1, 3 et 10. Il semblerait donc que le score maximum possible pour cette règle soit de 10 sur la base des données que nous avons collectées. Si nous revoyons les conditions de cette règle déclenchant “la page ne spécifie pas de fenêtre d’affichage, ou spécifie une fenêtre d’affichage qui ne s’adapte pas à différents appareils”, il est logique qu’il n’y ait pas une plage de valeurs plus large possible, étant donné que vous avez soit implémenté la balise sur la page, a implémenté la balise de manière incorrecte ou n’a pas implémenté la balise du tout.

Lisibilité de la police

Le score maximum possible pour cette règle semble être de 40. De nombreuses pages que nous avons analysées ont atteint ce score maximum. Pour l’instant, nous n’avons pas vu de score de page supérieur à 40. Nous avons également effectué un test sur mon propre site pour voir si nous pouvions obtenir un score plus élevé. Afin de tester cela, nous avons créé une page avec du texte et défini la taille de la police sur 1 pixel (sans fenêtre d’affichage configurée). Cette règle est censée se déclencher lorsque le texte de la page est trop petit. Nous avons donc expérimenté des tailles de police plus petites, mais nous n’avons pas pu atteindre un score supérieur à 40 pour cette règle.

Utilisation de plugins incompatibles

C’est peut-être la règle la plus difficile pour déterminer une valeur maximale. Cela est probablement dû au fait que très peu de pages que nous avons analysées étaient concernées par cette règle (1 % des pages concernées). Au début, il est apparu que les pages concernées n’obtenaient pas un score supérieur à 3,9. Cependant, avec un ensemble de données accru, nous avons trouvé une page avec un score de 34,99456 et une autre page avec un énorme 178.

La page qui a reçu un score de 178 est un site pour adultes (je ne partagerai donc pas l’URL ici) et la page qui a reçu un score de 34,99456 est un site de Mahjong en ligne populaire (http://www.247mahjong.com/ ). Ces sites utilisent clairement de nombreux plugins, que ce soit pour du contenu vidéo ou de jeu.

Fait intéressant, la majorité des pages concernées ont obtenu un score compris entre 3 et 3,9. (Bizarrement, aucune page n’a obtenu de score entre 0 et 3 pour cette règle). Après avoir examiné un certain nombre de ces pages, plusieurs types de plug-ins ont été utilisés, notamment :

• Compteurs de coups/statistiques
• Images flash/logos et diaporamas

Vous pouvez généralement savoir où se trouvent les plugins incompatibles soit en regardant comment Googlebot voit la page, soit en effectuant quelques recherches simples dans le code source de la page.

Contenu à afficher

Comme pour la règle de lisibilité des polices, il semble y avoir un score maximum clair pour cette règle. D’après les pages analysées, il semblerait que la note maximale possible soit de 50. Cependant, contrairement à la règle de lisibilité des polices (et plus proche de la règle d’utilisation de plugins incompatibles), aucune page n’atteint une note comprise entre 0 et 3.

Taille et proximité des liens

C’est la règle qui semble affecter plus de pages que toute autre règle. En fait, près de 83% des pages analysées étaient concernées par cette règle, on pourrait donc dire qu’il s’agit du problème le plus courant. En termes de score maximum, c’est un peu plus difficile à déterminer car une seule page a marqué 30 (http://barnesandnobleinc.com/) avec toutes les autres pages affectées, marquant moins. J’ai également effectué un test en créant de nombreux liens minuscules rapprochés sur la page et je n’ai pas pu obtenir un score supérieur à 30 pour cette règle.

Dans la section suivante, nous examinerons quelques exemples de solutions à certains de ces problèmes.

La page d’accueil du club de football de première ligue passe actuellement le test adapté aux mobiles avec un score respectable de 96 :

www.ManUtd.com (score adapté aux mobiles = 96)

Voici comment Googlebot voit actuellement la page d’accueil :

Là où il manque un score parfait de 100, c’est avec l’utilisation de la règle des plugins incompatibles. Actuellement, il reçoit un score de 3 pour cet impact de règle, ce qui a réduit le score adapté aux mobiles à 96.

En regardant le site et le code source, il y a une image/bannière d’en-tête qui utilise Flash.

Lorsque nous supprimons cet en-tête de la page de test de mon site, le score grimpe à 100 :

Comme déjà mentionné, le problème le plus courant affectant les pages si la taille et la proximité des liens règlent l’impact. La page d’accueil du système d’exploitation Ubuntu Linux souffre également légèrement de ce problème, ce qui se traduit par un score adapté aux mobiles juste en dessous de la barre des 100.

www.Ubuntu.com (score adapté aux mobiles = 99)

Ceci est intéressant étant donné qu’à première vue, le site Ubuntu a un site réactif bien conçu pour les appareils mobiles. Cependant, un problème courant que nous avons remarqué avec les sites réactifs est que les liens de pied de page ont tendance à être encore trop petits pour les appareils mobiles. En regardant la page d’accueil d’Ubuntu, nous dirions certainement que les liens de pied de page sont un peu trop petits pour mes doigts :

Il n’est donc pas surprenant qu’une fois que nous avons supprimé le pied de page de la version de test de la page d’accueil d’Ubuntu, il ait reçu un score de 100.

Conclusion

On ne sait pas vraiment ce qui se passera au fur et à mesure que le déploiement mobile se poursuivra. On nous a dit qu’il serait plus grand que Panda et Penguin, et beaucoup le surnomment déjà Mobilegeddon ou Mobilepocalypse.

Veuillez noter que même si nous vous donnons les connaissances nécessaires pour obtenir une note de passage de 100 au test Google adapté aux mobiles, cela ne garantit pas que votre classement sur les appareils mobiles montera soudainement dans la stratosphère. Nous vous donnons simplement la possibilité d’identifier et de résoudre les problèmes que Google juge importants lors de la classification des pages comme adaptées aux mobiles.

La prochaine fois que vous exécuterez le test, vérifiez si votre score est proche de 80, car vous pourriez “rendre” votre site Web adapté aux mobiles simplement en modifiant quelques lignes de code sur votre modèle. Encore une fois, si votre site Web réussit le test, ne vous arrêtez pas là. Visez 100. Nous ne savons pas dans quelle mesure Google examine le score réel, mais au moins, vous offrirez une meilleure expérience utilisateur à vos visiteurs.