Mohammed ALAMI Consultant Expert SEO

Référencement SEO Montréal Mozalami

dimanche 3 février 2013

Référencement de site mobile SEO responsive design

Voilà presqu’un an que j’avais publié un billet sur le responsive design ici même et je dois avouer depuis je me suis concentré sur les sites mobiles dédiés avec des billets ici et , puis une présentation populaire sur Slideshare « Mobile SEO 2013 », et bien sûr une compilation d’infographies sur le compte Pinterest concernant le SOLOMO pour Social Local et Mobile.

Au mois de Janvier 2013, j’ai entamé une série de trois billets sur le référencement mobile SEO 2013 avec 2 news concernant les 3 options du site mobile et les défis du référencement mobile, un troisième billet est à venir concernant les recommandations du site mobile parallèle, restez connectés !
Dans ce billet, nous allons voir les conseils donc pour la version responsive,  la solution la plus facile mais pas la meilleure à mon humble avis en tant qu’expert SEO voyant le site mobile comme une opportunité d’affiner sa sémantique pour les mobinautes.

Simplicité de la solution Responsive Design :

Pour rappel, le responsive design est la manière de servir le même contenu en jouant simplement avec les feuilles de styles CSS et du Javascript évidemment. Ceci dit un site comme Microsoft.com l’utilise et de façon brillante, mais est-ce un challenge pour Microsoft le SEO ? Non !
Comme vous pouvez le voir, ci-dessous la version desktop est à gauche et la version mobile est à votre droite : cela est astucieux. 
Ils font cela intelligemment  en arrangeant les sections ci-dessous :

Vous pouvez le visualiser aisément en utilisant un émulateur comme Opéra pour mobiles, ou aussi Mobilizer (avec Adobe Air) ou si vous êtes mordus d’iPhone : Testiphone. Mais mon chouchou reste Screenfly qui est d’une facilité d’utilisation déconcertante :

Vous avez remarqué les icones en bas : Desktop, Tablet, Mobile, et TV ?!

Conseils de référencement mobile en reponsive design

Les deux points à développer sont l’utilisabilité (expérience utilisateur) et la vitesse du site. Il faut combattre le taux de rebond supérieur à la normale.

Selon les statistiques rapportées sur le site snaphop.com : 61% des visiteurs sur un site mobile non utilisable sont susceptibles d'aller sur le site d'un concurrent (Karim Temsamani à IABALM 2012). Et l’on sait pertinemment que le taux de rebond est un facteur important en référencement.
Les facteurs de base en SEO sont repris de la version Desktop comme les mots clés, les balises méta, les liens…etc.  Cependant, pour optimiser votre site en responsive design, voici donc les points à travailler :

Images compressées :

74% des utilisateurs de téléphones mobiles quitteront si après 5 secondes la page n’a toujours pas chargé (PDF), Assurez-vous donc que vos images sont compressées autant que possible. Smush.it de Yahoo! est un excellent outil pour cela.

Conception pour toutes les tailles d'écran

Beaucoup de designers conçoivent pour une taille spécifique pour portable, une taille pour bureau, une autre pour tablettes, et juste adapter le rendu du site dans ces tailles prédéfinies. Mais nous avons des cellulaires de grande et petite taille, des tablettes de 7pouces et 10pouces, ainsi que des moniteurs de bureau qui vont jusqu’à 30". Une conception responsive design adaptée prendra en compte le redimensionnement des éléments sur une page avec plus de pixels disponibles plutôt que de répliquer le même design d’un appareil à un autre.

Toujours afficher tout le contenu

C’est un challenge sur le mobile que de vouloir adapter l'ensemble du contenu de la version Desktop d’une page sur sa version mobile, mais c'est aussi la force du responsive design. Souvent, sur mobile, le seul contenu superflu concerne les annonces pub et certains éléments de navigation qui sont remplacés par une version plus simple. Les visiteurs mobiles veulent de autant d’informations et d'options que les utilisateurs Desktop, il ne faut pas les décevoir.

Optimiser pour le tactile

Vous perdrez certainement les événements qui se déclenchent au passage de la souris avec du JS comme « onmouseover », mais sachez que les propriétaires de tablettes ne peuvent pas le faire non plus avec leur souris, et que quelqu'un sur un poste de travail avec Windows 8 voudrait utiliser l’option du toucher. La meilleure pratique consiste à rendre votre site entièrement accessible avec écran tactile seulement, quelle que soit la taille de l'écran. Voyez ci-dessous les statistiques sur l’utilisation des tablettes :
N’oubliez pas, maintenant 28% des canadiens possèdent une tablettes (Techvibes)

Essayez sur tous les navigateurs

Vous vous rappelez certainement du bon vieux temps où il fallait tester le rendu du site sur IE et Firefox ? on y est de nouveau:
Bureau: IE9 pour Windows 7,  IE10 pour Windows 8 (pas de Flash), Firefox, Chrome, Safari et Opera.
Tablet / Mobile : Safari, navigateur Android par défaut, Chrome bêta, Dolphin, Opera et Firefox
Et encore là ce sont juste les plus populaires.

Voilà, bien que le responsive design ne soit pas la meilleure solution point de vue référencement (selon mon expérience), vous pouvez déjà prendre quelques pas d’avance par rapport à vos compétiteurs en rendant votre site utilisables sur les différentes plateformes : mobile, tablette, TV…
Il est à noter que si je ne considère pas cette solution comme optimale, c’est que derrière les coulisses, d’importants changements d’algorithme sont en train de prendre place, et notamment les «mobile queries » que l’on peut assimiler à la mise à jour « Venice » pour le local. 
Google pourrait reconnaître donc l’intention de la recherche simplement en utilisant le contexte, l’appareil et l’utilisateur : pourquoi donc ne pas travailler ces mots clés à la place