Bonnes pratiques de SEO ('white hat techniques')

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é.

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.

<?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>';
}

?>

<?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.

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.

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.

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.

<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.

Voici un <a href="http://g-rossolini.developpez.com/tutoriels/php/expressions-regulieres/"
    >tutoriel sur les expressions régulières</a>.

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 martèlement 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.

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

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 URI.

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).