HTML : corriger les valeurs rel non reconnues par le validateur W3C

Sur votre site ou blog, vous avez peut-être ajouté un lien vers un profil social, une page d’auteur, une page de vérification ou un service externe.

Le problème, c’est que certains services demandent parfois d’ajouter une valeur particulière dans l’attribut rel. Or toutes les valeurs ne sont pas forcément reconnues par le validateur HTML.

Vous pouvez alors obtenir une erreur de ce type dans le validateur W3C :

Keyword publisher is not registered

Ou, selon le cas :

The string publisher is not a registered keyword or absolute URL.

Cette erreur signifie que la valeur utilisée dans rel n’est pas reconnue comme un type de lien HTML valide ou comme une extension enregistrée.

Ancien exemple : Google+ et rel=”publisher”

À l’époque, Google+ proposait d’ajouter un lien de ce type vers une page éditeur :

<a
  title="Google+"
  href="https://plus.google.com/114535411372700844744"
  rel="publisher nofollow"
>Google+</a>Code language: HTML, XML (xml)

Le validateur HTML pouvait alors renvoyer :

Keyword publisher is not registered

Google+ n’existe plus, et rel="publisher" n’a plus d’intérêt pratique pour un site moderne. Il vaut donc mieux remplacer cet exemple par un cas actuel : les liens de vérification de profil, notamment avec Mastodon.

Exemple moderne : vérifier un profil Mastodon avec rel=”me”

Un cas actuel et utile consiste à ajouter un lien vers son profil Mastodon avec rel="me". Ce lien permet à Mastodon de vérifier que le profil social et le site web appartiennent à la même personne ou organisation.

Exemple valide :

<a
  href="https://mastodon.social/@example"
  rel="me noopener"
>Me suivre sur Mastodon</a>Code language: HTML, XML (xml)

La documentation Mastodon indique que la vérification de profil repose sur un lien retour depuis votre site contenant rel="me". Le lien peut se trouver sur votre site, puis être ajouté dans les champs de profil Mastodon. Documentation Mastodon : profile verification

Ici, me est une valeur reconnue. Elle ne provoque donc pas l’erreur keyword is not registered.

Pourquoi certaines valeurs de rel déclenchent une erreur

L’attribut rel décrit la relation entre la page courante et la ressource liée.

Par exemple :

<a href="https://example.com" rel="nofollow">Lien externe</a>Code language: HTML, XML (xml)

indique au navigateur, aux moteurs ou aux outils d’analyse que le lien existe, mais qu’il est annoté avec la relation nofollow.

MDN définit rel comme l’attribut qui indique la relation entre une ressource liée et le document courant. Il est valide sur les éléments link, a, area et form, mais les valeurs acceptées dépendent de l’élément utilisé. MDN : rel attribute

Le validateur se plaint lorsque vous utilisez une valeur non reconnue, par exemple :

<a href="https://example.com" rel="publisher">Exemple</a>Code language: HTML, XML (xml)

Si publisher n’est pas reconnu comme valeur autorisée pour cet élément, le validateur retourne une erreur.

Valeurs courantes de rel encore utiles

Voici quelques valeurs modernes et courantes :

  • nofollow : indique que le lien ne doit pas transmettre de signal classique de recommandation ;
  • sponsored : identifie un lien publicitaire, sponsorisé ou affilié ;
  • ugc : indique un lien généré par les utilisateurs ;
  • noopener : empêche la page ouverte d’accéder à window.opener ;
  • noreferrer : empêche l’envoi du référent ;
  • me : indique qu’un lien représente la même personne ou entité ;
  • author : pointe vers l’auteur du contenu ;
  • canonical : indique l’URL canonique, généralement dans un élément <link> ;
  • alternate : indique une version alternative du document, par exemple flux RSS ou langue différente.

Google documente notamment nofollow, sponsored et ugc comme moyens de qualifier les liens sortants. Google Search Central : qualifier les liens sortants

Distingo, le livret à 2%

Cas typique : remplacer une valeur non reconnue par un paramètre d’URL

Dans l’ancien exemple Google+, l’idée consistait à retirer publisher de l’attribut rel, puis à déplacer l’information dans l’URL.

Ancien code non valide :

<a
  href="https://plus.google.com/114535411372700844744"
  rel="publisher nofollow"
>Google+</a>Code language: HTML, XML (xml)

Ancienne correction :

<a
  href="https://plus.google.com/114535411372700844744?rel=publisher"
  rel="nofollow"
>Google+</a>Code language: HTML, XML (xml)

Cette logique reste valable dans certains cas : si un service externe demande une information qui n’est pas une valeur rel valide, il faut parfois la passer en paramètre d’URL, en attribut data-*, ou via le code fourni officiellement par le service.

Mais pour Mastodon, ce n’est pas nécessaire, car rel="me" est une vraie relation de lien reconnue et utile.

Exemple valide avec Mastodon et nofollow

Si vous voulez vérifier votre profil Mastodon tout en ajoutant une annotation SEO, vous pouvez combiner plusieurs valeurs dans rel :

<a
  href="https://mastodon.social/@example"
  rel="me nofollow noopener"
  target="_blank"
>Me suivre sur Mastodon</a>Code language: HTML, XML (xml)

Les valeurs de rel sont séparées par des espaces. L’ordre n’a généralement pas d’importance :

rel="me nofollow noopener"Code language: JavaScript (javascript)

Le standard HTML précise justement que la valeur de rel est un ensemble non ordonné de tokens uniques séparés par des espaces.

Attention aux valeurs inventées

Le validateur W3C n’aime pas les valeurs inventées dans rel.

Par exemple, évitez ceci :

<a href="https://example.com" rel="profilelink">Profil</a>
<a href="https://example.com" rel="external-link">Lien externe</a>
<a href="https://example.com" rel="publisher">Éditeur</a>Code language: HTML, XML (xml)

Si vous avez besoin d’une information interne pour votre JavaScript ou votre CSS, utilisez plutôt une classe ou un attribut data-*.

Exemple :

<a
  href="https://example.com"
  class="profile-link"
  data-profile-type="publisher"
>Profil</a>Code language: HTML, XML (xml)

Là, le HTML reste valide, et vous conservez votre information personnalisée sans polluer rel.

Cas WordPress : rel=”category tag”

Historiquement, WordPress a aussi utilisé des valeurs comme rel="category tag" sur les liens de catégories ou d’étiquettes. Certains validateurs ont pu signaler category comme valeur non enregistrée selon le contexte ou la version du validateur.

Si vous rencontrez ce type d’erreur dans un thème WordPress ancien, la bonne solution consiste à vérifier le template ou le filtre qui génère ces liens, plutôt qu’à modifier manuellement le HTML final.

Exemple de filtre WordPress pour nettoyer une valeur indésirable dans le HTML des liens de catégories :

<?php
/**
 * Remove obsolete rel values from category links.
 *
 * @param string $html Category link HTML.
 * @return string Filtered category link HTML.
 */
function sky_remove_category_rel_value( string $html ): string {
	return str_replace( ' rel="category tag"', '', $html );
}
add_filter( 'the_category', 'sky_remove_category_rel_value' );Code language: HTML, XML (xml)

À adapter selon le HTML exact généré par votre thème. Comme toujours avec WordPress, mieux vaut filtrer proprement que bricoler le rendu dans la base de données.

Cas liens affiliés et sponsorisés

Pour les liens affiliés ou sponsorisés, n’utilisez pas une valeur maison comme rel="affiliate" si vous voulez un HTML propre.

Utilisez plutôt :

<a
  href="https://example.com"
  rel="sponsored noopener noreferrer"
  target="_blank"
>Lien sponsorisé</a>Code language: HTML, XML (xml)

Ou, si vous voulez aussi éviter que le lien soit interprété comme une recommandation classique :

<a
  href="https://example.com"
  rel="sponsored nofollow noopener noreferrer"
  target="_blank"
>Lien affilié</a>Code language: HTML, XML (xml)

C’est plus clair, plus standard, et mieux compris par les moteurs modernes. Google précise que sponsored est destiné aux liens publicitaires, sponsorisés ou rémunérés. Google Search Central : liens sponsorisés

Tester avec le validateur W3C

Après correction, vous pouvez relancer une validation HTML avec le validateur W3C :

https://validator.w3.org/

Si l’erreur disparaît, c’est que la valeur non reconnue a bien été retirée ou remplacée par une valeur valide.

Si l’erreur reste présente, inspectez le HTML généré dans le navigateur. Sur un CMS comme WordPress, le code peut venir d’un thème, d’un plugin, d’un bloc, d’un widget ou d’un shortcode. Le coupable porte rarement un badge “c’est moi”, hélas.

Mémo rapide

<!-- Ancien exemple Google+ obsolète. -->
<a
  href="https://plus.google.com/114535411372700844744"
  rel="publisher nofollow"
>Google+</a>

<!-- Exemple moderne valide avec Mastodon. -->
<a
  href="https://mastodon.social/@example"
  rel="me noopener"
>Me suivre sur Mastodon</a>

<!-- Lien externe dans un nouvel onglet. -->
<a
  href="https://example.com"
  target="_blank"
  rel="noopener noreferrer"
>Lien externe</a>

<!-- Lien sponsorisé ou affilié. -->
<a
  href="https://example.com"
  target="_blank"
  rel="sponsored noopener noreferrer"
>Lien sponsorisé</a>

<!-- Éviter les valeurs inventées dans rel. -->
<a
  href="https://example.com"
  class="profile-link"
  data-profile-type="publisher"
>Profil</a>Code language: HTML, XML (xml)

Conclusion

L’erreur keyword publisher is not registered apparaît lorsque le validateur HTML rencontre une valeur non reconnue dans l’attribut rel.

L’ancien exemple Google+ avec rel="publisher" n’a plus vraiment d’intérêt aujourd’hui, puisque Google+ n’existe plus. Pour un exemple moderne, on peut utiliser Mastodon avec :

rel="me"Code language: JavaScript (javascript)

Si une valeur n’est pas reconnue, ne l’inventez pas dans rel. Utilisez une valeur standard, un paramètre d’URL, une classe CSS, ou un attribut data-* selon le besoin.

En résumé : rel sert à décrire une relation de lien connue. Ce n’est pas un tiroir à chaussettes sémantique. Le validateur W3C n’a pas tort de râler quand on y range n’importe quoi.

Gravatar for Matt Biscay

Je suis Matt Biscay, développeur WordPress & WooCommerce certifié chez Codeable, administrateur système et enseignant.

J’aide les entreprises à créer, optimiser et fiabiliser leurs sites WordPress avec une approche technique propre : performance, sécurité, maintenance, développement sur mesure et résolution de problèmes complexes.

Sur Skyminds, je partage des tutoriels WordPress, WooCommerce, Linux et administration système, avec des solutions testées sur des cas réels et pensées pour durer.

Découvrez mes services WordPress et WooCommerce.

Opinions