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)     

Construction d'un bouton HTML sans Javascript

Cette construction de sript CSS va vous permettre de réaliser un bouton hypertext sans Javascript, ce type de bouton est très intéressant, car tout en donnant un style à votre lien, vous conservez sa qualité de lien dur auprès des moteurs de recherche. Ce type de lien participe à l’optimisation de l’indexation sur les moteurs de recherche, inutile de vous dire que la qualité des liens situés sur un site internet, détermine de la pertinence des pages web concernées.

Les liens construits avec Javascript sont de qualités nettement inférieures à celles du lien construit avec le HTML et pourvu de quelques mots. Malgré une construction HTML, un lien, s'il possède une image sera lui aussi de qualité inférieure à la qualité d’un lien HTML avec quelques mots, même si l’image est pourvue des attributs alt="" et title="".

Un lien optimisé est toujours textuel ! De ce style <a href="http://www..." title="PC portable">Pc portable</a>. Résultat : Pc portable (Pc d'excellentes qualités et à prix sacrifiés !). Le lien textuel, s'il est pourvu de surcroît de l’attribut title="", obtient le maximum de pertinence de la part des moteurs de recherche, à condition que les textes de l'attribut et du lien contiennent des mots se situant vers la page de référence.

Évitez les liens avec ce type de texte comme, c’est ici, index, sur cette page … Ces mots ne comportent pas d’indications révélatrices de ce que l’on va trouver à l’adresse de référence. Les quelques mots que vous insérerez dans votre texte détermineront d’un degré de concordance, ceci est relativement logique et incite donc à ajouter un texte plutôt du genre : Les moteurs de recherches sont une science, petite phrase qui renvoie vers la page que je désire vous faire visiter.

Code CSS à copier et à coller entre les balises <head></head> :

<style type="text/css">
a.ret:link { color: rgb(0, 0, 155);
text-decoration: none;
background-color: transparent;
font-weight: normal;
font-style: normal;
font-family: Comic Sans MS;
font-size: 15pt;
}
a.ret:visited { color: rgb(0, 0, 255);
text-decoration: none;
background-color: transparent;
font-weight: normal;
font-style: normal;
font-family: Comic Sans MS;
font-size: 15pt;
}
a.ret:hover { color: rgb(255, 0, 0);
text-decoration: none;
background-color: transparent;
font-weight: normal;
font-style: normal;
font-family: Comic Sans MS;
font-size: 12pt;
}
.retour { border-style: ridge;
border-color: rgb(255, 204, 0) rgb(255, 255, 0);
border-width: 6px;
background-repeat: repeat;
background-color: transparent;
background-image: url(http://www.votre-domaine.com/image.gif);
background-position: left top;
}
#gervi { visibility: visible; width: 200px;
height: 100px;
display: block;
}
  </style>
ce qui donne :
 

 
Films Dvd
 

Code HTML à copier et à coller entre les balises <body></body> :

<div id="gervi"> <center>&nbsp;<br /> <a title="Films Dvd" class="ret" href="http://www.films-dvd-lecteur.com/"><span class="retour">Films Dvd</span></a><br /> &nbsp;</center> </div>

Se familiariser avec HTML et CSS

Les CSS, appelée aussi feuille de style et le HTML permettent de faire une mise en page évoluée, avec un peu de goût, les effets peuvent être des plus jolis. La connaissance de HTML, en dehors d’autoriser le positionnement des éléments au sein d’une page web, permet d’optimiser certaines balises chères aux crawleurs (robots qui indexent internet), d’augmenter la pertinence de votre travail et d’avoir toutes les chances de votre côté pour un bon référencement.

La connaissance de HTML va vous permettre, par exemple, d’insérer dans les balises adéquates, des attributs spécifiques à certains éléments de type alt="", title="", target="", etc. Ces attributs sont très prisés par les moteurs de recherches, car ils commentent une image, renseignent pertinemment un lien et ouvrent ce dernier dans une nouvelle fenêtre. Maîtriser HTML ou ne serait-ce que d’avoir quelques connaissances de ce langage n’est pas difficile à condition d’avoir l’ouvrage adapté !

Apprendre et créer des pages HTML avec ce langage se révèle assez aisé malgré ce que certains en disent. Il faut avoir le « goût » de ce que l’on fait et avec l’aide d’un livre vulgarisé plus rien n’est impossible, même pour l’internaute lambda qui s’est contenté de surfer sans jamais envisager d’apprendre cette forme de mise en page évoluée. Cet apprentissage du langage HTML ne requiert pas de grandes capacités mentales, il n’a rien de commun avec des langages de programmations tels que C++, pascal, etc.

La plus grande facilité est offerte à cet apprentissage de HTML/CSS grâce à cette sélection de livre ci-dessous pour bien commencer et ne pas se dégoûter dès les premiers jours ! Avec les livres de la collection « Pour Les Nuls », vous apprendrez la création et l’utilisation des tableaux, ce qu’il est possible de faire et surtout ne pas faire avec la forme tabulaire. Vous étudierez les pièges des META, des frames et comment les déjouer et en tirer avantage.

Vous apprendrez entre autres, à réaliser un bouton Hyper Text sans l’emploi de texte gravé sur une image (les robots ne discernent pas les images et ne peuvent leur attribuer de sens comme nous le faisons), l’emploi de caractères alfa numériques et toujours préférable à l’utilisation d’une image ou de Javascipt.