Ne faites pas ces erreurs ridiculement simples de référencement mobile

Temps de lecture: 6 minutes

À moins que vous ne vous connectiez à Internet avec un modem 56K connecté à votre Tangerine iBook G3, vous avez sans doute entendu dire que l’utilisation de l’internet mobile surpasse celle de l’ordinateur de bureau depuis plus d’un an maintenant. Le référencement mobile et l'expérience mobile sont peut-être les considérations les plus importantes pour votre site après le contenu lui-même.

StatCounter Global Stats - Comparaison de plates-formesSource: StatCounter Global Stats – Part de marché de comparaison de plates-formes

En fait, il est si important que Google ait annoncé l'an dernier qu'il indexerait tout le contenu en fonction de ses performances sur les appareils mobiles et qu'il l'appelait «Indexage d'abord mobile». Dans un avenir très proche, peu importe la qualité de votre contenu si votre site ne fonctionne pas sur les appareils mobiles.

Votre site fonctionne donc mieux sur un ordinateur de bureau, n'est-ce pas?

Ce problème est assez rare de nos jours, car heureusement, les développeurs n’ont pas ignoré l’essor du mobile. Aujourd'hui, la plupart des grandes plates-formes prennent en charge la conception réactive, l'interface et le contenu étant automatiquement adaptés à la taille de votre écran, à l'aide de CSS.

Designs responsive bien conçus: la voie du web moderne

Tangerine iBook G3Même si vous utilisez le magnifique iBook G3 Tangerine, vous expérimentez les merveilles d'un design réactif. La résolution de cet ordinateur est de 800 × 600, ce qui est bien inférieur à la résolution d’un smartphone moderne et est suffisamment faible pour déclencher la version mobile de la plupart des sites Web réactifs.

Les développeurs définissent des points d'arrêt dans CSS qui déclenchent différents ensembles de règles de conception en fonction de la taille de l'écran, tels que le remplacement de la navigation dans les menus du bureau par un menu mobile «hamburger» pliable et le redimensionnement de la largeur du contenu et de la taille de la police pour en faciliter la lecture.

Choses que vous devriez rechercher:

  • Toutes les pages fonctionnent sur votre téléphone
  • Beaucoup trop petit texte ou des boutons
  • Éléments manquants, comme la navigation
  • Le paysage montre toujours la vue mobile (les téléphones sont GRANDS de nos jours!)

Google veut vraiment que vous le fassiez

Ils se sont mis en quatre pour vous aider avec le mobile, y compris des outils de test de cuisson directement dans le navigateur Chrome que vous utilisez probablement en ce moment! Google Lighthouse, qui était auparavant une extension pour Chrome, est désormais intégré aux outils de développement. En outre, vous pouvez utiliser les outils de développement pour simuler exactement l’apparence de vos pages sur divers appareils mobiles. Dans le menu Chrome (les trois points à droite de la barre d'adresse), allez simplement à Plus d'outils -> Outils de développement.

Et n'oubliez pas – testez ceci sur votre propre téléphone! Vérifier une vue mobile simulée est une bonne chose, mais j’ai trouvé des tonnes de problèmes simplement en mettant le doigt sur le téléphone et en cherchant si je pouvais la casser.

Toujours tergiverser sur HTTPS?

Il est rare de voir un site qui n’est pas sur HTTPS de nos jours, car la sécurité Internet est l’un des sujets les plus importants aujourd’hui. Ceci est particulièrement important pour le référencement mobile, car les moteurs de recherche savent que des pages de mauvaise qualité et malveillantes pourraient s'enliser ou même détourner les navigateurs mobiles. La position de Google est claire:

Vous devez toujours protéger tous vos sites Web avec HTTPS, même s'ils ne gèrent pas les communications sensibles. Outre la sécurité essentielle et l’intégrité des données de vos sites Web et des informations personnelles de vos utilisateurs, le protocole HTTPS est indispensable à de nombreuses nouvelles fonctionnalités de navigateur, en particulier celles requises pour les applications Web progressives.

–Grandes Fondations Google

Google s’intéresse vraiment à cela, à tel point que c’est un test succès / échec dans leur outil d’audit Lighthouse. C’est aussi un gain très rapide et peu coûteux: les certificats SSL peuvent coûter aussi peu que 17 $ par an et certains fournisseurs d’hébergement les fournissent même gratuitement aux clients actuels.

Choses à surveiller

Si vous avez le SSL en place, excellent! Il peut encore y avoir quelques pièges que vous devriez parcourir sur votre site et vérifier, notamment:

  • Toutes les pages ne montrent pas HTTPS
  • Pages qui présentent un HTTPS défectueux (contenu mixte, signifié par une petite icône de verrou cassé)
  • HTTP et HTTPS rendent la page (HTTP devrait plutôt rediriger vers HTTPS)

Vos images sont trop énormes

C’est vraiment bien que vous ayez pris de belles photos professionnelles haute résolution pour votre site. Cependant, avez-vous vérifié la taille de ces images sur la page? Sont-ils téléchargés à une résolution énorme et réduits en HTML? Dans ce cas, vous perdez un temps de téléchargement inutile, vous tuez l’expérience mobile de vos utilisateurs et vous gâchez le référencement de votre mobile. Le chargement de ces images sur les connexions cellulaires prend une éternité, et les ressources beaucoup plus limitées des appareils mobiles peuvent avoir du mal à les redimensionner et à les afficher.

Échelle tes images

J'ai vu des sites avec des images téléchargées sur la page avec une résolution si élevée, une visite sur cette page par jour serait suffisant pour graver un forfait de données mobiles normal! Vos images doivent être téléchargées deux fois plus grand que la taille d'affichage souhaitée, ce qui leur donnera une belle apparence sur les écrans haute résolution mobiles tout en conservant une taille raisonnable.

Utiliser une compression sans perte

Si vous n’avez jamais entendu parler de cela auparavant, c’est bien. La compression sans perte est un processus magique qui supprime toutes les données superflues d’une image qui n’est pas nécessaire pour l’afficher. La compression sans perte peut réduire la taille de votre image souvent de plus de la moitié.

C’est tellement magique, en fait, que la bibliothèque la plus courante s'appelle Image Magick. Si vous utilisez une plate-forme Web, il y a de fortes chances que cette bibliothèque soit intégrée et pourrait être un bouton à distance permettant d’accélérer considérablement votre site.

GT Metrix est un excellent outil pour tester la compression d’images sans perte sur votre site. Non seulement il vous montrera combien chaque image sera économisée, mais il effectuera également la compression sans perte et vous permettra de télécharger chaque image résultante!

«Cette page a l’impression que cela prendorever! "

La chose la plus importante pour vos visiteurs mobiles est la rapidité avec laquelle la page se sent. Même si votre page contient 100 images gigantesques et prend beaucoup de temps à télécharger, vous pouvez la créer. ressentir très rapidement en veillant à ce que le contenu «au-dessus du pli» soit chargé et affiché le plus rapidement possible. Google fait référence à cela comme une priorité pour la première peinture significative, et c’est quelque chose que leurs robots d'exploration accordent à beaucoup de valeur.

Image de Google Developer

Vous pouvez suivre quelques étapes très simples pour surcharger votre contenu visible initial:

Pourquoi ne puis-je pas zoomer? Je ne peux pas lire ceci!

L’accessibilité est un problème majeur pour Google de nos jours, et à juste titre. L'objectif premier de mobile-first est de faire en sorte qu'un maximum de personnes puissent utiliser votre contenu sur autant d'appareils que possible. Il est facile de tomber dans le piège de voir votre site bien paraître. votre téléphone élégant et brillant, même s’il risque de ne pas fonctionner sur l’iPhone 4 vieillissant.

Il y a quelques points à surveiller, notamment:

  • Vous pouvez pincer pour zoomer, même si la page est réactive et déjà dimensionnée pour votre appareil
  • Tout le texte est lisible, même les légendes et le texte de pied de page
  • Toutes les images ont bien évolué
  • Aucun des éléments ne se chevauchent de manière étrange
  • Les choses sont faciles à toucher et à naviguer (toucher les cibles)

Relevez le défi «Une personne raisonnable qui joue avec son téléphone en attendant quelque part»

Également connu sous le nom de défi RPPWTPWWS, cet important test est la toute première chose que je fais lors de l'audit d'un site mobile. Avant d’ouvrir un outil, il est important de sortir votre propre appareil et d’utiliser le site. Cherchez des choses «off», ennuyeuses, qui ne fonctionnent pas correctement, etc. En principe, tout ce qui vous dérangerait si vous essayiez d'utiliser rapidement le site sur votre téléphone pendant que vous attendiez, comme au supermarché ou quelque chose. N'oubliez pas que vous vous battez pour des SMS et des images de chats, alors rendez votre expérience aussi conviviale que possible!