Comment optimiser votre site web pour la navigation sur smartphone et tablette, et améliorer votre classement dans l’index mobile first de google ? Comment gagner des points en SEO mobile ? Quelles sont les bonnes pratiques à suivre et les pièges à éviter pour soigner votre référencement naturel sur mobile ?
Grâce à la démocratisation du haut débit hertzien, la navigation mobile est en train de dépasser la traditionnelle session internet sur ordinateur de bureau ou sur laptop, aussi bien en termes de volume de recherches que de temps de connexion.
L’essor mondial de la 4G et l’arrivée imminente de la 5G ne font que confirmer cette tendance pour les années à venir, au point que Google décrète le Mobile first, en donnant la priorité à l’indexation mobile et aux sites internet mobile friendly. Vos pages web sont-elles vraiment optimisées pour la navigation sur smartphone et tablette ?
Parfaitement conscient de la prise de pouvoir du smartphone sur tout autre appareil pour explorer la grande toile, Google renforce d’année en année sa stratégie et sa politique Mobile First, à l’image de son fameux Mobile Friendly Update, afin de satisfaire en priorité les milliards de mobinautes de la planète. Quelles en sont les conséquences pour votre référencement naturel ? Faut-il adopter de nouvelles bonnes pratiques SEO dédiées à la navigation mobile ?
Désormais, que vous vous connectiez sur ordinateur, sur tablette ou sur smartphone pour effectuer votre recherche, Google vous propose une page de résultats donnant priorité aux pages web adaptées et optimisées pour la navigation mobile : sachez-le ! Aujourd’hui, les experts en référencement, mais aussi les gestionnaires de campagne google ads ont intégrés l’aspect mobile dans leur stratégie.
Le mobile affecte aussi le desktop
Il serait dommage de perdre votre positionnement dans les résultats de recherche de Google à cause de pages web respectant la plupart des bonnes pratiques du SEO pour « ordinateur de bureau », mais n’étant pas réellement optimisées pour l’expérience utilisateur des mobinautes sur smartphone et tablette, n’est-ce pas ?
Heureusement, Google est aussi conscient du fait que des millions de sites web, correctement configurés hier, sont tout à coup devenus inadaptés à la navigation mobile aujourd’hui. Pour résoudre ce problème, Google explique les fondamentaux du mobile friendly dans ses guides à destination des développeurs et fournit de multiples outils gratuits pour effectuer les tests et diagnostics nécessaires, comme nous allons le voir en détail.
Quels sont les prérequis indispensables du SEO mobile ?
Google considère votre site web mobile friendly si certaines conditions spécifiques sont réunies. Autrement, préparez-vous à perdre gros en SEO, malgré le respect de nombreuses bonnes pratiques classiques du référencement naturel. Quels sont ces prérequis indispensables du SEO mobile ?
Vos pages web doivent s’afficher entièrement et correctement sur tous types d’écrans, que votre audience cible se connecte sur ordinateur, sur smartphone ou sur tablette. Cela signifie que le texte et les images de chaque page web doivent apparaître à une taille convenable, permettant aux internautes et mobinautes de lire et visualiser vos contenus facilement et de manière fluide.
Le temps de chargement de vos pages doit être optimal, en particulier pour la navigation mobile où il ne doit pas dépasser une seconde, car le niveau d’exigence des mobinautes en la matière est élevé. Sur son smartphone, votre visiteur a un temps d’attention de plus en plus réduit et n’hésitera pas à quitter votre site web si vos contenus ne s’affichent pas de manière quasi-instantanée.
Inutile de préciser que vos liens internes et autres boutons ou animations doivent être fonctionnels sur mobile. Cela paraît évident, mais prenez tout de même le temps de vérifier vos pages web en les consultant sur votre smartphone, car la version mobile d’un site internet a souvent tendance à réserver de mauvaises surprises.
Si tout se passe bien, un mobinaute n’aura pas besoin de zoomer à outrance, ni de scroller indéfiniment, ni de chercher désespérément votre menu de navigation en se promenant sur votre site web. Simplifiez et fluidifiez au maximum la navigation mobile, sans quoi vous serez immédiatement sanctionné en terme de SEO mobile.
Quelle technique utiliser pour déployer votre site web en version mobile ?
Principalement, il existe 3 manières différentes de proposer une version mobile de vos pages web à votre audience cible :
- deux versions de chaque page web, avec des URLs distinctes, une pour mobile, une pour ordinateur
- une version dynamique avec un chargement différencié selon l’appareil détecté
- une version unifiée en responsive design
La première option consiste à dédoubler vos pages web sur des URL différentes, avec une adresse de type votresite.com pour la navigation sur ordinateur de bureau et une adresse de type m.votresite.com pour la navigation mobile. Ce choix est peu recommandé pour plusieurs raisons. Il implique deux fois plus de code et de travail de maintenance, tout en divisant par 2 les points SEO que chacune de vos pages peut marquer.
La deuxième option revient à fournir un code HTML et CSS différent sur la même URL selon l’appareil détecté (user agent) avant le chargement de la page. Bien que fonctionnelle et valide, cette technique n’a pas les faveurs de Google, qui recommande officiellement la troisième : le responsive design. Ceci dit, si vous tenez absolument à déployer votre site web en diffusion dynamique, n’oubliez pas d’utiliser un en-tête « HTTP Vary » paramétré sur « User-Agent », afin que le Googlebot sache que vous proposez un code différent selon l’appareil détecté, ce qui sous-entend une version mobile.
Le Responsive Design
Le Responsive Design, troisième option, est la plus recommandée aujourd’hui pour adapter votre site web à tous les types d’appareils et à toutes les tailles d’écrans. L’affichage adaptatif simplifie les choses, en maintenant une seule version du code sur une seule URL pour chaque page web. Ainsi, il est conseillé d’appliquer la technique du responsive design pour optimiser votre site web à la navigation sur smartphone et gagner en SEO mobile. Pourquoi ?
Avec une seule version du code, sans redirection, ni variation en fonction de l’appareil détecté, le temps de chargement de vos pages web est plus rapide. Une seule version du code diminue également les risques d’erreurs comparativement à un dédoublement du code pour ordinateur et pour mobile. Aussi, avec une seule URL et une seule version du code, le Googlebot indexe la même page pour mobile et celle-ci en récolte tous les points SEO.
Enfin, si vous utilisez un éditeur de sites web comme WordPress, pensez à paramétrer les options d’optimisation mobile prévues dans votre console d’administration, telles que la fonctionnalité AMP (Accelerated Mobile Pages) et la mise en cache de vos contenus statiques (images, vidéos, fichiers CSS ou JS). Privilégiez les templates responsive design ou thèmes adaptés à la navigation mobile. Téléchargez aussi un plugin dédié à l’optimisation mobile (comme Wptouch ou WP Mobile Pack) et gardez la possibilité de modifier manuellement le code source de vos pages en HTML, CSS et Javascript, si les bonnes pratiques du SEO mobile ne sont pas respectées dans le code généré automatiquement.
Comment appliquer le responsive design dans votre code HTML, CSS et Javascript ?
La balise meta « viewport » (à insérer dans la partie <head> du code HTML de vos pages web) est l’une des principales clés du responsive design aujourd’hui. Elle permet de définir la largeur de l’écran de l’utilisateur comme largeur d’affichage de référence (viewport) à l’échelle 1, de la manière suivante :
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Partant de cette base, pour les éléments contenus dans vos pages web, définissez en CSS et HTML des dimensions relatives (en pourcentages) et non absolues (en pixels) pour vos éléments. La plus grande fenêtre d’affichage étant réglée sur la dimension de l’écran détecté, chacun des contenus de votre page web peut être paramétré en CSS pour mesurer tel pourcentage de la largeur de ce viewport ou de l’élément qui le contient.
Comment réagencer les éléments de votre page web en fonction de la taille de l’écran détecté ?
D’autre part, lorsque la taille de l’écran de l’appareil varie à jusqu’à un certain point, l’agencement des éléments de votre page web peut être modifié afin de fluidifier l’expérience utilisateur. Par exemple, 3 images affichées sur une même ligne horizontale sur écran d’ordinateur peuvent être réagencées verticalement, l’une après l’autre, sur écran de smartphone. Pour cela, dans votre CSS, les requêtes « media » sont utiles pour modifier les dimensions relatives de vos éléments selon une largeur minimale ou maximale détectée en pixels sur l’appareil de votre visiteur. Voici un exemple de code de réagencement de ces 3 images en CSS :
.conteneur {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}
.img1, .img2, .img3 {
width: 100%;
}
@media (min-width: 800px) {
.img1, .img2, .img3 {
width: 33%;
}
}
N’oublions pas que l’affichage sur smartphone peut varier selon l’orientation horizontale ou verticale de l’appareil dans les mains de l’utilisateur. Pour en tenir compte, les requêtes « @media » en CSS peuvent tenir compte du paramètre « orientation », de la manière suivante :
@media (orientation:portrait) {
.img1, .img2, .img3 {
/* Votre code CSS en mode portrait */
}
}
@media (orientation:landscape) {
.img1, .img2, .img3 {
/* Votre code CSS en mode paysage */
}
}
Par ailleurs, si votre page web contient du code Javascript, vous pouvez intégrer la notion de responsive design à vos scripts JS. Par exemple, un script peut appeler une URL contenant votre code JS qui, une fois exécuté, détecte le type d’appareil et selon le cas, peut adapter certaines options d’affichage à la navigation mobile.
Comment coder l’affichage de vos images en responsive design ?
Pour appliquer le responsive design à vos images, privilégiez la balise <picture>. À l’intérieur de celle-ci, la balise <source media> et ses attributs vous offrent la possibilité de fournir plusieurs versions d’une image (différentes dimensions et résolutions) en fonction des dimensions et de la résolution de l’appareil détecté. Voici un exemple de bonne pratique SEO mobile en matière de code HTML pour une image adaptative :
<picture> <source media="(min-width: 800px)" srcset="image.jpg, image-2x.jpg 2x"> <source media="(min-width: 450px)" srcset="image-petite.jpg, image-petite-2x.jpg 2x"> <img src="image-fb.jpg" srcset="image-fb-2x.jpg 2x" alt="description de votre image"> </picture>
Une autre manière de coder l’affichage de vos images en dimensions relatives consiste à utiliser l’attribut « srcset » de la balise <img> pour proposer plusieurs tailles d’images au navigateur de l’internaute, qui choisira automatiquement l’image aux dimensions qui lui correspondent :
<img src="image-200.jpg" sizes="50vw" srcset="image-100.jpg 100w, image-200.jpg 200w, image-400.jpg 400w, image-800.jpg 800w, image-1000.jpg 1000w, image-1400.jpg 1400w, image-1800.jpg 1800w" alt="description de l'image">
Comment différer le chargement de vos images et contenus statiques ?
Le lazy loading, ou chargement différé, vous permet de réduire le temps de chargement de vos pages en reportant le chargement de vos images et autres contenus statiques au moment où ils sont visibles ou redimensionnés.
Ainsi, votre page web, en version mobile ou normale, se charge beaucoup plus rapidement dans le navigateur de l’appareil utilisé par chaque internaute pour visiter votre site web. Le chargement différé représente un gain de temps conséquent pour les pages qui contiennent beaucoup d’images, vidéos et autres contenus volumineux.
Attention, toutefois, avec cette technique d’optimisation, car toute erreur dans votre code empêcherait non seulement les visiteurs de voir ces contenus différés, mais aussi le Googlebot de les reconnaître et les indexer : sanction immédiate en SEO mobile.
Il est donc recommandé d’utiliser la manière de coder le lazy loading proposée par Google dans son guide à destination des développeurs. Voici tout d’abord un exemple de code HTML pour une image à charger en différé :
<img class="lazy" src="image.jpg" data-src="image-en-lazy-loading-1x.jpg" data-srcset="image-en-lazy-loading-2x.jpg 2x, image-en-lazy-loading-1x.jpg 1x" alt="Description de votre image">
Comme vous pouvez le constater, une classe CSS « lazy » est attribuée à celle-ci ainsi qu’à toutes les autres à proposer en chargement différé. Voici ensuite le code Javascript correspondant, afin d’activer le lazy loading pour les contenus appartenant à cette classe grâce à une fonction JS d’écoute d’événement :
document.addEventListener("DOMContentLoaded", function() {
let lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
let active = false;
const lazyLoad = function() {
if (active === false) {
active = true;
setTimeout(function() {
lazyImages.forEach(function(lazyImage) {
if ((lazyImage.getBoundingClientRect().top <= window.innerHeight && lazyImage.getBoundingClientRect().bottom >= 0) && getComputedStyle(lazyImage).display !== "none") {
lazyImage.src = lazyImage.dataset.src;
lazyImage.srcset = lazyImage.dataset.srcset;
lazyImage.classList.remove("lazy");
lazyImages = lazyImages.filter(function(image) {
return image !== lazyImage;
});
if (lazyImages.length === 0) {
document.removeEventListener("scroll", lazyLoad);
window.removeEventListener("resize", lazyLoad);
window.removeEventListener("orientationchange", lazyLoad);
}
}
});
active = false;
}, 200);
}
};
document.addEventListener("scroll", lazyLoad);
window.addEventListener("resize", lazyLoad);
window.addEventListener("orientationchange", lazyLoad);
});
Dans cet exemple, les contenus appartenant à la classe CSS « lazy » sont chargés en différé lorsque le visiteur scrolle jusqu’à eux, les redimensionne ou change l’orientation de son appareil (portrait ou paysage).
Fournie par Google, cette technique vous garantit la bonne prise en compte de vos contenus et de votre chargement différé par le Googlebot, et donc de leur indexation, pour votre référencement naturel sur mobile. Si vous redoutez de commettre une erreur dans ce morceau de code et que vous êtes peu familier avec le Javascript, oubliez le chargement différé et ne surchargez pas vos pages web en images, vidéos et autres contenus volumineux.
En revanche, si vous souhaitez appliquer le lazy loading de cette manière, vous avez la possibilité de tester et vérifier son fonctionnement et sa compatibilité avec le robot d’indexation de Google, notamment grâce aux puissants outils de diagnostic fournis par la firme de Mountain View.
Comment vérifier l’optimisation mobile de votre site web ?
Afin de vérifier que votre site web est bien adapté et optimisé pour les écrans de smartphones et tablettes, la Google Search Console vous livre ses outils. Premièrement, utilisez l’outil d’inspection d’URL pour vous assurer que tous vos fichiers HTML, CSS et Javascript soient reconnus et indexés par le robot de Google.
En navigant dans les fonctionnalités de la Search Console, vous pourrez également vérifier la bonne lecture de votre fichier robots.txt par le Googlebot. D’autre part, vous devez tester le temps de chargement de vos pages. Pour cela, il est une nouvelle fois recommandé d’utiliser l’outil de Google prévu à cet effet, dénommé Pagespeed Insights, en cliquant sur la version mobile : https://developers.google.com/speed/pagespeed/insights/.
Un score de vitesse de chargement sur écran mobile de votre page web vous est attribué (allant de 0 à 100), ainsi qu’un rapport détaillé sur vos performances, vos points de ralentissements et les actions à effectuer pour accélérer votre temps de chargement. C’est alors que vient le moment d’effectuer le test d’optimisation mobile de vos pages web par Google…
Comment effectuer le test d’optimisation mobile de Google ?
Google fournit gratuitement en ligne son outil de test d’optimisation mobile à l’adresse suivante : https://search.google.com/test/mobile-friendly?hl=fr. Il vous suffit de saisir l’URL de votre page web pour que la Google Search Console lance son algorithme de test mobile. Vous avez également la possibilité de coller le code source de votre page web. Il arrive régulièrement de voir des erreurs mobiles dans la search console, alors que le test donne un résultat « vert ». Cela arrive de temps en temps, pas de panique, tout va bien, il s’agit juste d’un bug au niveau de la search console.
Une fois l’analyse effectuée, un rapport d’optimisation mobile s’affiche, avec une capture d’écran de l’apparence de votre page lorsqu’elle est consultée sur un smartphone. Google vous indique alors si votre page web est adaptée à la navigation mobile ou non. Surtout, si l’ergonomie de votre page web est partiellement ou complètement inadaptée à la navigation sur smartphone ou tablette, l’outil de diagnostic de la Google Search Console vous explique en détail quels points posent problème, quelles en sont les causes, quels éléments ne s’affichent pas correctement sur mobile et pourquoi.
Ces précieuses informations, provenant de Google, vous serviront à vérifier que votre site internet est bien optimisé ou non pour le web mobile et surtout d’identifier les problèmes éventuels et corrections nécessaires. Grâce à ce puissant outil de diagnostic, vous avez la clé pour gagner des positions sur google avec votre site mobile et optimiser directement votre référencement naturel, à la source.
