Le blog ecommerce

Créer sa boutique en ligne

Comment créer un site mobile friendly ?

Comment créer un site mobile friendly ?

Avec l’arrivée de Mobile first en 2015, la version mobile d’un site est devenue la version de référence pour Google dans sa manière de classer les sites dans les SERPs.

Il est donc crucial d’avoir un site adapté aux appareils mobiles pour vous assurer une meilleure visibilité dans les résultats des moteurs de recherche et améliorer votre PageRank.

Dans cet article, je vais vous montrer en quoi l’indexation Mobile first est essentielle dans la conception ou le remaniement de votre site. Nous verrons ensuite comment configurer un site pour mobile et créer du contenu optimisé. Je vous donnerai enfin quelques outils pour tester votre site et aider à améliorer votre version mobile.

Pourquoi Mobile-first est aujourd’hui incontournable ?

Saviez-vous que les algorithmes de Google évoluent sans arrêt ? Cela peut surprendre quand on voit que la page d’accueil du plus gros moteur de recherche au monde n’a guère évolué depuis tant d’années.

evolution-google

Evolution de la page d’accueil de Google entre 1997 et aujourd’hui

Et pourtant, Google n’a qu’un objectif en tête : apporter la meilleure expérience possible à ses utilisateurs pour maintenir le leadership et éviter de se faire dépasser par la concurrence.

Par optimisation de l’UX (ou user expérience), Google entend : "offrir les meilleurs résultats pour chaque requête, le plus rapidement possible, et ce, quel que soit l’appareil utilisé."

Pour y parvenir, il va scruter de très près les habitudes de consommation des utilisateurs et adapter ses algorithmes de recherche en permanence.

Le schéma ci-dessous vous montre l’évolution des attentes des internautes au fil des ans.

Google-Search-Timeline

Evolution des recherches sur Google entre 1997 et 2013

timeline-of-google-algorithm-updates

Principales mises à jour de l’algorithme Google entre 2013 et 2016

Infographie réalisée par Katherine Sellwood pour Moz

En bleu : mises à jour majeures

En rouge : mises à jour Penguin, Pigeon et Panda

En jaune : mises à jour non nommées mais qui ont fortement impacté le référencement Google

En vert : AdWords, PayDay et Pirate

Bien que non nommé sur cette infographie, l’index « Mobile first » apparaît en 2015 (en jaune sur la frise) comme étant une évolution importante dans l’histoire des algorithmes Google.

Cela correspond à une période de bascule importante : lorsque Google a constaté que les recherches sur mobile dépassaient les recherches sur ordinateur (desktop), il a développé l’index Mobile-first, faisant ainsi passer la version mobile d’un site comme étant la version de référence prise en compte pour effectuer son classement.

De la même manière, l’année 2016 marque l’apparition du RankBrain, nouvel algorithme basé sur les techniques de l’intelligence artificielle (IA) pour estimer quels sont les résultats les plus pertinents pour une requête.

Ainsi, pour afficher la meilleure position dans les SERPS de Google, les sites ont tout intérêt à s’adapter en permanence aux attentes et aux usages des internautes en leur offrant, non seulement, un contenu pertinent et rapidement accessible, mais aussi parfaitement adapté à l’utilisation Mobile.

La part des internautes qui utilisent leur smartphone pour effectuer des recherches ne cesse d’augmenter. Même si en 2018, l’utilisation de l’ordinateur de bureau reste encore majoritaire en France (56 %), elle ne va pas tarder à se faire dépasser par l’utilisation des smartphones.

StatCounter

Part de marché des différents appareils utilisés en France (ordinateur fixe, smartphone et tablette) de juin 2016 à Mai 2018

C’est pourquoi les entreprises ont tout intérêt à ne pas rater le train en marche et à adopter, dès à présent, les bonnes pratiques pour améliorer le référencement naturel de leur site.

Désormais, les sites devront être d’abord conçus pour les smartphones, et ensuite seulement, pour les ordinateurs.

Une agence référencement naturel comme SEOh peut vous aider à élaborer un site Mobile friendly, et d’une manière générale, vous accompagner dans la mise en œuvre de votre stratégie SEO (stratégie de contenus, optimisation pour mobile, SEO local, maillage interne, vitesse de chargement, référencement international…).

En quoi consiste l’optimisation Mobile SEO ?

Avoir un site « mobile-friendly » signifie qu’il est optimisé pour les smartphones.

Il doit pouvoir fournir un contenu facilement accessible, dynamique et pertinent, le plus rapidement possible quel que soit le type d’écran de votre mobile.

Sachant qu’une grande majorité de smartphones sont des Androids (77 % du marché français) et que Google reste, de très loin, le moteur de recherche le plus utilisé (91 % des internautes français utilisent Google pour effectuer leurs recherches), il est également nécessaire de veiller à la comptabilité Chrome de votre site internet.

OS-mobiles-France

Répartition des OS mobiles en France au 2ème trimestre 2018

Moteurs-de-recherche

Parts de marché des différents moteurs de recherche en juin 2018 :

  • Google : 91 %
  • Bing : 5 %
  • Yahoo : 2 %

Comment configurer un site Mobile-friendly ?

Avec les changements apportés à l'algorithme de recherche de Google marqués par l’arrivée de Google-first en avril 2015, les entreprises doivent impérativement avoir un site web mobile s’ils veulent être visibles en ligne par les internautes et augmenter leur trafic.

Il y a trois façons de configurer votre site Web pour la recherche mobile :

  • La configuration Web réactive
  • La diffusion dynamique de contenus
  • La configuration M avec URL distinctes

Quelle est la meilleure façon de procéder ?

La configuration Web réactive ou Responsive Design

C’est la configuration la plus simple et la plus efficace pour rendre un site mobile-friendly. C’est aussi la configuration préférée de Google qui accorde une très grande importance à la réactivité d’un site.

Un site Responsive Design (ou web réactif) utilise le même code html sur la même URL sur n'importe quel périphérique d'utilisation, qu'il s'agisse d'un bureau, d'une tablette ou d'un smartphone. Le site Web peut s’afficher différemment en fonction de la taille de l'écran, telle qu'elle est détectée dans le navigateur.

Les sites Web réactifs utilisent les CSS pour modifier le rendu de la page sur l'appareil détecté.

Pour alerter les robots Googlebots, nous vous conseillons d’ajouter la balise méta "viewport" dans l'en-tête de votre document HTML. Cette balise renseignera les navigateurs sur les réglages et les mises à l'échelle nécessaires pour s'adapter à la largeur de l'appareil. Il existe d'autres tags essentiels comme le tagging "image" qui optimisera l'affichage et fournira des instructions de rendu d'image spécifiques en fonction de la taille de l'appareil.

Quels sont les avantages d’un site Web Responsive Design ?

  • Il favorise l’accès et le partage de votre contenu grâce à l'URL unique.
  • Il permet à l'algorithme de Google d'indexer facilement et précisément vos pages et propriétés plutôt que d'avoir à indexer un ensemble distinct de pages pour mobile.
  • Vous gagnez en temps et en efficacité car vous centralisez tout votre contenu dans un seul emplacement.
  • Il réduit la probabilité d'erreurs en maintenant des sites Web séparés.
  • Il améliore la vitesse de chargement de votre site car aucune redirection n'est en place.
  • Il réduit la quantité de ressources Google nécessaires pour que les Googlebots puissent parcourir votre site Web. Pour un site Responsive Design, un seul agent utilisateur Googlebot est nécessaire. Cela rend le crawling plus efficace et permet à Google d’indexer plus facilement une grande partie de vos contenus.

La diffusion dynamique de contenu

La diffusion dynamique de contenu pour les mobiles est similaire à la configuration Responsive Design en ce sens qu'elle utilise la même URL quel que soit l'appareil. Cependant, elle génère des versions de code HTML et CSS différentes pour différents types d'appareils en fonction de la manière dont le serveur identifie le navigateur de l'utilisateur.

Dans la configuration dynamique, la balise d'en-tête Vary HTTP est essentielle pour aider Googlebot à découvrir rapidement votre contenu optimisé pour les mobiles. Cette balise d'en-tête indique également si le contenu du cache doit être affiché ou non.

Attention toutefois avec ce type de configuration car il présente un risque d’erreurs élevé qui pourrait affecter le rendu de votre contenu mobile : fichiers JavaScript et CSS bloqués, mauvaises redirections, temps de chargement plus long, etc.

La configuration M avec adresses URL séparées

Mettre votre site en configuration M signifie qu’il possède deux adresses URL séparées : l’une pour la version bureau et l’autre pour la version mobile.

Le site est alors capable de détecter le type d’appareil utilisé par l’internaute puis d’orienter le visiteur vers l’adresse URL adaptée : version mobile ou version bureau.

Ce type de configuration est très lourd à gérer car il induit la création de multiples URL pour optimiser votre référencement.

Cette démarche s’avère chronophage et présente un risque d’erreurs important.

Comment créer du contenu optimisé pour Mobile ?

Un design réactif est une très bonne chose pour sa version mobile.

Mais cela ne suffit pas.

Il faut également un contenu réactif et convivial.

Même si la majorité des utilisateurs de mobile ne reste pas longtemps sur un site, pensez bien qu’un internaute n’hésitera pas à s’attarder sur votre page si elle offre un contenu engageant.

Plus le contenu sera riche et personnalisé, plus votre site aura des chances de satisfaire un grand nombre d’utilisateurs très variés.

Des formats différents de contenus, un accueil spécial pour les nouveaux visiteurs ou encore des textes accrocheurs sont autant d’outils pour assurer une expérience utilisateur de qualité.

Augmentez l’engagement de l’internaute grâce aux applications mobiles

Cherchez à engager l’internaute au-delà de votre page web en utilisant les applications mobiles.

Par exemple, un article passionnant sur une page web pourra être partagé par l’internaute sur Facebook ou Twitter.

Ce serait dommage de ne pas lui faciliter ce partage.

Rédigez un contenu de grande qualité

Plus votre contenu sera intéressant pour l’internaute, plus il y passera du temps.

Satisfait de ce qu’il y aura trouvé, il sera naturellement plus enclin à revenir régulièrement sur votre site.

Variez les formats de contenus

Les utilisateurs n’ont pas tous les mêmes intérêts à venir sur votre site. Certains seront sensibles à la qualité de votre infographie, d’autres chercheront en priorité des vidéos, etc.

Il est judicieux de combiner plusieurs types de contenus : gif, images HD, vidéos, textes…

Accrochez votre lecteur avec des titres courts

Avec des titres trop longs, vous risquez de perdre votre internaute dès le début de la lecture.

Gardez en tête que les premières secondes doivent capter l’attention du visiteur pour l’inciter à aller plus loin dans sa lecture. Sachez donc l’accrocher avec des titres courts et percutants.

Quels outils pour améliorer la conception d’un site Mobile-Friendly ?

Contrôlez l’ergonomie de votre site avec « Mobile-Friendly Test»

Simple et convivial, cet outil vous permet de tester l’accessibilité d’une page à un appareil mobile. Il suffit d’entrer l’adresse URL de la page pour obtenir un résultat et déceler les points à améliorer.

Il fournit notamment un rapport d’ergonomie du site ou de la page testé(e). Par exemple, le rapport peut indiquer une taille de police trop petite ou l’utilisation de Flash, qui peuvent gêner ou empêcher la consultation d’une page depuis un appareil mobile.

Test-optimisation-mobile

Améliorez la vitesse de chargement de votre site avec « Test My Site »

Si un utilisateur passe trop de temps à charger une page, il y a peu de chance qu’il reste longtemps sur votre site.

Et par conséquent votre taux de conversion s’en ressentira.

Test My Site est un outil qui vous permet de contrôler la vitesse de chargement de votre site. Vous pourrez l’améliorer en fonction de ces résultats.

Think-with-google

Test My Site indique non seulement la vitesse de chargement du site (ici : 6s) mais il affiche également le taux de déperdition d’audience dû à une vitesse de chargement trop lente (ici : 24 %).

Voici un exemple de rapport adressé par l’outil pour le site www.wizishop.fr avec une liste de points à corriger pour optimiser la vitesse de chargement :

rapport-mobile-friendly

Voici 3 autres outils permettant de tester la vitesse de chargement de votre site :

Quel que soit l’outil utilisé, il est important de respecter les 4 règles suivantes pour améliorer la vitesse de votre site :

  • Activer la compression GZIP
  • Tirer profit de la mise en cache du navigateur
  • Minimiser les ressources machine ou augmenter la puissance de votre serveur
  • Optimiser les images

Améliorez le dynamisme de votre site avec « Responsive Design Tool »

Cet outil est idéal pour contrôler le rendu de votre site en fonction des tailles d’écran que l’internaute peut être amené à utiliser.

C’est très simple : l’outil va vous demander l’url de votre site. Lorsque vous l’aurez indiqué, il va générer instantanément une série d’aperçus de votre site tel qu’il apparaîtra sur 5 tailles d’écran différentes : 240, 320, 480, 768 et 1024).

Améliorer le ciblage de l’audience de votre site avec Google Analytics

L’inscription est gratuite en indiquant l’url de votre site. Il vous suffit de cliquer sur « Audience » puis « Mobile » et Google Analytics vous présente un rapport de ventilation de votre audience par volume de trafic et par répartition selon les catégories d’appareils utilisés.

Ces résultats vous permettent d’analyser votre audience et d’observer votre position par rapport aux tendances du marché.

Ainsi, si vous constatez une part trop faible d’utilisateurs mobile sur votre site, vous pourrez ainsi ajuster votre stratégie de contenus pour améliorer votre visibilité sur cette cible.

Audience Google Analytics

Exemple de rapport fourni par Google Analytics

Le Mobile-Friendly sur WiziShop

Pour terminer, sachez que les e-commerçants WiziShop peuvent vendre sur mobile en toute tranquillité. Ils ont 2 possibilités :

  • ils choisissent un design responsive et profitent ainsi des avantages évoqués ci-dessus
  • ils choisissent un ancien design non responsive et à ce moment-là, ils bénéficient automatiquement d’une adaptation mobile de leur site.

Quoi qu’il en soit, ils ne se soucient de rien. C’est nous-même qui nous occupons de générer automatiquement la version mobile de leur site. Ils peuvent donc se concentrer sur leur coeur de métier (le commerce) en toute quiétude.

Surtout, WiziShop va plus loin puisqu’il s’agit de la 1ère solution e-commerce au monde à intégrer le format AMP (Accelerated Mobile Pages) sur ses boutiques en ligne. Nouveau standard de Google pour le développement des pages Web mobile, l’AMP a pour principal avantage d‘accélérer le chargement des pages d’un site sur mobile.

En outre, les boutiques WiziShop bénéficient d’une meilleure visibilité sur Google et d'un référencement naturel optimisé en plus de proposer une expérience de navigation optimale pour l’utilisateur.

Keep Calm… Les WiziShopiens sont mobile friendly et ont même une longueur d’avance sur leurs concurrents !

Créez votre boutique en ligne

Merci de remplir tous les champs et de valider le captcha pour envoyer un commentaire.
Votre commentaire a été enregistré avec succés. Merci !
Chargement

Les articles populaires

Créer sa boutique en ligne

Créer un logo professionnel pour votre site e-commerce

Créer sa boutique en ligne

Créez un site de vente en ligne plus performant que vos concurrents en seulement 90 minutes

Créer sa boutique en ligne

Comment créer une boutique en ligne qui réussit réellement ?

Créer sa boutique en ligne

Comment trouver des produits que les gens s’arrachent sur internet ?