Comment optimiser mon site web pour le mobile SEO

Dans un avenir très proche, ce sera très difficile pour les sites Web qui ne peuvent pas être utilisés correctement sur les smartphones et les tablettes et ne sont donc pas adaptés aux mobiles. Cela s'applique aussi et surtout à la recherche Google. Ce que vous pouvez faire pour optimiser un site Web pour une utilisation mobile est décrit dans cet article

Qu'est-ce que le référencement mobile ?

Le référencement mobile consiste à rendre les sites Web « compatibles avec les mobiles ». Le mot-clé « convivialité mobile » est l'une des clés des sites Web durables. Lors de l'optimisation de sites Web pour smartphones, tablettes et autres appareils, on parle de « référencement mobile ». Les gens ont tendance à oublier que ces mesures ne concernent pas principalement l'optimisation des moteurs de recherche, mais l'optimisation des visiteurs du site Web. Chaque visiteur doit pouvoir utiliser les pages, quel que soit l'appareil qu'il utilise actuellement. Les améliorations du classement sur Google qui en résultent sont davantage un sous-produit.

Quelles caractéristiques doit avoir un site adapté aux mobiles ?

Pour qu'un site Web soit considéré comme adapté aux mobiles, il doit répondre à divers critères. Ceux-ci sont:

Temps de chargement court
Faible volume de données
Structure claire
Bonne convivialité
Une navigation bien pensée
complétude

Les utilisateurs mobiles apprécient le chargement rapide du contenu d'un site Web. Il y a deux raisons à cela : Premièrement, les applications sont principalement utilisées sur les smartphones. Les utilisateurs sont habitués à la réaction rapide des applications et attendent la même chose des sites Web qu'ils visitent. Deuxièmement, les smartphones sont souvent utilisés en déplacement, par exemple dans le bus, en attendant aux feux de circulation ou dans la salle d'attente du médecin. Le temps de surf est court dans de telles situations.

Google a donné trois secondes à titre indicatif pour le temps de chargement . Mais vous pouvez aussi vous orienter sur les résultats de l'outil Google PageSpeed Insights : Là la page doit atteindre au moins 70 points pour l'affichage mobile afin que le résultat soit toujours dans la zone jaune et non dans la zone rouge.

Les sites Web mobiles devraient également avoir le volume de données le plus bas possible . Il y a aussi deux raisons principales à cela : d'une part, les pages plus légères se chargent plus rapidement et, d'autre part, l'utilisation des données mobiles est soumise à des restrictions plus sévères en raison des volumes limités dans les contrats de téléphonie mobile.

Une structure claire des sites Web mobiles est particulièrement importante en raison des écrans plus petits des smartphones. Une division claire de la page en navigation ou menu, contenu et autres éléments qui doivent être faciles et intuitifs à trouver devrait être une évidence.

La convivialité ou la convivialité va de pair avec la structure d'un site Web. Cela inclut, par exemple, une police, des liens et des boutons suffisamment grands, ainsi qu'aucune publicité gênante ni aucun autre affichage tel que des fenêtres contextuelles.

Google s'adapte aux exploitants de sites Web et, dans le cadre du passage au nouvel index, inclura également entièrement le contenu caché qui doit d'abord être ouvert pour être lu . Cela ouvre des options de conception supplémentaires.

La navigation ou le menu des sites Web mobiles doivent être facilement accessibles. Les « menus hamburgers », qui s'ouvrent lorsque vous appuyez, ont fait leurs preuves. Le menu ne doit pas contenir trop de sous-éléments, qui doivent tous être visibles sans défilement.

L'exhaustivité signifie qu'un site Web contient sur les appareils mobiles toutes les informations importantes nécessaires, qui existent également sur la version de bureau. Google a déjà souligné à plusieurs reprises que le contenu des pages mobiles ne doit pas s'écarter de manière significative de l'affichage sur le bureau. Incidemment, cela devrait également être pris en compte lors de l'intégration des images : Sur le site Web mobile également , celles-ci devraient avoir chacune un attribut "Alt" qui décrit le contenu des images.

Quels types de sites Web adaptés aux mobiles existe-t-il ?

Pour rendre un site Web adapté aux mobiles, il existe différentes options qui diffèrent les unes des autres sur le plan technique et représentent des approches complètement différentes. Il est possible d'exploiter une version mobile séparée et indépendante ainsi que de concevoir un site Web de manière à ce qu'il s'adapte automatiquement aux conditions de l'appareil final respectif. Il est également possible de faire une distinction au niveau du serveur et de livrer le HTML approprié en même temps. Enfin, il y a AMP, une technologie spécialement conçue pour les sites Web mobiles rapides.

Variante mobile indépendante

La plus longue tradition de sites Web adaptés aux mobiles comprend des pages créées exclusivement pour être affichées sur des appareils mobiles. De cette façon, il existe deux versions parallèles d'un site Web : une pour les PC/ordinateurs portables/de bureau et une pour les smartphones. Pour les tablettes, selon la conception, la version de bureau ou la version mobile peuvent être affichées. Les pages mobiles indépendantes peuvent être reconnues par les URL indépendantes telles que m.example.com.

Cependant, l'existence simultanée de plusieurs variantes de pages pose également certains défis. Le défi le plus important consiste à éviter le contenu en double. Pour que Google n'indexe pas les deux variantes et donc que chaque page soit disponible deux fois, il doit y avoir des références mutuelles entre la version desktop et la version mobile. La version de bureau pointe vers la version mobile via un lien alternatif. Il existe deux manières de mettre en place ce lien, à savoir directement dans le code HTML et dans le plan du site XML.

Dans le code HTML, un lien alternatif ressemble à cet exemple :

Si vous décidez d'utiliser un sitemap XML, une balise xhtml correspondante doit être définie pour chaque URL :

<? xml version = "1.0" encodage = "UTF-8"?>
<urlset xmlns = "http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns : xhtml = "http://www.w3.org/1999/xhtml">
<url>
<loc> http://www.example.com/page-1/ </loc> "> http://www.example.com/page-1/ </loc>
<xhtml : lien
rel = "suppléant"
media = "seulement écran et (max-width : 640px)"
href = "http://m.example.com/page-1" />
</url>
</urlset>

Ces références doivent être paramétrées pour chaque page/URL.

En retour, un lien canonique doit être mis en place de la version mobile vers la version desktop :

Le maintien de deux versions d'un site Web augmente naturellement la charge de travail. Des ajustements à une variante doivent être effectués sur l'autre variante - notamment en ce qui concerne le contenu.

Et enfin, la question se pose de savoir si deux versions d'une page sont encore suffisantes, car la gamme d'appareils avec lesquels on accède aux sites Web ne cesse de croître. En plus des PC, ordinateurs portables et smartphones, il existe des phablettes, des montres intelligentes, des téléviseurs, des écrans de voiture et bien d'autres.

Par conséquent, à moyen terme, la préférence devrait être donnée aux sites Web qui peuvent être adaptés de manière flexible aux exigences du dispositif d'affichage, et qui sont des sites Web réactifs.

Sites Web réactifs

Comme son nom l'indique, les sites Web réactifs réagissent aux options d'affichage respectives de l'appareil final. Les smartphones ont un écran plus petit que les notebooks, les tablettes sont utilisées au format portrait ou paysage, etc. Un site web responsive réagit à la taille et au format d'un écran - même s'il est déjà chargé. Des éléments tels que des images, des textes, des menus ou des boutons s'adaptent de manière à ce que la page puisse toujours être utilisée.

L'avantage des sites Web réactifs est qu'une seule variante de la page existe et doit être maintenue. La page elle-même assure un affichage optimal.

Un autre gros avantage des sites Web réactifs est lié aux backlinks. Dans le cas d'une version mobile distincte, les backlinks de la version desktop et mobile peuvent également différer. Ce n'est pas un problème pour le moment car Google utilise la version de bureau des pages pour le classement. Cependant , cela changera avec le passage au nouvel index Google, qui débutera vraisemblablement au cours de l'année à venir . Ensuite, l'affichage mobile décide du classement. Étant donné que les pages mobiles sont généralement liées beaucoup moins souvent que la version de bureau, les pages avec deux versions différentes dans le nouvel index Google peuvent rencontrer des problèmes car le nombre de backlinks évalués diminue.. Ce problème n'existe pas avec les sites Web réactifs : comme il n'y a qu'une seule version de la page, qui est également la base du classement dans le nouvel index Google, les backlinks existants peuvent simplement être pris en compte.

Soit dit en passant , Google recommande de rendre les sites Web réactifs.

Mais les pages responsives ont aussi un inconvénient : parce que la même version du site Web est chargée pour tous les appareils, le volume de données peut augmenter, car finalement le smartphone charge la version qui est également affichée sur le PC. Ce problème peut être contré en optimisant la page en ce qui concerne le volume de données et en réduisant la taille des fichiers d'images à l'aide d'outils adaptés. De plus, l'utilisation de la compression et de la mise en cache pour les images, JavaScript et CSS est recommandée.

Quelle est la différence entre les sites Web réactifs et adaptatifs ?

Les sites Web réactifs et adaptatifs diffèrent sur un point : alors que les sites Web réactifs réagissent en continu à différentes tailles et formats d'écran, les sites Web adaptatifs changent en plusieurs étapes définies. Différentes largeurs d'écran ou fenêtres peuvent être spécifiées, telles que

320 pixels à 639 pixels
640 pixels à 959 pixels
960 pixels à 1280 pixels
plus de 1280 pixels

Une grille est définie pour chacune de ces largeurs, qui est utilisée dans les cas respectifs. Ainsi, la page bascule entre différents niveaux. Les pages réactives, en revanche, changent également à l'intérieur de ces niveaux et réagissent également aux petits ajustements de la taille de la fenêtre ou de l'écran.

Diffusion dynamique

Avec la diffusion dynamique, le serveur fournit un code HTML différent selon l'appareil demandeur. L'objectif est d'afficher de manière optimale la page pour chaque appareil. Contrairement à la conception réactive, l'avantage de cette approche est qu'aucune donnée inutile n'est transférée. Par exemple, si un smartphone appelle une page, des images plus petites peuvent être envoyées que si elles étaient appelées par un PC. Cela permet d'économiser la bande passante des données et peut améliorer les temps de chargement.

Les sites Web de diffusion dynamique doivent envoyer un en-tête HTTP spécial : l'en-tête HTTP Vary . Cela ressemble à ceci :

HTTP / 1.1 200 OK
Type de contenu : texte/html
Varier : agent utilisateur

Cela permet à Google et à d'autres services de reconnaître qu'il existe différentes versions de la page. Dans le cas contraire, il pourrait arriver que le contenu récupéré du cache ne soit pas du tout adapté à l'appareil actuellement utilisé.

Le grand avantage de la diffusion dynamique par rapport à une version mobile distincte est qu'il n'y a qu'une seule URL par page, sous laquelle la version appropriée est toujours lue.

Cependant, le service dynamique présente également certains inconvénients et difficultés. La première difficulté concerne l'identification sans erreur du dispositif demandeur. Pour ce faire, vous pouvez utiliser la chaîne d'agent utilisateur transmise par le client, qui contient par exemple des informations sur le navigateur. Une erreur courante consiste à traiter les PC comme des smartphones et vice versa. Le problème se produit encore plus fréquemment avec les tablettes : la version smartphone est souvent affichée pour elles, mais elle ne s'affiche pas de manière optimale sur une tablette.

Il existe différentes bibliothèques comme WURFL qui peuvent être utilisées à cette fin. Une attention particulière doit être portée aux affectations les plus claires possibles. Par exemple, il ne suffit pas de regarder la chaîne "Android". Au lieu de cela, il convient de vérifier si « Android » et « Mobile » apparaissent dans la chaîne de l'agent utilisateur.

De plus, la bibliothèque des différents agents utilisateurs doit être constamment mise à jour, car de nouveaux appareils sont toujours ajoutés.

Et enfin, la diffusion dynamique comporte le risque que Google soupçonne le masquage. Cela peut se produire si le Googlebot, qui s'identifie via sa propre chaîne d'agent utilisateur, affiche un contenu différent de celui des autres appareils. Par conséquent, il faut veiller à traiter Google comme un utilisateur normal et à lire le même contenu.

Version AMP

AMP signifie "Accelerated Mobile Pages" - une technologie qui utilise du HTML léger et du JavaScript pour limiter le volume de données des sites Web. De plus, les pages AMP sont mises en cache dans un réseau de diffusion de contenu (CDN) et diffusées plus rapidement par les serveurs du CDN.

Les pages AMP sont en fait très rapides - jusqu'à quatre fois plus rapides que les pages Web normales. Cela les rend parfaitement adaptés pour une utilisation sur les smartphones.

La plupart des sites Web qui ont une version AMP proposent ce parallèle à la version responsive ou à la version PC et mobile.

L'avantage d'AMP, en plus du temps de chargement plus court et du format plus léger, est qu'il est parfois plus visible dans les résultats de recherche Google. Dans le domaine des actualités en particulier, Google attribue aux pages AMP des positions spéciales - par exemple dans un carrousel contenant diverses actualités.

D'autres services tels que Twitter ont récemment été de plus en plus liés à la version AMP des sites Web, le cas échéant.

Un inconvénient des pages AMP est - en plus de l'effort de maintenance supplémentaire d'une nouvelle version de la page - la gamme de fonctions encore limitée. En particulier, les sites de commerce électronique et les boutiques en ligne conçus pour interagir avec les visiteurs ne peuvent pas trouver sur AMP tout ce qui peut être mis en œuvre avec HTML et JavaScript standard.

Semblable à une variante mobile distincte, une version AMP doit également être liée à partir de la variante principale du site Web. Cela fonctionne avec l'instruction suivante :

En parallèle, un lien canonique doit être mis en place de la version AMP vers la version principale. Les deux doivent être effectués pour chaque page ou URL individuelle.

Alors, que faut-il faire pour rendre un site Web adapté aux mobiles ?

Chacun doit décider par lui-même laquelle des options mentionnées est utilisée pour rendre son propre site Web adapté aux mobiles. Mais une chose est claire : si vous deviez développer vous-même les changements nécessaires et adapter le HTML, le JavaScript et le CSS en conséquence, cela représenterait un effort énorme et nécessiterait des connaissances que très peu d'opérateurs de sites Web sont susceptibles d'avoir.

La bonne nouvelle est qu'il existe des solutions toutes faites pour la plupart des cas. Selon le système de gestion de contenu sur lequel une page s'exécute (WordPress, Joomla, Drupal, etc.), il existe des modèles appropriés qui ont déjà les propriétés souhaitées. Il existe des modèles réactifs et des modèles spécialement créés pour les appareils mobiles. Il existe également des extensions appropriées pour la plupart des systèmes d'affichage de sites Web via AMP.

Ces modèles sont souvent gratuits. Il vous suffit de télécharger les fichiers correspondants et de les installer dans le système de gestion de contenu. De nombreux systèmes de gestion de contenu le font en appuyant simplement sur un bouton.

Ce qui reste du travail, c'est l'ajustement de détails comme les polices de caractères, la structure des menus ou l'agencement de divers éléments. Toute personne ayant besoin d'assistance peut la trouver dans les forums des systèmes individuels ou contacter les fournisseurs de services qui la connaissent bien. L'effort requis pour cela doit cependant être maintenu dans des limites dans la plupart des cas.

Comment vérifier si un site Web est adapté aux mobiles ?

Heureusement, Google propose un outil pratique pour tester la compatibilité mobile des sites Web : le test Mobile Friendly . Là, il vous suffit d'entrer l'URL de la page à vérifier et vous obtenez immédiatement le résultat. Si Google considère que le site n'est pas adapté aux mobiles, il vous donnera des conseils sur ce qui doit être amélioré.

Un conseil à ce stade : la convivialité mobile fait toujours référence à des pages individuelles, et non à l'ensemble du site Web. Il se peut bien qu'un certain article soit reconnu comme adapté aux mobiles, mais pas la page de démarrage. Par conséquent, vous devez toujours vérifier plusieurs sous-pages.

Référencement mobile : à quoi d'autre devez-vous faire attention ?

Il y a des pièges et des dangers qui se cachent dans l'optimisation pour les appareils mobiles. Voici les erreurs courantes que les gens commettent lorsqu'ils utilisent des sites Web pour mobile :

Interstitiels et trop de publicité

Google est devenu assez strict, en particulier sur les sites Web mobiles, en ce qui concerne les superpositions gênantes, appelées interstitiels . Ceux-ci incluent, par exemple, les fenêtres contextuelles ou les couches qui s'ouvrent, qui sont placées sur le contenu d'un site Web et doivent d'abord être cliquées ou ne peuvent être fermées qu'après un certain temps.

Trop de publicité dans la zone supérieure de la page ("au-dessus du pli") doit être évitée. Si vous ignorez cela, Google peut imposer une pénalité sur la page concernée.

Cependant, il existe également des exceptions autorisées : par exemple, les fenêtres contextuelles d'informations sur l'âge, les boîtes de dialogue de connexion ou les affichages pour des raisons religieuses sont autorisés .

Utiliser le bon renvoi

Si les utilisateurs de smartphones sont redirigés du bureau vers la version mobile, des redirections HTTP doivent être utilisées si possible, qui sont effectuées par le serveur. Selon Google, les redirections JavaScript sont également autorisées - mais vous devez garder à l'esprit qu'elles peuvent prendre plus de temps car le code JavaScript doit d'abord être téléchargé et exécuté par le navigateur avant que la redirection ne se produise.

Google recommande également d'utiliser des redirections 302, c'est-à-dire des redirections temporaires, au lieu des redirections 301 permanentes.

Une erreur doit être évitée dans tous les cas : des redirections incorrectes vers la page de démarrage. Des redirections défectueuses, c'est lorsque les utilisateurs sont toujours passés par différents dessous de la version de bureau de la maison mobile. Google peut punir quelque chose comme ça avec une pénalité.

Enfin : la checklist pour le référencement mobile

La liste de contrôle suivante permet de vérifier les sites Web en ce qui concerne leur affichage sur les appareils mobiles. Si tous les points de la liste de contrôle sont remplis, il y a de fortes chances que Google classe le site comme adapté aux mobiles. Il est à noter que certains points concernent une solution avec une version mobile distincte et ne sont pas pertinents pour les pages responsives.

Temps de chargement de la page : un maximum de trois secondes ou un minimum de 70 points dans Google PageSpeed Insights pour les appareils mobiles
Tout le contenu important de la version de bureau est-il également disponible sur le site Web mobile ?
La navigation est-elle adaptée ? Toutes les pages importantes sont-elles faciles à trouver ?
Comment le site est-il utilisable ? L'écriture est-elle facile à lire, les liens et boutons sont-ils faciles à utiliser ?
Pas de publicité gênante ou d'interstitiels qui interfèrent avec l'utilisation ?
Les références entre la version mobile et la version desktop sont-elles correctement créées dans les deux sens ?
N'y a-t-il pas de barre de défilement horizontale dans la version mobile ? D'un autre côté, le défilement dans le sens vertical est correct.
Les redirections sont-elles correctement configurées, idéalement en tant que redirection HTTP 302 ?
Les différents appareils tels que les smartphones et les tablettes sont-ils correctement reconnus et dirigés vers la bonne version ?
N'y a-t-il pas de "redirections erronées" (pas de redirections erronées vers la page d'accueil du mobile) ?
Les images sont-elles correctement intégrées et ont-elles toutes un attribut "ancien" ?