La balise <link> possède un attribut qui est le plus
souvent ignoré : rel. Un autre attribut, un attribut
miroir dirions-nous, existe également mais il est encore plus ignoré que
ne l'est l'attribut rel. Il s'agit de l'attribut
rev !
Pourtant, l'attribut rel possède une réelle valeur qui peut
influencer favorablement le classement d'une page dans les moteurs de
recherche et également aider ceux-ci à rassembler du contenu qui est, d'une
manière ou d'une autre, lié.
Ainsi, l'écriture d'un didacticiel sur le web est un parfait candidat à
l'utilisation de la balise <link> et à son attribut
rel. La page courante peut dès lors être rattachée à la page
précédente et à la page suivante comme le montre l'exemple qui suit :
<head>
…
<title>Chapitre 5</title>
<link rel="prev" href="/chapitre4.php" />
<link rel="next" href="/chapitre6.php" />
</head>
De cette manière, les moteurs de recherche (et même les navigateurs) peuvent proposer une navigation intelligente améliorant sensiblement le confort de lecture. À cet avantage s'ajoute un ordonnancement des pages permettant de mieux les regrouper.
Revenant à l'exemple du didacticiel, il est intéressant de mentionner à tout moment la première page … ce qui se fera de la manière suivante :
<head>
…
<title>Chapitre 5</title>
<link rel="start" href="/intro.php" />
<link rel="prev" href="/chapitre4.php" />
<link rel="next" href="/chapitre6.php" />
</head>
En fait, l'attribut rel la relation qu'il y a entre la page
courante et une autre page. Vous pouvez ainsi indiquer, à tout endroit de
votre site, quelle est votre page d'accueil :
<head>
…
<title>Chapitre 5</title>
<link rel="start" href="/intro.php" />
<link rel="prev" href="/chapitre4.php" />
<link rel="next" href="/chapitre6.php" />
<link rel="home" href="/index.php" />
</head>
Une autre utilisation très importante de la balise <link>
est de pouvoir offrir des contenus alternatifs au contenu courant. Par
exemple, si une version de la même page est disponible dans une autre
langue, il est souhaitable de le mentionner. À titre d'éclaircissement,
voilà comment indiquer que le didacticiel est aussi disponible en
anglais :
<head>
…
<title>Chapitre 5</title>
<link rel="start" href="/intro.php" type="text/html" />
<link rel="prev" href="/chapitre4.php" type="text/html" />
<link rel="next" href="/chapitre6.php" type="text/html" />
<link rel="home" href="/index.php" type="text/html" />
<link rel="alternate" href="/chapitre6-en.php" hreflang="en" type="text/html" />
</head>
Au passage, notez également que dans l'exemple ci-dessus, nous avons
également indiqué de quel type de document il s'agissait:
type="text/html".
Autre exemple : si le document existe sous une autre forme (un autre medium pour l'illustration), il peut être engageant de le faire savoir. Voyez par exemple comment vous pouvez indiquer que le chapitre 5 d'un didacticiel est disponible en format postscript :
<head>
…
<title>Chapitre 5</title>
<link rel="start" href="/intro.php" type="text/html" />
<link rel="prev" href="/chapitre4.php" type="text/html" />
<link rel="next" href="/chapitre6.php" type="text/html" />
<link rel="home" href="/index.php" type="text/html" />
<link rel="alternate" href="/chapitre6-en.php" hreflang="en" type="text/html" />
<link rel="alternate" href="/chapitre5.ps" type="application/postscript" />
</head>
Toujours dans le cadre d'un contenu alternatif, il est possible de mentionner qu'une page est disponible sous la forme d'un fil (Really Simple Syndication) :
<head>
…
<title>Chapitre 5</title>
<link rel="start" href="/intro.php" type="text/html" />
<link rel="prev" href="/chapitre4.php" type="text/html" />
<link rel="next" href="/chapitre6.php" type="text/html" />
<link rel="home" href="/index.php" type="text/html" />
<link rel="alternate" href="/chapitre6-en.php" hreflang="en" type="text/html" />
<link rel="alternate" href="/chapitre5.ps" type="application/postscript" />
<link rel="alternate" href="/chapitre5.xml" type="application/rss+xml" />
</head>
Enfin, il est également intéressant de mentionner une icône pour vos pages Internet. En ces temps où les navigateurs proposent de nombreux onglets (tabs), cela aide les visiteurs à retrouver directement VOTRE page parmi celles qui sont affichées dans votre browser.
<head>
…
<title>Chapitre 5</title>
<link rel="shortcut icon" href="/favicon.ico" type="image/ico" />
<link rel="start" href="/intro.php" type="text/html" />
<link rel="prev" href="/chapitre4.php" type="text/html" />
<link rel="next" href="/chapitre6.php" type="text/html" />
<link rel="home" href="/index.php" type="text/html" />
<link rel="alternate" href="/chapitre6-en.php" hreflang="en" type="text/html" />
<link rel="alternate" href="/chapitre5.ps" type="application/postscript" />
<link rel="alternate" href="/chapitre5.xml" type="application/rss+xml" />
</head>
Revenons quelques instants au fameux attribut rev. Cet attribut
décrit la relation inverse, c'est{-}à{-}}}dire comment l'autre ressource voit la
présente page. Par exemple, si la page que l'on mentionne est la page
d'accueil du site, alors on peut indiquer que la page courante est une
page "enfant". Voyez comment nous avons encore amélioré les indications
de relation entre les pages :
<head>
…
<title>Chapitre 5</title>
<link rel="shortcut icon" href="/favicon.ico" type="image/ico" />
<link rel="start" rev="child" href="/intro.php" type="text/html" />
<link rel="prev" rev="sibling" href="/chapitre4.php" type="text/html" />
<link rel="next" rev="sibling" href="/chapitre6.php" type="text/html" />
<link rel="home" rev="child" href="/index.php" type="text/html" />
<link rel="alternate" href="/chapitre6-en.php" hreflang="en" type="text/html" />
<link rel="alternate" href="/chapitre5.ps" type="application/postscript" />
<link rel="alternate" href="/chapitre5.xml" type="application/rss+xml" />
</head>
Enfin, toujours avec l'attribut rev, il est possible de
mentionner la personne qui a réalisé le document :
<head>
…
<title>Chapitre 5</title>
<link rel="shortcut icon" href="/favicon.ico" type="image/ico" />
<link rel="start" rev="child" href="/intro.php" type="text/html" />
<link rel="prev" rev="sibling" href="/chapitre4.php" type="text/html" />
<link rel="next" rev="sibling" href="/chapitre6.php" type="text/html" />
<link rel="home" rev="child" href="/index.php" type="text/html" />
<link rev="made" href="mailto:prenom.nom@domaine" title="Prénom Nom" />
<link rel="alternate" href="/chapitre6-en.php" hreflang="en" type="text/html" />
<link rel="alternate" href="/chapitre5.ps" type="application/postscript" />
<link rel="alternate" href="/chapitre5.xml" type="application/rss+xml" />
</head>
Voilà donc comment mieux lier vos pages web et leur donner plus de poids dans les moteurs de recherche. C'est un des éléments que Lato Sensu Management mettra en {{œ}}uvre prochainement sur son propre site (notamment en éditant une série de petits articles concernant l'utilisation des couleurs sur un site web ou encore sur la bonne manière de créer un layout de site sur base de divisions … tous articles à venir). Ce sont toutes des possibilités offertes par le framework Vae Soli!, possibilités auxquelles nous vous rendrons sensibles au cours des mois prochains.