Ergonomie des carrousels : 10 principes à respecter

Depuis quelques années déjà, le carrousel s’est imposé comme une excellente solution pour mettre en avant les actualités principales d’un site web. Le principe est le suivant : afficher des sujets en grand format qui « tournent » en alternance, l’un après l’autre. Une bonne manière de gérer l’espace limité de l’écran et d’en augmenter l’impact. C’est prouvé : un grand format attire davantage l’attention qu’un puzzle d’informations qui se font concurrence. Cependant, la qualité des carrousels que vous rencontrerez sur le web apparaît très variable. Certaines critiques régulièrement entendues, l’expérience de tests utilisateurs et le bon sens m’amènent à proposer 10 recommandations.


1. Le rythme

C’est la critique la plus fréquemment exprimée. « Le carrousel tourne trop vite ! ». Rarement l’inverse. Très souvent, l’utilisateur n’a même pas le temps de lire le quart du texte affiché que le diaporama l’entraîne ailleurs. Un carrousel qui tourne trop vite gêne également la lecture des autres éléments de la page. Les utilisateurs détestent le mouvement nerveux et les effets d’animation extravagants, qui sonnent trop publicitaires. Veillez à ce que le carrousel tourne calmement. 8 à 10 secondes d’affichage s’avèrent souvent nécessaires. Testez le rythme du carrousel dans plusieurs environnements, afin d’en jauger la fiabilité.


2. La transition

Dans certains cas, l’utilisateur n’aura même pas remarqué que l’affichage a changé. Un effet de transition explicite, sous la forme d’un fondu enchaîné par exemple, marquera plus clairement le mouvement de carrousel. La fluidité de la transition a de l’importance. Pour cette raison, le fondu enchaîné a ma préférence : il permet de quitter un sujet avec douceur et de glisser vers le sujet suivant. Un bref passage au noir peut également convenir. Évitez par contre les effets folkloriques, du genre « spirale » ou « bienvenue à la foire ».


3. Le contrôle utilisateur

Le mouvement imposé à l’utilisateur reste une attitude « offensive » susceptible de générer des frustrations. La seule manière de le compenser est de redonner ce contrôle à l’utilisateur sous la forme d’éléments d’interaction intuitifs et explicites.

L’utilisateur doit pouvoir :

  • Stopper l’animation. Y mettre une pause.
  • Revenir en arrière.
  • Parcourir le diaporama à son rythme et à sa manière.

Plusieurs solutions existent…

Ci-dessous, la barre de contrôle indique clairement le nombre de sujets disponibles et propose un contrôle sur la navigation. Le bouton « pause » est particulièrement précieux.

Les petites flèches latérales restent également un moyen de contrôler le défilement.

Les petits ronds sont devenus presqu’un standard. Je dis « presque », car ils restent moins explicites. Si vous en faites usage, veillez à les rendre suffisamment présents.



Ci-dessous, la barre de contrôle proposée sur Arte.tv présente le désavantage de dépendre de la couleur de fond. Sur fond clair, les petits ronds deviennent quasi invisibles.



Lorsque l’utilisateur fait le choix d’afficher un sujet, le carrousel devrait s’arrêter. De nombreux sites web relancent l’animation après quelques secondes, à la grande frustration des utilisateurs.

Un passage de la souris sur le sujet affiché devrait en stabiliser l’affichage. La plupart du temps, un utilisateur bouge sa souris sur un élément parce qu’il s’y intéresse.


4. Le nombre de sujets en alternance

Si les sujets sont trop nombreux, la navigation devient compliquée. Les sujets en fin de liste se retrouvent très déforcés et le cycle, trop espacé. Ci-dessous, le choix se disperse et les petits ronds en viennent à mordre le contenu du carrousel.



En-dessous de trois sujets, le carrousel perd son sens. Il m’est arrivé de voir des carrousels à un seul sujet, tournant sur eux-mêmes. Absurde.

Derrière un carrousel, il y a donc une ligne éditoriale.

Dans la plupart des cas, optez pour 3 à 5 sujets.

Certaines formules d’affichage des sujets à la verticale, comme ici sur Yahoo! Health, permettent de lister une dizaine de sujets.


5. La position du carrousel dans la page

Le carrousel, comme élément de l’interface, s’est imposé au centre de l’écran, dans la partie haute.

Lorsque le carrousel est positionné sous la ligne de flottaison, ou encore dans une zone latérale, il perd énormément de son impact et provoquera une expérience utilisateur déroutante.

Le but du carrousel est de focaliser le centre de l’attention.


6. La quantité de texte

En dix secondes, vos visiteurs liront 20 à 30 mots.

Ci-dessous, la quantité de texte moyenne affichée sur le carrousel d’Arte TV, pendant environ 10 secondes. Le texte peut être lu de bout en bout par un utilisateur attentif. Mais il ne faudrait pas faire plus long.



Ci-dessous, quel est le carrousel le plus lisible ?

« Wrath of Heroes » n’accroche pas aussi bien que « Truth About Beer ».
Car trop de texte induit aussi une police de caractère trop petite.
Notez aussi la redondance : « Wrath of Heroes » apparaît deux fois, dans le texte et dans la partie graphique. Une telle redondance ne devrait pas être permise dans l’espace limité du carrousel.




7. Le visuel

Mieux vaut un seul visuel impactant qu’un effet de montage.

Privilégiez les visuels concrets qui représentent le contenu plutôt que les effets de style.

Ci-dessous, sur le site officiel de la présidence française, le choix d’un visuel unique nous semble plus porteur que la tentation de réaliser un patchwork. Une mise en page en puzzle va à contre-sens de l’intérêt du carrousel qui consiste précisément à exploiter un large format.


8. La clarté de l’interaction proposée

En dehors de la possibilité d’interagir avec la navigation au sein du carrousel (voir point 3 ci-dessus), l’utilisateur peut généralement cliquer dans la zone de contenu pour accéder au détail de l’information.

Nous recommandons :

  • Une seule zone de clic de préférence
  • Visuellement présente (suffisamment grande et contrastée)
  • Offrant une interaction explicite (par exemple un bouton, une flèche,…)
  • Positionnée de préférence en bas à droite

Ci-dessous, le bouton « Play video » répond aux bonnes pratiques : contrasté, bien positionné dans le flux de lecture, libellé explicitement, invitant au clic.



Ci-dessous, le carrousel d’Umicore ne laisse pas apparaître la possibilité d’une interaction. Peu d’utilisateurs seront enclins à cliquer. Ce type de présentation avec du texte fondu dans le visuel et aucune zone de clic explicite sera reçu comme un placard publicitaire, même si le contenu mène en réalité vers de l’information.




9. La cohérence

D’un sujet à l’autre, mais aussi d’un jour ou d’une semaine à l’autre, il importe de respecter une cohérence pour créer des repères et la sensation d’un environnement éditorial maîtrisé.

La cohérence se vérifie à différents niveaux :

  • Cohérence graphique (typographie, coloris, traitement des photos,…)
  • Cohérence fonctionnelle (zones d’interaction, zones de clic,…)
  • Cohérence éditoriale (nature des contenus abordés, ton utilisé,…)

Ci-dessous, dans son carrousel, Arte TV fait varier la position de son descriptif texte, mais la typographie ainsi que le volume de texte restent cohérents. Une bonne manière de créer un fil rouge tout en s’accordant des variations visuelles qui relancent l’attention.


10. L’accessibilité de la technologie adoptée

Plusieurs moyens existent de créer un carrousel : Flash, CSS, Javascript,… Le choix de la technologie influencera plusieurs facteurs :

  • Accessibilité du contenu par les environnements les plus variés (mon iPad ne supporte pas Flash, par exemple)
  • Indexation par les moteurs de recherche (de nombreux carrousels présentent le désavantage d’intégrer du texte non reconnu comme tel, non indexable)
  • Facilité d’édition par le client (un carrousel en Flash avec des transitions méga fluides, c’est très bien, mais si les contributeurs de contenu sont incapables de l’alimenter, on perd en réactivité)

Pour l’entreprise qui ne dispose pas d’un graphiste sous la main, certaines solutions plus sobres ou plus formatées peuvent s’avérer intéressantes. Ci-dessous, Google Analytics propose un carrousel quasi full text.



Tenez, par rapport à ce dernier point (les solutions techniques), je suis preneur de vos avis et réactions !


Pour en savoir plus (en Anglais) :






Et si vous désirez établir une ligne éditoriale pour alimenter votre carrousel en contenus efficaces, contactez-moi !

Actualisation des contenus : deux chiffres récents sonnent l'alerte

J'ai vu passer deux chiffres, ces derniers jours, qui, mis en parallèle, devraient claquer comme un coup de fouet dans les entreprises.

Google vient d'annoncer un nouveau changement dans ses algorithmes. L'évolution du système d'indexation, baptisé Caffeine, entend privilégier les contenus d'actualité. 35% des requêtes seront affectées par la fraîcheur de l'information dans ce nouveau mode de calcul.

Dans le même temps, un état des lieux du web français indique que 73% des sites web n'ont pas été mis à jour depuis un an !

Source : le lapin d'Alice au pays des Merveilles (Walt Disney)

Autrement dit, il est grand temps que les entreprises s'organisent pour gérer leur production de contenu.

Dans notre récente publication, "30 outils pour vos contenus web", Isabelle Canivet et moi-même abordons des concepts tels que le calendrier éditorial, la ligne éditoriale, le workflow de production des contenus,... bien nécessaires aujourd'hui.

Ce que ces chiffres ne disent pas, c'est qu'à l'autre bout, parmi les 20% d'entreprises qui investissent dans le contenu, la problématique est souvent inversée : les sites web sont boulimiques et il est urgent de les faire maigrir afin que les utilisateurs ne s'y perdent pas. L'archivage est le corollaire de l'actualisation des contenus.

5 stratégies d’écriture inédite pour gagner en référencement

Avertissement au lecteur : ce billet, bien qu’appuyé sur des données factuelles, contient de l’ironie. Vous le prendrez comme un clin d’oeil, alimentant la réflexion autour de la rédaction et du référencement.

Voici donc 5 moyens de plaire aux moteurs :

1. Être professoral
2. Être populeux
3. Abonder d'anglicismes et de néologismes
4. Se répéter comme une petite vieille
5. Faire des fautes d'orthographe


1. Être professoral

Il existe souvent plusieurs expressions pour désigner un produit ou un métier. Commencer un article en définissant les concepts est une excellente façon d’injecter des expressions synonymes en tête de contenu. Elles constitueront autant de possibilités d’accrocher Google et la longue traîne des requêtes.

Jouez donc à l’enseignant insupportable ! Du genre : « Le réseau de transport souterrain, communément appelé métropolitain, ou métro en langue vulgaire, présente le grand avantage de désengorger le trafic urbain en surface, que certains désignent sous le vocable d’embouteillages ou, plus familièrement, de bouchons. »


2. Être populeux

Intégrer un mot au top des recherches du moment est le meilleur moyen de surfer sur les pics de trafic. Sentez l’écume venir, embarquez la planche, et éclaboussez vos statistiques d’un trafic inespéré.

Par exemple, le trafic sur mon blog a connu un sérieux pic, il y a quelques mois, le jour où, rebondissant sur un phénomène de « buzz », j’ai écrit ce billet à propos de Kris Janssens. Grâce à un titre explicite, je me suis retrouvé au-dessus du Soir et de La Libre (presse quotidienne belge), bénéficiant d’un apport soudain de trafic.



Source : Google Trends


Tiens, j’aurais dû rédiger un dossier sur « DSK ». « Digital Strategy Kit », ça le fait, non ? ;-)


3. Abonder d’anglicismes et de néologismes

Même sur Google France, les gens cherchent des mots en Anglais, parfois plus que l’expression chère à l’académie de Voltaire.

Voyez l’exemple ci-dessous, dans un domaine qui me tient beaucoup à cœur ces temps-ci. Parlez d’ « analyse de trafic », en bon français, et vous récolterez une poignée de visites. Tandis que le « web analytics », expression anglaise et fondamentalement peu parlante à mes yeux, est celle qui s’impose dans l’usage, avec un potentiel de trafic 50 fois supérieur, même en France.



Source : Générateur de mots clés Google


4. Se répéter comme une petite vieille

La répétition d’un mot ou d’une expression à plusieurs endroits clés de la page web s’avère une stratégie porteuse : dans le TITLE, dans le H1, dans le fil d’Ariane, dans les menus, dans le corps de texte, dans les liens, etc.

Attention, ce conseil est dangereux, car en cas d’overdose, Google pourrait, au contraire, ne pas apprécier du tout. La suroptimisation peut vous envoyer aux oubliettes. L’essentiel est d’injecter les mots clés dans des balises différentes. Un clonage de mot clé au sein d’une même balise (un TITLE par exemple) risque d’être jugé suspect, à juste titre, par les moteurs.

Et puis, la première chose qu’on apprend à l’école en matière de rédaction, c’est de ne pas se répéter afin d’éviter la lourdeur, n’est-ce pas ?


5. Faire des fautes d’orthographe.

Les fautes d’orthographe représentent un fameux potentiel de référencement.

J’effectue, en ce moment, une consultance bénévole auprès d’une ONG qui propose le parrainage d’enfants sous la forme de dons réguliers vers un enfant et sa communauté.

Un détour par le générateur de mots clés vaut son pesant de ranking. Figurez-vous que, tous les mois, 14.800 recherches sont effectuées sur le terme « parainage ». Avec un seul « r », et donc une faute d’orthographe ou de frappe, commise par 6% des personnes.



Source : Générateur de mots clés Google


L’ampleur du trafic sur la faute d’orthographe, dans ce cas, est telle qu’elle justifie une page ciblée sur cette mauvaise orthographe. Moyennant une explication polie (du genre : « Vous cherchez probablement ceci ») et une redirection proprement effectuée, nous reconduirions le visiteur vers la bonne orthographe.

Certains, comme partage.org ci-dessous, n’hésitent pas à positionner une publicité (un Adword) sur la faute d’orthographe. En toute conscience vraisemblablement, car l’URL présente une orthographe correcte.



Attention, cependant ! Il reste délicat d’associer votre nom de domaine, et donc votre image, à une faute d’orthographe. D’autant que Google est intelligent et présentera, à vos côtés, des résultats bien orthographiés(*).

Au final, je suis bien d’accord, c’est l’effet lecteur qui prime.


(*) D’ailleurs, quand j’y pense, l’intelligence de Google n’arrange pas le laxisme orthographique : puisque, contrairement à l’univers des encyclopédies papier, ici, même quand on fait une faute, on trouve ce qu’on cherche et on est récompensé.

L'orthographe influence indirectement le référencement

Ce n'est pas moi qui le dis, c'est Matt Cutts, le porte-parole chez Google:

Do spelling and grammar matter when evaluating content and site quality? (vidéo de 3 minutes, en anglais).

A l'heure actuelle, l'orthographe et la grammaire n'entrent pas en compte de manière directe dans les critères de pertinence d'une page web. En revanche, il existe une corrélation entre la qualité orthographique d'une page en ligne et le nombre de liens entrant vers cette page (critère d'importance).


A lire aussi :

Catégories : Ecrire pour le web

Depuis la préhistoire du Web, nous savons que le morcellement arbitraire du contenu nuit à l'expérience de lecture.

La navigation en mode "next page" / "previous page" est héritée des vieux grimoires et s'avère complètement inefficace sur le web.

Idem pour la pagination numérotée : "page 1", "page 2",... complètement étrangère à la physique du web.

Sous prétexte de vouloir faire tenir la page en un écran (mais quel écran ?), certains hachent le contenu en une viande indigeste.

La première chose que font les lecteurs en arrivant sur une page web, c'est utiliser l'ascenseur vers le bas afin de prendre connaissance de la géographie de la page.

Bien entendu, les ergonomes identifient quelques exceptions où les visiteurs restent calés avec des yeux de merlan frit sur le premier écran.

Bien entendu, la partie haute (celle située au-dessus de la ligne de flottaison) garde toute son importance pour inciter les lecteurs à plonger dans les profondeurs de la page. Et, au cours de mes formations sur les techniques d'écriture pour le web, j'aborde les bonnes et mauvaises pratiques éditoriales en matière de maîtrise du haut de page.

Bien entendu, il existe des exceptions comme certains catalogues, ou comme la présentation des résultats d'un moteur de recherche.

Mais paginer du contenu web reste souvent générateur d'une mauvaise expérience. C'est Google qui le dit aujourd'hui : les utilisateurs préfèrent les pages "tout-en-un".

Source : Official Google Webmaster Central Blog

Atterrir sur un morceau de document, hors contexte, est rarement l'expérience rêvée à l'issue d'une recherche. Google adopte comme attitude de rediriger les chercheurs d'information, si possible, vers la page "mère".

Sur Internet, l'idéal reste de créer des pages produisant du sens même hors contexte et prises isolément. De construire un découpage thématique et non mathématique.

Cependant, Google reste souple et propose deux solutions dans le cas où vous décidez d'adopter malgré tout la pagination (parfois pour des raisons publicitaires) :

  • Soit vous aidez Google à trouver la page-mère, à l'aide de l'instruction rel="canonical".
  • Soit vous pouvez demander à Google de privilégier votre segmentation, et l'y aider grâce aux instructions rel="next" and rel="prev", reliant vos morceaux.

Consultez le blog officiel de Google (en Anglais) pour plus de détails.


A lire aussi :

Les 6 avantages de la concision

Félicitations à l'équipe communication de l'Assemblée nationale qui vient d'améliorer, à la volée, lors de notre rencontre, plusieurs accroches en page d'accueil !

1. Raccourcir les accroches permet d'augmenter la sensation d'aération. Le rapport texte / espace blanc s'en retrouve plus confortable. L'espace blanc attire l'oeil vers les éléments de contenu qui, autrement, assomment.

2. Les titres plus courts gagnent en pouvoir d'accroche. Le cerveau du lecteur peut les agripper avec moins d'énergie et plus d'immédiateté. Le taux de lecture d'un titre court est supérieur, indépendamment du fond. Faites-vous violence. Adoptez la concision comme une fructueuse contrainte.

3. Sur une seule ligne, les titres sont plus élégants. Ils évitent au lecteur l'opération coûteuse d'un retour à la ligne (que les plus vieux d'entre vous se souviennent avec nostalgie de ce bruit tintant du retour de clavier avec les anciennes machines à écrire). Dans le cas présent, on pourrait encore raccourcir ce titre-ci : "Sécurité sanitaire : Xavier Bertrand a présenté le projet de loi". Je serais tenté de titrer : "Projet de renforcement de la sécurité sanitaire". Cela peut suffire à ramener le titre sur une ligne.

4. Les photos de petite taille, littéralement insignifiantes lorsqu'écrasées par un gros pavé de texte, prennent déjà davantage de présence lorsque les chapeaux sont rendus plus concis. Une meilleure volumétrie entre l'image et le texte, en somme. Tout cela participe à la physique du contenu. Et l'envie de lire.

5. Le texte a été épuré de ses lourdeurs ou détails non indispensables. S'obliger à plus de concision revient souvent à se recentrer sur l'essentiel. Donc non seulement on gagne en taux d'attention, en taux de lecture, mais on gagne également en fluidité de lecture et en satisfaction (moins de bruit, moins de graisse).

6. Une utilisation de l'espace plus performante. Au sein du même espace, trois actualités peuvent être diffusées au lieu de deux. Et les pixels, sur une page d'accueil, ça compte ! Le taux d'attention reste largement supérieur dans la partie haute de l'écran. 78% de l'attention, en moyenne, se concentre au-dessus de la ligne de flottaison. La concision évite certaines noyades.

Relire pour réduire, voilà donc la chose à retenir.

Venez vous exercer sur vos propres contenus lors de la prochaine formation "écrire pour le web" ou organisons une formation sur mesure au sein de votre entreprise !

Bien rédiger pour le Web - seconde édition

Catégories : Ecrire pour le web - A lire

Ma consoeur Isabelle Canivet vient de publier la seconde édition de "Bien rédiger pour le Web". Il s'agit de l'ouvrage le plus complet, le plus mûr et le plus actuel consacré aux techniques d'écriture pour le web.

Bien rédiger pour le web : stratégie de contenu pour améliorer son référencement naturel
Un ouvrage d'Isabelle CANIVET
Seconde édition, Eyrolles, Paris, septembre 2011
ISBN-10: 2212128835
ISBN-13: 978-2212128833
535 pages


Vous voulez 10 raisons de lire cet ouvrage ?

Ce livre est...

1. Le plus complet sur le sujet
2. Une vraie seconde édition (grande part du contenu réécrite)
3. Agréable à parcourir (mise en page vivante)
4. Croustillant même, à travers certains clins d'oeil et illustrations
5. Technique lorsqu'il le faut (avec des références HTML le cas échéant)
6. Déclinant ses conseils sur les supports récents (micro-blogging, géolocalisation, web mobile, etc.)
7. Francophone dans ses références culturelles (ça nous change des Américains omniprésents)
8. Bien nourri sur la question du référencement naturel (et d'ailleurs préfacé par Messieurs Olivier Andrieu et Sébastien Billard)
9. Intégrant le cycle de vie du contenu (lancement, production, maintenance)
10. Rédigé par une charmante personne (hors propos, déplacé, mais bon, il fallait un dixième point pour faire bien)

Le seul bémol que je mettrais réside dans la table des matières, qui pourrait suivre un fil rouge plus consistant. Mais c'est vraiment pour dire quelque chose. Et pour inspirer la troisième édition ;-)


L'ouvrage est disponible chez Amazon au tarif de 32 euros.

Comment différencier le contenu des balises TITLE et H1

C'est la rentrée... plein de choses à vous dire... on commence par une question que je rencontre de manière récurrente : la comparaison de la balise <H1> avec la balise <TITLE> en termes de mots clés et de positionnement éditorial.

Je n'apprendrai rien à la plupart d'entre vous en rappelant que :

  • La balise <TITLE> est une métadonnée qui apparaît tout en haut de l'écran à gauche, dans la barre supérieure du navigateur Firefox ou Internet Explorer. Dans la grosse majorité des cas, c'est le contenu de cette balise que Google affiche comme titre de la page dans les résultats d'une recherche.
  • La balise <H1> correspond au titre principal dans le corps de la page. En principe, nous n'utilisons qu'une seule balise <H1>, tandis que la balise <H2> ou <H3>, correspondant aux titres de second et troisième niveaux, peut être utilisée à plusieurs reprises dans une même page HTML.

Les questions suivantes se posent, pour lesquelles je rencontre actuellement des opinions et des stratégies différentes et nuancées au sein des entreprises et des spécialistes en référencement :

1. La balise <TITLE> doit-elle être identique à la balise <H1> ?
2. La redondance est-elle souhaitable ?
3. Quel degré de différenciation peut-on accepter ?
4. Faut-il automatiser la production des balises <TITLE> sur base des balises <H1> ?
5. Le <TITLE> et le <H1> doivent-ils être plutôt informatifs ou plutôt accrocheurs ?

Je vais successivement : donner des éléments de réponse à ces questions, décrire quelques situations rencontrées sur le terrain, et vous demander votre avis.

1. La balise <TITLE> doit-elle être identique à la balise <H1> ?

Techniquement parlant, ce n'est pas une obligation.
Choisir de différencier ces deux balises reste donc un acte éditorial.
Avec des conséquences possibles sur les lecteurs et sur les moteurs de recherche.

2. La redondance est-elle souhaitable ?

La redondance entre les balises <TITLE> et <H1> présente un double avantage.
Tout d'abord, elle est un signe de cohérence. Après avoir cliqué sur la page des résultats du moteur de recherche, l’internaute apprécie d'atterrir sur une page qui correspond bien à sa demande. En assurant la concordance, vous rassurez les attentes du visiteur.
Par ailleurs, cet effet de cohérence et de répétition de mots clés renforcera votre référencement. Si Google n'apprécie pas trop la "sur-optimisation", il accepte totalement, voire espère, un degré minimum de cohérence, et donc de redondance, entre les balises <TITLE> et <H1>.
N'ayez aucune crainte, en tout cas, de produire cette redondance.

3. Quel degré de différenciation peut-on accepter ?

Trois raisons, au moins, peuvent justifier de différencier la balise <TITLE> de la balise <H1>.
Le <TITLE> peut se permettre d'être un peu plus long. Il peut contenir 50 à 70 caractères sans aucun problème, jusqu'à 100 même, avec tout l'intérêt que cela comporte en termes d'insertion de mots clés et expressions clés. Tandis qu'un titre <H1> se doit de rester plus court sous peine de perdre en accroche lecteur. Un titre <H1> sur deux lignes n'est ni élégant ni efficace.
Le <TITLE> apparaît comme un élément extrait dans les résultats très disparates des moteurs de recherche. Il gagnera à apporter des informations de contexte. Raison pour laquelle la plupart des éditeurs de sites web concluent la balise <TITLE> par une signature (le nom de la société, par exemple).
Dans certains cas, il peut être intéressant d'introduire quelques variations synonymiques. Une expression, un mot, un verbe, légèrement différents entre le <TITLE> et le <H1>, afin de coller à la variété des formulations.

4. Faut-il automatiser la production des balises <TITLE> sur base des balises <H1> ?

Comme dans la plupart des situations industrielles, l'automatisation présente des avantages et des inconvénients.
Les avantages de l'automatisation sont la cohérence et le gain de temps et d'énergie.
Les désavantages de l'automatisation sont le manque de souplesse ou d'optimisation sur mesure.
Il est de plus en plus fréquent de rencontrer des systèmes de gestion de contenu web (CMS) qui choisissent d'automatiser la création des balises <TITLE>. Souvent, la balise <H1> est reprise en <TITLE>, complétée par la signature de l'éditeur. Dans certains cas, le titre est situé dans l'architecture du site web. Le <TITLE> s'apparente alors à un sentier de navigation (fil d'Ariane). Je ne suis pas fan de cette dernière solution, souvent trop mécanique, et génératrice de titres trop longs. Le titre accompagné d'une signature reste une solution simple, assez standard, et facile à mettre en place. Je conseille cette solution par défaut, mais en s'octroyant le droit, à certains moments, sur certaines pages hautement prioritaires du point de vue SEO, de modifier la balise manuellement.
Détail important : la signature doit apparaître derrière, et non devant le titre de la page, de manière à donner tout le poids aux mots clés centrés sur le contenu ("topic keywords"), et non sur la marque de fabrique ("brand keywords"), laquelle reste souvent plus facile à référencer.

5. Le <TITLE> et le <H1> doivent-ils être plutôt informatifs ou plutôt accrocheurs ?

La question peut sembler un peu naïve, mais... on dit qu'un bon titre est à la fois informatif (transparent quant au contenu qu'il annonce) et accrocheur (qui éveille l'attention du lecteur). C'est vrai pour les balises <TITLE> et <H1>, mais dans des dosages différents, à mon humble avis.
Le <TITLE> est davantage centré vers les moteurs de recherche, fortement pris en compte dans la mécanique du référencement, et extrait de son contexte. Pour ces raisons, il sera avant tout informatif. Mais la fonction d'accroche n'est pas nulle, car le <TITLE> apparaît dans les résultats des moteurs de recherche et, outre sa dimension révélatrice du sujet, doit donner envie d'être cliqué.
Le titre <H1> apparaît dans le coeur même de la page, souvent mis en contexte par l'environnement graphique et fonctionnel du site web. Il peut, davantage que le <TITLE> se permettre de jouer sur des effets d'accroche, au risque d'être un rien moins transparent et explicite.


Voici quelques exemples de variations entre le <TITLE> et le <H1> :

Source : booking.com

Dans cet exemple, le <TITLE> reprend le <H1> en l'étoffant fortement. Il commence par citer la marque (Booking.com), ce qui n'est pas forcément la meilleur stratégie si l'on veut donner du poids aux mots clés propres à l'hôtel, par exemple. Les tout premiers mots de la balise <TITLE> pèsent davantage sur le référencement. Notez l'affichage dynamique, dans cette balise <TITLE>, du nombre de commentaires clients. Ce qui peut inciter, c'est vrai, à explorer le site. Au final, ce <TITLE> me paraît un peu trop long et brisé dans sa syntaxe.


Source : La Libre

Dans cet exemple, le quotidien La Libre se contente de reprendre le <H1> en <TITLE>, en ajoutant, en tête de balise, la signature du journal. Du point de vue du référencement, nous l'avons déjà dit, mieux vaut placer les mots clés "contenu" en tête d'expression. Avec un bémol cependant : les médias qui bénéficient d'une crédibilité particulière peuvent se distinguer, au sein des résultats d'une recherche, par leur marque de fabrique.


Source : IBGE

Dans cet exemple, l'Institut Bruxellois pour la Gestion de l'Environnement place dans l'ordre, au sein de la balise <TITLE> : la reprise du titre <H1> de la page + la rubrique dans laquelle il se trouve + la signature de l'organisation. Mentionner la rubrique "S'informer", en termes de mots clés et de mise en contexte, n'apporte pas grand chose (strictement rien, en fait). Elle rallonge inutilement le <TITLE> et dilue le poids des véritables mots clés, comme "changement climatique" dans le cas présent. Je préconise de ne reprendre que le titre de l'article et la signature.


Cette question fait débat, ci et là, sur Internet, mais je n'y ai pas trouvé de réponse très tranchée ni structurée :

Et à votre niveau ?

  • Quelle est la stratégie de votre entreprise en matière de <TITLE> et <H1> ?
  • Avez-vous fait le choix de l'automatisation ?
  • Le regrettez-vous ?


Venez discuter de ces questions, et bien d'autres, à ma prochaine formation "écrire pour le web", qui se donnera à Bruxelles les 19 et 20 septembre 2011.

Le générateur de mots clés s'améliore

Le générateur de mots clés, c’est cet outil génial qui vous permet de connaître la fréquence des recherches de n’importe quelle expression sur Google. Et qui, au-delà des termes que vous encodez, vous suggère des expressions synonymes et connexes, sur une base statistique.

Jusqu’ici, le générateur de mots clés se présentait de manière un peu brute : les mots clés en vrac, dans un ordre pas toujours très compréhensible.

Google vient de faire évoluer l’interface vers plus de clarté. Désormais, les termes recherchés sont clairement séparés des « idées de mots clés ».


Prise d’écran – Google Adwords Tool – 16 juin 2011


Les intitulés des colonnes ont également gagné en clarté : « recherches mensuelles dans le monde entier » est plus explicite que « recherche globale ».

Corrigé après publication : J’espère néanmoins d’autres améliorations. En particulier la possibilité de trier les idées de mots clés en fonction du volume de recherche auquel elles correspondent. Ce serait très pratique et, me semble-t-il, pas trop difficile à mettre en place.


A lire aussi :

Combien l'orthographe affecte la crédibilité d'un site web

Catégories : Ecrire pour le web - Etudes

Une faute d'orthographe, c'est comme une tache sur le veston d'un vendeur de produits à lessiver.

Cela vous ôte un peu de crédibilité.

Un peu... ou beaucoup, lorsque la négligence se répète.

Une faute d'orthographe (et, bien sûr, je n'en suis pas vierge), ça vous rend moins rigoureux, moins précis, moins académique, et par la force des choses, moins crédible.

Jusqu'ici, je ne vous apprends rien.

Ce qui m'intéresse et justifie mon billet, c'est d'identifier le matériel scientifique qui parle de la question : en quoi précisément, et surtout combien, l'orthographe affecte celui qui parle derrière un site web - une personne physique (un consultant blogueur, par exemple) ou une personne morale (une entreprise, une institution).


Alors voici quelques sources...

Effects of Altering Grammar and Spelling on Perceived Author Credibility, Clemson University, Psychology.

Une petite étude qui démontre que la rigueur de la langue assoit la crédibilité.

Source : Community of Undergraduate Journals Online


Errors By Bloggers Kill Credibility & Traffic, Study Finds

Près de 2/3 des personnes interrogées déclarent être moins susceptibles de faire un lien vers un article qui contient des erreurs grammaticales ou orthographiques !

Source : ReadWriteWeb, Marshall Kirkpatrick


Believe It or Not: Factors Influencing Credibility on the Web (PDF)

Cet article académique présente l'intérêt d'être fort bien documenté.

Il dit notamment :

Even a single spelling mistake can give the impression of amateurism and lead the user to reject the site as not credible.


Si vous vous intéressez aux facteurs de crédibilité des sites web, au sens large, la meilleure source académique, à ma connaissance, reste la suivante : The Web Credibility Project (Université de Stanford).

Si vous connaissez d'autres études ou expériences relatives à l'impact de l'orthographe sur l'expérience des visiteurs d'un site web, cela m'intéresse... Faites-nous en profiter en commentaires.

J'aimerais particulièrement tomber sur des recherches dans les matières suivantes :

  • Impact de l'orthographe comparé entre papier et web (Est-on plus ou moins laxiste sur les nouveaux médias?)
  • Taux de respect comparé de l'orthographe entre presse papier et presse en ligne
  • L'évolution du respect de l'orthographe (On dit que l'orthographe se perd chez les jeunes... Mais est-ce prouvé scientifiquement?)


A lire aussi :