Référencement site internet mobile. Ce que vous devez savoir.

Mis à jour : 18 mars 2018


Optimisation mobile


L'optimisation mobile consiste à s'assurer que les visiteurs, qui accèdent à votre site Web à partir d'appareils mobiles, bénéficient d'une expérience optimisée pour leur appareil.



Qu'est-ce que l'optimisation mobile?


Chaque année, les utilisateurs passent de plus en plus de temps sur leurs appareils mobiles et leurs tablettes, mais de nombreux sites Web ne sont toujours pas conçus pour prendre en compte des tailles d'écran et des temps de chargement différents. L'optimisation mobile s'intéresse à la conception du site web, à la structure du site internet, à la vitesse de la page Web, etc. pour s'assurer que vous ne détourniez pas involontairement les visiteurs mobiles.



Meilleures pratiques de référencement mobile


Si votre site internet est déjà bien optimisé pour les moteurs de recherche, vous ne devez penser qu'à quelques éléments supplémentaires lors de l'optimisation pour mobile.



Vitesse de la page


En raison des problèmes de matériel et de connectivité, la vitesse de la page est encore plus importante pour les utilisateurs mobiles que pour les utilisateurs de bureau. Au-delà de l'optimisation des images, vous souhaiterez réduire le code, tirer parti de la mise en cache du navigateur et réduire les redirections.



Ne bloquez pas CSS, JavaScript ou les images


Dans le passé, certains appareils mobiles ne pouvaient pas prendre en charge tous ces éléments, car les webmasters des sites internet mobiles ont bloqué un de ceux-ci ou tous les trois. Mais pour la plupart, ce n'est plus vrai, et le Smartphone GoogleBot veut être en mesure de voir et de classer le même contenu que les utilisateurs. Alors ne les cachez pas.


Ces éléments sont également essentiels pour aider Google à comprendre si vous disposez d'un site Web responsive (qui s'ajuste par lui-même) ou d'une solution mobile différente (création unique pour site web et une seconde adapté pour mobile).



Conception de site pour mobile


Les appareils mobiles simplifient et révolutionnent la conception des sites. «Au-dessus de la pile» n'a plus de sens dans un monde où l'on fait défiler du contenu sans fin.



Ne pas utiliser Flash

Le plugin peut ne pas être disponible sur le téléphone de votre utilisateur, ce qui signifie qu'il va passer à côté de tout le plaisir. Si vous voulez créer des effets spéciaux, utilisez plutôt HTML5.



N'utilisez pas non plus de pop-ups

Il peut être difficile et frustrant d'essayer de les fermer sur un appareil mobile. Cela pourrait conduire à un taux de rebond élevé.



Conception pour le gros doigt

La navigation à l'écran tactile peut entraîner des clics accidentels si vos boutons sont trop grands, trop petits ou en conflit avec un doigt qui essaie de faire défiler la page.



Optimiser les titres et les méta descriptions


N'oubliez pas que vous travaillez avec moins d'espace sur l'écran lorsqu'un utilisateur effectue une recherche à l'aide d'un appareil mobile. Pour montrer votre meilleur travail dans SERPs, soyez aussi concis que possible (sans sacrifier la qualité de l'information) lors de la création de titres, d'URL et de méta descriptions.



Utiliser les données structurées de Schema.org


En raison de l'espace limité sur l'écran, un résultat de recherche avec des extraits enrichis est encore plus susceptible de se démarquer que sur un ordinateur de bureau. En savoir plus sur les données structurées de Schema.org.



Optimiser pour la recherche locale


Si votre entreprise possède un élément local, n'oubliez pas d'optimiser votre contenu mobile pour la recherche locale. Cela inclut la normalisation de votre nom, de votre adresse et de votre numéro de téléphone, y compris votre nom de ville et d'état dans les métadonnées de votre site internet.



Configuration du site mobile


La décision la plus importante que vous prendrez lors de la configuration d'un site est probablement de décider si vous souhaitez utiliser un service dynamique réactif ou une configuration de site Web distincte. Chacun a ses avantages et ses désavantages. Google préfère la conception Web responsive, mais prend en charge les trois options, à condition que vous les ayez configurées correctement.




Site Web adaptatif


Les sites internet conçus de manière adaptée utilisent les requêtes CSS3 media pour proposer le même contenu aux utilisateurs mobiles et de bureau à l'aide d'une grille fluide et d'une conception Web flexible pour se conformer automatiquement à la taille de l'écran d'un utilisateur.



Les conceptions Web responsive utilisent des requêtes média pour cibler la mise en page en fonction de la largeur, de l'orientation et de la résolution de l'écran. Par exemple, vous pouvez utiliser le code CSS suivant pour indiquer aux navigateurs comment afficher le contenu d'un écran de 420 pixels ou moins:


Exemple de code


Écran @media et (max-width: 420px) { .class { [styles pour cette classe ici] } }

Et pour créer un lien vers une feuille de style séparée, placez le code HTML suivant entre vos <head> balises:


Exemple de code


<link href = "mobile.css" type = "texte / css" media = "écran et (max-device-width: 480px)" rel = "stylesheet" />


Les conceptions Web réactives vous permettent d'avoir une variété de ces requêtes médias afin que les utilisateurs sur les écrans mobiles minuscules, les écrans mobiles plus grands que la moyenne, et même les tablettes puissent tous voir un site internet qui semble conçu pour leurs appareils.


Utilisez un émulateur tel que l'outil de test Web Design adapté pour vérifier que votre conception Web conformée a l'apparence que vous souhaitez.



Service dynamique


Si vous ne disposez pas des ressources nécessaires pour une refonte complète du site ou souhaitez afficher un contenu différent pour les visiteurs mobiles que pour les ordinateurs de bureau, une solution consiste à utiliser une URL pour afficher différents ensembles de HTML et CSS selon le type d'appareil votre visiteur utilise (également appelé détection des agents utilisateurs). Cela peut être utile, par exemple, si vous êtes un restaurant qui veut qu'un visiteur mobile (qui pourrait errer dans votre quartier) puisse voir un échantillon de critiques et une carte à votre emplacement au lieu de votre site Web complet.


L'affichage d'un contenu différent en fonction de l'agent utilisateur s'appelle la diffusion dynamique et s'effectue à l'aide de l'en-tête HTTP Vary, qui ressemble à ceci:



Varier l'en-tête HTTP


GET / page-1 HTTP / 1.1 Hôte: www.example.com (... reste des en-têtes de requête HTTP ...) HTTP / 1.1 200 OK Type de contenu: text / html Varier: Utilisateur-Agent Content-Length: 5710 (... reste des en-têtes de réponse HTTP ...)

Exemple du blog Google Developers.


Autrement dit, cela signifie que le contenu affiché variera en fonction de l'agent utilisateur qui demande la page.


Le service dynamique n'est pas le compromis parfait qu'il pourrait sembler être. D'une part, il s'appuie sur une liste mise à jour des agents utilisateurs, ce qui signifie que chaque fois qu'un nouvel appareil mobile arrive sur le marché, cette liste doit être mise à jour. Et il n'est pas rare que les postes de travail et les appareils mobiles soient mal servis avec le code HTML de l'autre appareil.



URL mobile distincte


Une autre option consiste à créer un second site Web parallèle pour les utilisateurs mobiles. Cela vous permet de créer un contenu entièrement personnalisé pour les visiteurs mobiles. Pour éviter la confusion d'URL, la plupart des sites mobiles parallèles utilisent un sous-domaine «m».


Les sites internet mobiles parallèles peuvent être aussi imparfaits que les sites Web de diffusion dynamiques pour envoyer les visiteurs à la bonne version. Assurez-vous donc de faciliter le clic des visiteurs qui se retrouvent au mauvais endroit sur leur expérience préférée.


Vous devez également vous assurer que les redirections de votre site sont toutes en place et aussi minces que possible afin de réduire la vitesse de la page. Et pour éviter les problèmes de contenu en double, vous devrez configurer rel = "canonical".



Pourquoi ne pas utiliser une application?


Créer une application est une façon d'adapter l'expérience mobile à vos visiteurs. Mais la page interstitielle que de nombreux sites internet utilisent pour avertir un utilisateur mobile qu'une application est disponible peut également servir de blocage aux robots d'indexation des moteurs de recherche.

Boxcom | Concetion de site Web et rférencement Web Québec

581.741.7767