Articles web

Nos articles concernant les techniques web sont centrés sur des solutions pratiques qui mettent en œuvre, le plus souvent, notre framework web : Vae Soli!

Des articles généraux sont également fournis dans le respect des standards du web.

Tous nos articles web sont disponibles sous le couvert de la licence Icône Creative Commons Creative Commons — Paternité - pas de modification.

2012-10-31 à 06:51:00

Les liens et les moteurs de recherche

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.