Category: SEO

14
Sep

Site Mobile, 3 types à découvrir!

Vous avez entendu dire que votre site était obsolète puisqu’il n’est pas adaptatif (« Responsive » ou Mobile friendly, soit un type de site optimisé pour téléphone Mobile), vous êtes rouge de colère, vous venez tout juste de refaire votre site avec un visuel très alléchant et qui selon votre équipe web attirera d’avantage de clients. Votre site est-il réellement obsolète ?

Malheureusement, la réponse à cette question n’est pas noir ou blanc. Pour les « Google Sniffer »* oui, votre site est obsolète puisque Google a lancé le 21 avril 2015 un algorithme « Mobile friendly », c’est-à-dire que l’incontournable moteur de recherche mettra de l’avant les sites offrant une navigation optimisée pour Mobile, donc si votre site n’est pas adapté pour Mobile, vous risquez de chuter dans les résultats de recherche du géant de l’industrie.

Ne sortez pas vos mouchoirs tout de suite, il y a des solutions… Vulgarisons d’abord un peu ce que Google a lancé pour bien comprendre l’enjeu. Si vous vous demandez comment votre site réagit sur mobile, ne le vérifiez pas en l’ouvrant sur Mobile mais bien en l’ouvrant ici:https://www.google.ca/webmasters/tools/mobile-friendly/ . Il vous sera clairement indiqué si votre site est optimisé pour Mobile ou pas. De plus s’il ne l’est pas, il vous donnera la raison et comment l’optimiser. Génial non? Pas vraiment, modifier un site qui n’est pas« Mobile friendly » pour le transformer en « Mobile friendly » demeure une tâche complexe. Si votre site est optimisé pour Mobile selon Google, bravo, vous pouvez cesser la lecture et aller jouer au Tetris ici. De plus, si vous avec un site précis qui sert à un clientèle particulière qui n’ouvrira jamais votre site sur Mobile et que vous ne cherchez pas à atteindre une nouvelle clientèle : il n’est pas nécessaire d’optimiser votre site. Sinon, lisez la suite pour ouvrir vos yeux sur un sujet peu connu mais d’importance capitale…

On se lance dans l’adaptation de votre site vers un site adapté pour téléphone? Ok, disons que le texte suivant contient quelques éléments clés que vous devez garder en tête lorsque vous adaptez votre site pour Mobile. Tout d’abord, il faut comprend le terme Mobile. Google entend par Mobile, téléphone intelligent, il ne parle pas de tablette, ni de téléphone multimédia, etc**.

Comment créer un site mobile friendly? Il y a trois possibilités que je ne traduirai pas: Responsive Web Design, Separate URLs et Dynamic Serving. Chacun a ses avantages et ses inconvénients. Google recommande d’utiliser un design responsive. Par contre, Google ne dit pas que le site responsive sera d’avantage mis de l’avant sur les résultats de recherche. Donc, la décision vous revient entièrement. Voici quelques constats par rapport à chaque configuration ainsi que quelques exemples.

Responsive Web Design
Un site Responsive est un site qui s’adapte par rapport à la taille de l’écran, vous trouverez normalement toujours les mêmes fonctionnalités peu importe la taille d’écran que vous utiliserez. Le site Responsive est le site le plus facile à implanter puisque chaque page à un seul URL et un seul fichier HTML. Cela implique une modification globale de votre site. La page s’adaptera toujours, peu importe la taille de l’écran, vous pouvez bien sûr lui imposer des balises. Puisque le site télécharge toujours la même taille d’image, votre site sur mobile peut rapidement devenir très lent à télécharger ce qui est très néfaste pour le «ranking» sur les moteurs de recherche. Selon plusieurs, mieux vaut un site vite qu’un site Responsive qui ne télécharge qu’à pas de tortue. Il est aussi à noter que les utilisateurs naviguent rarement sur des sites que les pages ne téléchargent pas rapidement. Testez la rapidité de votre site ici: https://developers.google.com/speed/pagespeed/insights/ .

Voici quelques exemples de sites Responsives:

Site responsive de airbnb

https://www.airbnb.com/

Responsive design avec le news de Montréal Guide Condo

montrealguidecondo.ca/news/

 

 

 

 

 

 

 

 

 

Separate URLs
L’ancienne méthode, quoi que toujours très actuelle. Les premiers sites mobiles utilisaient cette configuration. Le but est de mettre deux urls différents un pour le site mobile et un pour le site desktop. Ce qui permet d’avoir deux fichiers html différents et de pouvoir offrir une version perfectionnée pour le mobile. Il faut faire très attention de bien «cannoniser» votre site pour que les moteurs de recherche comprennent bien la structure de votre site et qu’ils ne pensent pas que vous avez deux pages avec le même contenu mais bien, deux structures différentes. Si Google pense que vous avez dédoublé l’information sur votre site, vous êtes sur une pente fatale, vers la détérioration de votre «ranking» sur les moteurs de recherche. Cette configuration reste très complexe au point de vue SEO (Search Engine Optimisation – optimisation du moteur de recherche) puisque vous aurez deux pages très similaires avec des URLs différents. Je déconseille cette approche, dans la plupart des cas.

sur la page de votre site :

<link rel="alternate" media="only screen and (max-width: 640px)"
href="http://m.example.com/page-1"

sur la page de votre version mobile:
<link rel="canonical" href="http://www.example.com/page-1" >

PSSST vous n’êtes pas obligé d’utiliser un sous-domaine (m.exemple.ca/) vous pouvez utiliser un sous-fichier (exemple.ca/mobile/) ou une extension (exemple.mob/).

Voici quelques exemples de sites utilisant le Separate URLs:

Separates URL de du propio

duporpio.com avec m.duproprio.com

serapare url de centris

centris.ca avec m.centris.ca

 

 

 

 

 

 

 

 

 

 

Dynamic Serving
Un site utilisant un Dynamic Serving est un site qui offrira des arborescences différentes selon la taille de l’écran de l’utilisateur. Ce style d’implantation de version mobile est le plus couteux et le plus complexe. Il est utilisé pour les entreprises de grandes tailles. Il faut comprendre qu’il faut que votre site sache sur quel outil l’utilisateur navigue pour lui offrir la bonne version de votre site. Les erreurs sont fréquentes. Votre URL ne changera jamais par contre, vous aurez un fichier HTML différent pour le mobile tel le Separate URLs. Vous devez mettre dans le <head> de chacune de vos pages la redirection pour le mobile (exemple ci-dessous), vous pouvez aussi utiliser cette technique pour offrir un site bilingue facile à naviguer. Suivez les instruction de Google si vous comptez utiliser cette configuration puisque les «scrawler» de Google doivent être capable de comprendre votre site: https://developers.google.com/webmasters/mobile-sites/mobile-seo/configurations/dynamic-serving.

GET /page-1 HTTP/1.1
Host: www.example.com
(...rest of HTTP request headers...)
HTTP/1.1 200 OK
Content-Type: text/html
Vary: User-Agent
Content-Length: 5710
(... rest of HTTP response headers...)

Voici quelque exemples de sites utilisant le Dynamic Serving:

dynamic serving de amazon

http://www.amazon.ca/

dynamic serving avec ebay

http://www.ebay.ca/

 

 

 

 

 

 

 

 

 

Bref, comme vous le voyez le sujet n’est pas simple. Si vous sentez que vous devez vous diriger vers une version de votre site web compatible sur Mobile, lisez tout ce que vous pouvez sur le sujet avant de prendre votre décision. Il est à noter que le changement dans l’algorithme de Google pour le mobile friendly du 21 avril 2015 touche seulement les résultats de recherche sur Mobile. Pour toute question ou commentaires, n’hésitez pas c’est ci dessous.

* Terme que j’aime utiliser pour les gens moins avisés sur le sujet…

**https://developers.google.com/webmasters/mobile-sites/mobile-seo/overview/different-devices