Comme l’a annoncé Google il y a un mois sur son blog des changements radicaux vont intervenir sur la recherche mobile à partir du 21 avril. En bref, la compatibilité de votre site mobile aura un impact déterminant sur son classement. D’ores et déjà les webmaster peuvent tester en ligne la compatibilité de leur site mobile sur une page Google dédiée et dans le cas des Apps, développer l’Apps Indexing et les liens profonds en fonction des recommandations de Google.
Parallèlement, le site Search Metrics souligne que 20 à 43% des résultats mobiles sont aujourd’hui différents des recherches PC
Comment ces changements vont-ils vous affecter à partir du 21 avril et que faire dans l’immédiat ? Mickaël Ducornet et Dimitri Brunel, spécialistes du SEO chez Netbooster nous expliquent ce qu’il faut savoir :
Clés de lecture de l’article
RWD : responsive web design
RESS : Responsive Design with Server Side components
Google Bot : robots de Google explorant le web, les liens, les pages, etc
Crawl : exploration des pages d’un site par Google Bot
Breakpoint : jalon limite entre différentes tailles d’écrans RWD
Device : appellation pour citer globalement les appareils « desktop, tablette, et mobile »
1 – L’importance d’un site mobile
Comme vous le rappelle Google depuis plusieurs mois, un nombre croissant de recherches se font de plus en plus en mode nomade sur un smartphone ou une tablette. Ne pas proposer une expérience utilisateur spécifique à cet usage, c’est se couper d’une partie de sa clientèle. Prenons donc pour postulat de départ que personne n’est surpris par l’annonce de Google et que, tout un chacun désirant vendre sur Internet (produits, services, informations) a déjà entrepris la démarche d’une équivalence de site « desktop » pour le mobile.
2 - Google vous donne les clés pour un bon site mobile
Cela doit bien faire deux ans que Google propose trois possibilités pour créer une version mobile de son site et quelques mois qu’il communique sur le fait que l’expérience mobile va être un critère de positionnement.
Si vous lisez les recommandations de Google à ce sujet, vous verrez qu’il y a un net parti pris pour le « responsive web design » pour une raison évidente : on facilite la tâche de Google pour « crawler » (autrement dit explorer) la version mobile. Vous ne trouverez d’ailleurs pas d’inconvénients exposés par Google sur cette solution, il vous y incite carrément
3 – Quels sont les avantages et inconvénients des trois solutions exposées par Google ?
-
Le responsive Web design
Le premier avantage du Responsive c’est de disposer d’une url et d’ un code html pour servir aussi bien la version pour ordinateur que la version pour tablette ou smartphone. L’adaptation aux écrans des différents appareils se fait au moyen de feuilles de style (CSS) et/ou de JavaScript.
L’avantage de cette méthode qui a la faveur de Google est de faciliter son crawl (exploration du site) car toutes les versions se trouvent via des URLs commnunes et partagent donc le même code source html.
En termes de SEO, c’est également ce que nous préconiserions si cette méthode était réalisable 100% du temps car les optimisations SEO se font donc sur une seule version de site web, et sont par conséquent plus faciles à maintenir pour la marque.
AVANTAGES RESPONSIVE WEB DESIGN (RWD) :
- Facilite l’exploration (crawl)et l’indexation par Google (pas de duplication de contenu). Ce point est particulièrement important du fait que la régularité du crawl de Google favorise un bon positionnement.
- Facilite le partage de page pour les utilisateurs
- La puissance du netlinking est concentrée sur une seule version
- L’usage est concentré sur une seule version (critère important pour Google)
- La gestion du contenu est simplifiée pour les équipes devant travailler sur le site
- La maintenance du site et les optimisations SEO sont facilitées
- Pas de redirections à mettre en place, donc pas d’erreurs potentielles sur ce point
- Pas de correspondance entre « desktop » et « mobile » à mettre en place
INCONVENIENTS RESPONSIVE WEB DESIGN (RWD)
- Si la version « desktop » est mal optimisée (pages, photos chargement), la version mobile hérite de la problématique.
- Le temps de chargement des pages est généralement alourdi par cette méthode. Il faut tenir compte du poids des images qui plombent majoritairement la bande passante. Cependant des solutions existent afin de servir des images adaptives pour chaque « devices » de votre audience, telles que l’attribut HTML « ScrSet » et les spécifications du draft HTML5 sur les images adaptives
- Le coût d’intégration de cette solution est plus élevé car demande de penser et d’intégrer dans un template de page deux usages bien différents (3 si on compte la tablette) avec l’ensemble des « breakpoints », autrement dit l’ensemble des tailles maximums d’écran des « devices » mobiles les plus courant.
- L’ergonomie est généralement contrainte par la version desktop, ce qui rend l’adaptation au mobile parfois impossible, vu la complexité des gabarits de pages « desktop ». C’est pourquoi nous préconisons, lors d’une refonte, de partir de la version mobile, pour travailler ensuite la version tablette , puis la version desktop.
Pour contrebalancer la problématique de lourdeur et de temps de chargement des pages, on s’oriente de plus en plus vers un mix entre Responsive Web Design (RWD) et Server Side Component (RESS). Nous allons recommander par exemple, de servir le même code HTML pour les différentes versions à une exception près, servir des images adaptées en fonction du besoin (plus légères pour une consommation sur mobile), plus une version « dite » par défaut présentant un bon ratio « poid / taille » pour Google.
-
Le dynamic serving
Le choix du dynamic serving implique une url pour servir deux codes html différents. La distinction entre les versions desktop et mobile se fait via l’empreinte (User-Agent) du navigateur web.
AVANTAGES DU DYNAMIC SERVING :
- On reste sur les mêmes avantages que le responsive web design, en terme de facilité de « crawl » et d’indexation par Google, de facilité de partage par les internautes, de concentration de la puissance du « netlinking » sur une version unique, et d’usage concentré également sur une version unique. Pas de système de redirections « page à page » non plus.
- A cela s’ajoute une expérience utilisateur optimisée puisque le code HTML servi correspondra à l’usage (mobile, tablette, desktop).
INCONVENIENTS DU DYNAMIC SERVING
Le crawl de Google est incomplet en premier ressort.
- A la différence du responsive web design, le « dynamic serving » nécessite des aménagements pour obtenir un « crawl » complet de la part des moteurs de recherche. Il est notamment nécessaire de montrer « patte blanche » compte tenu du fait qu’un contenu peut être partiellement différent en fonction du « user-agent », ce qui pourrait être assimilé à du « cloaking » autrement dit le fait de « présenter un contenu différent à Google suivant le user-agent ». D’où la nécessité d’utiliser l’entête HTTP « vary http : user-agent » recommandé par Google.
- La maintenance est plus difficile que le RWD compte tenu du fait qu’il faut maintenir les différentes versions créées pour répondre aux différents appareils utilisés
- Il peut exister un problème de reconnaissance des user-agents pouvant provoquer des problèmes d’affichage et une dégradation de l’expérience utilisateur
- Cette solution implique de mettre à jour la liste des user-agent régulièrement
- Problèmes de cache (plusieurs pages mises en cache pour une même url
-
Le site mobile indépendant
Le choix de cette solution implique d’avoir une url différente de la version desktop, un code HTML différent. Le site mobile indépendant est comme son nom l’indique … Indépendant !
Les avantages attribués au RWD et au Dynamic serving ne sont pas partagés par cette solution.
Ce que l’on peut retenir de cette solution, c’est qu’elle engendre une dilution de la puissance du netlinking entre le desktop et le mobile, une dilution du crawl Google également et très souvent, parce que mal gérée, une expérience utilisateur dégradée par le système de gestion des redirections. De surcroit, la version mobile indépendante demande un travail supplémentaire pour être maintenue.
Pour aller plus loin sur le sujet lire :
1- Les recommandations de Google en matière d’optimisation mobile
2- Les recommandations de Google en matière de construction de sites multi-écrans
3- Responsive Images Community Group