Comment optimiser son référencement mobile

Il faut savoir distinguer les SERPs de Google, qui sont divisés en deux parties : les sites desktop et les sites « mobile-friendly ». En effet, le positionnement de votre site peut varier selon que l’on utilise un ordinateur ou un smartphone. Sachant qu’aujourd’hui le web mobile représente 72% et le web desktop 27% du partage total du trafic web, et qu’en plus Google va mettre à jour son algorithme de Search mobile le 21 avril prochain, il devient de plus en plus nécessaire d’optimiser son site pour une compatibilité mobile au top si l’on souhaite être visible sur mobile.

Mais tout d’abord, commençons par le début : il existe trois façons de rendre son site compatible mobile : Responsive, Diffusion dynamique (Site Dynamic Serving) et les URLs distinctes.

Configuration	Est-ce que mon URL reste la même ?	Est-ce que mon code HTML reste le même ?
Responsive Web Design
Site Dynamic Serving
URLs distinctes

1. Responsive Web Design: on a un code HTML identique affiché sur la même URL, pour n’importe quel type d’appareil (ordinateur, tablette, téléphone mobile, etc.). Le Responsive Design s’adapte selon la taille de l’écran. C’est la méthode number one aujourd’hui, et à raisons. D’ailleurs, Google recommande cette méthode pour plusieurs avantages :
   – Moins de temps de développement général, comparé aux 2 autres méthodes ci-dessous
   – Probabilité moindre d’erreurs de développement
   – Sauvegarde de ressource lors du crawl de Googlebot, rendant le crawl plus efficace et améliorant indirectement l’indexation de Google
   – Moins de temps de suivi de développement et de maintenance sur le long terme
   – Meilleure visibilité puisqu’il n’y a qu’une seule URL à communiquer
   – Meilleure expérience utilisateur
2. Site Dynamic Serving: on a la même URL quel que soit l’appareil utilisé mais le code HTML est différent selon le support du visiteur. On fait de multiples conditions pour afficher un contenu sur-mesure (est-ce que le visiteur est sur iPhone, sur quelle version, etc.). C’est une méthode très lourde qui demande de tester toutes les situations possibles.
3. URLs distinctes: une URL pour le site desktop et une URL pour le site mobile (les fameuses URLs du type http://mobi.site.com par exemple). Il s’agit d’une méthode souvent peu ou pas pensée pour l’expérience utilisateur.

Eviter le contenu dépendant

On aurait tendance à l’oublier, mais il suffit de peu de choses :

• Privilégier l’utilisation de l’HTML5 pour les animations qui seront ainsi visibles sur mobile, légères et fluides. C’est une technologie moderne en évolution constante et qui compte bien renverser Flash un jour ou l’autre (on prend les paris ? ). Flash est néanmoins toujours supporté sur Android.
• Utiliser des technologies de remplacement au cas où la première ne fonctionnerait pas ou ne serait pas compatible avec le support de l’internaute. Par exemple, un contenu texte qui retranscrit la vidéo si le javascript ne fonctionne pas ou encore prévoir une image PNG si le SVG n’est pas supporté…
• Enfin, une recommandation qui serait valable même si vous décidez de vous passer du responsive : l’Accessibilité. Un site accessible avec des éléments ou des cas de figures prévus pour ceux qui visitent un site différemment n’apporte que des bénéfices (expérience utilisateur, meilleur accès au contenu, etc.) et peut-être même des points aux yeux de Google.

Saviez-vous que la Wii U ne supporte pas le Flash mais le HTML5 ? Et que la cravate est déconseillée pour le confort de jeux ?

Faire crawler votre site et vos redirections

Lors de la phase de test en fin de développement de votre site, n’hésitez pas à utiliser des outils de crawl (tels que XENU, Screaming Frog SEO Spider, etc.) pour vérifier si toutes les pages sont bien redirigées dans les situations que vous avez prévues. Il n’y a pas d’erreurs de redirection ? Le robots.txt a bien été testé ? Les balises canonical sont bien retrouvées et non dupliquées ? Du moment que Googlebot arrive à accéder là où vous voulez, vous êtes bon. Enfin, il y a toujours Google Webmaster Tools qui permet d’afficher des avertissements relatifs à des erreurs de crawl sur votre site.

Screaming Frog SEO Spider est très complet pour vérifier les possibilités d’accès à son site.

Rediriger vos erreurs 404 mobiles

En dissociant le contenu desktop et le contenu mobile, il peut arriver qu’un contenu desktop ne soit pas prévu pour le contenu mobile, et dans ce cas erreur 404. Dans ce cas, il vaut mieux montrer le contenu desktop sur la partie mobile, plutôt qu’une redirection sur la page d’accueil ou une erreur 404. Cela permet au Googlebot mobile de quand même crawler un contenu.

Accélérer et optimiser votre site grâce à Google PageSpeed Insights

Google PageSpeed Insights est un outil très intéressant et performant que vous pouvez utiliser en ligne, en tant que plugin Chrome, via API ou même sur votre serveur Apache ou Nginx. Cependant, Google PageSpeed n’est pas le seul outil qui vous aide à améliorer et optimiser votre site, il existe aussi de très bons outils comme Webpagetest.org, Pingdom, YSlow, GTMetrix, etc. Suivez les différents conseils listés par ces outils pour avoir tout ce qu’il faut afin d’avoir un site optimisé mobile.

Prévoir certaines balises

Certaines balises sont recommandées dans l’utilisation d’un site mobile :

• Rel=Alternate Media: Cette balise permet de mapper les URLs desktop et mobiles, si vous décidez de séparer le contenu. Pas besoin de spécifier cet attribut sur la version mobile.
  Exemple :

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

• Rel=Canonical : Cette balise, très utile en SEO, permet de spécifier l’unicité de la page et de son contenu. C’est très utile pour éviter les duplicate content si vous avez des pages qui rappellent le contenu d’une autre (comme le listing d’articles, des catégories, etc.). De plus, cela signale que le contenu desktop et mobile est présent sur la page spécifiée (donc utile dans le cas d’un site responsive à URL unique)
  Exemple :

  <link rel="canonical" href="http://example.com/mon-article" />

• Rel=Next/Prev : Cette balise est conseillée dans le cas de contenu avec pagination. Par exemple pour l’article de blog suivant ou précédent. Cependant, si le nombre de posts listé par page est différent entre la version desktop et mobile, vous ne pourrez pas utiliser Rel=alternate en association avec Rel=Next/Prev puisque l’association entre les pages ne pointera pas correctement.
  Exemple :

  <link rel="next" href="http://www.mylittlepony.fr/article-2" />

• http Header « Vary : User-Agent » : Ce type de Header permet de spécifier quelle version de la page est à mettre en cache. S’agit-il de la version mobile ? Ou de la version Desktop ? Enfin, cela permet à Google de comprendre le site et de visualiser les versions correctes des pages du site, pour qu’il le mette en cache à son tour. Ce header n’est pas à utiliser si vous êtes dans le cas d’un site responsive avec le même contenu, que ce soit mobile ou desktop.
  Exemple dans le .htaccess (Apache) :

  Header append Vary User-Agent

  Exemple (Nginx) (nécessite ngx_headers_more) :

  more_set_headers –s 200 "Vary:" "Accept-Encoding, User-Agent";

  Exemple (via PHP) :

  <?php header("Vary : User-Agent, Accept"); ?>

Un Design pour les mobiles

L’influence des smartphones sur les sites en ligne est importante puisque l’ergonomie et l’expérience utilisateur sont des attributs qui peuvent à eux seuls apporter un lead ou au contraire faire fuir le visiteur. C’est ainsi qu’une bonne ergonomie d’interface (boutons bien placés, pensés pour les gros doigts, etc.) et une bonne expérience utilisateur (pas de pop-ups, éviter les interstices, etc.) peuvent sensiblement changer la donne aux niveaux des statistiques d’acquisition, et faire chuter le taux de bounce (ou le rebond, c’est-à-dire quand un visiteur arrive puis repart rapidement pour diverses raisons (temps de chargement, expérience utilisateurs, pop-ups, etc.)

Un utilisateur lambda qui navigue sur un site non optimisé pour mobile, provoquant une imposante duckface.

Autres astuces

Compresser le PNG et le JPG

Une façon efficace d’améliorer la vitesse de chargement des pages tout en sauvant de la data à vos visiteurs est de compresser vos fichiers PNG et JPG, avec compression sans perte de qualité qui ne touche pas à l’image visuelle. Il y a donc le très efficace tinypng.com pour les fichiers PNG en ligne et le logiciel JPEG Reducer pour la compression sans perte de fichiers JPG en masse.

Utiliser un CDN

Un CDN (Content Delivery Network) est constitué d’un ensemble de serveurs dans le monde pour redistribuer localement la version cache de votre site. C’est très utile si vous avez un site multi-langue ou destiné à l’international. Par exemple, au lieu qu’un internaute australien fasse une requête à votre site sur un serveur basé à Paris, le CDN permet de réduire cette distance entre l’utilisateur et le serveur à un endroit près de cet utilisateur, comme Canberra dans notre exemple. Et en plus, cela protège mieux des attaques DDOS et des spams. Vous avez de nombreux prestataires sur le marché tels que Cloudflare, Amazon Cloudfront, Akamai, OVH… Allié à un hébergement performant, ça fait le café !

Créer un Sitemap pour le site mobile

Dans le cas d’un site distinguant le contenu desktop du contenu mobile, il est alors utile d’envoyer un sitemap XML consacré à votre site mobile à destination de Google, dans les Google Webmaster Tools. Si vous avez bien effectué ce qu’on a énoncé plus haut, notamment au niveau des balises, Google saura automatiquement qu’il s’agit de votre version mobile lors du crawl.

Conclusion

Au final, Google souhaite surtout tirer par le haut la qualité des sites internet sur mobile. D’une manière logique, les mieux réalisés sortent du lot, sachant qu’un site est réalisé pour être visité par des humains. On se retrouverait donc avec un site aux nombreux avantages : Plus de trafic ; Meilleure Expérience Utilisateur ; Plus de conversions ; Plus de temps de lecture ; Taux de bounce réduit ; Temps de chargement réduit ; Avantage compétitif ; Plus d’engagement et de fidélité et enfin une meilleure présence dans les SERPs.

Et on oublie pas l’objectif :

Sources : InstantShift, Thinkstock, Aquitem