Bonnes pratiques de SEO ('white hat techniques')


précédentsommairesuivant

II. Rédigez correctement votre code HTML

II-A. Première approche

Introduction

J'ai toujours détesté les livres emplis de fautes d'orthographe. Je n'étais pas encore au collège que j'y corrigeais les erreurs de français. Cela m'a toujours agacé, au point parfois de me faire abandonner ma lecture.

D'autre part, il existe les écrits expérimentaux : un poème écrit sans ponctuation (Guillaume Apollinaire, Le Pont Mirabeau, Alcools, 1913), un roman ne contenant pas une seule fois la lettre "e" (Georges Perec, La disparition, 1969), etc. Ces méthodes d'écriture ne sont pas destinées à être reproduites au quotidien. Elles sont rares. (1)
Corollaire : la grammaire française est régie par des règles auxquelles nous sommes habitués. Il est généralement déroutant de se trouver face à une situation qui ne les respecte pas. (2)

Suivant le même principe, le code HTML d'une page Web doit être propre. Un code empli d'erreurs est signe que le webmestre s'occupe peu des détails. Je ne sais pas dans quelle mesure Google vérifie le code d'une page (je ne sais d'ailleurs pas s'ils le font) mais je sais qu'ils utilisent des bots. Pour avoir moi-même écrit des bots à plusieurs reprises, je sais à quel point il est frustrant de devoir pallier les erreurs ou les différences de conventions. Prenez par exemple un simple lien HTML <a href=""></a> : les guillemets peuvent être remplacés par des apostrophes ou bien être omis. Selon le navigateur que vous utilisez, il est probable qu'utiliser un guillemet et une apostrophe dans la même balise puisse également donner un résultat satisfaisant. Cette souplesse contribue à la facilité de créer des pages Web mais également à la complexité de certaines tâches : un crawler devra gérer toutes les situations...

De même que vous écrivez du code syntaxiquement correct, prenez garde à sa sémantique. Oui, le code HTML a une sémantique : essayez d'utiliser les balises HTML à bon escient. Par exemple, lorsque vous utilisez la balise <table>, le bot s'attendra à trouver des données à l'intérieur, par opposition à "des paragraphes de texte". Si vous souhaitez simplement diviser votre page, la balise adéquate est <div>.

La structure du document HTML reflète l'organisation de son contenu. C'est bête à dire mais c'est pourtant peu respecté.

Tout au long de ce cours, j'utiliserai des noms de classes, fichiers etc. répondant à une certaine syntaxe. C'est l'objet d'un autre tutoriel, je me bornerai ici à le résumer : en anglais, en minuscules et uniquement des lettres et le trait d'union.

Exemple

En bref, il est recommandé de suivre les standards du Web. N'utilisez pas des balises contre leur nature. J'ai vu des gens chercher à faire défiler du texte coloré dans une balise input type="text" : c'est possible mais est-ce souhaitable ? La balise input est exclusivement réservée à une information provenant de l'utilisateur. N'essayez pas de l'utiliser pour produire des effets visuels... Votre site favori devrait être w3.org.

Voici deux exemples utilisant chacun une expression régulière afin d'extraire les liens d'une page Web. Le premier exemple permet de récupérer les liens correctement formés (ne disposant d'aucune option), tandis que le second tente de récupérer les liens (ne disposant d'aucune option), qu'ils soient bien ou mal formés.

Récupérer des liens simples
Sélectionnez
<?php

$regex = '#<a href="([^"]*)">(.*)</a>#Usi';
$html = file_get_contents('http://g-rossolini.developpez.com/');

if(preg_match_all($regex, $html, $matches, PREG_SET_ORDER)){
    echo '<pre>';
    print_r($matches);
    echo '</pre>';
}

?>
Récupérer des liens mal écrits
Sélectionnez
<?php

$regex = '#<a href=["\']?([^>]*)["\']?>(.*)</a>#Usi';
$html = file_get_contents('http://g-rossolini.developpez.com/');

if(preg_match_all($regex, $html, $matches, PREG_SET_ORDER)){
    echo '<pre>';
    print_r($matches);
    echo '</pre>';
}

?>

L'expression régulière est visiblement plus complexe pour le second exemple.

Ce deuxième exemple est incomplet. Pour extraire correctement les informations de liens mal écrits, je ne vois pas de solution réellement exploitable. Il faudrait peut-être extraire le lien entier, puis le parcourir caractère par caractère en essayant de déterminer le début et la fin de chaque paramètre. J'imagine qu'il suffirait de regarder le code source d'un navigateur Web pour obtenir une solution fiable, mais ce n'est pas notre objectif ici.

Je pense que mon premier but est atteint : je viens de démontrer que cela devient rapidement un casse-tête si le code HTML n'est pas correct. C'est pour cette raison que les moteurs de recherche préfèrent les sites au code propre.

II-B. Les liens : <a>

Première approche

Dans la mesure où ils sont le fondement des algorithmes de référencement, les liens (ancres HTML) ont besoin d'une mention particulière.

Une balise de lien est composée de plusieurs attributs. Le plus courant est href, puisqu'il permet de donner une destination au lien. Dans mes exemples précédents, c'est le seul attribut présent.

Dans une situation réelle, l'attribut title joue un rôle important lors du référencement : il permet au navigateur d'afficher une infobulle d'information. C'est très utile pour associer des mots clefs à un lien dont le texte d'ancrage n'a rien à voir. Par exemple, le texte d'ancrage "cliquez ici" n'a aucun sens pour le moteur de recherche : il ne sait pas quels mots clefs associer au lien.

Un lien correctement formé est donc constitué principalement d'une URI (propriété href) ne contenant pas de caractères exotiques et, à défaut d'un texte d'ancrage significatif, d'un titre (propriété title) permettant de le mettre en relation avec des mots clefs.

Un lien doit toujours être associé à des mots clefs (soit par son texte d'ancrage soit par son titre) lorsqu'il a une URI de destination.

Il est possible d'introduire des mots clefs dans l'URI de destination afin de préciser davantage au moteur de recherche ce qu'il trouvera dans le document cible. C'est fondamental car cela permet éventuellement au moteur de recherche d'orienter son analyse sémantique autour du champ sémantique de ces mots clefs.

Ici, il est bon de préciser qu'un moteur de recherche effectue une analyse sémantique des documents qu'il indexe.

Cette analyse permet plusieurs choses :
  • Deviner le champ sémantique de la page afin de déterminer les mots clefs les plus appropriés ;
  • Savoir si la page en question traite d'un thème fixe ou bien si les thèmes sont variés ;
  • Repérer les pages ayant du contenu similaire et celles ayant du contenu dupliqué ;
  • etc.



Pour continuer sur les liens, je vous propose quelques exemples permettant de résumer les options qui nous sont offertes.

Lien avec un ancrage qui n'est pas utilisé comme mot clef : la propriété 'title' est fortement recommandée
Sélectionnez
<a href="http://g-rossolini.developpez.com/tutoriels/php/expressions-regulieres/"
    title="Tutoriel sur les expressions régulières"
    >Voici</a>
    un tutoriel sur les expressions régulières.
Lien avec un ancrage utilisé comme mot clef : la propriété 'title' est facultative
Sélectionnez
Voici un <a href="http://g-rossolini.developpez.com/tutoriels/php/expressions-regulieres/"
    >tutoriel sur les expressions régulières</a>.
Autre lien avec un ancrage utilisé comme mot clef : la propriété 'title' est utile
Sélectionnez
Voici un <a href="http://g-rossolini.developpez.com/tutoriels/php/expressions-regulieres/"
    title="Cours sur les expressions rationnelles"
    >tutoriel sur les expressions régulières</a>.


Dans le dernier cas, je crains que la répétition de mots clefs (identiques) ne soit néfaste. En effet, certains d'entre eux sont situés à trois endroits : dans les propriétés href et title ainsi que dans le texte d'ancrage. Il est possible que cela soit vu comme du martellement de mots clefs, c'est-à-dire une lourde insistance de la part du webmestre. Dans la mesure du possible, il faut essayer d'éviter cette situation car il n'est pas improbable que les moteurs de recherche pénalisent le classement de la page.

Cependant, la propriété title permet d'insérer quelques synonymes dans certaines situations, il ne faut donc pas la négliger.

Les liens dynamiques

Dans le cas des sites Web dynamiques, nous sommes fréquemment confrontés à des paramètres GET.

Exemple d'URI avec un paramètre
Sélectionnez
http://g-rossolini.developpez.com/tutoriels/php/expressions-regulieres/test.php?regex=2


Ces adresses sont un problème car le numéro "2" de cet exemple ne nous indique pas ce que nous donnera la page de destination. Fort heureusement, le nom du script et le paramètre GET portent chacun un nom explicite : nous pouvons ici raisonnablement deviner qu'il s'agit d'un test de l'expression régulière numéro 2 et que ce test s'inscrit dans le cadre d'un tutoriel en PHP dont je suis l'auteur.

Tout ceci a de l'importance pour Google.

Prenons un contre exemple : phpBB. C'est une application Web écrite en PHP et permettant de gérer un système de discussion entre utilisateurs. C'est système de forum parmi d'autres.

Cette application Web comprend un script nommé "viewtopic.php" qui accepte divers paramètres GET, parmi lesquels "t" et "p". Il est évident que ces noms ne signifient rien pour quelqu'un qui n'a pas étudié le fonctionnement de l'application, ce qui n'est assurément pas le cas de Google. Ici, "p" signifie "post" (message) et "t" se rapporte à "topic" (sujet). Il n'est pas certain qu'un bot soit en mesure de deviner le contexte sémantique englobant ces deux lettres isolées, alors que c'était plus simple pour mon exemple sur les expressions régulières. Je ne me permettrai pas non plus d'affirmer que Google est en mesure de savoir que "viewtopic" est un condensé de deux mots distincts dont le plus important est "topic". Il aurait été préférable d'appeler le script d'une autre manière, par exemple "view-topic.php". En revanche, le paramètre "mode" peut prendre la valeur "edit", ce qu'un bot intelligent pourrait éventuellement interpréter comme : "c'est une page d'édition, donc a priori de moindre intérêt".

Il faut donc prendre garde à tous les éléments :
  • Le nom du script situe le contexte ;
  • Le nom d'un paramètre et sa valeur précisent le contexte.

Bien sûr, l'idéal pour un bot est de ne pas se compliquer la vie avec tous ces détails. Une URI sans paramètres est bien plus simple à gérer.

De plus, la présence d'un paramètre signifie que la page a potentiellement une quantité infinie de versions différentes. Un bot est comme vous et moi : ses capacités d'emmagasiner les informations sont limitées !

Enfin, l'ordre des paramètres dans l'URI ne change absolument pas le comportement du serveur. Les chaînes viewtopic.php?p=1234&mode=edit et viewtopic.php?mode=edit&p=1234 sont différentes mais le serveur Web les traitera exactement de la même manière. Cependant, le bot devra effectuer un traitement supplémentaire pour ne pas traiter deux fois cette page s'il rencontre les deux URIs.

Tout cela suggère qu'il est préférable que le bot d'un moteur de recherche ne se rende pas compte qu'il est en train d'examiner une page dynamique. C'est ici qu'entre en jeu la technique de réécriture de liens décrite une dans l'un de mes cours (cf. les liens à la fin de ce tutoriel).

II-C. Les images : <img/>

Les images sont des éléments graphiques, visuels. Oui, c'est une évidence. Eh bien non, en réalité, ce n'en est pas une !

Les images ne sont pas intégrées au code source de la page HTML. Elles ne s'y trouvent que sous forme de balises HTML, rien de plus. Le bot n'est pas en mesure de les lire, de les analyser, d'en extraire le champ sémantique et de le comparer à celui du reste de la page. Pourtant, ce sont parfois des éléments fondamentaux de la page car ils permettent d'améliorer la lisibilité d'un long texte et d'expliquer simplement un concept complexe.

C'est pour cette raison qu'il ne faut pas négliger les images. Leurs balises permettent d'introduire des mots clefs que le bot ne manquera pas d'interpréter comme des mots particulièrement importants dans le contexte de la page. Il s'agit du contenu de la propriété alt, qui signifie "texte alternatif". À l'origine, cette propriété était uniquement destinée à proposer un élément visuel au cas où l'image ne serait pas disponible, afin de ne pas laisser le lecteur sur sa faim. Aujourd'hui, elle permet d'associer des mots clefs à une image ainsi que de renforcer le champ sémantique d'une page.

Exemple d'image avec un texte alternatif :
Sélectionnez
<img src="http://www.developpez.net/forums/images/logo16.gif" alt="Forums de Developpez.com">

Hors sujet : n'utilisez pas la propriété border de vos images pour en supprimer la bordure lorsqu'elles se trouvent dans des liens ! Cela n'est pas le travail du HTML (structure du document) mais plutôt de votre CSS (présentation des éléments de votre document).

Comment s'y prendre dans une CSS :
Sélectionnez
img
{
    border: 0px;
}

II-D. Les tableaux : <table>

Beaucoup de webmestres ont tendance à utiliser l'élément <table> dans tout leur design. C'est une erreur ! En effet, la sémantique est incorrecte et, de plus, cet élément impose une structure visuelle, ce qui n'est pas l'objectif d'un document HTML mais de la feuille de style qui lui est appliquée (CSS). L'élément <table> est prévu pour présenter des données brutes telles qu'une liste de produits (par exemple "désignation + prix + quantité en stock"), non pour structurer toute une page Web.

À titre d'exemple, voici une utilisation tout à fait honorable d'un tableau : ma liste de courses d'hier...

Quantité Désignation Coût
1 1 Mostassa Ant. 2,05
2 1 Tony Tom Q.P-3 1,20
3 2 S. Dindi/Poll. 3,20
4 2 Barrete. Patat. 1,20

II-E. Les divisions : <div>

Il n'est pas conseillé d'utiliser l'élément <table> pour structurer une page Web car il existe une meilleure solution.

Prenons comme exemple un texte composé de chapitres et de paragraphes. Une page simple permettant de mettre cela sur Internet est comme suit :

Page HTML mal structurée
Sélectionnez
<font size="3">Titre du texte</font><br /><br />
<font size="2">Chapitre 1</font><br />
Paragrape 1.1<br /><br />
Paragrape 1.2<br /><br />
Paragrape 1.3<br /><br /><br />
<font size="2">Chapitre 2</font>
Paragrape 2.1<br /><br />
Paragrape 2.2


Bien sûr, ce HTML est complètement inefficace pour le référencement puisqu'aucune information de structure n'est fournie au bot, il ne peut donc trouver aucune sémantique. Ainsi, il nous faut diviser notre page en sections.

Je viens de vous donner le mot important : une division, à savoir l'élément <div> de votre code HTML.

Page HTML correctement structurée
Sélectionnez
<div>
    <h1>Titre du texte</h1>
</div>
<div>
    <div>
        <h2>Chapitre 1</h2>
        <p>Paragraphe 1.1</p>
        <p>Paragraphe 1.2</p>
    </div>
    <div>
        <h2>Chapitre 2</h2>
        <p>Paragraphe 2.1</p>
        <p>Paragraphe 2.2</p>
        <p>Paragraphe 2.3</p>
    </div>
</div>


Dans l'exemple ci-dessus, la structure du document est parfaitement explicite. Nous avons utilisé une division pour le titre puis une autre division pour le reste du texte. Ce texte est lui-même structuré en deux divisions, chacune composée d'un titre et de paragraphes. Il est possible de segmenter encore davantage, c'est selon le goût de chacun.

De plus, une organisation comme celle-ci facilite l'utilisation d'une CSS.

II-F. Les listes : <ul>

La liste à puces est un élément important de la page Web car elle permet d'identifier très rapidement ce qui constitue, devinez quoi, une liste d'éléments...

Elle peut être utilisée en tant que telle comme je l'ai fait à plusieurs reprises dans ce cours ou bien en combinaison avec une feuille de style pour construire un sommaire. Le plus important ici est d'avoir un document HTML correctement structuré.

Une technique très utile dans certaines situations est de construire une liste tout en cachant les puces au moyen d'une CSS. Cela vous donne un contrôle total sur l'apparence de votre liste, tout en conservant la sémantique du document. Cela vous permet d'utiliser des éléments graphiques sans que les anciens navigateurs (qui n'affichent pas ces éléments) soient trop lésés.

Ses avantages :
  • Cohérence du code source HTML ;
  • Permet aux navigateurs non graphiques de savoir qu'il s'agit d'une liste ;
  • Permet aussi aux internautes de savoir qu'il s'agit d'une liste ;
  • Possibilité de personnaliser l'apparence de la puce à l'aide de la CSS.
Exemple de liste dont on ne souhaite pas afficher les puces :
Sélectionnez
<ul style="list-style: none;">
    <li>Pseudo</li>
    <li>E-mail</li>
    <li>Site Web</li>
</ul>

II-G. Les formulaires : <form>

Grande est la tentation de gérer toutes les actions de l'utilisateur au moyen des liens (ancres HTML). Toutefois, cela risque de vous poser des problèmes...

La documentation officielle explique très clairement qu'une action de l'utilisateur doit être effectuée en mode POST exclusivement, tandis que le mode GET sert exclusivement à récupérer des informations pour l'utilisateur. Cela signifie que les liens ne peuvent servir qu'à récupérer des informations, pas à effectuer des actions. Pour cela, il faut utiliser un formulaire.

Si vous ne suivez pas cette norme, vous vous exposez à ce qu'un plugin du navigateur utilise la session de l'internaute pour suivre tous les liens du site. Bien sûr, puisque la session est utilisée, le plugin a accès à tous les liens qui ne sont affichés que dans la VIP de votre site et que vous ne destinez pas aux bots habituels. Je ne fais ici que relater une aventure qui est arrivée à des gens très connus (cf. les liens externes en fin d'article).

II-H. De manière générale

Structurez vos documents.

Utilisez les outils fournis par le HTML, ne négligez pas les balises. Donnez un titre à vos documents à l'aide de la balise <title> (de 60 à 80 caractères) et reformulez-le ou répétez-le dans votre balise <h1> (en vous permettant éventuellement une phrase plus longue).

Utilisez la sémantique du HTML :
  • em (emphasis) : Attire l'attention sur un mot, ce qui se traduit habituellement par de l'italique ;
  • strong : Indique un mot important (plus fort qu'em), ce qui se traduit habituellement par une mise en gras ;
  • cite : Une citation ou une référence à d'autres sources d'information ;
  • q (quote) : Dans le cas d'une citation, <cite> englobe l'auteur et <q> la citation elle-même ;
  • blockquote : Une grande citation ;
  • dfn (definition) : Le mot est défini à cet endroit de la page ;
  • code : Code source, habituellement représenté par le navigateur à l'aide d'une fonte à chasse fixe ;
  • samp (sample) : Exemple de résultat d'exécution de code source ;
  • var : Une variable ;
  • abbr : Une abréviation ;
  • acronym : Un acronyme.

Certains de ces éléments (comme <em> et <strong>) sont traduits visuellement dans certains navigateurs. Vous pouvez utiliser une feuille de style pour contrôler leur apparence.

Dans le cas d'<abbr> et <acronym>, il est possible de préciser deux attributs : "lang" et "title". Ils permettent de donner l'expression dans sa forme complète et d'en indiquer la langue.

Apprenez à faire la différence entre certaines balises courtes comme d'une part <b> et <i> et d'autre part leurs équivalents <strong> et <em>. Les premiers sont des ordres donnés au navigateur : "je veux ça en gras (bold) et ça en italique" ; les autres sont des informations sémantiques : "ce mot est fort (strong), celui-ci est simplement à mettre en valeur (emphasis)".

Certains éléments donnent l'impression de pouvoir être remplacés par des feuilles de style : nous reviendrons plus loin sur la distinction qu'il faut faire.

N'oubliez pas d'inclure un "microsummary" (un titre alternatif et dynamique) dans chacune de vos pages. Le titre de votre page ne devrait pas être modifié par vos mises à jour, tandis que celui-ci doit l'être : cela informe les internautes de vos mises à jour. Les micro sommaires feront l'objet d'articles séparés : en attendant, vous trouverez tous les liens utiles en fin d'article. Firefox 2 permet d'utiliser les micro sommaires comme titre de ses bookmarks.


précédentsommairesuivant
L'absence de la lettre "e" n'est pas la seule contrainte imposée par Georges Perec pour son roman lipogrammatique. Les critiques sont d'avis que c'est l'ensemble de ces contraintes qui font la véritable prouesse.
Raymond Queneau a participé à la fondation d'un mouvement littéraire du nom d'Oulipo ("ouvroir de littérature populaire", dont était membre Georges Perec). Ce mouvement a pour objectifs de développer des techniques d'écriture alternative et de rechercher les auteurs ayant utilisé ces techniques avant la création officielle du mouvement. Peut-être connaissez-vous l'écriture automatique ou le cadavre exquis ? Loin d'être expert en la matière, j'ai lu Les Fleurs Bleues sans me rendre compte un seul instant du fait que la structure repose entièrement sur les mathématiques. Comme quoi, il est * parfois * intéressant de sortir des cadres pré établis...

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Copyright © 2006 Guillaume Rossolini. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.