Images, indexation et référencement

Fenêtre popup sans Javascript

Je me suis rendu compte en parcourant le web, qu’un bon nombre de sites et de blogs ne renseignait pas l’attribut alt des images qu’ils insèrent sur leurs pages. Grossière erreur !

Cet attribut est un élément très important pour le référencement ou plutôt l’indexation de sites et de blogs sur les moteurs de recherche. Les crawler, comme j’ai déjà eu l’occasion de l’écrire sur un précédent billet, ne distingue pas le contenu de l’image que vous affichez sur votre page, il est donc nécessaire de renseigner l’attribut alt="" qui est en quelques sortes une légende, un commentaire destiné aux crawler et aux navigateurs.

Cet attribut peut contenir idéalement 70 caractères, il n’est pas recommandé d’aller au-delà (normes W3C). Il est judicieux de commenter l’image avec des mots correspondant au contenu réel de l’image et d’insérer dans le commentaire un ou deux mots clés, mais, attention avec l’utilisation des mots clés ! Dépasser un certain nombre de répétitions et la densité/mot clé se trouve modifiée (évidemment) et pas forcement à votre avantage, le « forcing » avec les mots clés est quelquefois périlleux.

L’insertion HTML d’une image se fait avec le code suivant :
<img style="width: 200px; height: 200px;" alt="Nom de l'image" src="citadelle.jpg">

L’insertion XHTML d’une image se fait avec le code suivant :
<img style="width: 200px; height: 200px;" alt="Nom de l'image" src="citadelle.jpg" />

Vous pouvez ajouter l’attribut title="" qui permet lors du survol de l’image avec une souris d’afficher un texte comme sur l’image ci-dessous.

Code couleur HTML rgb

Évadons-nous quelques instants du référencement :

Il existe trois façons d’ajouter une couleur à un élément HTML :

1. le nom de la couleur en anglais : color : black ;
2. la couleur sous forme de code Exa : color : #000000 ;
3. la couleur sous forme de code rgb : color : rgb(0, 0, 0) ;

Personnellement j’utilise le code rgb qui signifie en anglais : red green blue, en français : rouge vert bleu. C’est pour moi la façon la plus facile de créer un code couleur, après, c’est chacun sa méthode. Je trouve rgb très simple d’utilisation, il suffit de bien comprendre son fonctionnement et en un rien de temps vous serez capable de créer vos propres codes couleurs.

Pourquoi rgb (ou rvb en français, exclusivement rgb en HTML) ? Ces trois couleurs primaires sont les couleurs que distingue l’œil, en effet, les récepteurs situés au fond de nos yeux changent le message électromagnétique de la lumière en message électrique disponible pour notre vision.

L’œil humain absorbe et transforme les photons grâce à ses capteurs sensibles aux bandes des longueurs d’ondes du rouge, du vert et du bleu. Une lumière bleue perçue par l’œil humain, active dans son cerveau les capteurs relatifs au bleu, ce qui va lui permettre de voir cette couleur et pas une autre. Le même processus va se dérouler avec les couleurs vertes et rouges.

Donc, on appelle, couleurs primaires, les couleurs perceptibles par l’œil humain, notion de base pour créer le code rgb.
Les couleurs se codent avec rgb de la sorte :
Pour obtenir le rouge, seule la première valeur est à 255, le reste à 0 = rgb(255, 0, 0).
Pour obtenir le jaune, les deux premières valeurs sont à 255 = rgb(255, 255, 0).
Les deux dernières valeurs à 255 donne la couleur cyan = rgb(0, 255, 255).
A l’inverse, la dernière valeur à 255 et les deux premières à 0, donnerons le bleu = rgb(0, 0, 255).
Pour obtenir le blanc, toutes les valeurs rgb doivent être à 255 = rgb(255, 255, 255).
Pour obtenir la noir, toutes les valeurs rgb sont à 0 = rgb(0, 0, 0).

La photo ci-dessous va vous permettre de comprendre plus facilement.

1. 1 le rouge rgb(255, 0, 0)
2. 2 le vert rgb(0, 255, 0)
3. 3 le bleu rgb(0, 0, 255)
4. 4 le jaune rgb(255, 255, 0)
5. 5 le blanc rgb(255, 255, 255)
6. 6 le cyan rgb(0, 255, 255)
7. 7 le magenta rgb(255, 0, 255)

Vous pouvez faire varier toutes les valeurs entre 0 et 255 pour obtenir la couleur que vous désirez. Ex : Suivant la quantité de vert, vous obtiendrez une couleur orange : rgb(255, 120, 0)