L’attribut rel (relation) pour un lien en HTML est utilisé pour spécifier la relation entre la page actuelle et la ressource vers laquelle pointe le lien. Il indique au navigateur et à d’autres agents utilisateur le type de lien et le contexte dans lequel la ressource liée est pertinente par rapport à la page actuelle.
Pourquoi utiliser l’attribut rel pour un lien <a> en HTML
Il permet de spécifier le type de lien. Par exemple, un lien peut être défini comme stylesheet pour indiquer qu’il s’agit d’une feuille de style CSS, ou alternate pour spécifier une version alternative de la même ressource.
Certaines valeurs de rel comme nofollow, noreferrer ou noopener sont utilisées pour contrôler le comportement par défaut des liens, tels que l’indication aux moteurs de recherche de ne pas suivre le lien ou l’empêchement du transfert de l’information de référence.
Les valeurs comme prev ou next sont utilisées pour indiquer les relations séquentielles entre les pages, utiles pour les navigateurs web et les moteurs de recherche pour comprendre la structure d’un ensemble de pages liées. Il permet également de fournir des informations supplémentaires : Par exemple, l’attribut tag peut être utilisé pour indiquer que le lien pointe vers une catégorie ou un tag associé à la ressource.
L’utilité de l’attribut rel en SEO
Indication des liens de qualité : Certains attributs rel, comme nofollow, permettent aux propriétaires de sites web de contrôler les liens sortants et d’indiquer aux moteurs de recherche de ne pas suivre ces liens. Cela peut être utilisé pour éviter de transmettre du PageRank à des pages externes de faible qualité.
Structure de la navigation : Les attributs rel comme prev ou next sont utilisés pour indiquer les relations séquentielles entre les pages d’un ensemble, telles que les pages paginées. Cela aide les moteurs de recherche à comprendre la structure et l’organisation des contenus, ce qui peut améliorer l’indexation et la pertinence des résultats de recherche.
Signaler des ressources alternatives : L’utilisation de l’attribut rel pour spécifier des versions alternatives d’une page, comme les versions dans différentes langues, peut contribuer à améliorer la visibilité de ces versions dans les résultats de recherche pertinents pour les utilisateurs de différentes langues ou régions géographiques.
Améliorer l’accessibilité : Certains attributs rel, comme alternate pour les versions alternatives ou stylesheet pour les feuilles de style, peuvent contribuer à améliorer l’accessibilité et l’expérience utilisateur, ce qui peut indirectement avoir un impact positif sur le SEO en augmentant le taux de rétention des utilisateurs et en réduisant le taux de rebond.
Bien que l’attribut rel ne soit pas le seul facteur déterminant du SEO, son utilisation appropriée peut contribuer à améliorer divers aspects de l’optimisation pour les moteurs de recherche et de l’expérience utilisateur, ce qui peut avoir un impact positif sur la visibilité et le classement dans les résultats de recherche.
La liste des attributs rel pour un lien en HTML
L’attribut rel=alternate
<link rel="alternate" hreflang="fr" href="https://www.example.com/page-fr.html">Utilisé pour spécifier une version alternative de la même page, par exemple une version en français d’une page web.
L’attribut rel=author
<link rel="author" href="https://www.example.com/author.html">Indique l’auteur ou les auteurs de la page ou du contenu lié.
L’attribut rel=bookmark
<a href="#section2" rel="bookmark">Aller à la section 2Marque un lien interne dans une page pour permettre aux utilisateurs de créer un signet ou un marque-page vers une section spécifique de la page.
L’attribut rel=external
<a href="https://www.externalsite.com" rel="external">Lien externeIndique qu’il s’agit d’un lien vers une ressource externe à la page actuelle.
L’attribut rel=help
<a href="https://www.example.com/help" rel="help">AideUtilisé pour indiquer un lien vers une page d’aide ou de support.
L’attribut rel=license
<a href="https://creativecommons.org/licenses/by/4.0/" rel="license">Licence Creative CommonsIndique la licence sous laquelle le contenu est distribué.
L’attribut rel=next
<link rel="next" href="https://www.example.com/page2.html">Utilisé pour indiquer la page suivante dans une séquence de pages.
L’attribut rel=nofollow
<a href="https://www.example.com" rel="nofollow">Lien sans suiviIndique aux moteurs de recherche de ne pas suivre le lien et de ne pas transférer le PageRank à la page liée.
L’attribut rel=noreferrer
<a href="https://www.example.com" rel="noreferrer">Lien sans référantIndique aux navigateurs de ne pas envoyer le référant (l’URL de la page actuelle) lorsqu’ils naviguent vers la page liée.
L’attribut rel=noopener
<a href="https://www.example.com" rel="noopener">Lien sans ouverture de nouvelle fenêtreIndique aux navigateurs de ne pas ouvrir la page liée dans une nouvelle fenêtre ou un nouvel onglet avec accès au contexte de l’opener.
L’attribut rel=prev
<link rel="prev" href="https://www.example.com/page1.html">Utilisé pour indiquer la page précédente dans une séquence de pages.
L’attribut rel=search
<link rel="search" href="https://www.example.com/search" title="Recherche sur le site">Indique un lien vers une page de recherche pour la ressource actuelle.
L’attribut rel=tag
<a href="https://www.example.com/tag/tech" rel="tag">TechnologieIndique que le lien pointe vers un tag ou une catégorie associée à la ressource.
L’attribut rel=stylesheet
<link rel="stylesheet" href="styles.css">Indique qu’il s’agit d’une feuille de style CSS pour la page actuelle.
L’attribut rel=alternate stylesheet
<link rel="alternate stylesheet" href="highcontrast.css" title="Contraste élevé">Fournit une alternative à la feuille de style principale, par exemple une version à contraste élevé pour les utilisateurs ayant des besoins spécifiques.
L’attribut rel=prefetch
<link rel="prefetch" href="https://www.example.com/big-image.jpg">Indique au navigateur de précharger la ressource spécifiée pour améliorer les performances de chargement.
