Qu’est-ce que le référencement ?

Si des milliards de sites web se trouvent sur la toile, il faut bien qu’ils se fassent connaître. Soit l’internaute tape directement l’adresse d’un site, soit il doit trouver ce site en naviguant. Là encore, deux solutions : soit il suit un lien depuis un autre site, soit il trouve son site dans les résultats de recherche d’un moteur.

Le référencement, c’est l’ensemble des actions et des éléments qui vont permettre à ce site d’être trouvé.

Il existe plusieurs types de référencement :

  • le référencement hors-ligne (publicités papier et autres) ;
  • les liens depuis les autres sites ;
  • les inscriptions dans les annuaires ,génériques et spécialisés ;
  • l’achat de mots-clé ;
  • les publicités en ligne ;
  • le référencement naturel.

Le référencement hors-ligne

Le référencement hors-ligne est peut-être le plus hasardeux car il implique que le visiteur potentiel retienne l’information d’un média à l’autre et retape l’URL du site.

Exemple d'un article de journal invitant ses lecteurs à en découvrir plus sur leur siteUn journal papier invite ses lecteurs à en découvrir plus sur son site

Les liens

Les liens ont une très grande importance dans le référencement car ils déterminent la popularité du site. Plus la popularité est importante, mieux le site est référencé dans les moteurs. Les liens ont plus de poids s’ils sont dans un contexte qui correspond au sujet du site (présence des mots-clé, champ lexical).

Exemple d'un ''title'' de lienUn lien depuis un site traitant du même thème, avec son « title »

Les annuaires

Les inscriptions dans les annuaires sont autant de liens pointant vers un site. Ils sont souvent l’occasion d’insérer son lien dans le contexte sémantique du sujet du site : titre, description, choix de la catégorie, spécialisation de l’annuaire.

Exemple d'un annuaire spécialisé avec une catégorisation affinéeUne inscription dans un annuaire spécialisé permet d’affiner la catégorie autour du thème du site

L’achat de mot-clé

L’achat de mot-clé consiste à payer un moteur de recherche pour qu’il fasse apparaître, dans les résultats commerciaux, un site précis quand des mots déterminés sont recherchés.

Exemple d'un résultat dans la zone des liens payants de GoogleL’achat de mots-clé sur un moteur de recherche permet de faire apparaître son site, quelle que soit son indexation dans le moteur

La publicité

Les publicités sont nombreuses sur Internet. Il faut savoir que les liens textes, même publicitaires, reçoivent souvent plus de clics qu’une bannière (image fixe ou animée). Ce type de lien, faisant l’objet d’un partenariat financier, nécessite un « traceur » (pour rétribuer, par exemple, un éditeur en fonction du nombre de visites reçues depuis son site). Il faut alors veiller à ce que le lien reste utile au référencement naturel.

Exemples de formats de publicité : 468x60 ; 88x31 ; lien textePlusieurs formats de publicités possibles … parmi de nombreux autres !

Le référencement naturel

Le référencement naturel est un référencement qui va se faire, essentiellement, à l’aide du code des pages web. Il s’oppose au référencement apporté par les publicités, les achats de mots-clé, les inscriptions dans les moteurs. Il est dit « naturel » car il ne découle, en principe, d’aucune action volontairement destinée au référencement. Il y a beaucoup à dire sur le référencement naturel et il fera bientôt l’objet d’un article.

Si vous lancez votre site web et que vous voulez le référencer, vous n’êtes pas obligé d’appliquer toutes ses méthodes. Soignez par contre votre référencement naturel (il est gratuit et se fait dans le même temps que l’intégration des pages). Inscrivez-vous dans les annuaires et tout particulièrement les annuaires spécialisés. Enfin, développez tant que possible un réseau de liens avec votre communauté.

Ne confondons plus « alt » et « title »

L’attribut alt

L’attribut alt est fait pour accueillir un contenu alternatif. Il sera utilisé par le navigateur, par l’agent utilisateur en général, au cas où il ne pourrait pas lire l’élément, une image par exemple.

Dans une page web, un certains nombre d’éléments peuvent ne pas être accessible au navigateur, à l’agent utilisateur. Les images, par exemple, ne sont bien évidement pas « lues » par un navigateur vocal ou si un internaute, en bas débit par exemple, a décidé de désactiver les images. Cela peut-être le cas des applets, des objets, des images ; en fait, de tous les éléments graphiques.

Pour que les internautes ne perdent pas pour autant l’information, on fournit à l’agent utilisateur une alternative textuelle. Elle a pour but d’indiquer à l’internaute le contenu de l’applet, de l’objet, de l’image.

Exemple [1] : <img src="images/logo.gif" alt="Logo de Game On Net" />

Tous les objets graphiques doivent fournir une information alternative. Dans le cas d’une image purement décorative, l’attribut alt peut être laissé vide, mais doit être présent.

Exemple : <img src="images/decor-rubrique.jpg" alt="" />

Le contenu du alt doit faire 60 caractères maximum (un caractère encodé vaut pour un).

Si l’objet, par contre, fournit de nombreuses informations, qu’il est impossible ou réducteur de le résumer dans un alt, on utilise alors en complément l’attribut longdesc qui fait appel à un fichier de description plus complet.

Exemple : <img src="images/graphique.gif" alt="Statistiques du site" longdesc="graphique.txt" />

L’attribut title

L’attribut title (non la balise title contenue dans le head et qui apparaît dans la barre de titre du navigateur) est le titre d’un élément.

Il peut être présent pour une image.

Exemple : <img src="images/ventes-2005.jpg" alt="Graphique" title="Evolution des ventes de 2005" longdesc="ventes2005.txt" />

Il est également attendu sur les liens pour fournir une information en plus de celles du libellé.

Exemple : <a href="http://www.site.com/accessibilite.html" title="Lire l'article sur l'accessibilité sur Site">L'accessibilité</a>

Si nous reprennons l’exemple du logo, nous pourrions avoir : <a href="index.html" title="Game On Net - Accueil"><img src="images/logo.gif" alt="Logo Game On Net" /></a>

L’information données par l’attribut title est destinée à tous les types de navigateurs et fournis dons un texte visible par tous. Le texte d’un title apparaît donc dans les navigateurs classiques dans une petite info-bulle, au survol de l’élément.

En cas d’absence de title mais de présence de alt, Internet Explorer affiche le contenu du alt dans l’info-bulle. Et c’est probablement de là qu’est née une partie de la confusion entre ces deux éléments et qui a fait que l’on trouve encore beaucoup de alt dans des balises a (ce qui n’a pas de sens au vu de la fonction du alt). Si les deux attributs sont présents, Internet Explorer utilise le title en priorité pour son info-bulle.

L’attribut title autorise 80 carctères maximum (un caractère encodé vaut pour un).

Pourquoi l’accessibilité ?

L’accessibilité, c’est rendre un site navigable par tous, quelque soit le matériel utilisé (lecteur vocaux, par exemple), quelque soit le handicap (moteur, par exemple), quelques soient les choix du visiteur (javascript désactivé, par exemple).
D’un point de vue social et éthique, c’est déjà beaucoup, mais l’accessibilité apporte d’autres avantages encore. En terme de développement, l’accessibilité représente quelques lignes de codes en plus, quelques infos utiles, l’utilisation de la balise adéquate… Le « coût » est faible et les gains sont variés et ne profitent pas qu’aux seuls internautes handicapés.

En Février 2005, la Loi sur l’Accessibilité Numérique laissait aux quelques 5000 sites publics français jusqu’à 3 ans pour être accessible à tous. Plusieurs sites privés, pourtant non concernés par cette obligation, ont d’ores et déjà fait le choix de l’accessibilité. On peut penser qu’ils ont anticipé une généralisation de la loi, aux sites commerciaux, par exemple, et se sont alignés. Mais le premier impact pour eux, en plus de s’ouvrir à une part supplémentaire de la population, est, bien sûr, l’image de marque, l’impression donnée qui va de l’ouverture d’esprit au respect du visiteur.

Et le nombre de visiteurs à bénéficier de ces efforts est bien plus important qu’on ne se l’imagine. Il y a d’abord, bien sûr, les non-voyants, les handicapés moteurs. Mais les obstacles que l’accessibilité abat concernent aussi les personnes âgées, malvoyantes, les handicapés mentaux… En tout, 30% de la population française déclare rencontrer des difficultés, plus ou moins importante*. 30% de la population qui bénéficient directement des mesures d’accessibilité. Car indirectement, nous en profitons tous. En veillant à des impératifs d’accessibilité, on met à la disposition de chaque visiteur des infos pratiques en plus, on veille à avoir une navigation fluide, on laisse beaucoup de liberté à chacun quand à l’affichage.

Non seulement le site y a gagné en ouverture vers ses visiteurs, mais il y gagne aussi en qualité de code et toutes ses considérations optimisent son référencement. Il ne s’agit pas de miracle ou de techniques pointues propres aux référenceurs, mais de détails auxquels les moteurs de recherche seront sensibles : des titres de liens renseignés, des balises sommary et caption détaillées, l’attribut longdesc utilisé à bon escient… sont autant d’informations données aux moteurs de recherche, cernant ainsi mieux votre page et votre site.

Le développement d’un site en considérant les points d’accessibilité vous permet donc d’obtenir un code plus propre, plus efficace, ergonomique et ouvert à tous. Des articles à venir vous détaillerons, de manière pratique, comment faire. Pour les plus curieux, voici quelques liens utiles :

Les propriétés raccourcies (CSS)

En CSS, un certains nombres de propriétés peuvent être regroupées sous une seule déclaration. On utilise pour cela les propriétés raccourcies.

Par exemple :

p {
font-family: "Times New Roman", Times, serif;
font-size: 1.2em; font-style: italic;
font-weight: bold
}

peut s’écrire :

p {
font: italic bold 1.2em "Times New Roman", Times, serif
}

Dans le cas des bordures, des marges externes et internes, on peut déclarer un style successif à chacune des 4 bordures d’un éléments. Dans ce cas, il faut respecter le sens de « l’horloge » ; on part de midi et on fait le tour du cadran : top, right, bottom, left. Exemple :

div {border:2px dotted; border-color:#F03 #5C2 #9A3 #245B7A}

Si les deux valeurs verticales sont identiques entres-elles ainsi que les deux valeur horizontales, on peut déclarer les deux en une : top/bottom, right/left. Exemple :

div {margin:20px 10px}

Enfin, il existe aussi une déclaration raccourcie pour le cas où les valeurs horizontales sont identiques : top, right/left, bottom. Exemple :

div {padding:3em 1em 2em}

Les principales propriétés raccourcies, et l’ordre de leurs valeurs, sont les suivantes :

  • background : color, image, repeat, attachement, position (vertical, horizontal)
  • border : epaisseur, style, couleur
  • border-top : epaisseur, style, couleur
  • border-right : epaisseur, style, couleur
  • border-bottom : epaisseur, style, couleur
  • border-left : epaisseur, style, couleur
  • border-color : couleurs dans le sens de « l’horloge »
  • border-style : style dans le sens de « l’horloge »
  • border-width : valeurs dans le sens de « l’horloge »
  • font : font-style, font-variant, font-weight, font-size, -* line-height, font-family
  • list-style : type, position, image
  • margin : valeurs dans le sens de « l’horloge »
  • padding : valeurs dans le sens de « l’horloge »

Optimiser le poids de sa feuille de style

La feuille de style externe

Plutôt que de mettre tout votre style en interne, dans une page, il faut privilégier la feuille de style externe.

<link rel="stylesheet" type="text/css" href="votre_feuille_de_style.css" />

plutôt que

<style>
* {font-family: Arial, Helvetica, sans-serif; font-size: medium; color: #ABC}
body {background: url(images/fond.jpg)}
h1 {border: solid #DEF; border-width: 0 2px 2px 0; background: #FFFFF0}
#footer, #footer a, #footer span {font-size: smaller}
#footer {color: #BDB76B}
#footer a {color: #562}
#footer span {margin: 0 5px}
</style>

Le séparteur

A la fin d’une déclaration, on met un  » ; ».
Le point-virgule est un séparateur, entre deux déclarations, il n’est donc pas nécessaire de le mettre à la fin de la dernière déclaration.
Le gain peut parraître minime, mais sur Internet, chaque octet compte.

h2 {margin-top:20px}
h3 {text-indent:10%}
p {text-align: justify}

plutôt que

h2 {margin-top:20px;}
h3 {text-indent:10%;}
p {text-align: justify;}

Les couleurs

La notation hexadécimale des couleurs peut être passée sur 4 caractères au lieu de 7 lorque chacune des trois couleurs est décrite par deux caractères identiques.

color:#ABC

plutôt que

color:#AABBCC

Les unités

Lorsqu’une valeur est à 0, il est inutile de préciser son unité, quelle qu’elle soit.

margin:0 5em

plutôt que

margin:0px 5em

Les valeurs par défaut

Chaque propriété à une valeur par défaut initiale. Inutile, donc, de déclarer le comportement d’un élément si celui-ci est déjà par défaut.

div {border:1px solid #A1F5C3}

plutôt que

div {position:static; border:1px solid #A1F5C3}

Les propriétés raccourcies

(Voir Les propriétés raccourcies)

Une même propriété peut, à elle seule, déclarer plusieurs propriétés. Elles sont donc à privilégier fortement ; en plus du gain de poids, elles sont aussi bien plus agréable au développement et à la relecture car elles permettent un code moins verbeux. [1]

border: solid #DEF; border-width: 0 2px 2px 0;

plutôt que

border-color: #DDEEFF; border-style: solid; border-left-width: 0px; border-right-width: 2px; border-top-width: 0px; border-bottom-width: 2px;

Les déclarations communes

Lorsque qu’une ou plusieurs déclarations s’appliquent à plusieurs éléments, les declarations communes apportent, elles aussi, plusieurs avantages. Celui du gain de poids, un code moins verbeux, mais aussi une maintenance plus agréable puisqu’une même propriété pourra être modifier sur plusieurs éléments, même différents mais tous concernés, d’un coup. [1]

#footer, #footer a, #footer span {font-size: smaller}

plutôt que

#footer {font-size: smaller}
#footer a {font-size: smaller}
#footer span {font-size: smaller}

Les propriétés qui héritent

Les CSS sont basées sur le système d’héritage et un certain nombres de propriétés héritant, il n’est pas nécessaire de les re-déclarer dans les éléments enfants. [1]

* {font-family: Arial, Helvetica, sans-serif}

plutôt que

* {font-family: Arial, Helvetica, sans-serif}
p {font-family: Arial, Helvetica, sans-serif}
a {font-family: Arial, Helvetica, sans-serif}

Les selecteurs qui appartiennent déjà à une classe

Pour un même groupe, il est parfois inutile de créer une classe pour chaque élément du groupe. Il suffit de faire appel à la classe (ou à l’id) du groupe et de préciser quel élément sera touché par la règle.
Si le poids de la feuille de style y gagne, le poids du code HTML en tire également le même bénéfice.

#footer {color: #BDB76B}
#footer a {color: #562}
#footer span {margin: 0 5px}

et <div id="footer"><span>Réalisation&nbsp;:</span><a href="ma_page.htm" title="Le site du webmaster">Ma page</a></div>

plutôt que

#footer {color: #BDB76B}
.footerLiens {color: #562}
.footerTexte {margin: 0 5px}

et <div id="footer"><span class="footerTexte">Réalisation&nbsp;:</span><a class="footerLiens" href="ma_page.htm" title="Le site du webmaster">Ma page</a></div>

Le formulaire d’inscription

Les informations

Des informations concises et utiles

Le formulaire va d’abord donner une première impression au visiteur ; la page ne doit pas le faire fuir. Il ne faut pas oublier que les internautes ne sont pas patients, qu’ils passent souvent leur temps à remplir des formulaires d’inscription, à devoir donner des informations sur eux, leur goûts, etc., pour accéder à des pages. Il vaut mieux éviter de demander des informations en trop grand nombre ! D’abord, cela va charger votre base avec des informations dont vous ne ferez probablement pas usage (Allez-vous vraiment téléphoner à vos internautes ?!) Ensuite, cela peut décourager celui qui voulait s’inscrire. Non seulement c’est trop long mais il est aussi en droit de se demander pour quelle raison on a besoin de savoir sa ville pour jouer à un jeu en ligne. N’oubliez pas, d’autant plus, que s’il estime la question inutile ou trop personnelle, rien ne l’empêchera de remplir de fausses informations !

Aider à la saisie

Mentionnez, dés le début, les champs obligatoires et, comme précédemment, ne rendez obligatoires que ce qui doit vraiment l’être. Une aide contextuelle est la bienvenue. Pour indiquer un format de date, préciser en quoi on a besoin de telle information, etc. Attention, tout de fois, à ne pas surcharger le formulaire en renseignements : vos indications comme vos libellés, pour être efficaces, doivent être clairs, concis … inutile de faire de la littérature ici.

La présentation

Une présentation adaptée

Ce premier point acquis, soignez la présentation de votre page. Si le contexte de votre site nécessite un formulaire long, découpez le en plusieurs étapes que l’internaute pourra visualiser et identifier. Ainsi, il ne sera ni surpris ni lassé si, en validant sa page, il doit encore remplir d’autres renseignements.

Cheminement et actions

Dans ce type de questionnaire à étapes, il y a quelques règles à respecter. Il est notamment nécessaire de permettre de revenir aux étapes précédentes. Au moment de la validation finale, un récapitulatif de l’ensemble des informations données, avec la possibilité de les modifier, est, là aussi, le bienvenu. Que ce soit pour l’accessibilité du site… comme pour le confort de tous.

Exemple de découpage en ongletsExemple de navigation d’un formulaire à étapes

Pour un formulaire long comme pour un formulaire court, n’oubliez pas d’afficher une confirmation après la validation. Rien de plus perturbant pour un internaute que de n’avoir aucune explication de ce qu’il va découler d’une action qu’il vient de faire !

L’ergonomie et le design

Une utilisation fluide et agréable

Après avoir travaillé le contenu, apporter un soin tout particulier à sa présentation et à son comportement peut être d’une grande aide pour l’internaute et, là encore, contribuer à l’effort de séduction que vous faites envers lui. Découpez les types d’informations en zones, grâce aux balises et (c’est-à-dire la délimitation de la zone et son titre). La balise < label >, nécessaire aux navigateurs vocaux, est aussi très utile et très agréable. Elle permet de mettre le curseur dans le champ de saisie voulu quand on clique sur son étiquette. Et surtout, ce dont on se passe difficilement dès qu’on y a goûté, elle permet de cocher / décocher un bouton radio ou une case à cocher en cliquant sur son libellé (la zone de clic est considérablement élargie).

Un design agréable mais aussi informatif

Pour ce qui est du design lui-même, les feuilles de style vont vous permettre de rendre votre formulaire plus « sexy », apporter quelques agréments supplémentaires. Vous pouvez, par exemple, les utiliser combinées au javascript, pour modifier l’apparence d’un champ de saisie quand le focus est sur lui. Rien ne vous empêche non plus d’appliquer un style particulier à vos champs obligatoires ; de personnaliser vos champs de saisie aux couleurs de votre site, etc. Tant que vous ne faites pas de votre page un arc-en-ciel de couleurs doublé d’un feu d’artifice d’effets ! Mettez-vous à la place de l’internaute et simplifiez-lui la vie.

Le fonctionnement

La fiabilité des informations

Votre formulaire est maintenant d’une présentation irréprochable ; attaquons-nous à son fonctionnement (fiabilité, enregistrement) Il va, bien évidement, falloir vérifier les informations qui vous ont été indiquées : la présence du « @ » dans l’email, une date au format voulu, etc. Pour limiter les erreurs, vous pouvez avoir recourt au menus déroulants, à un calendrier cliquable, etc. Le tout est de minimiser la frappe de l’internaute (sans pour autant alourdir le formulaire inutilement). Faire une première vérification en Javascript peut vous permettre de limiter les sollicitations au serveur. Par contre, ne serait-ce que dans le cas où le Javascript est désactivé, il faut quand même faire une deuxième vérification côté serveur avant d’enregistrer les informations dans la base. A vous de juger, donc, en fonction du nombre d’informations à vérifier, de votre serveur, etc. Une petite astuce bien pratique est de désactiver le bouton de validation final dès qu’il a été cliqué une première fois. Cela permet d’éviter les inscriptions en doublons des internautes qui cliquent deux fois (soit que la page suivante est lente à charger et qu’ils s’impatientent ; soit qu’ils double-cliquent par habitude).

La confirmation

L’envoi d’un mail de confirmation va vous permettre de vérifier la validité du mail – si celui-ci est nécessaire pour le déroulement du jeu – en confirmant et achevant l’inscription via celui-ci. C’est également le moyen de rappeler à l’internaute ses paramètres de connexion. D’abord, même si votre envoi est immédiat, il peut très bien finalisé son inscription plus tard ; mais ainsi, il garde aussi une trace, dans ses mails, au cas où il perdrait son mot de passe … ou votre URL ! N’oubliez donc pas de rappeler, dans votre mail, le nom du jeu, son adresse, éventuellement comment se connecter et les informations personnelles de votre nouvel inscrit : login et mot de passe. Si nécessaire, vous pouvez également aiguiller votre nouveau joueur vers la prochaine étape de jeu, ce qu’il peut dès à présent faire. Ceci dépend surtout de la complexité de votre game-play.

La legislation

Les informations légales

Un dernier point à aborder, et non des moindres, est la partie légale. En premier lieu, un site qui récolte des informations sur des personnes -et c’est le cas d’un formulaire d’inscription – doit être déclaré à la CNIL. C’est totalement gratuit. Mentionnez alors votre numéro de déclaration dans votre page et rappelez au visiteur qu’il garde un droit de consultation et de modification des informations qu’il aura remplies.

Le règlement interne

Le formulaire est aussi l’occasion de faire lire et accepter le règlement du jeu et du site par le futur inscrit. N’autorisez la validation du formulaire que si le champ correspondant au règlement a été rempli.

La newsletter

Enfin, si vous proposez une newsletter, sachez que la Loi sur l’Economie Numérique, vous interdit d’inscrire l’internaute par défaut. Il doit lui-même cocher une case indiquant qu’il souhaite être abonné à la newsletter. Si le fonctionnement de votre jeu oblige à recevoir des mails, précisez-le. Un formulaire prêt et complet ;-) Fonctionnement, ergonomie, accessibilité, … ; séduction, look, fiabilité, … votre formulaire est maintenant fin prêt ! Il ne me reste plus qu’à vous souhaiter beaucoup d’inscrits ;)

Article écrit pour Game On Net (articles sur le développement de jeux en ligne)