La boutique culturelle en ligne de Lanaudière

La boutique en ligne créée par Culture Lanaudière le4673.ca fête son deuxième anniversaire. J’en ai fait une analyse pour essayer d’expliquer à ceux qui veulent se mettre au commerce en ligne comment concevoir un site internet bien référencé plutôt qu’un site beau à regarder mais que personne ne trouve car il est trop loin dans la liste des résultats des moteurs de recherche.

Le but d’un site internet est de figurer en bonne place dans les résultats des moteurs de recherche pour les requêtes qu’on a ciblées. Si le moteur de recherche juge que notre site est performant, que la page est conçue selon les normes et qu’elle répond à la question posée par la requête, il fera normalement son travail. Sinon on se retrouvera dans la moyenne des autres sites et ça peut être loin dans la liste si la concurrence est forte.

Voici quelques tests standards qui permettent d’évaluer un site. Je conseille à tous ceux qui veulent engager un webmaster de tester son site de cette façon pour voir si il est sérieux, c’est très étonnant si on cherche un webmaster dans Lanaudière.

Analyse de performance

Il y a de nombreux outils de test disponibles, j’ai utilisé WebPage Test.

Le site a de bonnes et de très mauvaises notes.

La première est particulièrement inquiétante pour un site de commerce en ligne: F pour la sécurité. En cliquant sur ce F on a plus d’informations à propos des failles détectées mais ce n’est pas mon domaine; un hacker sait comment utiliser ces informations.

Le deuxième F est pour la gestion des images qui pourrait facilement être améliorée en compressant les images (de 2.1Mb à 272ko selon l’analyse). La mode sur le web est de mettre une bannière avec des photos H-D en haut des pages; on ne voit jamais ça sur des sites professionnels car les images prennent du temps à se charger (le visiteur se retrouve le plus souvent devant un écran blanc à attendre) et elles ont peu d’intérêt pour le référencement. Le texte est beaucoup plus important et il y en a peu sur ce genre de site, ils sont donc mal référencés.

Exemple le logo du site: c’est un fichier image de 1994px de large et 218ko mais l’image est redimensionnée pour être affichée en 250px environ; on télécharge un gros fichier inutilement. Pour l’utiliser en-haut de cet article je l’ai copiée et redimensionnée selon mes besoins: 250px ce qui ramène la taille du fichier à 7,6ko. C’est nettement plus performant.

La note de F pour le cache pourrait facilement être améliorée elle aussi, c’est juste une question technique. Utiliser un CDN c’est assez simple.

On peut confirmer l’analyse avec PageSeep Insights de Google qui donne une note de 47/100 pour le mobile et 76/100 pour l’ordinateur. L’objectif est d’avoir au moins 90/100, le mien est 99/100.

La sémantique des pages du site

Les métadonnées du fichier

Pour que son site soit référencé un webmaster doit suivre des règles ou standards. Une page web est un document structuré pour que les internautes et les robots d’indexation puissent le comprendre facilement. Du point de vue des moteurs de recherche une page doit répondre le plus exactement possible à la question posée par l’utilisateur.

La première chose à vérifier dans le code HTML (qu’on peut voir en faisant Ctrl+U) sont les métadonnées du fichier, la partie destinée aux machines dont les robots d’indexation. Voici ce que je cherche pour la page d’accueil du site:

• <title>Le 4673° – Boutique en ligne d’œuvres d’art québécoises | Galerie d’art en ligne</title>
• <meta name= »description » content= »Encourager les artistes québécois avec la galerie d’art virtuelle, qui propose aussi une librairie et un disquaire virtuel. Des créations québécoises uniques!« >

Et pour une page prise au hasard dans la boutique:

• <title>Une fille ça ne pleure pas | Création québécoise | Galerie d’art en ligne</title>
• <meta name= »description » content= »Création québécoise ‘Une fille ça ne pleure pas’ de la Boutique Le 4673°.« >

Ces 2 balises servent entre autres à définir le mot-clef (ou expression) qui sera développé dans la page pour que le robot l’interprète correctement et l’indexe.

Je ne discuterai pas le choix fait pour la page d’accueil (il devrait être amélioré) mais le texte pour le produit n’est pas bon c’est certain. Voici ce dont le robot aurait besoin:

• <title>Une fille ça ne pleure pas | Claude Daigneault</title>
• <meta name= »description » content= »Un roman qui raconte… un court texte punché »>

Il faut noter que ces textes sont ceux qui sont affichés par les moteurs de recherche dans leurs résultats. Une fille ça ne pleure pas | Création québécoise | Galerie d’art en ligne comme titre suivi de Création québécoise ‘Une fille ça ne pleure pas’ de la Boutique Le 4673° comme texte,ça n’incite pas spécialement à cliquer sur le lien.

La structure du texte

Une page web est un document structuré. Il doit avoir un titre principal H1 où on définit le mot-clef de la page. Cette expression doit ensuite être développée de façon logique. Sur la page d’accueil après avoir défini la boutique en ligne en H1 on présente les thèmes principaux du site dans des sous-titres H2. Pour une page de produit comme plus haut on devrait donc avoir à peu près la structure suivante:

• H1 Une fille ça ne pleure pas
  • H2 Auteur Claude Daigneault
  • H2 Un roman qui raconte…
    • H3 1er chapitre
    • H3 2ème chapitre
  • H2 Les commentaires
  • Etc…

Avec l’extension WebDevelopper de Firefox je vérifie en affichant le plan de la page d’accueil et de celle d’un produit à vendre:

La page d’accueil

Le titre H1 n’est pas bon, il devrait reprendre le <title> de la métadonnée en variant légèrement le texte. Le 2ème titre H2 est absurde car ce n’est pas un titre mais un paragraphe que le webmaster voulait afficher en gros caractère; la sémantique consiste à utiliser les balises HTML logiquement.

Il devrait y avoir beaucoup plus de texte sur cette page, la plus importante du site. En créant un titre H2 pour la galerie d’art suivi d’un texte de présentation, puis un H2 librairie, puis un autre pour le disquaire, on peut indexer beaucoup de mots en complément du mot-clef principal. On explique aussi au robot comment le site est organisé. Les robots indexent des mots, pas de beaux designs.

La page produit

Pour un robot cette page ne signifie rien du tout, elle n’a pas de titre. Le H1 est manquant et on n’a ni le nom du livre ni celui de l’auteur. Aucune chance de référencer efficacement une telle page. Suggestion:

• H1 Titre: Une fille ça ne pleure pas
• H2 Auteur: Claude Daigneault
• H2 Description
• H2 Du même artiste

Pour une boutique en ligne il existe en plus des balises spécifiques à utiliser pour que les robots puissent interpréter la fiche produit: titre, auteur, catégorie, prix, etc. Les machines comme les comparateurs de prix pourront comprendre ces fichiers et les utiliser.

Dans l’index de Google

Pour terminer mon analyse je vais aller vérifier dans l’index de Google comment les pages du site sont indexées. La recherche site:le4673.ca me donne la liste de toutes les pages, il y en a 1540 depuis 2 ans que le site a été créé.

On peut facilement constater que les textes présentant les pages ne sont pas optimisés pour le référencement même si toutes les pages sont bien indexées. Quand on est indexé dans la moyenne sur internet ça signifie que si il y a 20 pages de résultats on sera à la 10ème. Mais personne ne se rend jamais à la 10ème page; il faut être sur la première sinon ça ne sert à rien.

Diagnostic

Mon but n’est pas de critiquer ceux qui ont conçu ce site mais de les aider à comprendre ses défauts pour l’améliorer. Concevoir un site de commerce en ligne est devenu très compliqué car il faut des connaissances dans des domaines très divers; plus aucun individu ne peut prétendre tout savoir, c’est un travail d’équipe.

Comme je le disais au début de l’article, certaines notes de performance pourraient facilement être améliorées, par exemple la gestion des images. Mais il y a des erreurs à corriger d’urgence: la sécurité. Et d’autres beaucoup plus compliquées à corriger.

La pire erreur selon mon domaine d’expertise, le référencement, est de ne pas respecter la sémantique des balises HTML et la structure des pages. Car pour corriger la sémantique des pages de ce site il va falloir corriger 1540 pages; et le site n’a que 2 ans d’existence. C’est pour ça que certains sites comme celui de Chertsey ne peuvent plus être corrigés, ils se détériorent peu à peu. Il faut tout refaire et ça coûte cher.

Mon conseil à ceux qui veulent créer leur site internet c’est de faire un plan très sérieux avant de commencer et de le suivre rigoureusement. On se crée un protocole à suivre pour chaque action sur le site et quand on ajoute une nouvelle action on fait des tests avant de la mettre en pratique. C’est toujours très compliqué de revenir en arrière.

J’ai publié mon article et j’ai demandé à Google de venir l’indexer. Quelques heures plus tard je fais la recherche « boutique culturelle lanaudière » et mon article est en très bonne position: ces mots figurent dans le titre H1 de mon article, pas dans celui des autres. Pour des recherches comme « le4673 » il est un peu plus loin dans les résultats car je l’ai seulement mentionné dans le texte, mais il a été indexé aussi, à la suite de ceux qui ont mis ce terme plus en avant.

Tout est une question de concurrence; si la concurrence est moyenne on peut arriver à bien figurer dans les résultats de recherche. Mais il suffit qu’un concurrent fasse mieux pour qu’on se retrouve derrière lui et qu’il vienne rafler le marché qu’on convoitait. Il m’a suffi de publier un article pour devancer la boutique en ligne sur un des mots-clefs principaux de son site; si j’étais un concurrent je n’aurais qu’à optimiser un autre article sur le mot le4673.ca pour les devancer sur ce terme aussi. Ce n’est pas parce que je fais de la magie, c’est parce qu’ils n’ont pas fait leur travail professionnellement. Ça peut marcher pour faire du commerce en ligne dans Lanaudière mais on ne peut pas espérer rejoindre la planète comme ça.