Comment Rediriger Les Utilisateurs Mobiles Sur Votre Site Web
Avez-vous déjà essayé de taper l’URL m.facebook.com sur votre bureau? Essayez-le, et vous verrez que le site a l’air bizarre sur grand écran.
De même, essayez d’ouvrir un site Web local aléatoire sur votre mobile. Vous pourriez rencontrer certains sites qui ne sont pas optimisés pour le mobile et donc vous jeter au large à première vue. Ces sites ont tendance à perdre leur audience mobile au profit de leurs concurrents.
Responsive Web Design
De nos jours, toutes les bonnes plates-formes CMS vous permettent de créer des sites Web en utilisant le responsive design, qui s’adapte en fonction de la taille de l’écran.
Il est important de revoir l’apparence de votre site Web sur différents appareils – cela peut faire la différence entre garder vos visiteurs engagés sur votre site Web et les perdre, pour ne jamais revenir.
Il est important de mentionner également que depuis que Google est passé à l’indexation mobile first, la version mobile de votre site Web est ce qui compte pour Google, ce qui signifie qu’il est peu probable qu’elle fonctionne bien dans la recherche si elle entraîne une mauvaise expérience utilisateur des visiteurs.
Sites Web mobiles
Bien que cela devienne de plus en plus rare, certaines entreprises préfèrent toujours avoir un site Web distinct pour les utilisateurs mobiles. Cela comporte de nombreux problèmes potentiels qui peuvent facilement être évités.
Vérifiez que votre site Web est compatible avec les mobiles 
Vous pouvez vérifier que votre site Web a été correctement configuré pour les mobiles en exécutant un examen WooRank gratuit.
Lorsque vous descendez la route du site Web mobile séparé, il y a deux choses importantes qui doivent être prises en charge afin d’assurer une excellente expérience de navigation mobile pour vos utilisateurs mobiles:
- Créez un site Web mobile offrant une excellente expérience utilisateur
- Redirigez votre site pour les utilisateurs mobiles
Bien sûr, si vous avez un site Web mobile créé à l’aide d’outils de conception Web réactive, vous n’auriez pas à vous soucier de rediriger vos visiteurs mobiles.
Redirection de votre site Web mobile
Si vous créez un site Web mobile distinct mais que vous ne le configurez pas pour rediriger correctement vers vos utilisateurs mobiles, tout le temps et les efforts consacrés à la création d’un site Web mobile seraient gaspillés.
Par conséquent, aujourd’hui, nous allons discuter des différentes façons dont vous pouvez rediriger les utilisateurs mobiles vers votre site mobile. Les redirections ne sont applicables que si vous disposez d’un site Web mobile distinct.
Comment Rediriger vers un Site Mobile ?
Maintenant que vous êtes sur le point d’apprendre à rediriger vos utilisateurs mobiles vers votre site Web mobile, expliquons comment fonctionne la redirection.
Il existe le navigateur de bureau pour les utilisateurs de bureau et les navigateurs mobiles pour les utilisateurs de mobile. Ces deux types de navigateurs envoient des données sous la forme d’un » agent utilisateur » au serveur Web où réside votre site Web. Cet « agent utilisateur » contient des informations qui indiqueront au serveur Web le type d’appareil dans lequel le navigateur est ouvert. Ces informations incluent le nom du navigateur, la version et d’autres informations sur votre système d’exploitation.
Par exemple, essayez d’entrer l’URL suivante sur votre smartphone – detectmobilebrowser.com . Les informations que vous y voyez sont quelque peu similaires aux informations envoyées à votre serveur Web à partir de tout l’appareil mobile à partir duquel votre site Web est accessible.
Outre la méthode de détection « user-agent », il existe un autre facteur qui aide à détecter les utilisateurs mobiles. Ce facteur est la résolution de l’écran. Cependant, avec les appareils modernes, les résolutions d’écran sont plus élevées pour les écrans de smartphones encore plus petits. Par conséquent, le facteur user-agent est la méthode la plus couramment utilisée pour identifier les utilisateurs mobiles.
Maintenant, passons aux affaires et parlons des différentes méthodes par lesquelles vous pouvez appliquer une redirection vers votre site pour vos utilisateurs mobiles.
- La Méthode Du Plugin
- La Méthode Javascript
- La Méthode PHP
- La.méthode htaccess
- La Nouvelle Méthode CSS@media
La Méthode Plugin
Si vous utilisez une plate-forme de Système de Gestion de Contenu (CMS) telle que WordPress ou Joomla, vous avez de la chance. Ils ont des plugins prêts à l’emploi qui aident à rediriger les utilisateurs mobiles vers votre site Web mobile.
Certains de ces plugins de redirection mobile spécifiques au CMS sont les suivants:
Pour WordPress – Redirection d’URL Mobile Simple, Pack Mobile WordPress
Pour Joomla – Détection Mobile simple
Pour Magento – Redirections d’URL
Pour Drupal – Redirection Mobile Simple, Redirection Mobile JS
Si votre site Web est créé dans un autre CMS, essayez une recherche Google pour un plugin qui aide aux redirections mobiles pour ce CMS particulier.
La méthode JavaScript
En utilisant un code JavaScript, vous pouvez rediriger vos visiteurs mobiles vers votre site mobile. Ce code JS peut détecter la taille de l’écran ou l’agent utilisateur.
Le code JS qui utilise la taille de l’écran se trouve dans l’article suivant: Comment rediriger votre site Web vers sa version mobile.
Le code JS qui utilise l’agent utilisateur – ce code dans l’article suivant: Rediriger les périphériques mobiles.
Vous pouvez appliquer ces deux codes à votre site. Cependant, ces deux méthodes présentent des inconvénients.
Dans la méthode de la taille de l’écran, vous définissez la résolution de l’écran, mais de nos jours, nous avons des écrans d’appareils portables plus petits avec une résolution plus élevée. Cela peut aboutir à une détection incorrecte des utilisateurs mobiles.
Dans la méthode user-agent, il est difficile de suivre chaque agent utilisateur nouveau et à venir et de les ajouter au code JS. Il existe de nombreux agents utilisateurs et cela ne cesse de changer avec le développement des technologies. Par exemple, jetez un œil à cette longue liste d’agents utilisateurs.
Et le plus gros inconvénient de tous est pour les utilisateurs qui n’ont pas JavaScript installé sur leur téléphone. Bien que la plupart des téléphones soient équipés de JavaScript, certains choisissent de le désactiver. Certains anciens modèles Blackberry ne prennent pas en charge JavaScript. Afin de surmonter ces obstacles, vous pouvez utiliser la redirection côté serveur pour les sites codés en PHP ou ASP.
La méthode PHP
Si votre site est codé en PHP, vous pouvez utiliser cette méthode pour rediriger vos utilisateurs mobiles. L’avantage d’utiliser cette méthode est que vous n’êtes pas limité aux navigateurs qui fonctionnent sur JavaScript. Cependant, vous devrez répertorier plusieurs agents utilisateurs.
Pour que ce script fonctionne, vos extensions de page doivent l’être.php et votre compte d’hébergement doivent prendre en charge PHP. Ajoutez le code suivant à la section
de votre site Web.
<?php $iphone = strpos($_SERVER,"iPhone"); $android = strpos($_SERVER,"Android"); $palmpre = strpos($_SERVER,"webOS"); $berry = strpos($_SERVER,"BlackBerry"); $ipod = strpos($_SERVER,"iPod"); if ($iphone || $android || $palmpre || $ipod || $berry == true) { echo "](https://s3.amazonaws.com/woocms.woorank.com/2020/05/poor-mobile-optimization.png"; } ?>Vous pouvez trouver ce code dans l’article suivant: Code de Redirection de site Web mobile PHP Simple.
Remplacez http://m.site.com par l’URL de votre site mobile.
Le.méthode htaccess
Une autre méthode alternative pour rediriger l’utilisateur mobile vers votre site Web mobile, en fonction du type MIME pris en charge par le navigateur, est la.méthode htaccess. Ainsi, par exemple, si le type de navigateur prend en charge le type MIME qui inclut WML (Wireless Markup Language), le navigateur provient d’un appareil mobile.
Vous pouvez placer le code recommandé dans cet article intitulé Rediriger vers un site mobile avec.accès.
Mais avant de coller ce code, assurez-vous de sauvegarder votre existant.fichier htaccess. Installation du.un code htaccess incorrect peut causer des problèmes sur votre site. Si vous ne savez pas comment le faire vous-même, demandez l’aide d’un développeur Web.
Remplacez le http://m.example.com par l’URL de votre site Web mobile.
La nouvelle méthode CSS@media
CSS dispose d’une méthode intégrée pour détecter les navigateurs mobiles. Il affiche ensuite les styles CSS en fonction de la taille de la fenêtre du navigateur. Pour cela, vous n’avez pas besoin d’un site mobile séparé. Vous avez besoin de deux feuilles de style dans une page Web, la première pour le type de support « écran » (pour les moniteurs de bureau) et l’autre pour le type de support « portable » (pour les smartphones).
Pour implémenter cette méthode, vous devez coller l’ensemble de codes suivant dans la balise
de votre document HTML.
<br /> /* Smartphones (portrait and landscape) ----------- */<br /> @media only screen<br /> and (min-device-width : 320px)<br /> and (max-device-width : 480px)<br /> /* Styles */<br />Vous trouverez ce code et de nombreuses autres variantes dans cette page intitulée Media Queries for Standard Devices.
L’utilisation de cette méthode présente de nombreux inconvénients. Cela nécessite d’ajouter un énorme ensemble de code CSS au site. Certains appareils ne prennent toujours pas en charge les types de médias « portables » et affichent les pages avec les paramètres d’affichage « écran » à la place.
Il existe donc de nombreuses façons de rediriger les utilisateurs mobiles vers votre site mobile, comme indiqué ci-dessus. Vous pouvez placer plusieurs scripts dans la section head de votre site Web, par exemple le script qui détecte la taille de l’écran ainsi que les agents utilisateurs.
Mais votre travail n’est pas terminé tant que vos redirections mobiles ne fonctionnent pas bien pour les robots des moteurs de recherche. En particulier, dans le cas de Google, il existe certaines configurations que vous devez faire pour qu’elles différencient l’URL du bureau et l’URL du mobile.
Pour plus d’informations, consultez le blog Google webmastercentral sur les changements de classement des résultats de recherche sur smartphones et des informations sur les techniques de redirection prises en charge par Google.
Vous devez ajouter une URL canonique à votre site Web mobile, afin que Google comprenne la relation entre votre URL mobile et votre URL de bureau.
Afin d’aider Googlebot à découvrir l’emplacement des pages mobiles de votre site, Google recommande aux sites Web de :
Ajouter une balise rel= »alternate » sur la page du bureau qui pointe vers l’URL mobile correspondante.
Ajoutez une balise rel= »canonical » sur la page mobile qui pointe vers l’URL du bureau correspondante.
Cela permet aux robots d’exploration de Google de comprendre la relation entre les deux URL – bureau et mobile.
Une fois que vous avez placé des redirections appropriées sur votre site pour vos utilisateurs mobiles, il est temps de tester si les redirections fonctionnent bien pour différents appareils. Le tester manuellement sur n’importe quel appareil smartphone disponible est une façon de procéder. Mais vous pouvez également utiliser ces émulateurs mobiles pour tester le rendu correct de votre site mobile sur différents appareils mobiles.
N’oubliez pas que l’utilisation correcte des redirections mobiles est une étape essentielle pour garantir que votre site Web mobile est compatible avec les moteurs de recherche. Si votre site Web n’est pas bien redirigé pour vos utilisateurs mobiles, vous risquez également de perdre beaucoup d’entreprises précieuses. Par conséquent, pour le référencement ainsi que les changements positifs dans les taux de conversion, vous devez prendre des mesures immédiates pour rediriger votre site Web pour vos utilisateurs mobiles en utilisant l’une des méthodes ci-dessus.
Cet article de blog a été mis à jour le 15 janvier 2020